diff options
128 files changed, 0 insertions, 16749 deletions
diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 9485e70753..bc88655535 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -21,7 +21,6 @@ /pt-BR/docs/Aprender/CSS/Introduction_to_CSS/como_CSS_funciona /en-US/docs/Learn/CSS/First_steps/How_CSS_works /pt-BR/docs/Aprender/CSS/Introduction_to_CSS/sintaxe /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /pt-BR/docs/Aprender/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks -/pt-BR/docs/Aprender/Como_contribuir /pt-BR/docs/orphaned/Learn/How_to_contribute /pt-BR/docs/Aprender/Design_e_acessibilidade /pt-BR/docs/Learn/Common_questions /pt-BR/docs/Aprender/Ferramentas_e_teste /pt-BR/docs/Learn/Tools_and_testing /pt-BR/docs/Aprender/Front-end_web_developer /pt-BR/docs/Learn/Front-end_web_developer @@ -82,31 +81,24 @@ /pt-BR/docs/CSS/At-rule /pt-BR/docs/Web/CSS/At-rule /pt-BR/docs/CSS/CSS_Reference /pt-BR/docs/Web/CSS/Reference /pt-BR/docs/CSS/Especificação /pt-BR/docs/Web/CSS/Specificity -/pt-BR/docs/CSS/Getting_Started /pt-BR/docs/conflicting/Learn/CSS/First_steps /pt-BR/docs/CSS/Getting_Started/JavaScript /pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /pt-BR/docs/CSS/Multiple_backgrounds /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -/pt-BR/docs/CSS/Primeiros_Passos /pt-BR/docs/conflicting/Learn/CSS/First_steps /pt-BR/docs/CSS/Specificity /pt-BR/docs/Web/CSS/Specificity /pt-BR/docs/CSS/Usando_animacoes_CSS /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations -/pt-BR/docs/CSS/Usando_caixas_flexiveis_css /pt-BR/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox /pt-BR/docs/CSS/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations /pt-BR/docs/CSS/Using_CSS_transforms /pt-BR/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms /pt-BR/docs/CSS/display /pt-BR/docs/Web/CSS/display /pt-BR/docs/CSS/overflow /pt-BR/docs/Web/CSS/overflow /pt-BR/docs/CSS/regra at /pt-BR/docs/Web/CSS/At-rule -/pt-BR/docs/CSS/repeating-linear-gradient /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() /pt-BR/docs/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax /pt-BR/docs/CSS/text-overflow /pt-BR/docs/Web/CSS/text-overflow /pt-BR/docs/CSS/text-rendering /pt-BR/docs/Web/CSS/text-rendering /pt-BR/docs/CSS/transform /pt-BR/docs/Web/CSS/transform /pt-BR/docs/CSS/word-wrap /pt-BR/docs/Web/CSS/overflow-wrap -/pt-BR/docs/Construindo_um_complemento /pt-BR/docs/conflicting/Mozilla/Add-ons -/pt-BR/docs/DOM /pt-BR/docs/conflicting/Web/API/Document_Object_Model /pt-BR/docs/DOM/BatteryManager.charging /pt-BR/docs/Web/API/BatteryManager/charging /pt-BR/docs/DOM/Document.querySelector /pt-BR/docs/Web/API/Document/querySelector /pt-BR/docs/DOM/Document.querySelectorAll /pt-BR/docs/Web/API/Document/querySelectorAll /pt-BR/docs/DOM/Referencia_do_DOM /pt-BR/docs/Web/API/Document_Object_Model -/pt-BR/docs/DOM/Referencia_do_DOM/Events /pt-BR/docs/orphaned/Web/API/Document_Object_Model/Events /pt-BR/docs/DOM/Referencia_do_DOM/Examples /pt-BR/docs/Web/API/Document_Object_Model/Examples /pt-BR/docs/DOM/Referencia_do_DOM/How_to_create_a_DOM_tree /pt-BR/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree /pt-BR/docs/DOM/Referencia_do_DOM/Introdução /pt-BR/docs/Web/API/Document_Object_Model/Introduction @@ -116,12 +108,9 @@ /pt-BR/docs/DOM/element.addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener /pt-BR/docs/DOM/element.addEventListener-redirect-1 /pt-BR/docs/Web/API/EventTarget/addEventListener /pt-BR/docs/DOM/window.URL.createObjectURL /pt-BR/docs/Web/API/URL/createObjectURl -/pt-BR/docs/DOM/window.onscroll /pt-BR/docs/conflicting/Web/API/GlobalEventHandlers/onscroll -/pt-BR/docs/DragDrop /pt-BR/docs/conflicting/Web/API/HTML_Drag_and_Drop_API /pt-BR/docs/DragDrop/Arrastar_e_Soltar /pt-BR/docs/Web/API/HTML_Drag_and_Drop_API /pt-BR/docs/DragDrop/Drag_and_Drop /pt-BR/docs/Web/API/HTML_Drag_and_Drop_API /pt-BR/docs/DragDrop/Drag_and_Drop/Arrastar_e_soltar_arquivos /pt-BR/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop -/pt-BR/docs/Eventos_on-line_off-line /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events /pt-BR/docs/Games/Introduction_to_HTML5_Game_Gevelopment_(summary) /pt-BR/docs/Games/Introduction_to_HTML5_Game_Development /pt-BR/docs/Glossario /pt-BR/docs/Glossary /pt-BR/docs/Glossario/404 /pt-BR/docs/Glossary/404 @@ -254,7 +243,6 @@ /pt-BR/docs/Glossario/TLS /pt-BR/docs/Glossary/TLS /pt-BR/docs/Glossario/Tag /pt-BR/docs/Glossary/Tag /pt-BR/docs/Glossario/Three_js /pt-BR/docs/Glossary/Three_js -/pt-BR/docs/Glossario/Tratando_Formulários_com_PHP /pt-BR/docs/orphaned/Glossary/Tratando_Formulários_com_PHP /pt-BR/docs/Glossario/Truthy /pt-BR/docs/Glossary/Truthy /pt-BR/docs/Glossario/URI /pt-BR/docs/Glossary/URI /pt-BR/docs/Glossario/URL /pt-BR/docs/Glossary/URL @@ -304,7 +292,6 @@ /pt-BR/docs/HTML/Element/article /pt-BR/docs/Web/HTML/Element/article /pt-BR/docs/HTML/Element/aside /pt-BR/docs/Web/HTML/Element/aside /pt-BR/docs/HTML/Element/canvas /pt-BR/docs/Web/HTML/Element/canvas -/pt-BR/docs/HTML/Element/command /pt-BR/docs/orphaned/Web/HTML/Element/command /pt-BR/docs/HTML/Element/data /pt-BR/docs/Web/HTML/Element/data /pt-BR/docs/HTML/Element/datalist /pt-BR/docs/Web/HTML/Element/datalist /pt-BR/docs/HTML/Element/details /pt-BR/docs/Web/HTML/Element/details @@ -331,22 +318,14 @@ /pt-BR/docs/HTML/Element/table /pt-BR/docs/Web/HTML/Element/table /pt-BR/docs/HTML/Element/wbr /pt-BR/docs/Web/HTML/Element/wbr /pt-BR/docs/HTML/Elementos HTML /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/HTML/Forms_in_HTML /pt-BR/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/pt-BR/docs/HTML/Formularios_em_HTML /pt-BR/docs/orphaned/Learn/HTML/Forms/HTML5_updates -/pt-BR/docs/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/HTML/HTML5/HTML5_element_list /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/pt-BR/docs/HTML/HTML5/Introdução_ao_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/HTML/HTML_Elements /pt-BR/docs/Web/HTML/Element /pt-BR/docs/HTML/HTML_Elements/time /pt-BR/docs/Web/HTML/Element/time /pt-BR/docs/HTML/Introducao /pt-BR/docs/Learn/HTML/Introduction_to_HTML /pt-BR/docs/HTML/Introduction /pt-BR/docs/Learn/HTML/Introduction_to_HTML /pt-BR/docs/HTML/Optimizing_Your_Pages_for_Speculative_Parsing /pt-BR/docs/Glossary/speculative_parsing -/pt-BR/docs/Hello_World_Rust /pt-BR/docs/orphaned/Hello_World_Rust /pt-BR/docs/IndexedDB /pt-BR/docs/Web/API/IndexedDB_API -/pt-BR/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/IndexedDB/Usando_IndexedDB /pt-BR/docs/Web/API/IndexedDB_API/Using_IndexedDB -/pt-BR/docs/Instalando_Rust /pt-BR/docs/orphaned/Instalando_Rust /pt-BR/docs/JSON /pt-BR/docs/Glossary/JSON /pt-BR/docs/JavaScript /pt-BR/docs/Web/JavaScript /pt-BR/docs/JavaScript/A_re-introduction_to_JavaScript /pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript @@ -358,14 +337,12 @@ /pt-BR/docs/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto /pt-BR/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /pt-BR/docs/JavaScript/Guide/Expressions_and_Operators /pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators /pt-BR/docs/JavaScript/Guide/Herança_Revisitada /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/pt-BR/docs/JavaScript/Guide/Igualdade /pt-BR/docs/conflicting/Web/JavaScript/Equality_comparisons_and_sameness /pt-BR/docs/JavaScript/Guide/Inheritance_Revisited /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /pt-BR/docs/JavaScript/Guide/JavaScript_Visão_Geral /pt-BR/docs/Web/JavaScript/Guide/Introduction /pt-BR/docs/JavaScript/Guide/Regular_Expressions /pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions /pt-BR/docs/JavaScript/Guide/Trabalhando_com_Objetos /pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects /pt-BR/docs/JavaScript/Guide/Valores,_variáveis_e_literais /pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types /pt-BR/docs/JavaScript/Guide/Values,_variables,_and_literals /pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types -/pt-BR/docs/JavaScript/Introduction_to_Object-Oriented_JavaScript /pt-BR/docs/conflicting/Learn/JavaScript/Objects /pt-BR/docs/JavaScript/JavaScript_technologies_overview /pt-BR/docs/Web/JavaScript/JavaScript_technologies_overview /pt-BR/docs/JavaScript/Outras_ferramentas_JavaScript /pt-BR/docs/Tools /pt-BR/docs/JavaScript/Reference /pt-BR/docs/Web/JavaScript/Reference @@ -387,7 +364,6 @@ /pt-BR/docs/JavaScript/Reference/Global_Objects/String /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String /pt-BR/docs/JavaScript/Reference/Global_Objects/String/indexOf /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf /pt-BR/docs/JavaScript/Reference/Global_Objects/WeakMap /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WeakMap -/pt-BR/docs/JavaScript/Reference/Global_Objects/WeakMap/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap /pt-BR/docs/JavaScript/Reference/Global_Objects/isNaN /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/isNaN /pt-BR/docs/JavaScript/Reference/Global_Objects/parseInt /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/parseInt /pt-BR/docs/JavaScript/Reference/Operators /pt-BR/docs/Web/JavaScript/Reference/Operators @@ -435,14 +411,8 @@ /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Comecando_com_React /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_iniciando /pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started /pt-BR/docs/Localização /pt-BR/docs/Glossary/Localization -/pt-BR/docs/MDN/Comunidade /pt-BR/docs/orphaned/MDN/Community -/pt-BR/docs/MDN/Comunidade/Trabalhando_em_comunidade /pt-BR/docs/orphaned/MDN/Community/Working_in_community -/pt-BR/docs/MDN/Comunidade/Whats_happening /pt-BR/docs/orphaned/MDN/Community/Whats_happening -/pt-BR/docs/MDN/Contribute/Collaboration_tactics /pt-BR/docs/orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics /pt-BR/docs/MDN/Contribute/Content /pt-BR/docs/MDN/Guidelines /pt-BR/docs/MDN/Contribute/Content/Style_guide /pt-BR/docs/MDN/Guidelines/Writing_style_guide -/pt-BR/docs/MDN/Contribute/Editor /pt-BR/docs/orphaned/MDN/Editor -/pt-BR/docs/MDN/Contribute/Editor/Basics /pt-BR/docs/orphaned/MDN/Editor/Basics /pt-BR/docs/MDN/Contribute/Estruturas /pt-BR/docs/MDN/Structures /pt-BR/docs/MDN/Contribute/Estruturas/Compatibility_tables /pt-BR/docs/MDN/Structures/Compatibility_tables /pt-BR/docs/MDN/Contribute/Estruturas/Macros /pt-BR/docs/MDN/Structures/Macros @@ -450,32 +420,20 @@ /pt-BR/docs/MDN/Contribute/Tools /pt-BR/docs/MDN/Tools /pt-BR/docs/MDN/Contribute/Tools/KumaScript /pt-BR/docs/MDN/Tools/KumaScript /pt-BR/docs/MDN/Contribute/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript /pt-BR/docs/MDN/Tools/KumaScript/Troubleshooting -/pt-BR/docs/MDN/Contribute/Tools/Page_regeneration /pt-BR/docs/orphaned/MDN/Tools/Page_regeneration /pt-BR/docs/MDN/Contribute/criando_e_editando_paginas /pt-BR/docs/MDN/Contribute/Howto/Create_and_edit_pages /pt-BR/docs/MDN/Contribute/guia /pt-BR/docs/MDN/Contribute/Howto /pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente /pt-BR/docs/MDN/Contribute/Howto/Tag /pt-BR/docs/MDN/Contribute/guia/Converter_exemplos_codigo_para_ao_vivo /pt-BR/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live -/pt-BR/docs/MDN/Contribute/guia/Create_an_MDN_account /pt-BR/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account /pt-BR/docs/MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web /pt-BR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web /pt-BR/docs/MDN/Contribute/guia/Create_an_interactive_exercise_to_help_learning_the_web/distant_example /pt-BR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web/distant_example -/pt-BR/docs/MDN/Contribute/guia/Do_a_technical_review /pt-BR/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review -/pt-BR/docs/MDN/Contribute/guia/Do_an_editorial_review /pt-BR/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review -/pt-BR/docs/MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web /pt-BR/docs/orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -/pt-BR/docs/MDN/Contribute/guia/Set_the_summary_for_a_page /pt-BR/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -/pt-BR/docs/MDN/Contribute/guia/Tag_JavaScript_pages /pt-BR/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -/pt-BR/docs/MDN/Editor /pt-BR/docs/orphaned/MDN/Editor -/pt-BR/docs/MDN/Editor/Basics /pt-BR/docs/orphaned/MDN/Editor/Basics /pt-BR/docs/MDN/Feedback /pt-BR/docs/MDN/Contribute/Feedback /pt-BR/docs/MDN/Guidelines/Style_guide /pt-BR/docs/MDN/Guidelines/Writing_style_guide /pt-BR/docs/MDN/Kuma /pt-BR/docs/MDN/Yari -/pt-BR/docs/MDN/Paineis /pt-BR/docs/orphaned/MDN/Dashboards /pt-BR/docs/MDN/Primeiros_Passos /pt-BR/docs/MDN/Contribute/Getting_started /pt-BR/docs/MDN/Tools/KumaScript/Solucionando_problemas_de_erros_de_KumaScript /pt-BR/docs/MDN/Tools/KumaScript/Troubleshooting -/pt-BR/docs/MDN/Tools/Page_regeneration /pt-BR/docs/orphaned/MDN/Tools/Page_regeneration /pt-BR/docs/MDN/guia_usuário /pt-BR/docs/MDN/Tools /pt-BR/docs/Mozilla/Add-ons/WebExtensions/API/tema /pt-BR/docs/Mozilla/Add-ons/WebExtensions/API/theme /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Anatomia_de_uma_WebExtension /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension -/pt-BR/docs/Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando /pt-BR/docs/orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox /pt-BR/docs/Mozilla/Add-ons/WebExtensions/O_que_vem_a_seguir_ /pt-BR/docs/Mozilla/Add-ons/WebExtensions/What_next_ /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Passo-a-Passo /pt-BR/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension /pt-BR/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissões /pt-BR/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions @@ -484,27 +442,16 @@ /pt-BR/docs/Mozilla/Add-ons/WebExtensions/user_interface/Itens_do_menu_de_contexto /pt-BR/docs/Mozilla/Add-ons/WebExtensions/user_interface/Context_menu_items /pt-BR/docs/Mozilla/Firefox/Novas_funcionalidades /pt-BR/docs/Mozilla/Firefox/Experimental_features /pt-BR/docs/Mozilla/Firefox/Releases/3/Zoom_de_página_inteira /pt-BR/docs/Mozilla/Firefox/Releases/3/Full_page_zoom -/pt-BR/docs/Online_and_offline_events /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -/pt-BR/docs/Projeto:Como_ajudar_com_MDN /pt-BR/docs/conflicting/MDN/Contribute/Getting_started -/pt-BR/docs/Projeto:Como_ajudar_com_MDN-redirect-1 /pt-BR/docs/conflicting/MDN/Contribute/Getting_started -/pt-BR/docs/Projeto:Como_ajudar_com_MDN-redirect-2 /pt-BR/docs/conflicting/MDN/Contribute/Getting_started /pt-BR/docs/Quirks_Mode_and_Standards_Mode /pt-BR/docs/Web/HTML/Quirks_Mode_and_Standards_Mode /pt-BR/docs/SVG /pt-BR/docs/Web/SVG /pt-BR/docs/SVG/Element /pt-BR/docs/Web/SVG/Element /pt-BR/docs/SVG/Element/desc /pt-BR/docs/Web/SVG/Element/desc /pt-BR/docs/SVG/Element/svg /pt-BR/docs/Web/SVG/Element/svg /pt-BR/docs/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text -/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/Security/CSP/Utilizando_Politicas_De_Seguranca_De_Conteudo /pt-BR/docs/Web/HTTP/CSP -/pt-BR/docs/Seções_e_estrutura_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/The_XSLT_JavaScript_Interface_in_Gecko /pt-BR/docs/Web/XSLT/XSLT_JS_interface_in_Gecko /pt-BR/docs/The_XSLT_JavaScript_Interface_in_Gecko/Advanced_Example /pt-BR/docs/Web/XSLT/XSLT_JS_interface_in_Gecko/Advanced_Example -/pt-BR/docs/Tools/Add-ons /pt-BR/docs/orphaned/Tools/Add-ons -/pt-BR/docs/Tools/Add-ons/DOM_Inspector_Pt-Br /pt-BR/docs/orphaned/Tools/Add-ons/DOM_Inspector -/pt-BR/docs/Tools/CSS_Coverage /pt-BR/docs/orphaned/Tools/CSS_Coverage /pt-BR/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables /pt-BR/docs/Tools/Debugger/How_to/Set_Watch_Expressions -/pt-BR/docs/Tools/Debugger_(before_Firefox_52) /pt-BR/docs/orphaned/Tools/Debugger_(before_Firefox_52) -/pt-BR/docs/Tools/Debugger_(before_Firefox_52)/Disable_breakpoints /pt-BR/docs/orphaned/Tools/Debugger_(before_Firefox_52)/Disable_breakpoints /pt-BR/docs/Tools/Depurador /pt-BR/docs/Tools/Debugger /pt-BR/docs/Tools/Depurador/Set_a_logpoint /pt-BR/docs/Tools/Debugger/Set_a_logpoint /pt-BR/docs/Tools/Depuração_Remota /pt-BR/docs/Tools/Remote_Debugging @@ -512,24 +459,18 @@ /pt-BR/docs/Tools/Inspetor_de_Armazenamento /pt-BR/docs/Tools/Storage_Inspector /pt-BR/docs/Tools/Medir_uma_porcao_da_pagina /pt-BR/docs/Tools/Measure_a_portion_of_the_page /pt-BR/docs/Tools/Modo_Design_Adaptavel /pt-BR/docs/Tools/Responsive_Design_Mode -/pt-BR/docs/Tools/Notas_de_lancamento /pt-BR/docs/conflicting/Mozilla/Firefox/Releases /pt-BR/docs/Tools/Page_Inspector/How_to/Examinando_eventos_escuta /pt-BR/docs/Tools/Page_Inspector/How_to/Examine_event_listeners /pt-BR/docs/Tools/Page_Inspector/How_to/Trabalho_Com_Animaçoes /pt-BR/docs/Tools/Page_Inspector/How_to/Work_with_animations /pt-BR/docs/Tools/Simulador_Firefox_OS_1.1 /pt-BR/docs/Tools/Firefox_OS_1.1_Simulator /pt-BR/docs/Tools/Web_Console/Opening_the_Web_Console /pt-BR/docs/Tools/Web_Console/UI_Tour /pt-BR/docs/Tools/atuação /pt-BR/docs/Tools/Performance -/pt-BR/docs/Using_HTML5_audio_and_video /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /pt-BR/docs/Using_files_from_web_applications /pt-BR/docs/Web/API/File/Using_files_from_web_applications /pt-BR/docs/Using_geolocation /pt-BR/docs/Web/API/Geolocation_API -/pt-BR/docs/Utilizando_áudio_e_vídeo_com_HTML5 /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content /pt-BR/docs/Web/API/API_Push /pt-BR/docs/Web/API/Push_API /pt-BR/docs/Web/API/API_Push/Best_Practices /pt-BR/docs/Web/API/Push_API/Best_Practices /pt-BR/docs/Web/API/API_Web_Audio /pt-BR/docs/Web/API/Web_Audio_API /pt-BR/docs/Web/API/API_Web_Audio/Sintetizador_simples /pt-BR/docs/Web/API/Web_Audio_API/Simple_synth /pt-BR/docs/Web/API/API_de_Desempenho /pt-BR/docs/Web/API/Performance_API -/pt-BR/docs/Web/API/AbstractWorker /pt-BR/docs/orphaned/Web/API/AbstractWorker -/pt-BR/docs/Web/API/AbstractWorker/onerror /pt-BR/docs/orphaned/Web/API/AbstractWorker/onerror -/pt-BR/docs/Web/API/Ambient_Light_Events /pt-BR/docs/orphaned/Web/API/Ambient_Light_Events /pt-BR/docs/Web/API/ArrayBuffer /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /pt-BR/docs/Web/API/AudioContext/currentTime /pt-BR/docs/Web/API/BaseAudioContext/currentTime /pt-BR/docs/Web/API/BatteryManager.charging /pt-BR/docs/Web/API/BatteryManager/charging @@ -541,18 +482,9 @@ /pt-BR/docs/Web/API/BatteryManager.ondischargingtimechange /pt-BR/docs/Web/API/BatteryManager/ondischargingtimechange /pt-BR/docs/Web/API/BatteryManager.onlevelchange /pt-BR/docs/Web/API/BatteryManager/onlevelchange /pt-BR/docs/Web/API/BatteryManager/ondischargintimechange /pt-BR/docs/Web/API/BatteryManager/ondischargingtimechange -/pt-BR/docs/Web/API/Body /pt-BR/docs/orphaned/Web/API/Body -/pt-BR/docs/Web/API/Body/json /pt-BR/docs/orphaned/Web/API/Body/json -/pt-BR/docs/Web/API/ChildNode /pt-BR/docs/orphaned/Web/API/ChildNode -/pt-BR/docs/Web/API/ChildNode/after /pt-BR/docs/orphaned/Web/API/ChildNode/after -/pt-BR/docs/Web/API/ChildNode/remove /pt-BR/docs/orphaned/Web/API/ChildNode/remove /pt-BR/docs/Web/API/Console.timeEnd /pt-BR/docs/Web/API/Console/timeEnd /pt-BR/docs/Web/API/Coordinates /pt-BR/docs/Web/API/GeolocationCoordinates /pt-BR/docs/Web/API/Coordinates/altitude /pt-BR/docs/Web/API/GeolocationCoordinates/altitude -/pt-BR/docs/Web/API/CryptoKey/algorithm /pt-BR/docs/conflicting/Web/API/CryptoKey -/pt-BR/docs/Web/API/CryptoKey/extractable /pt-BR/docs/conflicting/Web/API/CryptoKey_53ae81677f4d9298717f2f245ae4da0d -/pt-BR/docs/Web/API/CryptoKey/type /pt-BR/docs/conflicting/Web/API/CryptoKey_33bd21ca8f20b4cd8c7b8c762e2fc597 -/pt-BR/docs/Web/API/CryptoKey/usages /pt-BR/docs/conflicting/Web/API/CryptoKey_f39d256ef7fbd1cf0a1f26de1e887ae7 /pt-BR/docs/Web/API/DeviceAcceleration /pt-BR/docs/Web/API/DeviceMotionEventAcceleration /pt-BR/docs/Web/API/DeviceRotationRate /pt-BR/docs/Web/API/DeviceMotionEventRotationRate /pt-BR/docs/Web/API/Document.querySelector /pt-BR/docs/Web/API/Document/querySelector @@ -564,7 +496,6 @@ /pt-BR/docs/Web/API/DocumentOrShadowRoot/activeElement /pt-BR/docs/Web/API/Document/activeElement /pt-BR/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /pt-BR/docs/Web/API/Document/elementFromPoint /pt-BR/docs/Web/API/DocumentOrShadowRoot/getSelection /pt-BR/docs/Web/API/Document/getSelection -/pt-BR/docs/Web/API/Document_Object_Model/Events /pt-BR/docs/orphaned/Web/API/Document_Object_Model/Events /pt-BR/docs/Web/API/DocumentoXML /pt-BR/docs/Web/API/XMLDocument /pt-BR/docs/Web/API/Element.addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener /pt-BR/docs/Web/API/Element.getAttribute /pt-BR/docs/Web/API/Element/getAttribute @@ -574,31 +505,12 @@ /pt-BR/docs/Web/API/Element.removeAttribute /pt-BR/docs/Web/API/Element/removeAttribute /pt-BR/docs/Web/API/Element/accessKey /pt-BR/docs/Web/API/HTMLElement/accessKey /pt-BR/docs/Web/API/Element/addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener -/pt-BR/docs/Web/API/Element/name /pt-BR/docs/conflicting/Web/API /pt-BR/docs/Web/API/Event/Comparativo_entre_Event_Targets /pt-BR/docs/Web/API/Event/Comparison_of_Event_Targets /pt-BR/docs/Web/API/Fetch_API/Uso_de_busca_Cross-global /pt-BR/docs/Web/API/Fetch_API/Cross-global_fetch_usage /pt-BR/docs/Web/API/HTMLContentElement/Seletor /pt-BR/docs/Web/API/HTMLContentElement/select -/pt-BR/docs/Web/API/HTMLElement/blur /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/blur -/pt-BR/docs/Web/API/HTMLElement/dataset /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/pt-BR/docs/Web/API/HTMLElement/focus /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/focus -/pt-BR/docs/Web/API/HTMLOrForeignElement/blur /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/blur -/pt-BR/docs/Web/API/HTMLOrForeignElement/dataset /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/dataset -/pt-BR/docs/Web/API/HTMLOrForeignElement/focus /pt-BR/docs/orphaned/Web/API/HTMLOrForeignElement/focus /pt-BR/docs/Web/API/History_API/Exemplo /pt-BR/docs/Web/API/History_API/Example -/pt-BR/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /pt-BR/docs/Web/API/IndexedDB_API/Usando_IndexedDB /pt-BR/docs/Web/API/IndexedDB_API/Using_IndexedDB /pt-BR/docs/Web/API/Navigator.battery /pt-BR/docs/Web/API/Navigator/battery -/pt-BR/docs/Web/API/NavigatorID /pt-BR/docs/orphaned/Web/API/NavigatorID -/pt-BR/docs/Web/API/NavigatorID.platform /pt-BR/docs/orphaned/Web/API/NavigatorID/platform -/pt-BR/docs/Web/API/NavigatorID/platform /pt-BR/docs/orphaned/Web/API/NavigatorID/platform -/pt-BR/docs/Web/API/NavigatorID/userAgent /pt-BR/docs/orphaned/Web/API/NavigatorID/userAgent -/pt-BR/docs/Web/API/NavigatorLanguage /pt-BR/docs/orphaned/Web/API/NavigatorLanguage -/pt-BR/docs/Web/API/NavigatorLanguage/language /pt-BR/docs/orphaned/Web/API/NavigatorLanguage/language -/pt-BR/docs/Web/API/NavigatorOnLine /pt-BR/docs/orphaned/Web/API/NavigatorOnLine -/pt-BR/docs/Web/API/NavigatorOnLine/Online_and_offline_events /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/Online_and_offline_events -/pt-BR/docs/Web/API/NavigatorOnLine/onLine /pt-BR/docs/orphaned/Web/API/NavigatorOnLine/onLine -/pt-BR/docs/Web/API/NavigatorPlugins /pt-BR/docs/orphaned/Web/API/NavigatorPlugins -/pt-BR/docs/Web/API/NavigatorPlugins/javaEnabled /pt-BR/docs/orphaned/Web/API/NavigatorPlugins/javaEnabled /pt-BR/docs/Web/API/Node.appendChild /pt-BR/docs/Web/API/Node/appendChild /pt-BR/docs/Web/API/Node.childNodes /pt-BR/docs/Web/API/Node/childNodes /pt-BR/docs/Web/API/Node.contains /pt-BR/docs/Web/API/Node/contains @@ -607,16 +519,11 @@ /pt-BR/docs/Web/API/Node.previousSibling /pt-BR/docs/Web/API/Node/previousSibling /pt-BR/docs/Web/API/Node.removeChild /pt-BR/docs/Web/API/Node/removeChild /pt-BR/docs/Web/API/Node.replaceChild /pt-BR/docs/Web/API/Node/replaceChild -/pt-BR/docs/Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript /pt-BR/docs/orphaned/Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript /pt-BR/docs/Web/API/Node/innerText /pt-BR/docs/Web/API/HTMLElement/innerText -/pt-BR/docs/Web/API/ParentNode /pt-BR/docs/orphaned/Web/API/ParentNode /pt-BR/docs/Web/API/ParentNode/childElementCount /pt-BR/docs/Web/API/Element/childElementCount -/pt-BR/docs/Web/API/ParentNode/children /pt-BR/docs/orphaned/Web/API/ParentNode/children -/pt-BR/docs/Web/API/ParentNode/querySelector /pt-BR/docs/orphaned/Web/API/ParentNode/querySelector /pt-BR/docs/Web/API/Position /pt-BR/docs/Web/API/GeolocationPosition /pt-BR/docs/Web/API/Position/coords /pt-BR/docs/Web/API/GeolocationPosition/coords /pt-BR/docs/Web/API/PositionError /pt-BR/docs/Web/API/GeolocationPositionError -/pt-BR/docs/Web/API/RandomSource /pt-BR/docs/conflicting/Web/API/Crypto/getRandomValues /pt-BR/docs/Web/API/RandomSource/getRandomValues /pt-BR/docs/Web/API/Crypto/getRandomValues /pt-BR/docs/Web/API/SVGAElement/SVGAlement.target /pt-BR/docs/Web/API/SVGAElement/target /pt-BR/docs/Web/API/Seleção /pt-BR/docs/Web/API/Selection @@ -628,15 +535,9 @@ /pt-BR/docs/Web/API/Web_Storage_API_pt_br/Using_the_Web_Storage_API /pt-BR/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API /pt-BR/docs/Web/API/Window.alert /pt-BR/docs/Web/API/Window/alert /pt-BR/docs/Web/API/Window.navigator /pt-BR/docs/Web/API/Window/navigator -/pt-BR/docs/Web/API/Window.onscroll /pt-BR/docs/conflicting/Web/API/GlobalEventHandlers/onscroll /pt-BR/docs/Web/API/Window.openDialog /pt-BR/docs/Web/API/Window/openDialog -/pt-BR/docs/Web/API/Window/URL /pt-BR/docs/conflicting/Web/API/URL /pt-BR/docs/Web/API/Window/Window.localStorage /pt-BR/docs/Web/API/Window/localStorage -/pt-BR/docs/Web/API/Window/ondevicelight /pt-BR/docs/orphaned/Web/API/Window/ondevicelight -/pt-BR/docs/Web/API/Window/onscroll /pt-BR/docs/conflicting/Web/API/GlobalEventHandlers/onscroll -/pt-BR/docs/Web/API/WindowBase64 /pt-BR/docs/conflicting/Web/API/WindowOrWorkerGlobalScope /pt-BR/docs/Web/API/WindowBase64/atob /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/atob -/pt-BR/docs/Web/API/WindowTimers /pt-BR/docs/conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a /pt-BR/docs/Web/API/WindowTimers.clearTimeout /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pt-BR/docs/Web/API/WindowTimers/clearTimeout /pt-BR/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /pt-BR/docs/Web/API/XMLHttpRequest/Requisicoes_sincronas_e_assincronas /pt-BR/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests @@ -653,19 +554,14 @@ /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role /pt-BR/docs/Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA /pt-BR/docs/Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide /pt-BR/docs/Web/Accessibility/ARIA/forms/Dicas_básicas_de_form /pt-BR/docs/Web/Accessibility/ARIA/forms/Basic_form_hints -/pt-BR/docs/Web/Accessibility/ARIA/widgets/Visão_geral /pt-BR/docs/conflicting/Web/Accessibility/ARIA/widgets -/pt-BR/docs/Web/Accessibility/ARIA/widgets/overview /pt-BR/docs/conflicting/Web/Accessibility/ARIA/widgets /pt-BR/docs/Web/Acessibilidade /pt-BR/docs/Web/Accessibility /pt-BR/docs/Web/Acessibilidade/Accessibilidade_para_plataforma_movel /pt-BR/docs/Web/Accessibility/Mobile_accessibility_checklist /pt-BR/docs/Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets /pt-BR/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -/pt-BR/docs/Web/Acessibilidade/Desenvolvimento_Web /pt-BR/docs/conflicting/Web/Accessibility /pt-BR/docs/Web/Acessibilidade/Entendendo_WCAG /pt-BR/docs/Web/Accessibility/Understanding_WCAG /pt-BR/docs/Web/Acessibilidade/Entendendo_WCAG/Keyboard /pt-BR/docs/Web/Accessibility/Understanding_WCAG/Keyboard -/pt-BR/docs/Web/Acessibilidade/Problemas_com_JAWS_no_Firefox /pt-BR/docs/orphaned/Web/Accessibility/JAWS_Issues_with_Firefox /pt-BR/docs/Web/Apps/Progressive /pt-BR/docs/Web/Progressive_web_apps /pt-BR/docs/Web/Apps/Progressive/Introdução /pt-BR/docs/Web/Progressive_web_apps/Introduction /pt-BR/docs/Web/CSS/-moz-box-ordinal-group /pt-BR/docs/Web/CSS/box-ordinal-group -/pt-BR/docs/Web/CSS/-moz-cell /pt-BR/docs/conflicting/Web/CSS/cursor /pt-BR/docs/Web/CSS/CSS_Animations/Usando_animações_CSS /pt-BR/docs/Web/CSS/CSS_Animations/Using_CSS_animations /pt-BR/docs/Web/CSS/CSS_Background_and_Borders /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders /pt-BR/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds @@ -679,14 +575,8 @@ /pt-BR/docs/Web/CSS/Comentário /pt-BR/docs/Web/CSS/Comments /pt-BR/docs/Web/CSS/Elemento_substituido /pt-BR/docs/Web/CSS/Replaced_element /pt-BR/docs/Web/CSS/General_sibling_selectors /pt-BR/docs/Web/CSS/General_sibling_combinator -/pt-BR/docs/Web/CSS/Getting_Started /pt-BR/docs/conflicting/Learn/CSS/First_steps -/pt-BR/docs/Web/CSS/Getting_Started/Cascading_and_inheritance /pt-BR/docs/conflicting/Learn/CSS/Building_blocks/Cascade_and_inheritance -/pt-BR/docs/Web/CSS/Getting_Started/Como_CSS_funciona /pt-BR/docs/conflicting/Learn/CSS/First_steps/How_CSS_works /pt-BR/docs/Web/CSS/Getting_Started/JavaScript /pt-BR/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents /pt-BR/docs/Web/CSS/Getting_Started/Lists /pt-BR/docs/Learn/CSS/Styling_text/Styling_lists -/pt-BR/docs/Web/CSS/Getting_Started/Oque_é_CSS /pt-BR/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_199dae2aa1447fa94457a213c989744d -/pt-BR/docs/Web/CSS/Getting_Started/Porque_usar_CSS /pt-BR/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_61240ddc35a4ddd533ea33cc8ccf1c87 -/pt-BR/docs/Web/CSS/Getting_Started/Seletores /pt-BR/docs/conflicting/Learn/CSS/Building_blocks/Selectors /pt-BR/docs/Web/CSS/Modelo_Visual /pt-BR/docs/Web/CSS/Visual_formatting_model /pt-BR/docs/Web/CSS/Modelo_layout /pt-BR/docs/Web/CSS/Layout_mode /pt-BR/docs/Web/CSS/Privacidade_e_o_seletor_:visited /pt-BR/docs/Web/CSS/Privacy_and_the_:visited_selector @@ -710,14 +600,8 @@ /pt-BR/docs/Web/CSS/filter-function/opacity /pt-BR/docs/Web/CSS/filter-function/opacity() /pt-BR/docs/Web/CSS/filter-function/sepia /pt-BR/docs/Web/CSS/filter-function/sepia() /pt-BR/docs/Web/CSS/hifens /pt-BR/docs/Web/CSS/hyphens -/pt-BR/docs/Web/CSS/image-set /pt-BR/docs/orphaned/Web/CSS/image-set() -/pt-BR/docs/Web/CSS/image-set() /pt-BR/docs/orphaned/Web/CSS/image-set() /pt-BR/docs/Web/CSS/imagem /pt-BR/docs/Web/CSS/image /pt-BR/docs/Web/CSS/máscara /pt-BR/docs/Web/CSS/mask -/pt-BR/docs/Web/CSS/radial-gradient /pt-BR/docs/orphaned/Web/CSS/radial-gradient() -/pt-BR/docs/Web/CSS/radial-gradient() /pt-BR/docs/orphaned/Web/CSS/radial-gradient() -/pt-BR/docs/Web/CSS/repeating-linear-gradient /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() -/pt-BR/docs/Web/CSS/repeating-linear-gradient() /pt-BR/docs/orphaned/Web/CSS/repeating-linear-gradient() /pt-BR/docs/Web/CSS/sintaxe /pt-BR/docs/Web/CSS/Syntax /pt-BR/docs/Web/CSS/transform-function/matrix /pt-BR/docs/Web/CSS/transform-function/matrix() /pt-BR/docs/Web/CSS/transform-function/perspective /pt-BR/docs/Web/CSS/transform-function/perspective() @@ -751,16 +635,9 @@ /pt-BR/docs/Web/Events/resize /pt-BR/docs/Web/API/Window/resize_event /pt-BR/docs/Web/Events/touchstart /pt-BR/docs/Web/API/Element/touchstart_event /pt-BR/docs/Web/Guide/CSS/CSS_Media_queries /pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries -/pt-BR/docs/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) /pt-BR/docs/Web/Guide/CSS/Scaling_background_images /pt-BR/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images /pt-BR/docs/Web/Guide/CSS/Understanding_z_index /pt-BR/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/pt-BR/docs/Web/Guide/Events /pt-BR/docs/orphaned/Web/Guide/Events -/pt-BR/docs/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events -/pt-BR/docs/Web/Guide/Events/Event_handlers /pt-BR/docs/orphaned/Web/Guide/Events/Event_handlers -/pt-BR/docs/Web/Guide/Events/Mutation_events /pt-BR/docs/orphaned/Web/Guide/Events/Mutation_events -/pt-BR/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /pt-BR/docs/orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers /pt-BR/docs/Web/Guide/Events/Touch_events /pt-BR/docs/Web/API/Touch_events -/pt-BR/docs/Web/Guide/Events/criando_e_disparando_eventos /pt-BR/docs/orphaned/Web/Guide/Events/Creating_and_triggering_events /pt-BR/docs/Web/Guide/Gráficos /pt-BR/docs/Web/Guide/Graphics /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial /pt-BR/docs/Web/API/Canvas_API/Tutorial /pt-BR/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /pt-BR/docs/Web/API/Canvas_API/Tutorial/Advanced_animations @@ -783,9 +660,6 @@ /pt-BR/docs/Web/Guide/HTML/Forms/Meu_primeiro_formulario_HTML /pt-BR/docs/Learn/Forms/Your_first_form /pt-BR/docs/Web/Guide/HTML/Forms/Os_widgets_nativos /pt-BR/docs/Learn/Forms/Basic_native_form_controls /pt-BR/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data /pt-BR/docs/Learn/Forms/Sending_and_retrieving_form_data -/pt-BR/docs/Web/Guide/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 -/pt-BR/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -/pt-BR/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines /pt-BR/docs/Web/Guide/HTML/Using_data_attributes /pt-BR/docs/Learn/HTML/Howto/Use_data_attributes /pt-BR/docs/Web/Guide/Introducao_ao_Desenvolvimento_Web /pt-BR/docs/Web/Guide/Introduction_to_Web_development /pt-BR/docs/Web/HTML/CORS_imagens_habilitadas /pt-BR/docs/Web/HTML/CORS_enabled_image @@ -794,20 +668,14 @@ /pt-BR/docs/Web/HTML/Controlando_verificacao_ortografica_em_formularios_HTML /pt-BR/docs/Web/HTML/Global_attributes/spellcheck /pt-BR/docs/Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido /pt-BR/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages /pt-BR/docs/Web/HTML/Element/Input/data /pt-BR/docs/Web/HTML/Element/input/date -/pt-BR/docs/Web/HTML/Element/command /pt-BR/docs/orphaned/Web/HTML/Element/command /pt-BR/docs/Web/HTML/Element/conteúdo /pt-BR/docs/Web/HTML/Element/content /pt-BR/docs/Web/HTML/Element/figura /pt-BR/docs/Web/HTML/Element/figure /pt-BR/docs/Web/HTML/Elementos_block-level /pt-BR/docs/Web/HTML/Block-level_elements /pt-BR/docs/Web/HTML/Elementos_nlock-level /pt-BR/docs/Web/HTML/Block-level_elements -/pt-BR/docs/Web/HTML/HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5 /pt-BR/docs/Web/HTML/HTML5/HTML5_element_list /pt-BR/docs/Web/HTML/Element -/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 /pt-BR/docs/Web/HTML/Inline_elemente /pt-BR/docs/Web/HTML/Inline_elements /pt-BR/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing /pt-BR/docs/Glossary/speculative_parsing -/pt-BR/docs/Web/HTML/Preloading_content /pt-BR/docs/orphaned/Web/HTML/Preloading_content /pt-BR/docs/Web/HTML/ReferenciaHTML /pt-BR/docs/Web/HTML/Reference -/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video /pt-BR/docs/conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -/pt-BR/docs/Web/HTML/favicon /pt-BR/docs/orphaned/Web/HTML/favicon /pt-BR/docs/Web/HTML/formatos_midia_suportados /pt-BR/docs/Web/Media/Formats /pt-BR/docs/Web/HTML/microformatos /pt-BR/docs/Web/HTML/microformats /pt-BR/docs/Web/HTTP/Basico_sobre_HTTP /pt-BR/docs/Web/HTTP/Basics_of_HTTP @@ -824,16 +692,13 @@ /pt-BR/docs/Web/HTTP/Headers/Localização /pt-BR/docs/Web/HTTP/Headers/Location /pt-BR/docs/Web/HTTP/Mensagens /pt-BR/docs/Web/HTTP/Messages /pt-BR/docs/Web/HTTP/Redirecionamento /pt-BR/docs/Web/HTTP/Redirections -/pt-BR/docs/Web/HTTP/Server-Side_Access_Control /pt-BR/docs/conflicting/Web/HTTP/CORS /pt-BR/docs/Web/JavaScript/Enumerabilidade_e_posse_de_propriedades /pt-BR/docs/Web/JavaScript/Enumerability_and_ownership_of_properties /pt-BR/docs/Web/JavaScript/Guide/About /pt-BR/docs/Web/JavaScript/Guide/Introduction /pt-BR/docs/Web/JavaScript/Guide/Closures /pt-BR/docs/Web/JavaScript/Closures -/pt-BR/docs/Web/JavaScript/Guide/Coleções_chaveadas /pt-BR/docs/orphaned/Web/JavaScript/Guide/Coleções_chaveadas /pt-BR/docs/Web/JavaScript/Guide/Declarações /pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /pt-BR/docs/Web/JavaScript/Guide/Detalhes_do_Modelo_do_Objeto /pt-BR/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /pt-BR/docs/Web/JavaScript/Guide/Formatando_texto /pt-BR/docs/Web/JavaScript/Guide/Text_formatting /pt-BR/docs/Web/JavaScript/Guide/Funções /pt-BR/docs/Web/JavaScript/Guide/Functions -/pt-BR/docs/Web/JavaScript/Guide/Igualdade /pt-BR/docs/conflicting/Web/JavaScript/Equality_comparisons_and_sameness /pt-BR/docs/Web/JavaScript/Guide/Inheritance_Revisited /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /pt-BR/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain /pt-BR/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /pt-BR/docs/Web/JavaScript/Guide/Iteratores_e_geradores /pt-BR/docs/Web/JavaScript/Guide/Iterators_and_Generators @@ -841,11 +706,9 @@ /pt-BR/docs/Web/JavaScript/Guide/Lacos_e_iteracoes /pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration /pt-BR/docs/Web/JavaScript/Guide/Módulos /pt-BR/docs/Web/JavaScript/Guide/Modules /pt-BR/docs/Web/JavaScript/Guide/Numeros_e_datas /pt-BR/docs/Web/JavaScript/Guide/Numbers_and_dates -/pt-BR/docs/Web/JavaScript/Guide/Sintaxe_e_tipos /pt-BR/docs/orphaned/Web/JavaScript/Guide/Sintaxe_e_tipos /pt-BR/docs/Web/JavaScript/Guide/Trabalhando_com_Objetos /pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects /pt-BR/docs/Web/JavaScript/Guide/Usando_promises /pt-BR/docs/Web/JavaScript/Guide/Using_promises /pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals /pt-BR/docs/Web/JavaScript/Guide/Grammar_and_types -/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /pt-BR/docs/conflicting/Learn/JavaScript/Objects /pt-BR/docs/Web/JavaScript/Outras_ferramentas_JavaScript /pt-BR/docs/Tools /pt-BR/docs/Web/JavaScript/Reference/Errors/Fata_parênteses_após_lista_argumento /pt-BR/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list /pt-BR/docs/Web/JavaScript/Reference/Errors/Fecha_chaves_esquecida_apos_lista_propriedades /pt-BR/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list @@ -855,79 +718,39 @@ /pt-BR/docs/Web/JavaScript/Reference/Functions/Parametros_Predefinidos /pt-BR/docs/Web/JavaScript/Reference/Functions/Default_parameters /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/contains /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/includes /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/BigInt/prototype /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/clear /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/delete /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/entries /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/get /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/has /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/keys /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/set /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/size /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Map/values /pt-BR/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Promise /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RelativeTimeFormat /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Set/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Set -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String -/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/WeakMap/prototype /pt-BR/docs/conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap /pt-BR/docs/Web/JavaScript/Reference/Indice_metodos_js /pt-BR/docs/Web/JavaScript/Reference -/pt-BR/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators /pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao /pt-BR/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment -/pt-BR/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 /pt-BR/docs/Web/JavaScript/Reference/Operators/Inicializador_Objeto /pt-BR/docs/Web/JavaScript/Reference/Operators/Object_initializer /pt-BR/docs/Web/JavaScript/Reference/Operators/Operador_Condicional /pt-BR/docs/Web/JavaScript/Reference/Operators/Conditional_Operator /pt-BR/docs/Web/JavaScript/Reference/Operators/Operador_Virgula /pt-BR/docs/Web/JavaScript/Reference/Operators/Comma_Operator -/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_Logicos /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators_8fa8b34b0547a749514637a15d386886 -/pt-BR/docs/Web/JavaScript/Reference/Operators/Operadores_de_comparação /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators_0d2e4b8154642b5a9dbd76a2a48cf96a -/pt-BR/docs/Web/JavaScript/Reference/Operators/Pipeline_operator /pt-BR/docs/orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator /pt-BR/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax /pt-BR/docs/Web/JavaScript/Reference/Operators/operador_de_coalescencia_nula /pt-BR/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator /pt-BR/docs/Web/JavaScript/Reference/Properties_Index /pt-BR/docs/Web/JavaScript/Reference -/pt-BR/docs/Web/JavaScript/Reference/Statements/default /pt-BR/docs/conflicting/Web/JavaScript/Reference/Statements/switch /pt-BR/docs/Web/JavaScript/Reference/Statements/funcoes_assincronas /pt-BR/docs/Web/JavaScript/Reference/Statements/async_function /pt-BR/docs/Web/JavaScript/Reference/template_strings /pt-BR/docs/Web/JavaScript/Reference/Template_literals /pt-BR/docs/Web/MathML/Exemplos /pt-BR/docs/Web/MathML/Examples /pt-BR/docs/Web/Performance/caminho_de_renderizacao_critico /pt-BR/docs/Web/Performance/Critical_rendering_path /pt-BR/docs/Web/Progressive_web_apps/Introdução /pt-BR/docs/Web/Progressive_web_apps/Introduction -/pt-BR/docs/Web/Reference /pt-BR/docs/orphaned/Web/Reference -/pt-BR/docs/Web/Reference/API /pt-BR/docs/orphaned/Web/Reference/API -/pt-BR/docs/Web/SVG/Element/color-profile /pt-BR/docs/orphaned/Web/SVG/Element/color-profile /pt-BR/docs/Web/SVG/Element/texto /pt-BR/docs/Web/SVG/Element/text /pt-BR/docs/Web/SVG/Intensivo_de_Namespaces /pt-BR/docs/Web/SVG/Namespaces_Crash_Course -/pt-BR/docs/Web/Security/Básico_de_Segurança_da_Informação /pt-BR/docs/orphaned/Web/Security/Information_Security_Basics /pt-BR/docs/Web/Tutoriais /pt-BR/docs/Web/Tutorials /pt-BR/docs/Web/WebGL /pt-BR/docs/Web/API/WebGL_API /pt-BR/docs/Web/Web_Components/Usando_custom_elements /pt-BR/docs/Web/Web_Components/Using_custom_elements -/pt-BR/docs/WebAPI /pt-BR/docs/conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 /pt-BR/docs/WebAPI/Battery_Status /pt-BR/docs/Web/API/Battery_Status_API /pt-BR/docs/WebAPI/Network_Information /pt-BR/docs/Web/API/Network_Information_API /pt-BR/docs/WebAssembly/Entendendo_o_formato_textual_do_WebAssembly /pt-BR/docs/WebAssembly/Understanding_the_text_format /pt-BR/docs/WebAssembly/Usando_a_API_JavaScript_do_WebAssembly /pt-BR/docs/WebAssembly/Using_the_JavaScript_API /pt-BR/docs/WebGL /pt-BR/docs/Web/API/WebGL_API -/pt-BR/docs/WebRTC /pt-BR/docs/conflicting/Web/API/WebRTC_API /pt-BR/docs/WebRTC/navigator.getUserMedia /pt-BR/docs/Web/API/Navigator/getUserMedia /pt-BR/docs/WebSockets /pt-BR/docs/Web/API/WebSockets_API /pt-BR/docs/WebSockets/Escrevendo_aplicacoes_cliente_WebSocket /pt-BR/docs/Web/API/WebSockets_API/Writing_WebSocket_client_applications /pt-BR/docs/WebSockets/Writing_WebSocket_server /pt-BR/docs/Web/API/WebSockets_API/Writing_WebSocket_server /pt-BR/docs/WebSockets/Writing_WebSocket_servers /pt-BR/docs/Web/API/WebSockets_API/Writing_WebSocket_servers -/pt-BR/docs/Web_Development/Mobile /pt-BR/docs/conflicting/Web/Guide/Mobile -/pt-BR/docs/Web_Development/Mobile/Design_responsivo /pt-BR/docs/conflicting/Web/Progressive_web_apps /pt-BR/docs/Web_Development/Mobile/Mobile-friendliness /pt-BR/docs/Web/Guide/Mobile/Mobile-friendliness /pt-BR/docs/Web_Development/Mobile/Sites_separados /pt-BR/docs/Web/Guide/Mobile/Separate_sites /pt-BR/docs/XHTML /pt-BR/docs/Glossary/XHTML /pt-BR/docs/c_temp /pt-BR/docs/Web/API/Console -/pt-BR/docs/desenvolvimento_web /pt-BR/docs/conflicting/Web/Guide /pt-BR/docs/dez_anos_de_MDN /pt-BR/docs/MDN/At_ten /pt-BR/docs/en /en-US/ /pt-BR/docs/mask /pt-BR/docs/Web/CSS/mask 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 deleted file mode 100644 index 24d7a8a170..0000000000 --- a/files/pt-br/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html +++ /dev/null @@ -1,129 +0,0 @@ ---- -title: Cascata e herança -slug: conflicting/Learn/CSS/Building_blocks/Cascade_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 -original_slug: Web/CSS/Getting_Started/Cascading_and_inheritance ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "How CSS works.")}}Essa é a quarta seção do <span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">Primeiros Passos (Tutorial CSS)</a>; 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.</span></p> - -<h2 class="clearLeft" id="Informação_Cascata_e_Herança">Informação: Cascata e Herança</h2> - -<p>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.</p> - -<p>Existem três fontes principais de estilos que constituem a cascata. São elas:</p> - -<ul> - <li>Os estilos padrões do navegador;</li> - <li>Os estilos especificados pelos usarios que estão lendo o documento;</li> - <li>Os estilos criados pelo desenvolvedor. Que podem ser incluidos em três locais: - <ul> - <li>Em um arquivo externo: Este tutorial utiliza principalmente este método de definição de estilos</li> - <li>No inico do documento: Este método é usado apenes para estilos que se aplicam a uma única página.</li> - <li>Em um elemento específico: Este método é pouco recomendado, mas pode ser utilizado para testes.</li> - </ul> - </li> -</ul> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type">Exemplo</div> - -<p>Quando você ler este documento em um navegador, parte dos estilos dele são definidos pelo próprio navegador.</p> - -<p>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 <code>userContent.css</code> do seu navegador.</p> - -<p>Parte dos estilos vem de folhas de estilo ligadas ao documento pelo servidor da wiki.</p> -</div> - -<p>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.</p> - -<p>Os {{ HTMLElement("strong") }} são vermelhos. Isto vem da sua própria folha de estilo (previamente definida).</p> - -<p>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.</p> - -<p>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.</p> - -<p>Para estilos herdados, o estilo próprio de um nó filho tem prioridade sobre estilo herdado de seu pai.</p> - -<p>Estas não são as únicas prioridades a serem aplicadas. Mais tarde, uma página deste tutorial explicará.</p> - -<p>Mais detalhes</p> - -<div class="tuto_details"> -<p>CSS também fornece uma maneira para que o leitor anule o estilo do autor do documento, usando a palavra-chave! Important. </p> - -<p>Isto significa que, como autor do documento, você não poderá prever exatamente o que os leitores irão ver.</p> - -<p>Se você quiser saber todos os detalhes da cascata e herança, consulte <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> na especificação do CSS</p> -</div> - -<h2 id="Ação_Usando_herança">Ação: Usando herança</h2> - -<ol> - <li>Edite o seu arquivo CSS.</li> - <li>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: - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>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") }}.<br> - - <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") }}.</p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> -</table> - -<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> - <caption>Antes</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <caption>Depois</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type">Desafio</div> -Mude o seu estilo de modo que somente as letras vermelhas sublinhadas: - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução do desafio.</a></div> - -<h2 id="Qual_o_próximo">Qual o próximo?</h2> - -<p>{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">seletores</a>.</p> 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 deleted file mode 100644 index 4555e39b04..0000000000 --- a/files/pt-br/conflicting/learn/css/building_blocks/selectors/index.html +++ /dev/null @@ -1,431 +0,0 @@ ---- -title: Seletores -slug: conflicting/Learn/CSS/Building_blocks/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors -original_slug: Web/CSS/Getting_Started/Seletores ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span class="seoSummary">Esta é a 5ª seção de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">Primeiros passos (Tutorial Css)</a>, 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.</span></p> - -<h2 class="clearLeft" id="Informações_Seletores">Informações: Seletores</h2> - -<p>CSS tem sua propria terminologia para descrever a linguagem CSS. Anteriormente nesse tutorial, você criou linha no seu stylesheet como esta:</p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p>No CSS, este código inteiro é uma <em>regra</em>. Esta regra inicia com <code>strong</code>, que é um <em>seletor</em>. Ele seleciona os elementos do DOM aos quais a regra se aplica.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mais detalhes</div> - -<p>A parte dentro das chaves é a <em>declaração</em>.</p> - -<p>A palavra-chave <code>color</code> é uma <em>propriedade e</em> <code>red</code> é um <em>valor</em>.</p> - -<p>O ponto e vírgula depois do par propriedade-valor o separa de outros pares propriedade-valor na mesma declaração.</p> - -<p>Esse tutorial se refere ao seletor <code>strong</code> como um seletor de <em>tag</em>. A Especificação do CSS se refere a este seletor como seletor de <em>tipo</em>.</p> -</div> - -<p>Esta página de tutorial explica mais sobre os seletores que você pode utilizar nas regras CSS.</p> - -<p>Em adição aos nomes das tags, você pode usar valores de atributos nos seletores. Isso permite que as regras sejam mais específicas.</p> - -<p>Dois atributos são especiais para o CSS. São eles o <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> e o <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> - -<h3 id="Seletores_com_Classe">Seletores com Classe</h3> - -<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> 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.</p> - -<p>Em seu CSS, digite um ponto final antes do nome da classe para usar como um seletor.</p> - -<h3 id="Seletores_com_ID">Seletores com ID</h3> - -<p>Use o atributo <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> em um elemento para atribuir um ID a esse elemento. O nome do ID é de sua escolha e ele deve ser único no documento.</p> - -<p>Em seu CSS, digite cerquilha <strong>(#)</strong> antes do ID quanto estiver usando em um seletor ID.</p> - -<div class="tuto_example"> -<div class="tuto_type">Exemplo</div> -Esta tag HTML tem tanto um atributo <code>class</code> quanto um atributo <code>id</code>: - -<pre class="brush: html"><p class="chave" id="principal"> -</pre> - -<p>O valor de <strong>id</strong>, <code>principal</code>, precisa ser unico no documento, mas outras tags no documento podem ter o atributo <strong>class</strong> com o mesmo nome, <code>chave</code>.</p> - -<p>Em uma folha de estilo CSS, esta regra torna verde todos os elementos da classe <code>chave</code>. (Eles podem ou não serem elementos {{ HTMLElement("p") }}.)</p> - -<pre class="brush: css">.chave { - color: green; -} -</pre> - -<p>Esta regra torna negrito um elemento com <strong>id</strong> <code>principal</code>:</p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<h3 id="Seletores_de_Atributo">Seletores de Atributo</h3> - -<p>Você não está restrito aos dois atributos especiais, class e id. Você pode especificar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors">outros atributos</a> 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:</p> - -<dl> - <dt><code>[disabled]</code></dt> - <dd>Seleciona todos os elementos com o atributo "disabled".</dd> - <dt><code>[type='button']</code></dt> - <dd>Seleciona todos os elementos do tipo "button".</dd> - <dt><code>[class~=key]</code></dt> - <dd><font><font>Seleciona elementos com a classe "key" (mas não ex: "keyed", "monkey", "buckeye"). </font><font>Funcionalmente equivalente a </font></font><code>.key</code><font><font>.</font></font></dd> - <dt><code>[lang|=es]</code></dt> - <dd>Selects elements specified as Spanish. This includes "es" and "es-MX" but not "eu-ES" (which is Basque).</dd> - <dt>[title*="example" i]</dt> - <dd><font>Seleciona elementos cujo título contém "exemplo", ignorando maiúsculas e minúsculas. </font><font>Nos navegadores que não suportam o sinalizador "i", esse seletor provavelmente não corresponderá a nenhum elemento.</font></dd> - <dt><code>a[href^="https://"]</code></dt> - <dd>Seleciona links seguros.</dd> - <dt><code>img[src$=".png"]</code></dt> - <dd>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.</dd> -</dl> - -<h3 id="Seletores_de_pseudo-classes">Seletores de pseudo-classes</h3> - -<p><font><font>Uma </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes" title="pt-BR / docs / Web / Guide / CSS / Pseudo-classes"><font><font>pseudo-classe</font></font></a><font><font> em CSS </font><font>é uma palavra-chave adicionada aos seletores que especifica um estado especial do elemento a ser selecionado. </font><font>Por exemplo </font></font> {{ Cssxref(":hover") }}, aplicará um estilo quando o usuário passar o mouse sobre o elemento especificado pelo seletor.</p> - -<p>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 <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type">Syntax</div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="Lista_de_pseudo-classes">Lista de pseudo-classes</h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":last-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="Informação_Especificidade">Informação: Especificidade</h2> - -<p>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 <a href="/en-US/docs/Web/CSS/Specificity">específico</a>. 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.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mais detalhes</div> - -<p>Você também pode combinar seletores, fazendo um seletor mais específico. Por exemplo, o seletor <code>.key</code> seleciona todos os elementos que têm a classe com o nome <code>key</code>. O seletor <code>p.key</code> seleciona só os elementos {{ HTMLElement("p") }} nomeados com a classe <code>key</code>.</p> -</div> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Information_Selectors_based_on_relationships">Information: Selectors based on relationships</h2> - -<p>CSS has some ways to select elements based on the relationships between elements. You can use these to make selectors that are more specific.</p> - -<table id="relselectors"> - <caption>Common selectors based on relationships</caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>Selector</strong></td> - <td><strong>Selects</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td>Any E element that is a <em>descendant</em> of an A element (that is: a child, or a child of a child, <em>etc</em>.)</td> - </tr> - <tr> - <td><code>A > E</code></td> - <td>Any E element that is a <em>child</em> (i.e. direct descendant) of an A element</td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td>Any E element that is the <em>first child</em> of its parent</td> - </tr> - <tr> - <td><code>B + E</code></td> - <td>Any E element that is the next <em>sibling</em> of a B element (that is: the next child of the same parent)</td> - </tr> - </tbody> -</table> - -<p>You can combine these to express complex relationships.</p> - -<p>You can also use the symbol <code>*</code> (asterisk) to mean "any element".</p> - -<div class="tuto_example"> -<div class="tuto_type">Example</div> - -<p>An HTML table has an <code>id</code> attribute, but its rows and cells do not have individual identifiers:</p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p>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:</p> - -<pre class="brush:css"> #data-table-1 td:first-child {text-decoration: underline;} - #data-table-1 td:first-child + td {text-decoration: line-through;} -</pre> - -<p>The result looks like:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <table style="margin-right: 2em; width: 18em;"> - <tbody> - <tr> - <td><u>Prefix</u></td> - <td><s>0001</s></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type">More details</div> - -<p>In the usual way, if you make a selector more specific, then you increase its priority.</p> - -<p>If you use these techniques, you avoid the need to specify <code>class</code> or <code>id</code> attributes on so many tags in your document. Instead, CSS does the work.</p> - -<p>In large designs where speed is important, you can make your stylesheets more efficient by avoiding complex rules that depend on relationships between elements.</p> - -<p>For more examples about tables, see <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> in the CSS Reference page.</p> -</div> - -<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> - -<ol> - <li>Edit your HTML file, and duplicate the paragraph by copying and pasting it.</li> - <li>Then add <strong>id</strong> and <strong>class</strong> attributes to the first copy, and an <strong>id</strong> attribute to the second copy as shown below. Alternatively, copy and paste the entire file again: - <pre class="brush: html"><!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> -</pre> - </li> - <li>Now edit your CSS file. Replace the entire contents with: - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li>Save the files and refresh your browser to see the result: - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>You can try rearranging the lines in your CSS file to show that the order has no effect.</p> - - <p>The class selectors <code>.carrot</code> and <code>.spinach</code> have priority over the tag selector <code>strong</code>.</p> - - <p>The ID selector <code>#first</code> has priority over the class and tag selectors.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Challenges</div> - -<ol> - <li>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: - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li>Now change the rule you have just added (without changing anything else), to make the first paragraph blue too: - <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> - -<ol> - <li>Create an HTML file with following content: - <pre class="brush: html"><!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> -</pre> - </li> - <li>Now edit your CSS file. Replace the entire contents with: - <pre class="brush: css">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; -} -</pre> - </li> - <li>Save the files and refresh your browser to see the result (put the mouse over the following link to see the effect): - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="Action_Using_selectors_based_on_relationships_and_pseudo-classes">Action: Using selectors based on relationships and pseudo-classes</h2> - -<p>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 <strong>pure-CSS dropdown menus</strong> (that is only CSS, without using <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). The essence of this technique is the creation of a rule like the following:</p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p>to be applied to an HTML structure like the following:</p> - -<pre class="brush: html"><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> -</pre> - -<p>See our complete <a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> for a possible cue.</p> - -<h2 id="What_next">What next?</h2> - -<p>Your sample stylesheet is starting to look dense and complicated. The next section describes ways to make CSS <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> 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 deleted file mode 100644 index 6a66017083..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/how_css_works/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Como o CSS funciona -slug: conflicting/Learn/CSS/First_steps/How_CSS_works -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 -original_slug: Web/CSS/Getting_Started/Como_CSS_funciona ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?") }} Essa terceira seção do tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 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. </span></p> - -<h2 class="clearLeft" id="Informação_Como_o_CSS_funciona">Informação: Como o CSS funciona</h2> - -<p>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:</p> - -<ol> - <li>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.</li> - <li>O navegador exibe o conteúdo do DOM.</li> -</ol> - -<p>Uma linguagem de marcação utiliza elementos para definir a estrutura do documento. Você marca um elemento usando <em>tags</em>, que são sequências que começam com '<' e terminam com '>'. A maioria dos elementos possui <em>tags </em>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type">Exemplo</div> -No seu documento de exemplo, a tag <p> e seu final </p> criam um recipiente: - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="Exemplo_em_tempo_real">Exemplo em tempo real</h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p>No Dom, o nó 'P' correspondente é um pai. Seus filhos são os nós '<em>strongs</em>' e os nós de texto. Os nós <em>'strong'</em> são eles próprios pais, com nós de texto como filhos.</p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Ação_Analisando_um_DOM">Ação: Analisando um DOM</h2> - -<h3 id="Utilizando_Inspetor_DOM">Utilizando Inspetor DOM</h3> - -<p>Para analisar um DOM, você precisa de um programa especial. Você pode utilizar o add-on <a href="/en/DOM_Inspector" title="en/DOM_Inspector">Inspetor DOM</a> do Mozilla (DOMi) para analisar um DOM. Você apenas precisa instalar o add-on (veja mais detalhes abaixo).</p> - -<ol> - <li>Use seu navegador Mozilla para abrir seu documento HTML de exemplo.</li> - <li>Na barra de menu do seu navegador, escolha <strong>Ferramentas > Inspetor DOM</strong>, ou <strong>Ferramentas > Desenvolvimento Web > Inspetor DOM</strong>. - <div class="tuto_details"> - <div class="tuto_type">Mais detalhes</div> - - <p>Se o seu navegador Mozilla não ter o DOMi, você pode <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622/" title="https://addons.mozilla.org/en-US/firefox/addon/6622/">instalá-lo a partir do site de Add-ons </a> e reiniciar seu navegador. Depois, retorne para esse tutorial.</p> - - <p>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.</p> - </div> - </li> - <li>No DOMi, expanda o nó do seu documento clicando em suas flechas. - <p><strong>Nota: </strong> Espaçamentos em seu HTML pode fazer com que DOMi mostre alguns nós vazios de textos, que você pode ignorar.</p> - - <p>Parte do resultado você deverá ficar como mostrado abaixo, dependendo de qual nó você tenha expandido:</p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p>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.</p> - - <p>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.</p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Desafio</div> - -<p>No DOMi, clique em um nó <em><strong><small>STRONG</small></strong></em>.</p> - -<p>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.</p> - - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para o desafio.</a></div> - -<h3 id="Usando_Raio-X_Goggles_da_Web">Usando Raio-X Goggles da Web</h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web </a>exibe menos informação do que o Inspetor DOM, mas é mais simples de instalar e usar.</p> - -<ol> - <li>Vá para a página inicial do <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Raio-X Goggles da Web</a>.</li> - <li>Arraste o link do <em>bookmarklet </em>na página para a barra de ferramentas do seu navegador.</li> - <li>Abra o seu documento HTML de exemplo.</li> - <li>Ative o Raio-X Goggles da Web clicando no <em>bookmarklet </em>na sua barra de ferramentas.</li> - <li>Mova o ponteiro do mouse ao redor sobre o documento para ver os elementos.</li> -</ol> - -<h2 id="O_que_vem_depois">O que vem depois?</h2> - -<p>{{ 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 <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">próxima página</a> explica mais sobre essas interações.</p> 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 deleted file mode 100644 index 8050022bae..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_199dae2aa1447fa94457a213c989744d/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: O que é CSS -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_199dae2aa1447fa94457a213c989744d -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS -original_slug: Web/CSS/Getting_Started/Oque_é_CSS ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{previousPage("/en-US/docs/CSS/Getting_Started", "Getting started")}} Esta é a primeira seção do tutorial de <span class="seoSummary"> i<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">ntrodução as CSS </a> e explica o que é CSS. Você criará um documento simples para trabalhar com CSS nelas nas próximas seções.</span></p> - -<h2 class="clearLeft" id="O_que_é_CSS">O que é CSS ?</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) é uma linguagem para especificar como os documentos são apresentados aos usuários (Estilo do documento).</p> - -<p>Um <em>documento</em> é um conjunto de informações que são estruturadas utilizando uma <em>linguagem de marcação</em>.</p> - -<div class="tuto_example"> -<div class="tuto_type">Examples</div> - -<ul> - <li>Um documento, é uma página da web como esta que você está lendo.<br> - A informação que você vê em uma página web é geralmente estruturado utilizando a linguagem de marcação HTML (HyperText Markup Language).</li> - <li>Dialogos, também chamados de Janelas Modais de um aplicativo, são frequentemente documentos.<br> - Tais diálogos podem também ser estruturados usando linguagem de marcação, como XUL. Este é frequentemente o caso em aplicações Mozilla, mas não é um caso comum.</li> -</ul> -</div> - -<p>Neste tutorial, temos boxes com o título <strong>Mais detalhes c</strong>omo 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.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mais detalhes</div> - -<p>Um documento não é a mesma coisa que um arquivo, ele pode ou não estar armazenado em um arquivo.</p> - -<p>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.</p> - -<p>Para mais informações sobre documentos e linguagens de marcação, consulte outras partes deste exemplo de site de web:</p> - -<table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en/HTML" title="en/HTML">HTML</a></td> - <td>para paginas web</td> - </tr> - <tr> - <td><a href="/en/XML" title="en/XML">XML</a></td> - <td>para documentos estruturados em geral</td> - </tr> - <tr> - <td><a href="/en/SVG" title="en/SVG">SVG</a></td> - <td>para gráficos</td> - </tr> - <tr> - <td><a href="/en/XUL" title="en/XUL">XUL</a></td> - <td>para interfaces de usuários em Mozilla</td> - </tr> - </tbody> -</table> - -<p>Na Parte II deste tutorial você verá exemplos dessas linguagens de marcação.</p> -</div> - -<p><em>Apresentar</em> 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.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mais detalhes</div> - -<p>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 <em>user agent</em> (UA), no Brasil <span style="background-color: rgb(244, 244, 244);"><em>agente de usuário</em></span>. Um navegador é apenas um UA. No entanto, na parte I deste Tutorial você vai apenas trabalhar com CSS no navegador.</p> - -<p>Para mais definições formais sobre terminologia relacionadas com CSS, veja <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definições</a> na especificação CSS.</p> -</div> - -<h2 id="Ação_Criando_um_documento">Ação: Criando um documento</h2> - -<ol> - <li>Use seu computador para criar um novo diretório e um novo arquivo de texto dentro deste dire†ório. O arquivo terá o documento.</li> - <li>Copie e cole o código HTML abaixo . Salve o arquivo usando o nome <code>doc1.html</code> - <pre class="brush: 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> -</pre> - </li> - <li>No seu navegador, abra uma nova aba ou uma nova janela, e abra o arquivo que você acabou de salvar. - <p>Você deve ver o texto com as letras iniciais em negrito, como este:</p> - - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>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.</p> - </li> -</ol> - -<h2 id="O_que_veremos_depois">O que veremos depois?</h2> - -<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Seu documento ainda não usa CSS. Na <a href="/en-US/docs/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/CSS/Getting_Started/Why_use_CSS">próxima seção</a> você usará CSS para especificar o estilo.</p> 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 deleted file mode 100644 index cf66eb6b51..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/how_css_works_61240ddc35a4ddd533ea33cc8ccf1c87/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Por que usar CSS? -slug: >- - conflicting/Learn/CSS/First_steps/How_CSS_works_61240ddc35a4ddd533ea33cc8ccf1c87 -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS -original_slug: Web/CSS/Getting_Started/Porque_usar_CSS ---- -<p><span style="line-height: 1.5;">{{ CSSTutorialTOC() }}</span></p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}<span class="seoSummary">Esta segunda parte do <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">CSS Getting Started</a> 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.</span></p> - -<h2 class="clearLeft" id="Informação_Por_que_usar_CSS">Informação: Por que usar CSS?</h2> - -<p>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.</p> - -<p>Uma folha de estilo externa, tem muitas vantagens.:</p> - -<ul> - <li>Ajuda a evitar código repetido</li> - <li>Facilita a manutenção</li> - <li>Permite fazer mudança no site inteiro alterando apenas um arquivo.</li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type">Exemplo</div> - -<p>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..</p> - -<p>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.</p> - -<p>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.</p> -</div> - -<p>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.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mais detalhes</div> - -<p>Uma linguagem de marcação como HTML também fornece maneiras de especificar estilo.</p> - -<p>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>.</p> - -<p>Quando você usa CSS, normalmente evita usar esses recursos da linguagem de marcação, para deixar informações de estilo em um unico lugar.</p> -</div> - -<h2 id="Ação_Criando_uma_folha_de_estilo">Ação: Criando uma folha de estilo</h2> - -<ol> - <li><span id="result_box" lang="pt"><span class="hps">Crie outro</span> <span class="hps">arquivo de texto</span> <span class="hps">no mesmo</span> <span class="hps">diretório que o documento</span> <span class="hps">doc1.html</span> <span class="hps">você criou</span> <span class="hps">na primeira seção</span><span>.</span></span></li> - <li>Salve seu documento como: <code>style1.css</code>. Este arquivo será sua folha de estilos.</li> - <li>Em seu CSS, cole a linha abaixo, e salve o arquivo: - <pre class="brush: css">strong {color: red;} -</pre> - </li> -</ol> - -<h3 id="Linkando_seu_documento_para_sua_folha_de_estilo">Linkando seu documento para sua folha de estilo</h3> - -<ol> - <li>Para linkar seu documento para sua folha de estilos, edite seu arquivo HTML. Adicionando o código abaixo: - <pre class="brush: html; highlight:[6];"><!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> -</pre> - </li> - <li>Salve o arquivo e atualize seu navegador. Sua folha de estilos fez com que as letras iniciais ficassem vermelhas: - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td><span style="color: red;"><strong>C</strong></span>ascading <span style="color: red;"><strong>S</strong></span>tyle <span style="color: red;"><strong>S</strong></span>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<p>{{ LiveSampleLink('Action.3A_Creating_a_stylesheet', 'View above Demo') }}</p> - -<div class="tuto_example" id="challenge"> -<div class="tuto_type">Desafio</div> - -<p>Além do vermelho, as CSS permitem que você escolha alguns outros nomes de cores.</p> - -<p>Encontre mais cinco nomes de cores que as CSS trabalham.</p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/en-US/docs/CSS/color_value" title="The CSS color data type">CSS Color value</a> for a complete list as well as other ways of specifying colors.</p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Veja a solução para este desafio.</a></div> - -<h2 id="O_que_veremos">O que veremos?</h2> - -<p>{{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 <a href="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works" title="/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works">aprender mais</a> sobre como seu navegador trabalha e exibe um documento.</p> diff --git a/files/pt-br/conflicting/learn/css/first_steps/index.html b/files/pt-br/conflicting/learn/css/first_steps/index.html deleted file mode 100644 index c5d5ad680c..0000000000 --- a/files/pt-br/conflicting/learn/css/first_steps/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Iniciando com o CSS -slug: conflicting/Learn/CSS/First_steps -tags: - - CSS - - Guia(2) - - Guía - - Iniciante - - Web -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started -original_slug: Web/CSS/Getting_Started ---- -<p> </p> - -<h2 id="Introdução">Introdução</h2> - -<p>Esse tutorial é uma introdução ao <em>Cascading Style Sheets</em> (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:</p> - -<ul> - <li>A Parte I ilustra as características padrão do CSS que funcionam em todos os navegadores Mozilla e também em qualquer outro dentre os mais modernos.</li> -</ul> - -<ul> - <li>A Parte II conta com alguns exemplos de características especiais que funcionam nos navegadores Mozilla mas não necessariamente em outros ambientes.</li> -</ul> - -<p>Esse tutorial é baseado na <a href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificação do CSS 2.1</a>.</p> - -<h3 id="Quem_deve_usar_esse_tutorial">Quem deve usar esse tutorial?</h3> - -<p>Esse tutorial é, principalmente, para iniciantes no CSS.</p> - -<p>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.</p> - -<p>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.</p> - -<p>Se você já é um desenvolvedor CSS experiente mas não com Mozilla, você pode pular para a parte II.</p> - -<h3 id="O_que_você_precisa_saber_antes_de_começar">O que você precisa saber antes de começar?</h3> - -<p>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.</p> - -<p>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.</p> - -<p>Algumas partes desse tutorial exigem outro software Mozilla, mas elas são opcionais. Se você não quiser baixar este outro software Mozilla, <strong>você pode ignorá-las</strong>. O software referenciado por esse tutorial inclui:</p> - -<ul> - <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> - -<p><strong>Nota: </strong>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.</p> - -<h3 id="Como_usar_esse_tutorial">Como usar esse tutorial</h3> - -<p>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.</p> - -<p>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.</p> - -<p>Para testar seu entendimento, faça o desafio do fim de cada página. <strong>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.</strong></p> - -<p>Para entender mais do CSS, leia as informações que você pode encontrar nos campos com a legenda <em>Mais detalhes</em> (<em>More details</em>). Utilize os links para encontrar informações de referência sobre o CSS.</p> - -<h2 id="Parte_I_do_Tutorial">Parte I do Tutorial</h2> - -<p>Uma guia básico passo a passo do CSS</p> - -<ol> - <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">O que é o CSS</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Porque usar o CSS</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como o CSS funciona</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascata e herança</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Seletores</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">CSS legível</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Estilos de texto</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Cores</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Conteúdo</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Listas</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Caixas</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tabelas</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Mídia</a></strong></li> -</ol> - -<h2 id="Parte_II_do_Tutorial">Parte II do Tutorial</h2> - -<p>Exemplos do uso do CSS juntamente com outras tecnologias</p> - -<ol> - <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">Gráficos SVG</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">Dados XML</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">Ligações XBL</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Interfaces de usuário XUL</a></strong></li> -</ol> - -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ 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" } ) }}</p> 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 deleted file mode 100644 index 6b1c4dcec9..0000000000 --- a/files/pt-br/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Utilizando áudio e vídeo com HTML5 -slug: conflicting/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video -original_slug: Web/HTML/Using_HTML5_audio_and_video ---- -<p style="margin-left: 40px;">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.</p> - -<h2 id="Incorporando_mídia">Incorporando mídia:</h2> - -<p>Incorporar mídia em documentos HTML é simples:</p> - -<pre class="brush: html"><video src="<a class="linkification-ext" href="http://v2v.cc/~j/theora_testsuite/320x240.ogg" title="Linkification: http://v2v.cc/~j/theora_testsuite/320x240.ogg">http://v2v.cc/~j/theora_testsuite/320x240.ogg</a>" controls> - Seu navegador não suporta o elemento <code>video</code>. -</video> -</pre> - -<p>Esse exemplo reproduz uma amostra de vídeo, com controles de reprodução, a partir do site Theora.</p> - -<p>Aqui há um exemplo de áudio incorporado em um documento HTML</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Seu nevegador não suporta o elemento audio.</p> -</audio> -</pre> - -<p>O atributo <code>src</code> pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.</p> - -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Seu navegador não suporta o elemento audio </p> -</audio> -</pre> - -<p>Esse exemplo de código usa atributos do elemento {{ HTMLElement("audio") }}:</p> - -<ul> - <li><code>controls</code> : Mostra os controles padrão para o áudio na página.</li> - <li><code>autoplay</code> : Faz com que o áudio reproduza automaticamente.</li> - <li><code>loop</code> : Faz com que o áudio repita automaticamente.</li> -</ul> - -<pre class="brush: html"><code><audio src="audio.mp3" preload="auto" controls></audio></code> -</pre> - -<p>O atributo <code>preload</code> é usado em elementos audio para carregar arquivos grandes. Ele pode assumir 3 valores:</p> - -<ul> - <li><code>"none"</code> não carrega o arquivo</li> - <li><code>"auto"</code> carrega o arquivo</li> - <li><code>"metadata"</code> carrega apenas os meta dados do arquivo</li> -</ul> - -<p>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:</p> - -<pre class="brush: html"><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> -</pre> - -<p>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 <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">media formats supported by the audio and video elements</a> para detalhes.</p> - -<p>Também é possível especificar os codecs que o arquivo de mídia requer; isso permite que o navegador faça escolhas mais inteligentes:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Seu navegador não suporta o elemento <code>video</code>. -</video></pre> - -<p>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.</p> - -<p>Se o atributo <code>type</code> 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 <code>source</code> é verificado. Se nenhum dos elementps <code>source</code> pode ser utilizado, um evento <code>error</code> é enviado para o elemento <code>video</code>. Se o atributo <code>type</code> 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 <code>source</code> é verificado.</p> - -<p>Veja <a href="/en/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">Media events</a> 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 <a href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a>.</p> - -<h2 id="Controlando_a_reprodução_de_mídia">Controlando a reprodução de mídia</h2> - -<p>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:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>A primeira linha pega o primeiro elemento video, e a segunda chama o método <a class="internal" href="/En/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="en/nsIDOMHTMLMediaElement#play()"><code>play()</code></a> do elemento, como definido na interface {{ interface("nsIDOMHTMLMediaElement") }}, que é utilizada para implementar elementos de mídia</p> - -<p>Controlando um reprodutor de áudio para reproduzir, pausar, aumentar e diminuir o volume usando JavaScript é simples.</p> - -<pre class="brush: html"><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> -</pre> - -<h2 id="Parando_o_download_de_mídia">Parando o download de mídia</h2> - -<p>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.</p> - -<p>Esta é um modo para parar o download imediatamente:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src = ""; -</pre> - -<p>Ao definir o atributo <code>src</code> do elemento de mídia para uma string vazia, o decodificador interno do elemento é destruído, o que para o download.</p> - -<h2 id="Navegando_pela_mídia">Navegando pela mídia</h2> - -<p>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 <code>currentTime</code> 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.</p> - -<p>Você pode usar a propriedade <code>seekable</code> 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.</p> - -<pre class="brush: js">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 -</pre> - -<h2 id="Especificando_o_intervalo_de_reprodução">Especificando o intervalo de reprodução</h2> - -<p>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.</p> - -<p>O intervalo é especificado usando a sintaxe:</p> - -<pre>#t=[tempoinicial],[tempofinal] -</pre> - -<p>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).</p> - -<p>Alguns exemplos:</p> - -<dl> - <dt><span class="nowiki">http://foo.com/video.ogg#t=10,20</span></dt> - <dd>Especifica que o intervalo entre 10 e 20 segundos deve ser reproduzido.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,10.5</span></dt> - <dd>Especifica que o vídeo deve ser reproduzido do início até 10,5 segundos.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=,02:00:00</span></dt> - <dd>Especifica que o vídeo deve ser reproduzido do início até 2 horas.</dd> - <dt><span class="nowiki">http://foo.com/video.ogg#t=60,</span></dt> - <dd>Especifica que o vídeo deve começar aos 60 segundos e ser reproduzido até o final.</dd> -</dl> - -<div class="geckoVersionNote" style=""> -<p>{{ gecko_callout_heading("9.0") }}</p> - -<p>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 <a class="external" href="http://www.w3.org/TR/media-frags/" title="http://www.w3.org/TR/media-frags/">Media Fragments URI specification</a> implementada pelo Gecko, e somente pode ser utilizada para especificar a fonte dos elementos media, e não na barra de endereço.</p> -</div> - -<h2 id="Opções_alternativas">Opções alternativas</h2> - -<p>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.</p> - -<p>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.</p> - -<h3 id="Utilizando_Flash">Utilizando Flash</h3> - -<p>Você pode utilizar Flash para reproduzir um vídeo no formato Flash caso o elemento {{ HTMLElement("video") }} não seja suportado:</p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video> -</pre> - -<p>Note que você não deve incluir <code>classid</code> na tag <code>object</code> para que outros navegadores além do Internet Explorer sejam compatíveis.</p> - -<h3 id="Reproduzindo_vídeos_em_Ogg_usando_uma_applet_Java">Reproduzindo vídeos em Ogg usando uma applet Java</h3> - -<p>Existe uma applet Java chamada <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> 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:</p> - -<pre class="brush: html"><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> -</pre> - -<p>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.</p> - -<p>{{ h1_gecko_minversion("Error handling", "2.0") }}</p> - -<p>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 <code>error</code> ser enviado ao elemento media, ele é enviado ao elemento filho {{ HTMLElement("source") }} correspondente às fontes em que ocorreram o erro.</p> - -<p>Isso permite que você detecte que fonte falhou, o que pode ser útil. Considere esse código HTML:</p> - -<pre class="brush: 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></pre> - -<p>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 <code>error</code> 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.</p> - -<h3 id="Detectando_quando_nenhuma_fonte_foi_carregada">Detectando quando nenhuma fonte foi carregada</h3> - -<p>Para detectar que todos os elementos filhos {{ HTMLElement("source") }} falharam, confira os valores do atributo <code>networkState</code> do elemento media. Se esse valor for <code>HTMLMediaElement.NETWORK_NO_SOURCE</code>, você saberá que todas as fontes falharam o carregamento.</p> - -<p>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.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>Os elementos HTML relacionados a mídia: {{ HTMLElement("audio") }}, {{ HTMLElement("video") }}, {{ HTMLElement("source") }};</li> - <li><a class="internal" href="/En/Manipulating_video_using_canvas" title="En/Manipulating video using canvas">Manipulating video using canvas</a></li> - <li><a href="/en/Introducing_the_Audio_API_Extension" title="en/Introducing the Audio API Extension">Introducing the Audio API Extension</a></li> - <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> - <li><a class="internal" href="/En/Media_formats_supported_by_the_audio_and_video_elements" title="En/Media formats supported by the audio and video elements">Media formats supported by the audio and video elements</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" title="http://popcornjs.org/">Popcorn.js - The HTML5 Media Framework</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" title="http://www.html5video.org/kaltura-html5/">Kaltura Video Library Solution</a>, uma biblioteca JavaScript (mwEmbed) que suporta alternativas de reprodução utilizando HTML5, VLC Player, Java Cortado e OMTK Flash Vorbis player. (É utilizado pela Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" title="http://omtk.org/flash/index.html">OMTK - Flash</a>, uma biblioteca Flash que implementa um decodificador Vorbis</li> - <li><a class="external" href="http://www.projekktor.com" title="http://www.projekktor.com">Projekktor Player</a>, um wrapper em JavaScript para áudio e vídeo com alternativas de reprodução em flash, open source e GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" title="http://www.theora.org/cortado/">Applet Cortado</a>, uma solução para reprodução de áudio e vídeo em Java, mantido pelo Xiph.org</li> - <li><a class="external" href="http://videojs.com" title="Video.js HTML5 Video Player">Video.JS</a>, uma framework e reprodutor de mídia para HTML5(open source).</li> - <li><a class="external" href="http://mediaelementjs.com/" title="http://mediaelementjs.com/">MediaElement.js</a> - framework aberta para áudio e vídeo em HTML5 com uma biblioteca Flash customizada que imita a API de HTML5 para navegadores antigos</li> - <li><a class="external" href="http://www.hdwebplayer.com" title="http://www.hdwebplayer.com">Flv Player</a> - uma player de vídeo alternativo para HTML5</li> -</ul> - -<p>{{ HTML5ArticleTOC() }}</p> - -<div>{{ 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" }) }}</div> diff --git a/files/pt-br/conflicting/learn/javascript/objects/index.html b/files/pt-br/conflicting/learn/javascript/objects/index.html deleted file mode 100644 index 76ab6bff3d..0000000000 --- a/files/pt-br/conflicting/learn/javascript/objects/index.html +++ /dev/null @@ -1,353 +0,0 @@ ---- -title: Introdução ao JavaScript Orientado a Objeto -slug: conflicting/Learn/JavaScript/Objects -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 -original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<p>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.</p> - -<p>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.</p> - -<h2 id="JavaScript_Review" name="JavaScript_Review">Revisão do Javascript</h2> - -<p>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 <a href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Uma reintrodução ao JavaScript</a>. Você também pode consultar o <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Core JavaScript 1.5 Guide</a>.</p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming">Programação Orientada a Objetos</h2> - -<p>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).</p> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Terminology" name="Terminology"><span class="short_text" id="result_box" lang="pt"><span class="hps">Terminologia</span></span></h2> - -<dl> - <dt>Namespaces</dt> - <dd>Um recipiente que permite empacotar todas as funcionalidades em um nome único e específico da aplicação.</dd> -</dl> - -<dl> - <dt>Classe</dt> - <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Define as</span> <span class="hps">características do objeto</span><span>.</span></span> Uma classe é uma definição modelo das propriedades e métodos de um objeto.</dd> - <dt>Objeto</dt> - <dd><span class="short_text" id="result_box" lang="pt"><span class="hps">Um exemplar</span><span class="hps"> de uma classe</span><span>.</span></span></dd> - <dt><span class="short_text" id="result_box" lang="pt"><span class="hps">Atributo</span></span></dt> - <dd>Uma característica do objeto, como cor, modelo, fabricante se estivemos representando um veículo, por exemplo.</dd> - <dt>Método</dt> - <dd>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.</dd> - <dt>C<span class="short_text" id="result_box" lang="pt"><span class="hps">onstrutor</span></span></dt> - <dd>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.</dd> - <dt>Herança</dt> - <dd>Uma classe pode herdar características de outra classe.</dd> - <dt>Encapsulamento</dt> - <dd>Uma maneira de agrupar os dados e os métodos que usam os dados.</dd> - <dt>Abstração</dt> - <dd>A conjunção de herança complexa, métodos, propriedades de um objeto devem refletir adequadamente um modelo da realidade.</dd> - <dt>Polimorfismo</dt> - <dd>Diferentes classes podem definir o mesmo método ou propriedade.</dd> -</dl> - -<p>Para uma descrição mais extensiva sobre programação orientada a objetos, veja <a href="http://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos">Orientação a objetos</a> na Wikipédia.</p> - -<h2 id="Programação_Baseada_em_Protótipos">Programação Baseada em Protótipos</h2> - -<p>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 <em>protótipos</em>. Este modelo também é conhecido como <strong>sem classes</strong>, <strong>orientado a protótipo</strong>, ou <strong>programação baseada em exemplares.</strong></p> - -<p>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 <em>framework </em>Viewer para manipular componentes do Morphic) e várias outras.</p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming">Programação Orientada a Objetos em Javascript</h2> - -<h3 id="Namespaces">Namespaces</h3> - -<p>Um namespace é um recipiente que permite aos desenvolvedores agrupar funcionalidades em um único nome específico para uma aplicação. <strong>Em JavaScript, um namespace é simplesmente outro objeto contendo métodos, propriedades e objetos.</strong></p> - -<div class="note"> -<p><strong>Nota: </strong>É 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).</p> -</div> - -<p>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.</p> - -<p>Vamos criar um objeto global chamado MEUAPP:</p> - -<pre class="brush: js notranslate">// namespaces global -var MEUAPP = MEUAPP || {};</pre> - -<p>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</p> - -<p>Podemos também criar sub-espaços de nomes.</p> - -<pre class="brush: js notranslate"><code>// sub namespaces -MEUAPP.eventos = {};</code></pre> - -<p>A seguir, temos a sintaxe para criar um namespace e adicionar variáveis, funções e um método:</p> - -<pre class="notranslate">// 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);</pre> - -<h3 id="Core_Objects" name="Core_Objects">Objetos inclusos por padrão</h3> - -<p>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().</p> - -<pre class="brush: js notranslate">console.log(Math.random()); -</pre> - -<div class="note"><strong>Nota:</strong> Este e todos os exemplos a seguir presumem que uma função <strong><code>console.log() </code></strong>está definida globalmente. A função <code><strong>console.log() </strong></code>não faz parte do JavaScript em si, mas muitos navegadores a implementam para ajudar no processo de depuração.</div> - -<p>Veja <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core_JavaScript_1.5_Reference/Global_Objects">Core JavaScript 1.5 Reference:Global Objects</a> para a lista dos objetos inclusos por padrão em JavaScript.</p> - -<p>Cada objeto em JavaScript é um exemplar do objeto <code>Object</code> e, portanto, herda todas as suas propriedades e métodos.</p> - -<h3 id="Custom_Objects" name="Custom_Objects">Objetos Personalizados</h3> - -<h4 id="The_Class" name="The_Class">A Classe</h4> - -<p>JavaScript é uma linguagem baseada em protótipos e não contém a declaração <strong><code>class</code></strong>, 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.</p> - -<pre class="notranslate"><code>var Pessoa = function () {};</code></pre> - -<p class="brush: js">O objeto (exemplar de uma classe)</p> - -<p>Para criar um novo exemplar de um objeto <code><strong>obj</strong></code><em>, </em>usamos a declaração <code><strong>new obj</strong></code><em>, </em>atribuindo o resultado<em> </em>(que é do tipo <strong><code>obj</code></strong>) a uma variável que será acessada depois.<em> </em></p> - -<p>No exemplo acima, definimos uma classe chamada <strong>Pessoa</strong>. No exemplo abaixo, criamos dois exemplares (<code><strong>pessoa1</strong></code> e <code><strong>pessoa2</strong></code>).</p> - -<pre class="brush: js notranslate">var pessoa1 = new Pessoa(); -var pessoa2 = new Pessoa(); -</pre> - -<div class="note"><strong>Nota: </strong>Por favor, veja também <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="Object.create">Object.create</a> para um novo e alternativo método que cria um exemplar não-inicializado.</div> - -<h4 id="The_Constructor" name="The_Constructor">O Construtor</h4> - -<p>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.</p> - -<p>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.</p> - -<p>No exemplo abaixo, o construtor da classe <code>Pessoa</code> envia uma mensagem ao <em>log </em>quando um exemplar de <strong><code>Pessoa </code></strong>é criado.</p> - -<pre class="brush: js notranslate">var Pessoa = function () { - console.log("exemplar criado"); -} - -var pessoa1 = new Pessoa(); -var pessoa2 = new Pessoa(); -</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29">Propriedades (atributos de objetos)</h4> - -<p>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.</p> - -<p>A palavra-chave <code>this,</code> 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 <code>NomeDoExemplar.Propriedade</code>, 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.)</p> - -<pre class="brush: js notranslate">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</pre> - -<h4 id="The_methods" name="The_methods">Métodos</h4> - -<p>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 <code><strong>()</strong></code> 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 <strong><code>prototype</code></strong> da classe. Depois disso, você pode chamar o método do objeto usando o mesmo nome ao qual você atribuiu a função.</p> - -<p>No exemplo abaixo, definimos e usarmos o método <code><strong>dizerOla()</strong></code> na classe <code><strong>Pessoa</strong></code> .</p> - -<pre class="brush: js notranslate">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 -</pre> - -<p>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: </p> - -<pre class="brush: js notranslate">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 -</pre> - -<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a>, da seguinte maneira:</p> - -<pre class="brush: js notranslate">informaGenero.call(pessoa1); //alerts 'Masculino' -</pre> - -<div class="note">Veja mais sobre em <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/call">Function.call</a> e <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/apply">Function.apply</a></div> - -<h4 id="Inheritance" name="Inheritance">Herança</h4> - -<p>Herança é uma maneira de criar uma classe como uma versão especializados de uma ou mais classes (<em>JavaScript suporta apenas herança de classe única</em>). A classe especializada é comumente chamada de <em>filha</em>, e a outra classe é comumente chamada de <em>pai</em>. 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 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/create#Classical_inheritance_with_Object.create">Object.create</a> para implementar herança.</p> - -<div class="note"> -<p>JavaScript não detecta o <code>prototype.constructor</code> da classe filha, veja a propriedade <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>, então devemos declará-la manualmente.</p> -</div> - -<p>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().</p> - -<pre class="brush: js notranslate">// 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(); - -// <span id="result_box" lang="pt"><span class="hps">corrige</span> <span class="hps">o ponteiro</span> <span class="hps">construtor,</span> <span class="hps">que aponta para</span> <span class="hps">Pessoa</span></span> -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 -</pre> - -<p>Utilizando Object.create a linha de herança deveria ser:</p> - -<pre class="brush: js notranslate">Estudante<code class="js plain">.prototype = Object.create(</code>Pessoa<code class="js plain">.prototype);</code></pre> - -<h4 id="Encapsulation" name="Encapsulation">Encapsulamento</h4> - -<p>Em exemplo anterior, <code>Estudante</code> não precisava saber como <code>o método caminhar() da classe Pessoa</code> seria implementada, mas ainda pode utilizar esté método; a classe <code>Estudante</code> não possui necessidade <span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">explícita de </span></span>definir o método desde que não queremos alterar-lo. Isso se chama <strong>encapsulamento</strong>, <span id="result_box" lang="pt"><span class="hps">pelo qual</span> <span class="hps">cada</span> <span class="hps">classe herda</span> <span class="hps">os métodos de</span> <span class="hps">seu pai</span> <span class="hps">e só</span> <span class="hps">precisa definir</span> <span class="hps">as coisas</span> <span class="hps">que</span> <span class="hps">deseja</span> <span class="hps">mudar.</span></span></p> - -<h4 id="Abstraction" name="Abstraction">Abstração</h4> - -<p>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 <span class="short_text" id="result_box" lang="pt"><span class="hps">alcança</span> <span class="hps">especialização</span> <span class="hps">por herança</span></span>, e composição por deixando instâncias de classes ser os valores de atributos de outros objetos.</p> - -<p>A Função de classe do JavaScript é hedar da classe Object (<span class="short_text" id="result_box" lang="pt"><span class="hps">isso demonstra</span> <span class="hps">a especialização</span> <span class="hps">do modelo</span></span>). e a propriedade Function.prototype é uma instância de Object (isso demonstra composição)</p> - -<pre class="brush: js notranslate">var foo = function(){}; -alert( 'foo é um Function: ' + (foo instanceof Function) ); -alert( 'foo.prototype é um Object: ' + (foo.prototype instanceof Object) ); -</pre> - -<h4 id="Polymorphism" name="Polymorphism">Polimorfismo</h4> - -<p>Assim como todos os métodos e propriedades são definidos dentro da propriedade <code>prototype</code>, 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).</p> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>As técnicas apresentadas nesse artigo para implementar programação orientada objetos em JavaScript não são as únicas que podem ser usadas.</p> - -<p>As técnicas utilizadas nesse artigo não usam nenhum tipo de hacks, nem tenta implantar teorias de outras linguagens em JavaScript. </p> - -<p>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.</p> - -<h2 id="References" name="References">Referências</h2> - -<ol> - <li>Mozilla. "<a href="/docs/Web/JavaScript/Guide" title="/docs/Web/JavaScript/Guide">Core JavaScript 1.5 Guide</a>", https://developer.mozilla.org/docs/Web/JavaScript/Guide</li> - <li>Wikipedia. "Object-oriented programming", <a class="external" href="http://en.wikipedia.org/wiki/Object-oriented_programming" rel="freelink">http://en.wikipedia.org/wiki/Object-...ed_programming</a></li> -</ol> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information">Original Document Information</h2> - -<ul> - <li>Author(s): Fernando Trasviña <f_trasvina at hotmail dot com></li> - <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> -</ul> -</div> - -<p>Es: <a href="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos" title="https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos">https://developer.mozilla.org/es/docs/Introducción_a_JavaScript_orientado_a_objetos </a></p> diff --git a/files/pt-br/conflicting/mdn/contribute/getting_started/index.html b/files/pt-br/conflicting/mdn/contribute/getting_started/index.html deleted file mode 100644 index da98995df7..0000000000 --- a/files/pt-br/conflicting/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Como ajudar a MDN -slug: conflicting/MDN/Contribute/Getting_started -translation_of: MDN/Contribute/Getting_started -translation_of_original: MDN/Contribute/Tasks -original_slug: Projeto:Como_ajudar_com_MDN ---- -<div>{{MDNSidebar}}</div> - -<p>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ê.</p> - -<h2 id="Junte-se_a_Comunidade">Junte-se a Comunidade</h2> - -<p>Se quiser conselhos, ajuda, ou apenas nos conhecer, por favor, junte-se a nós nos seguintes canais:</p> - -<p><strong>Canais no IRC</strong> – para conversar com colaboradores MDN:</p> - -<ul> - <li>#devmo: Discussões sobre o conteúdo da documentação na <a href="https://developer.mozilla.org/en">MDC</a></li> - <li>#mdn: Questões gerais sobre a MDN</li> -</ul> - -<p>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.</p> - -<p>Para entrar no IRC, siga essas instruções da wiki: <a href="https://wiki.mozilla.org/IRC%23Getting_Started">https://wiki.mozilla.org/IRC#Getting_Started</a></p> - -<p><strong>Listas de Email</strong> – comunicações menos frequentes para toda a comunidade MDN:</p> - -<ul> - <li><a href="http://www.mozilla.org/about/forums/%23dev-mdc">mozilla.dev.mdc</a>: MDN Documentation Center - discussões sobre a produção de conteúdo.</li> - <li><a href="http://www.mozilla.org/about/forums/%23dev-mdn">mozilla.dev.mdn</a>: Desenvolvimento técnico do site para a plataforma MDN.</li> - <li><a href="https://lists.mozilla.org/listinfo/dev-mdc-es">mozilla.dev.mdc.es</a>: MDN Documentation Center – Comunidade de tradução para o Espanhol</li> - <li><a href="https://lists.mozilla.org/listinfo/dev-mdc-pt">mozilla.dev.mdc.pt</a>: MDN Documentation Center - Comunidade de tradução para o Português.</li> -</ul> - -<h2 id="Acesse_o_MDN">Acesse o MDN</h2> - -<p>Para adicionar, editar, ou traduzir um documento, você precisará entrar no site da MDN:</p> - -<p><a href="https://developer.mozilla.org">https://developer.org</a></p> - -<p>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.</p> - -<h2 id="Criando_sua_conta">Criando sua conta</h2> - -<ol> - <li>Clique no botão Entrar na parte superior da página. Uma janela abrirá com o login do Persona.<br> - <img alt="Screenshot of MDN site header, including Sign In button" src="/files/3975/MDNheader.png" style="height: 47px; width: 600px;"></li> - <li>Coloque o seu endereço de e-mail e clique em próximo.<br> - <img alt="Screenshot of the Persona window for a new user" src="/files/3989/Persona_1stlogin.png" style="height: 375px; width: 700px;"></li> -</ol> - -<p>O que acontece depois dependerá se você já usou este endereço de e-mail com o Persona antes.</p> - -<ol> - <li>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.</li> - <li><img alt="Screenshot of the Persona window for setting a password" src="/files/3991/Persona_setpassword.png" style="height: 372px; width: 698px;"> - <ol style="list-style-type: lower-alpha;"> - <li>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).</li> - <li>Ao abrir o e-mail clique no link de registro.</li> - <li>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.</li> - <li>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.</li> - </ol> - </li> - <li>Se você já usou o Persona antes, digite sua senha existente para este endereço de e-mail e clique em verificar.</li> -</ol> - -<p>Parabéns, agora você tem uma conta na MDN e poderá criar, editar e traduzir o conteúdo da documentação.</p> - -<h2 id="Editando_um_conteúdo_na_MDN">Editando um conteúdo na MDN</h2> - -<h3 id="Comece_editando_uma_página">Comece editando uma página</h3> - -<ol> - <li>Verifique se você está logado na MDN (veja a seção acima para instruções)</li> - <li>Mude a página para o modo de edição. O conteúdo da página aparecerá dentro de um editor.<br> - <img alt="Screenshot of History, Watch, and Edit buttons in MDN" src="/files/3977/MDNeditbuttons.png" style="height: 57px; width: 239px;"><br> - <img alt="Screenshot of MDN editor" src="/files/3979/MDNeditor.png" style="height: 186px; width: 432px;"></li> -</ol> - -<h3 id="Salve_o_seu_trabalho">Salve o seu trabalho</h3> - -<p>O editor do MDN oferece várias maneiras para você verificar e salvar seu trabalho.<br> - <img alt="Screenshot of MDN's file management buttons, including "Save and Keep Editing", "Save Changes", "Preview Changes" and "Discard Changes"" src="/files/3981/MDNsavebuttons.png" style="height: 55px; width: 396px;"></p> - -<ol> - <li>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.</li> - <li>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.</li> - <li>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.</li> - <li>Discard changes: Joga fora suas alterações desde a última gravação, e retorna a página para modo de leitura.</li> -</ol> - -<h3 id="Modifique_a_informação_da_página">Modifique a informação da página</h3> - -<p>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.</p> - -<ul> - <li>Title: O título que aparece na barra de título do navegador e na parte superior do conteúdo da página.</li> - <li>Slug: A última parte da URL para a página. Normalmente, isso é baseado no título da página (substituições apropriadas para espaços e caracteres especiais), mas você pode modifica-lo.</li> - <li>TOC: Se esta caixa for marcada, uma tabela de conteúdo é gerada automaticamente para a página, com base nas posições dentro da página (até H4), em uma caixa de perto do topo da página.</li> -</ul> - -<p>Quaisquer alterações a estes campos são salvos quando você salva a página como um todo.</p> - -<h3 id="Formatação_do_Texto">Formatação do Texto</h3> - -<p>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.</p> - -<ul> - <li>Source: Muda o editor de edição visual para edição de código HTML.</li> - <li>H1, H2, H3, H4, H5, H6: Esses botões correspondem exatamente aos elementos de titulo em HTML. Deve haver apenas um elemento <h1> em uma página.</li> - <li>PRE: Envolve o texto selecionado em um elemento <pre>. Ao clicar neste botão, você ativa o menu Syntax Highlighter que aparecerá ao lado dele, o que permite que você selecione o tipo de código, de modo que o Syntax Highlighter possa ser aplicado adequadamente.</li> - <li>Styles: Selecionando um item deste menu, envolve o texto selecionado em um <div> (para block styles) ou um <span> (para inline styles) com o identificador de classe correspondente. Isso permite que o texto seja modificado de maneira apropriada no style sheets da MDN.</li> - <li><>: Este botão envolve a seleção em um bloco <code>, que é útil para indicar nomes de APIs, variáveis e arquivos.</li> -</ul> - -<h2 id="Traduzindo_uma_página">Traduzindo uma página</h2> - -<ol> - <li>No menu Languages, clique em Add Translation.<br> - <img alt="Screenshot of MDN's languages menu, with "Add translation" selected" src="/files/3983/MDNlanglist.png" style="height: 138px; width: 215px;"></li> - <li>A página do idioma selecionado aparecerá.<br> - <img alt="Screenshot of MDN's list of languages available for translation" src="/files/3985/MDNselectlang.png" style="height: 251px; width: 193px;"></li> - <li>Clique no idioma que deseja traduzir. Deverá abrir o Translating Article, com o texto no idioma original apresentado no lado esquerdo.<br> - <img alt="Screenshot of MDN's translation user interface" src="/files/3987/MDNtranslateUI.png" style="height: 273px; width: 431px;"></li> - <li>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.</li> - <li>Clique em salvar mudanças quando tiver terminado.</li> -</ol> - -<p>Nota: Os elementos da interface do usuário "Translating Article" são inicialmente mostrados em Inglês.</p> - -<h2 id="Editando_uma_página_traduzida">Editando uma página traduzida</h2> - -<p>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á.<br> - <img alt="Screenshot of MDN's translation user interface" src="/files/3987/MDNtranslateUI.png" style="height: 273px; width: 431px;"></p> diff --git a/files/pt-br/conflicting/mozilla/add-ons/index.html b/files/pt-br/conflicting/mozilla/add-ons/index.html deleted file mode 100644 index 7cce58b45b..0000000000 --- a/files/pt-br/conflicting/mozilla/add-ons/index.html +++ /dev/null @@ -1,264 +0,0 @@ ---- -title: Construindo um complemento -slug: conflicting/Mozilla/Add-ons -tags: - - Add-ons - - Complementos - - Tutorial -translation_of: Mozilla/Add-ons -translation_of_original: Building_an_Extension -original_slug: Construindo_um_complemento ---- -<h2 id="Introdução">Introdução</h2> -<p>This tutorial will take you through the steps required to build a very basic <a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">extension</a> - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!".</p> -<div class="note"> - <strong>Note:</strong> 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 <a href="/en-US/docs/XUL_School" title="XUL School Tutorial">XUL School</a> tutorial <a href="/en-US/docs/XUL_School/The_Essentials_of_an_Extension" title="The Essentials of an Extension">The Essentials of an Extension</a>.</div> -<p>Since Firefox 4 (and other Mozilla 2 based applications) there are two types of extensions:</p> -<ul> - <li>Traditional, classic, or XUL extensions are more powerful, but more complicated to build and require a restart to install.</li> - <li>Restartless, or <a href="/en-US/docs/Extensions/Bootstrapped_extensions" title="/en-US/docs/Extensions/Bootstrapped_extensions">bootstrapped extensions</a> do not require a restart to install but are more limited than traditional extensions. The <a class="link-https" href="https://addons.mozilla.org/en-US/developers/tools/builder">Add-on SDK and the Add-on Builder</a> can be used to build restartless extensions with ease.</li> -</ul> -<p>This article explains how to build a traditional extension for Firefox. For information on bootstrapped or restartless extensions, see <a href="/en-US/docs/Extensions/Bootstrapped_extensions" title="/en-US/docs/Extensions/Bootstrapped_extensions">Bootstrapped extensions</a>.</p> -<p>For a tutorial on building an extension for Thunderbird, see <a href="/en-US/docs/Extensions/Thunderbird/Building_a_Thunderbird_extension" title="/en-US/docs/Building_a_Thunderbird_extension">Building a Thunderbird extension.</a></p> -<h2 id="Início_rápido">Início rápido</h2> -<p>A <a class="external" href="http://mozilla.doslash.org/stuff/helloworld.zip">Hello World extension</a> similar to what you can generate with the Extension Wizard is explained line-by-line in <a class="external" href="http://kb.mozillazine.org/Getting_started_with_extension_development">another tutorial from MozillaZine Knowledge Base</a>.</p> -<h2 id="Configurando_o_ambiente_de_desenvolvimento">Configurando o ambiente de desenvolvimento</h2> -<p>Extensions are packaged and distributed in ZIP files or <a href="/en-US/docs/Bundles" title="/en-US/docs/Bundles">Bundles</a>, with the <code>XPI</code> file extension.</p> -<p>An example of the content within a typical XPI file:</p> -<pre class="eval">my_extension.xpi: //Equal to a folder named <span style="font-weight: bold;">my_extension</span><strong>/</strong> - <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install Manifests">/install.rdf </a> //General information about your extension - /<a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">chrome.manifest</a> //Registers your content with the <a href="/en-US/docs/Chrome_Registration" title="https://developer.mozilla.org/en-US/docs/chrome_registration">Chrome </a>engine - /chrome/ - /chrome/content/ //Contents of your extension such as XUL and JavaScript files - /<a href="/en-US/docs/Window_icons" title="/en-US/docs/Window_icons">chrome/icons/default/*</a> //Default Icons of the extension - /chrome/locale/* //Building an Extension# <a href="/en-US/docs/Building_an_Extension#Localization" title="https://developer.mozilla.org/en-US/docs/Building_an_Extension#Localization">Localization</a> - <a href="#Defaults_Files">/defaults/preferences/*.js</a> //Building an Extension# <a href="/en-US/docs/Building_an_Extension#Defaults_Files" title="https://developer.mozilla.org/en-US/docs/Building_an_Extension#Defaults_Files">Defaults Files</a> - /plugins/* -<a href="#XPCOM_Components"> /components/*</a> - <a href="#Application_Command_Line">/components/cmdline.js</a></pre> -<p>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. <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/</code>). Inside your new extension folder, create another folder called <code>chrome</code>, and inside the <code>chrome</code> folder create a folder called <code>content</code>.</p> -<p>Inside the <strong>root</strong> directory of your extension folder, create two new empty text files, called <code>chrome.manifest<span style="font-family: Verdana,Tahoma,sans-serif;"> and</span></code> <code>install.rdf</code>. In the <strong>chrome/content</strong> directory, create a new empty text file called <code>sample.xul</code>.</p> -<p>You should end up with this directory structure:</p> -<ul> - <li>install.rdf</li> - <li>chrome.manifest</li> - <li>chrome\ - <ul> - <li>content\ - <ul> - <li>sample.xul</li> - </ul> - </li> - </ul> - </li> -</ul> -<p><span class="comment"><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></span> Please read the additional information about setting up your development environment in the article <a href="/en-US/docs/Setting_up_extension_development_environment" title="/en-US/docs/Setting_up_extension_development_environment">Setting up extension development environment</a>.</p> -<p>{{ gecko_minversion_note("1.9.2", "Starting in Gecko 1.9.2 (Firefox 3.6), you can also simply include an icon, named <code>icon.png</code>, 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 <code>iconURL</code> entry.") }}</p> -<h2 id="Criando_o_Manifesto_de_Instalação">Criando o Manifesto de Instalação</h2> -<p>Open the file called <code><a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">install.rdf</a></code> that you created at the top of your extension's folder hierarchy and put this inside:</p> -<pre class="brush: xml"><?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> -</pre> -<ul> - <li><code><strong><span class="linkification-ext link-mailto">sample@example.net</span></strong></code> – the ID of the extension. This is a value you come up with to identify your extension in email address format (note that it should not be <em>your</em> email). Make it unique. You could also use a GUID. NOTE: This parameter MUST be in the format of an email address, although it does NOT have to be a valid email address. (<code><span class="link-mailto">example@example.example</span></code>)</li> - <li>Specify <code><em:type>2</em:type></code> – the 2 declares that it is installing an extension. If you were to install a theme it would be 4 (see <a href="/en-US/docs/Install_Manifests#type" title="/en-US/docs/Install_Manifests#type">Install Manifests#type</a> for other type codes).</li> - <li><code><strong>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</strong></code> – Firefox's application ID.</li> - <li><code><strong>1.5</strong></code> – the exact version number of the earliest version of Firefox you're saying this extension will work with. Never use a * in a minVersion; it almost certainly will not do what you expect it to.</li> - <li><code><strong>4.0.*</strong></code> – the maximum version of Firefox you're saying this extension will work with. In this case, "4.0.*" indicates that the extension works with Firefox 4.0 and any subsequent 4.0.x release. This number needs to be less than or equal to an <a class="external" href="http://wiki.mozilla.org/Releases" title="http://wiki.mozilla.org/Releases">announced version of Firefox</a>. By default, Firefox 10 and later do not enforce the constraint against <code>maxVersion</code> (although starting in Firefox 11, very old <code>maxVersion</code> values are still enforced). You can force the application to do it by using the <code><em:strictCompatibility></code>.</li> -</ul> -<div class="note"> - <strong>Note:</strong> If you get a message that the <code>install.rdf</code> is malformed, it is helpful to load it into Firefox using the File->Open File command and it will report XML errors to you.</div> -<p>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.*".</p> -<p>See <a href="/en-US/docs/Install_Manifests" title="/en-US/docs/Install_Manifests">Install Manifests</a> for a complete listing of the required and optional properties.</p> -<p>Save the file.</p> -<h2 id="Extendendo_o_navegador_com_XUL">Extendendo o navegador com XUL</h2> -<p>Firefox's user interface is written in XUL and JavaScript. <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a> is an XML grammar that provides user interface widgets like buttons, menus, toolbars, trees, etc. User actions are bound to functionality using JavaScript.</p> -<p>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.</p> -<p>The browser is implemented in a XUL file called <code>browser.xul</code> (<code>$FIREFOX_INSTALL_DIR/chrome/browser.jar</code> contains <code>content/browser/browser.xul</code>). In browser.xul we can find the status bar, which looks something like this:</p> -<pre class="eval"><statusbar id="status-bar"> - ... <statusbarpanel>s ... -</statusbar> -</pre> -<p><code><statusbar id="status-bar"></code> is a "merge point" for a XUL Overlay.</p> -<h3 id="XUL_Overlays">XUL Overlays</h3> -<p><a href="/en-US/docs/XUL_Overlays" title="/en-US/docs/XUL_Overlays">XUL Overlays</a> 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.</p> -<p><strong>Example XUL Overlay Document</strong></p> -<pre class="eval"><?xml version="1.0"?> -<overlay id="sample" - xmlns="<span class="nowiki"><a class="linkification-ext" href="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Linkification: http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</a></span>"> - <statusbar id="<strong>status-bar</strong>"> - <statusbarpanel id="my-panel" label="Hello, World" /> - </statusbar> -</overlay> -</pre> -<p>The <code><statusbar></code> called <code><strong>status-bar</strong></code> specifies the "merge point" within the browser window that we want to attach to.</p> -<p>The <code><statusbarpanel></code> child is a new widget that we want to insert within the merge point.</p> -<p>Take this sample code above and save it into your file called <code><strong>sample.xul</strong></code> inside the <code>chrome/content</code> folder you created.</p> -<p>For more information about merging widgets and modifying the user interface using Overlays, see below.</p> -<h2 id="Chrome_URIs">Chrome URIs</h2> -<p>XUL files are part of "<a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">Chrome Packages</a>" - bundles of user interface components which are loaded via <code>chrome://</code> URIs. Rather than load the browser from disk using a <code>file://</code> 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.</p> -<p>The browser window is: <code><a class="external" rel="freelink">chrome://browser/content/browser.xul</a></code>. Try typing this URL into the location bar in Firefox!</p> -<p>Chrome URIs consist of several components:</p> -<ul> - <li>First, the <strong>URI scheme</strong> (<code>chrome</code>) which tells Firefox's networking library that this is a Chrome URI. It indicates that the content of the URI should be handled as a (<code>chrome</code>). Compare (<code>chrome</code>) to (<code>http</code>) which tells Firefox to treat the URI as a web page.</li> - <li>Second, a package name (in the example above, <code><strong>browser</strong></code>) which identifies the bundle of user interface components. This should be as unique to your application as possible to avoid collisions between extensions.</li> - <li>Third, the type of data being requested. There are three types: <code>content</code> (XUL, JavaScript, XBL bindings, etc. that form the structure and behavior of an application UI), <code>locale</code> (DTD, .properties files etc that contain strings for the UI's <a href="/en-US/docs/Localization" title="/en-US/docs/Localization">localization</a>), and <code>skin</code> (CSS and images that form the <a href="/en-US/docs/Themes" title="/en-US/docs/Themes">theme</a> of the UI).</li> - <li>Finally, the path of a file to load.</li> -</ul> -<p>So, <code><a class="external" rel="freelink">chrome://foo/skin/bar.png</a></code> loads the file <code>bar.png</code> from the <code>foo</code> theme's <code>skin</code> section.</p> -<p>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).</p> -<h2 id="Criando_um_Manifesto_Chrome">Criando um Manifesto Chrome</h2> -<p>For more information on Chrome Manifests and the properties they support, see the <a href="/en-US/docs/Chrome_Registration" title="/en-US/docs/Chrome_Registration">Chrome Manifest</a> Reference.</p> -<p>Open the file called <strong>chrome.manifest</strong> that you created alongside the <code>chrome</code> directory at the root of your extension's source folder hierarchy.</p> -<p>Add in this code:</p> -<pre class="eval">content sample chrome/content/ -</pre> -<p>(<strong>Don't forget the trailing slash, "<code>/</code>"!</strong> Without it, the package won't be registered.)</p> -<p>This specifies the:</p> -<ol> - <li>type of material within a chrome package</li> - <li>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") }})</li> - <li>location of the chrome packages' files</li> -</ol> -<p>So, this line says that for a chrome package <strong>sample</strong>, we can find its <strong>content</strong> files at the location <code>chrome/content</code> which is a path relative to the location of <code>chrome.manifest</code>.</p> -<p>Note that content, locale, and skin files must be kept inside folders called content, locale, and skin within your <code>chrome</code> subdirectory.</p> -<p>Save the file. When you launch Firefox with your extension (later in this tutorial), this will register the chrome package.</p> -<h2 id="Register_an_Overlay">Register an Overlay</h2> -<p>You need Firefox to merge your overlay with the browser window whenever it displays one. So add this line to your <code>chrome.manifest</code> file:</p> -<pre class="eval">overlay <a class="external" rel="freelink">chrome://browser/content/browser.xul</a> <a class="external" rel="freelink">chrome://sample/content/sample.xul</a> -</pre> -<p>This tells Firefox to merge <code>sample.xul</code> into <code>browser.xul</code> when <code>browser.xul</code> loads.</p> -<h2 id="Teste">Teste</h2> -<p>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.</p> -<ol> - <li>Locate your <a class="external" href="http://kb.mozillazine.org/Profile_folder" title="http://kb.mozillazine.org/Profile_folder">profile folder</a> and beneath it the profile you want to work with (e.g., <code>Firefox/Profiles/<profile_id>.default/</code>).</li> - <li>Open the <code>extensions/</code> folder, creating it if need be.</li> - <li>Create a new text file and put the full path to your development folder inside (e.g., <code>C:\extensions\my_extension\</code> or <code>~/extensions/my_extension/)</code>. Windows users should retain the OS slash direction, and <em>everyone</em> should remember to <strong>include</strong> a closing slash and <strong>remove</strong> any trailing spaces.</li> - <li>Save the file with the id of your extension as its name (e.g., <code><a class="linkification-ext link-mailto" href="mailto:sample@example.net" title="Linkification: mailto:sample@example.net">sample@example.net</a></code>). No file extension.</li> -</ol> -<p>Now you should be ready to test your extension!</p> -<p>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.</p> -<p>You can now go back and make changes to the .xul file, close and restart Firefox, and they should appear.</p> -<h2 id="Empacotando">Empacotando</h2> -<p>Now that your extension works, you can <a href="/en-US/docs/Extension_Packaging" title="/en-US/docs/Extension_Packaging">package</a> it for deployment and installation.</p> -<p>Zip up the <strong>contents</strong> 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!</p> -<p>On Mac OS X, you can right-click on the <strong>contents</strong> 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 <code>zip</code> command on the command line to create the zip file.</p> -<p>On Linux, you would likewise use the command-line zip tool.</p> -<p>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.</p> -<p>Now upload the .xpi file to your server, making sure it's served as <code>application/x-xpinstall</code>. 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.</p> -<h3 id="Instalando_a_partir_de_uma_página_web">Instalando a partir de uma página web</h3> -<p>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 <a href="/en-US/docs/Installing_Extensions_and_Themes_From_Web_Pages" title="/en-US/docs/Installing_Extensions_and_Themes_From_Web_Pages"> InstallTrigger method</a> to install XPIs, as it provides the best experience to users.</p> -<h3 id="Usando_addons.mozilla.org">Usando addons.mozilla.org</h3> -<p>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!</p> -<p>Visit <a class="linkification-ext external" href="http://addons.mozilla.org/developers/" title="Linkification: http://addons.mozilla.org/developers/">http://addons.mozilla.org/developers/</a> to create an account and begin distributing your extensions!</p> -<p><em>Note:</em> Your Extension will be passed faster and downloaded more if you have a good description and some screenshots of the extension in action.</p> -<h3 id="Instalando_complementos_usando_uma_instalador_um_instalador_separado">Instalando complementos usando uma instalador um instalador separado</h3> -<p>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 <a class="internal" href="/en-US/docs/Installing_extensions" title="/en-US/docs/Installing extensions">Installing extensions</a> for more information.</p> -<p>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 <a href="/en-US/docs/Adding_Extensions_using_the_Windows_Registry" title="/en-US/docs/Adding_Extensions_using_the_Windows_Registry">Adding Extensions using the Windows Registry</a> for more information.</p> -<h2 id="Mais_sobre_XUL_Overlays">Mais sobre XUL Overlays</h2> -<p>In addition to appending UI widgets to the merge point, you can use XUL fragments within Overlays to:</p> -<ul> - <li>Modify attributes on the merge point, e.g., <code><statusbar id="status-bar" hidden="true" /></code> (hides the status bar)</li> - <li>Remove the merge point from the master document, e.g., <code><statusbar id="status-bar" removeelement="true" /></code></li> - <li>Control the position of the inserted widgets:</li> -</ul> -<pre class="eval"><statusbarpanel position="1" ... /> - -<statusbarpanel insertbefore="other-id" ... /> - -<statusbarpanel insertafter="other-id" ... /> -</pre> -<h2 id="Criando_novos_componentes_de_interface_com_o_usuário">Criando novos componentes de interface com o usuário</h2> -<p>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.</p> -<p>View the <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a> documentation for more resources for XUL developers.</p> -<h2 id="Arquivos_padrão">Arquivos padrão</h2> -<p>Defaults files that you use to seed a user's profile with should be placed in <code>defaults/</code> under the root of your extension's folder hierarchy. Default preferences .js files should be stored in <code>defaults/preferences/</code> - 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 <a href="/en-US/docs/Preferences_API" title="/en-US/docs/Preferences_API">Preferences API</a>.</p> -<p>An example default preference file:</p> -<pre class="eval">pref("extensions.sample.username", "Joe"); //a string pref -pref("extensions.sample.sort", 2); //an int pref -pref("extensions.sample.showAdvanced", true); //a boolean pref -</pre> -<h2 id="Componentes_XPCOM">Componentes XPCOM</h2> -<p>Firefox supports <a href="/en-US/docs/XPCOM" title="/en-US/docs/XPCOM">XPCOM</a> components in extensions. You can create your own components easily in JavaScript or in C++ (using the <a href="/en-US/docs/Gecko_SDK" title="/en-US/docs/Gecko_SDK">Gecko SDK</a>).</p> -<p>Place all of your .js or .dll files in the <code>components/</code> directory - they are automatically registered the first time Firefox runs after your extension is installed.</p> -<p>For more information see <a href="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript" title="/en-US/docs/How_to_Build_an_XPCOM_Component_in_Javascript">How to Build an XPCOM Component in Javascript</a>, <a href="/en-US/docs/How_to_build_a_binary_XPCOM_component_using_Visual_Studio" title="/en-US/docs/How_to_build_a_binary_XPCOM_component_using_Visual_Studio">How to build a binary XPCOM component using Visual Studio,</a> and the <a href="/en-US/docs/Creating_XPCOM_Components" title="/en-US/docs/Creating_XPCOM_Components">Creating XPCOM Components</a> book.</p> -<h3 id="Aplicação_de_linha_de_comando">Aplicação de linha de comando</h3> -<p>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:</p> -<pre class="eval"> firefox.exe -myapp -</pre> -<p><span class="comment">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().</span> See <a href="/en-US/docs/Chrome/Command_Line" title="/en-US/docs/Chrome/Command_Line">Chrome: Command Line</a> and a <a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=365297">forum discussion</a> for details.</p> -<h2 id="Localização">Localização</h2> -<p>To support more than one language, you should separate strings from your content using <a href="/en-US/docs/XUL_Tutorial/Localization" title="/en-US/docs/XUL_Tutorial/Localization">entities</a> and <a href="/en-US/docs/XUL_Tutorial/Property_Files" title="/en-US/docs/XUL_Tutorial/Property_Files">string bundles</a>. It is much easier to do this while you are developing your extension, rather than come back and do it later!</p> -<p>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:</p> -<pre class="eval">locale sample en-US chrome/locale/en-US/ -</pre> -<p>To create localizable attribute values in XUL, you can place the values in a <code>.dtd</code> file (sample.dtd for our sample extension). This file should be placed in the locale directory and looks like this:</p> -<pre class="eval"><!ENTITY my-panel.label "Hello, World"> -</pre> -<p>And then include it at the top of your XUL document (but underneath the "<?xml version"1.0"?>") like so:</p> -<pre class="eval"><?xml version="1.0"?> -<!DOCTYPE <strong>window</strong> SYSTEM "chrome://<strong>packagename</strong>/locale/<strong>filename.dtd</strong>"> -... -</pre> -<p>where <code><strong>window</strong></code> is the <code><a href="/en-US/docs/DOM/Node.localName" title="/en-US/docs/DOM/element.localName">localName</a></code> value of the root element of the XUL document, and the value of the <code>SYSTEM</code> property is the chrome URI to the entity file.</p> -<p>For our sample extension, replace <code><strong>window</strong></code> with <code><strong>overlay</strong></code> (root element), <code><strong>packagename</strong></code> with <code><strong>sample</strong></code>, and <code><strong>filename.dtd</strong></code> with <code><strong>sample.dtd</strong></code>.</p> -<p>To use the entities, modify your XUL to look like this:</p> -<pre class="eval"><statusbarpanel id="my-panel" label="&my-panel.label;" /> -</pre> -<p>The Chrome Registry will make sure the entity file is loaded from the localization bundle corresponding to the selected locale.</p> -<p>For strings that you use in script, create a .properties file, a text file that has a string on each line in this format:</p> -<pre class="eval">key=value -</pre> -<p>and then use {{ interface("nsIStringBundleService") }}/{{ interface("nsIStringBundle") }} or the {{ XULElem("stringbundle") }} tag to load the values into script.</p> -<h2 id="Entendendo_o_navegador">Entendendo o navegador</h2> -<p>Use the <a href="/en-US/docs/DOM_Inspector" title="/en-US/docs/DOM_Inspector">DOM Inspector</a> to inspect the browser window or any other XUL window you want to extend.</p> -<p><strong>Note:</strong> <strong>DOM Inspector</strong> is not part of the <strong>Standard</strong> Firefox installation. Since Firefox 3 Beta 4, the DOM Inspector has been available from <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622">Firefox Add-ons</a> as a standalone extension. For earlier versions, you must reinstall with the Custom install path and choose <strong>DOM Inspector</strong> (or <strong>Developer Tools</strong> in Firefox 1.5) if there is not a "DOM Inspector" item in your browser's Tools menu.</p> -<p>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.</p> -<p>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 <code>load</code> event fires on the master XUL window.</p> -<h2 id="Debugando_complementos">Debugando complementos</h2> -<p><strong>Analytical Tools for Debugging</strong></p> -<ul> - <li>The <a href="/en-US/docs/DOM_Inspector" title="/en-US/docs/DOM_Inspector">DOM Inspector</a> - inspect attributes, DOM structure, CSS style rules that are in effect (e.g., find out why your style rules don't seem to be working for an element - an invaluable tool!)</li> - <li><a href="/en-US/docs/Venkman" title="/en-US/docs/Venkman">Venkman</a> - set breakpoints in JavaScript and inspect call stacks</li> - <li><code>Components.stack.caller></code> in JavaScript - access a function's call stack</li> -</ul> -<p><strong>printf debugging</strong></p> -<ul> - <li>Use <code><a href="/en-US/docs/DOM/window.dump" title="/en-US/docs/DOM/window.dump">dump</a>("string")</code> (see the link for details; this requires a bit of configuration to work properly)</li> - <li>Use <code><a href="/en-US/docs/Components.utils.reportError" title="/en-US/docs/Components.utils.reportError">Components.utils.reportError()</a></code> or {{ interface("nsIConsoleService") }} to log to the JavaScript console</li> -</ul> -<p><strong>Advanced debugging</strong></p> -<ul> - <li>Run a debug Firefox build and set breakpoints in Firefox itself, or your C++ components. For the experienced developer, this is often the fastest way to diagnose a problem. See <a href="/en-US/docs/Developer_Guide/Build_Instructions" title="/en-US/docs/Build_Documentation">Build Documentation</a> and <a href="/en-US/docs/Developer_Guide" title="/en-US/docs/Developing_Mozilla">Developing Mozilla</a> for more information.</li> - <li>See <a href="/en-US/docs/Debugging_a_XULRunner_Application" title="/en-US/docs/Debugging_a_XULRunner_Application">Debugging a XULRunner Application</a> for more helpful tips.</li> -</ul> -<h2 id="Further_information">Further information</h2> -<ul> - <li><a href="/en-US/docs/Extension_Frequently_Asked_Questions" title="/en-US/docs/Extension_Frequently_Asked_Questions">Extension FAQ</a></li> - <li><a href="/en-US/docs/Extensions" title="/en-US/docs/Extensions">Extensions</a></li> -</ul> diff --git a/files/pt-br/conflicting/mozilla/firefox/releases/index.html b/files/pt-br/conflicting/mozilla/firefox/releases/index.html deleted file mode 100644 index 91ec12dec7..0000000000 --- a/files/pt-br/conflicting/mozilla/firefox/releases/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: Notas de lançamento -slug: conflicting/Mozilla/Firefox/Releases -tags: - - Notas de lançamento -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes -original_slug: Tools/Notas_de_lancamento ---- -<div>{{ToolsSidebar}}</div><h2 id="Firefox_53">Firefox 53</h2> - -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Veja escuta de eventos React no Inspector.</a></li> - <li><a href="/en-US/docs/Tools/Taking_screenshots#Copying_screenshots_to_the_clipboard">Copie capturas de tela da área de transferência.</a></li> - <li><a href="/en-US/docs/Tools/JSON_viewer">Visualizador de JSON é habilitado no Firefox Beta e versões públicas.</a></li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2017-01-23%20&query_format=advanced&chfield=resolution&chfieldfrom=2016-11-14&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=13578264">Todas ferramentas de desenvolvimento tiveram os erros corrigidos entre os Firefox 52 e 53</a>.</p> - -<h2 id="Firefox_52">Firefox 52</h2> - -<ul> - <li><a href="/en-US/docs/Tools/Responsive_Design_Mode">Completely revamped Responsive Design Mode, including UA selection and network throttling.</a></li> - <li><a href="/en-US/docs/Tools/Debugger">New JavaScript Debugger, including a redesigned UI.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">The Animation Inspector now displays timing functions.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">The Page Inspector now includes a CSS grid highlighter.</a></li> - <li><a href="/en-US/docs/Tools/about:debugging#Service_worker_state">about:debugging now shows service worker state.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#element_rule">The Page Inspector includes an easy way to highlight the selected element.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Whitespace-only_text_nodes">The Page Inspector displays whitespace-only text nodes.</a></li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2016-11-14&query_format=advanced&chfield=resolution&chfieldfrom=2016-09-19&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=13333174">All devtools bugs fixed between Firefox 51 and Firefox 52</a>.</p> - -<h2 id="Firefox_51">Firefox 51</h2> - -<ul> - <li><a href="/en-US/docs/Tools/Network_Monitor#Timings">Network Monitor now shows a "Blocked" state for network requests.</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263768&resolution=FIXED&classification=Client%20Software&chfieldto=2016-09-19&query_format=advanced&chfield=resolution&chfieldfrom=2016-08-01&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">All devtools bugs fixed between Firefox 50 and Firefox 51</a>.</p> - -<h2 id="Firefox_50">Firefox 50</h2> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Source_maps">The Web Console now understands source maps.</a></li> - <li><a href="/en-US/docs/Tools/Storage_Inspector#IndexedDB">The Storage Inspector now lets you delete items from IndexedDB object stores.</a></li> - <li><a href="/en-US/docs/Tools/Memory">The Memory tool is enabled by default.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">The Box model view is moved into the Computed view.</a></li> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">The Web Console now displays stack traces for XHR or Fetch() network requests.</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263766&chfield=resolution&chfieldfrom=2016-06-06&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-08-01&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">All devtools bugs fixed between Firefox 49 and Firefox 50</a>.</p> - -<h2 id="Firefox_49">Firefox 49</h2> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#JS">JavaScript errors logged in the console now link to MDN help pages.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Further_information_about_animation_compositing">The Animation Inspector now shows performance information.</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_context_menu">The Inspector's context menu has been reorganized.</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Cause_column">The Network Monitor now shows the cause of each network request.</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector#IndexedDB">The Storage Inspector lets you delete IndexedDB databases.</a></li> - <li><a href="/en-US/docs/Tools/about:debugging#Tabs">about:debugging now has a new Tabs page, to debug any open tab.</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263762&chfield=resolution&chfieldfrom=2016-04-25&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-06-06&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">All devtools bugs fixed between Firefox 48 and Firefox 49</a>.</p> - -<h2 id="Firefox_48">Firefox 48</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Storage_Inspector#Editing_storage_items">Edit stored items in the Storage Inspector</a></li> - <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">Memory tool treemap view</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposition elements by dragging them around the page</a></li> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">See HTTP request details in the Web Console </a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Animation inspector updates for Web Animations API</a></li> - <li><a href="/en-US/docs/Tools/Settings#Choose_DevTools_theme">Firebug theme</a></li> - <li><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263745&resolution=FIXED&classification=Client%20Software&chfieldto=2016-04-25&query_format=advanced&chfield=resolution&chfieldfrom=2016-03-07&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">All devtools bugs fixed between Firefox 47 and Firefox 48</a>.</p> - -<h2 id="Firefox_47">Firefox 47</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/about:debugging#Workers">Debug registered Service Workers</a></li> - <li><a href="/en-US/docs/Tools/Storage_Inspector#Cache_Storage">Cache storage is now visible in the Storage Inspector</a></li> - <li><a href="/en-US/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Dominators view shows retaining paths</a></li> - <li><a href="/en-US/docs/Tools/Browser_Toolbox#Debugging_popups">Prevent panels from hiding automatically, to aid browser and add-on debugging</a></li> - <li><a href="/en-US/docs/Tools/3D_View">3D view (Tilt) has been removed</a></li> - <li><a href="/en-US/docs/Tools/Responsive_Design_Mode#Responsive_Design_Mode_controls">Set a custom User Agent string in Responsive Design Mode</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Font Inspector is now disabled by default</a></li> - <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Entering_expressions">Console detects incomplete input and switches to multiline mode</a></li> - <li><a href="/en-US/docs/Tools/Contributing/Contribute_on_nightly">Devtools Reload lets you hack the devtools without rebuilding Firefox</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263761&chfield=resolution&chfieldfrom=2016-01-25&chfieldvalue=FIXED&resolution=FIXED&classification=Client%20Software&chfieldto=2016-03-07&query_format=advanced&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">All devtools bugs fixed between Firefox 46 and Firefox 47</a>.</p> - -<h2 id="Firefox_46">Firefox 46</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Memory/Dominators_view">Dominators view in the Memory tool</a></li> - <li><a href="/en-US/docs/Tools/Performance/Allocations">Allocations view in the Performance tool</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">One click to apply <code>@media</code> rule conditions in the Style Editor</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?list_id=13263754&resolution=FIXED&classification=Client%20Software&chfieldto=2016-01-25&query_format=advanced&chfield=resolution&chfieldfrom=2015-12-14&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20DOM&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Design%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Shared%20Components&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox">All devtools bugs fixed between Firefox 45 and Firefox 46</a>.</p> - -<h2 id="Firefox_45">Firefox 45</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">Full-text search in the Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Memory#Diffing_heap_snapshots">Heap snapshot diffing in the Memory tool</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Timeline">DomContentLoaded and load events shown in the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animation inspector improvements</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?bug_status=RESOLVED&bug_status=VERIFIED&chfield=resolution&chfieldfrom=2015-10-29&chfieldto=2015-12-14&chfieldvalue=FIXED&classification=Client%20Software&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&resolution=FIXED&list_id=12753878">All devtools bugs fixed between Firefox 44 and Firefox 45</a>.</p> - -<h2 id="Firefox_44">Firefox 44</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Memory">Memory tool</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animation inspector improvements</a></li> - <li><a href="/en-US/docs/Tools/Performance/Waterfall#Markers">New Waterfall markers: DomContentLoaded, load, worker messages</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-11-03&query_format=advanced&chfield=resolution&chfieldfrom=2015-09-19&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12582678">All devtools bugs fixed between Firefox 43 and Firefox 44</a>.</p> - -<h2 id="Firefox_43">Firefox 43</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_43">New animation inspector UI</a></li> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Server">Server logging in the Web Console</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Quickly find the rule that overrode a CSS declaration</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Use in Console" context menu item in Inspector</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">"Strict" option for filtering in the Rules view</a></li> - <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Network">Network entries in the Console now link to the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/WebIDE">New sidebar UI for WebIDE</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-09-19&query_format=advanced&chfield=resolution&chfieldfrom=2015-08-10&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12582678">All devtools bugs fixed between Firefox 42 and Firefox 43</a>.</p> - -<h2 id="Firefox_42">Firefox 42</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Debugging Firefox for Android over Wifi</a></li> - <li><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Configuring_Simulators">Firefox OS Simulator configuration in WebIDE</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters#Saving_filter_presets">CSS filter presets</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-08-10&query_format=advanced&chfield=resolution&chfieldfrom=2015-06-29&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12478437">All devtools bugs fixed between Firefox 41 and Firefox 42</a>.</p> - -<h2 id="Firefox_41">Firefox 41</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Take a screenshot of a DOM node</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#CopySave_All_As_HAR">Copy as HAR/save as HAR</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Add_rules">"Add Rule" button in the Rules view</a></li> - <li><a href="/en-US/docs/Tools/View_source">View source in a tab</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Copy_rules">More options to copy CSS rules</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/View_background_images">Copy image as data: URI in the Rules view</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-06-29&query_format=advanced&chfield=resolution&chfieldfrom=2015-05-11&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12283503">All devtools bugs fixed between Firefox 40 and Firefox 41</a>. Note that many of these bugs, especially those relating to the performance tools, were uplifted to Firefox 40.</p> - -<h2 id="Firefox_40">Firefox 40</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_40">Improvements to the Animations view</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Get_help_for_CSS_properties">Get help from MDN for CSS property syntax</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Edit filters in the Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#console_API_messages">Web Console now shows messages from workers</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_URL">Filter requests by URL in the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Context_menu">Many new context menu options in the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">Show when network resources are fetched from the browser cache</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Filtering_rules">Filter rules in the Page Inspector</a></li> -</ul> - -<p>More:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Break at debugger; statements in unnamed eval sources</a></li> - <li><a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">Copy URL/Open in New Tab context menu items for Debugger source list pane</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Log_messages">console.dirxml support in the Web Console</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor#The_style_sheet_pane">Style Editor: "Open Link In New Tab" item added to stylesheet list</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching">Inspector selector search now includes class/id results even without css prefix</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Tooltips in box-model view saying which CSS rule caused the value</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Switch between color unit format in the Inspector using Shift+click</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Implement "Scroll Into View" menu item for the Inspector</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Linkify url/id/resource attributes in the Inspector</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">IP address tooltip in the Network Monitor</a></li> -</ul> - -<p>Everything: <a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-05-11&query_format=advanced&chfield=resolution&chfieldfrom=2015-03-31&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12283503">all devtools bugs fixed between Firefox 39 and Firefox 40</a>.</p> - -<h2 id="Firefox_39">Firefox 39</h2> - -<p>Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WebIDE now supports debugging Firefox OS devices over Wi-Fi</a></li> - <li><a href="/en-US/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">WebIDE now supports Cordova projects</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">Animations view: rewind, fast-forward, and jump to a specific time</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Firefox_39">The cubic Bézier curve editor now includes 31 presets</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Drag_and_drop">Drag and drop elements in the Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Command_history">Web console command history is now persisted across sessions</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Helper_commands">$_ console command to print the last result evaluated</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#Firefox_39">Better box model highlighting for inline elements</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&query_based_on=devtools_resolved_week&chfieldto=2015-03-31&chfield=resolution&query_format=advanced&chfieldfrom=2015-02-22&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&bug_status=CLOSED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&known_name=devtools_resolved_week&list_id=12157026">All devtools bugs fixed between Firefox 38 and Firefox 39</a>.</p> - -<h2 id="Firefox_38">Firefox 38</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Audio_Editor#Bypassing_nodes">Bypass audio nodes in Web Audio Editor</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Helper_commands">"copy" command in Web Console</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#XHR">Highlight and filter XmlHttpRequests in Web Console</a></li> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">See optimized-out variables in the Debugger</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Security">See security warnings in the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">See transferred sizes in the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animations_view">Play/pause all animations in the page</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-02-23&query_format=advanced&chfield=resolution&chfieldfrom=2015-01-12&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12076303">All devtools bugs fixed between Firefox 37 and Firefox 38</a>.</p> - -<h2 id="Firefox_37">Firefox 37</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Network_Monitor#Security">Security panel in the Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">Animations panel in the Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/WebIDE#Running_a_custom_build_step">Support for running a custom build step in WebIDE</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2015-01-12&chfield=resolution&query_format=advanced&chfieldfrom=2014-11-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=11892733">All devtools bugs fixed between Firefox 36 and Firefox 37</a>.</p> - -<h2 id="Firefox_36">Firefox 36</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">eval sources now appear in the Debugger</a></li> - <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Simpler process for connecting to Firefox for Android</a></li> - <li>Box Model Highlighter works on remote targets</li> - <li><a href="/en-US/docs/Tools/Performance#Inverting_the_call_tree">"Invert the call tree" option in the Profiler </a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Type-specific_rich_output">Inspect DOM promises in the console</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">Extra "Paste" commands in the Inspector</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-11-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-10-13&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=11736454">All devtools bugs fixed between Firefox 35 and Firefox 36</a>.</p> - -<h2 id="Firefox_35">Firefox 35</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#.3A.3Abefore_and_.3A.3Aafter">See ::before and ::after pseudo elements in the Page Inspector</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_map_support">CSS source maps are now enabled by default</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Element_popup_menu_2">"Show DOM Properties" from the Page Inspector</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-10-13&chfield=resolution&query_format=advanced&chfieldfrom=2014-09-02&chfieldvalue=FIXED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&component=Simulator&product=Firefox&product=Firefox%20OS&list_id=11184176">All devtools bugs fixed between Firefox 34 and Firefox 35</a>.</p> - -<h2 id="Firefox_34">Firefox 34</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector: a new tool enabling you to view data stored by web pages</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance">Performance tool: revamped Profiler UI and frame rate timeline</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/tools/Working_with_iframes">Frame switching: point the developer tools at a specific iframe in the page</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.table">console.table support</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">jQuery events are visible in the Page Inspector</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&chfieldto=2014-09-02&chfield=resolution&query_format=advanced&chfieldfrom=2014-07-21&chfieldvalue=FIXED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20Timeline&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&component=Simulator&product=Firefox&product=Firefox%20OS&list_id=11184176">All devtools bugs fixed between Firefox 33 and Firefox 34</a>.</p> - -<h2 id="Firefox_33">Firefox 33</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE">WebIDE</a>: a new environment for developing and debugging web apps</li> - <li>You can edit animation <a href="https://developer.mozilla.org/docs/Tools/Page_Inspector#Editing_.40keyframes">@keyframes</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Editing_cubic_B.C3.A9zier_curves">timing functions</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Examining_event_listeners">Event listeners are now visible </a>in the Inspector</li> - <li>There's a<a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar"> sidebar listing @media rules </a>in the Style Editor</li> - <li>You can <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Adding_rules">add new CSS rules</a> and <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Editing_rules">edit selectors</a> in the Inspector</li> - <li>There are three <a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI#Commands">new developer toolbar commands</a>: folder, highlight, and inject</li> -</ul> - -<p>Mais detalhes:</p> - -<ul> - <li>The <a href="/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Disable Cache setting</a> now persists when the devtools are reopened</li> - <li><a href="/en-US/docs/Tools/Page_Inspector#transform_visualisation">transform visualization is now shown in the page</a>, not a tooltip</li> - <li><a href="/en-US/docs/Tools/Tools_Toolbox#Editor_Preferences">Preferences for the source editor</a> are exposed in the Settings page</li> - <li><a href="/en-US/docs/Tools/Responsive_Design_View#select-size">The viewport size is directly editable</a> in Responsive Design View</li> - <li>The Debugger now <a href="/en-US/docs/Tools/Debugger#Debugger_settings">automatically black boxes source files with a "min.js" extension</a></li> -</ul> - -<p><a class="external external-icon" href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-07-21&chfield=resolution&query_format=advanced&chfieldfrom=2014-06-09&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">All devtools bugs fixed between Firefox 32 and Firefox 33</a>.</p> - -<h2 id="Firefox_32">Firefox 32</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad#Code_completion_and_inline_documentation">Code completion and inline documentation in Scratchpad</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Rules_view">User agent styles in the Inspector's Rules view</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Firefox_32_onwards_2">Element picker button has moved</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Firefox_32_onwards">Node dimensions added to the Inspector's infobar</a></li> - <li><a href="/en-US/docs/Tools/Tools_Toolbox#Extra_tools">Full page screenshot button added</a></li> -</ul> - -<p>Mais detalhes:</p> - -<ul> - <li>HiDPI images added to the tools</li> - <li>Nodes that have <code>display:none</code> are shown differently in the Inspector</li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-06-09&chfield=resolution&query_format=advanced&chfieldfrom=2014-04-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">All devtools bugs fixed between Firefox 31 and Firefox 32</a>.</p> - -<h2 id="Firefox_31">Firefox 31</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Eyedropper">Eyedropper tool to select colors in web pages</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Error_messages">full stack traces for console error messages</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Box_model_view">editable Box Model View</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages">%c formatting to style console messages</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Copy_as_cURL">"copy as cURL" command in Network Monitor</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/tools/Keyboard_shortcuts#Source_editor">Sublime Text keybindings in the source editor</a></li> -</ul> - -<p>Mais detalhes:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Network_Monitor#Network_request_list">Option to make Network Monitor logs persistent</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#JavaScript_errors_and_warnings">JavaScript warnings on by default in the Web Console</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#HTML_pane_2">Alt+click to expand all descendants of a node</a></li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-04-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-03-17&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=10022921">All devtools bugs fixed between Firefox 30 and Firefox 31</a>.</p> - -<h2 id="Firefox_30">Firefox 30</h2> - -<p>Destaques:</p> - -<ul> - <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">Box model highlighting in the Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">Web Console support for executing JS in frames</a></li> - <li>Web Console display improvements: code highlighting, <a href="/en-US/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">node highlighting and inspection</a></li> - <li>Network Monitor theme improvements, <a href="/en-US/docs/Tools/Network_Monitor#Network_request_fields">image thumbnails, image preview</a>, <a href="/en-US/docs/Tools/Network_Monitor#Preview">HTML preview</a></li> - <li><a href="/en-US/docs/Tools/Browser_Console#Browser_Console_command_line">Browser Console input must now be enabled in Settings</a></li> - <li><a href="/en-US/docs/Tools_Toolbox#Available_Toolbox_Buttons">Icons for Scratchpad and other tools now hidden by default</a></li> -</ul> - -<p>Mais detalhes:</p> - -<ul> - <li>Support for <a href="/en-US/docs/Web/API/console.count">console.count()</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts">New shortcut key to focus on web console command line</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#font-family_tooltip">Font family tooltip in the Inspector</a></li> - <li><a href="/en-US/Firefox_OS/Debugging/Developer_settings#Developer_HUD">Firefox OS HUD</a> features: memory tracking and jank monitor</li> -</ul> - -<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-03-17&chfield=resolution&query_format=advanced&chfieldfrom=2014-02-03&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=9755315">All devtools bugs fixed between Firefox 29 and Firefox 30</a>.</p> - -<h2 id="Firefox_29">Firefox 29</h2> - -<p><a href="https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/" title="http://www.mozilla.org/en-US/firefox/aurora/">Firefox 29 Hacks post</a>. Highlights:</p> - -<ul> - <li><a href="/en-US/docs/Tools_Toolbox#Choose_DevTools_theme">Theme improvements</a>, including major updates to the light theme</li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Monitor performance analysis tool</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor#Source_map_support">CSS source maps</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Selecting_elements">Changes in the way node selection works in the Inspector</a></li> - <li><a href="/en-US/docs/Tools/Debugger#Call_stack_pane">Classic call stack</a> for the Debugger, and added the ability to <a href="/en-US/docs/Tools/Debugger#Highlight_and_inspect_DOM_nodes">highlight and inspect nodes</a></li> - <li><a href="/en-US/docs/Tools/Using_the_Source_Editor#See_also">Emacs and Vim keybindings in the source editor</a></li> -</ul> - -<h2 id="Firefox_28">Firefox 28</h2> - -<p><a href="https://hacks.mozilla.org/2013/12/split-console-pretty-print-minified-js-and-more-firefox-developer-tools-episode-28/" title="Aurora Hacks post">Firefox 28 Hacks post</a>. Highlights:</p> - -<ul> - <li>The App Manager has an integrated <a href="/en-US/Firefox_OS/Using_the_App_Manager#Manifest_editor">manifest editor</a></li> - <li>The <a href="/en-US/docs/Tools/Web_Console#The_split_console">Split Console</a> feature enables you to use the Web Console and another developer tool side by side</li> - <li><a href="/en-US/docs/Tools/Debugger#Pretty-print_a_minified_file">Pretty-print minified JavaScript</a> in the Debugger</li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Color picker tooltip</a> in the Inspector</li> - <li><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a> for debugging platform or add-on code</li> -</ul> - -<h2 id="Firefox_27">Firefox 27</h2> - -<p><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox 27 Hacks post</a>. Highlights:</p> - -<ul> - <li>The <a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a> lets you view and edit WebGL shaders</li> - <li>Instruct the debugger to <a href="/en-US/docs/Tools/Debugger#Break_on_a_DOM_event">break on DOM events</a> to which you're listening</li> - <li><a href="/en-US/docs/Tools/Page_Inspector#Editing_HTML">Edit HTML in the Inspector</a></li> - <li>See color swatches and background images in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a></li> - <li>The Web Console now <a href="/en-US/docs/Tools/Web_Console#Reflow_events">logs reflow events</a></li> - <li>CodeMirror is now used as the source editor in many tools</li> -</ul> diff --git a/files/pt-br/conflicting/web/accessibility/aria/widgets/index.html b/files/pt-br/conflicting/web/accessibility/aria/widgets/index.html deleted file mode 100644 index ec24fdd8c3..0000000000 --- a/files/pt-br/conflicting/web/accessibility/aria/widgets/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Visão geral -slug: conflicting/Web/Accessibility/ARIA/widgets -tags: - - Acessibilidade - - JavaScript - - Landing - - PrecisaAtualizar -translation_of: Web/Accessibility/ARIA/widgets/overview -original_slug: Web/Accessibility/ARIA/widgets/overview ---- -<div class="warning">Aviso: precisa de atualização</div> - -<h2 id="Introdução"><span class="mw-headline" id="Introduction">Introdução</span> </h2> - -<h2 id="Alguns_exemplos_funcionais_e_boas_práticas_na_construção_de_widgets_acessíveis_aplicando_JavaScript.">Alguns exemplos funcionais e boas práticas na construção de <em>widgets</em><span style='font-family: "Open Sans",arial,x-locale-body,sans-serif;'> acessíveis aplicando JavaScript.</span></h2> - -<h2 id="Recursos_Gerais"><span class="mw-headline" id="General_Resources">Recursos Gerais</span></h2> - -<ul> - <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">Guia de Estilo DHTML</a> recomendações para interação com o teclado</li> - <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">Guia de Práticas para criação de WAI-ARIA</a></li> -</ul> - -<h2 id="Caixa_de_seleção">Caixa de seleção</h2> - -<ul> - <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">Exemplos ARIA para Alternar Botões e exemplos dos 3 estados de uma Caixa de Seleção</a> (de "The Paciello Group Blog")</li> -</ul> - -<h2 id="Menu_2"><span class="mw-headline" id="Menu">Menu</span></h2> - -<ul> - <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Usando as Funções e Estados WAI-ARIA com o Controle de Menu YUI</a></li> -</ul> - -<h2 id="Deslizantes"><span class="mw-headline" id="Slider">Deslizantes</span></h2> - -<ul> - <li>Do blog Paciello Group: Deslizantes ARIA - <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">parte um</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">parte dois</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">parte três</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">exemplo</a>)</li> -</ul> - -<h2 id="Abas"><span class="mw-headline" id="Tabs">Abas</span></h2> - -<ul> - <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Melhorando a Acessibilidade na Visão em Abas com as Funções e Estados WAI-ARIA, </a>do blog YUI</li> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Melhorando as Abas jQuery UI, de acordo com WCAG 2.0 e ARIA</a></li> -</ul> - -<h2 id="Combo-box"><span class="mw-headline" id="Combobox">Combo-box</span></h2> - -<ul> - <li><a class="external text" href="http://www.protofunc.com/scripts/jquery/select/" rel="nofollow">Combo-box simples (não editável) como Select-Box-Replacement</a></li> -</ul> - -<h2 id="Lightbox_2"><span class="mw-headline" id="Lightbox">Lightbox</span></h2> - -<ul> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 e aplicação lightbox ARIA-</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conformant</a></li> -</ul> - -<h2 id="Validação_de_Formulários"><span class="mw-headline" id="Form_Validation">Validação de Formulários</span></h2> - -<ul> - <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">WCAG 2.0 e validação ativa de ARIA-conformant</a></li> -</ul> - -<h2 id="Tabelas"><span class="mw-headline" id="Table">Tabelas</span></h2> - -<ul> - <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">Tutorial alemão sobre criação de formulário acessível</a></li> - <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Exemplo de grade simples em CodeTalks</a></li> -</ul> diff --git a/files/pt-br/conflicting/web/accessibility/index.html b/files/pt-br/conflicting/web/accessibility/index.html deleted file mode 100644 index 98cab87efa..0000000000 --- a/files/pt-br/conflicting/web/accessibility/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Desenvolvimento Web -slug: conflicting/Web/Accessibility -tags: - - ARIA - - Accessibility - - Acessibilidade - - DHTML - - Desenvolvimento Web - - WebMechanics - - Widgets acessíveis - - XUL -translation_of: Web/Accessibility -translation_of_original: Web/Accessibility/Web_Development -original_slug: Web/Acessibilidade/Desenvolvimento_Web ---- -<p class="summary"><span class="seoSummary">Este documento oferece mais informações para os desenvolvedores sobre as acessibilidades <em>web</em> e XUL</span></p> - -<table> - <tbody> - <tr> - <td style="vertical-align: top;"> - <h2 id="Acessibilidade_na_Rede_Mundial">Acessibilidade na Rede Mundial</h2> - - <dl> - <dt><a href="/en-US/docs/Accessibility/ARIA" title="http://developer.mozilla.org/en-US/docs/Accessibility/ARIA">ARIA para desenvolvedores</a></dt> - <dd>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 <em>widgets </em>com<em> </em>JavaScript.</dd> - <dt><a href="/en/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en/Accessibility/Keyboard-navigable JavaScript widgets">JavaScript para<em> widgets</em> navegáveis pelo teclado</a></dt> - <dd>Até agora, programadores <em>web</em> construiam seus modelos de <em>widgets</em> baseados em <div> e <span>, por <span class="short_text" id="result_box" lang="pt"><span>faltarem</span> <span>as técnicas adequadas</span></span>. <strong>A acessibilidade através do teclado </strong>é parte das exigências mínimas para a acessibilidade, das quais todos os desenvolvedores devem ter consciência.</dd> - </dl> - - <h2 id="Acessibilidade_XUL">Acessibilidade XUL</h2> - - <dl> - <dt> </dt> - <dt><a href="/en/Building_accessible_custom_components_in_XUL">Construindo componentes personalizados e acessíveis com XUL</a></dt> - <dd>A utilização das técnicas de acessibilidade DHTML, a fim de tornar acessíveis os componentes customizados com a XUL.</dd> - <dt><a href="/en/XUL_accessibility_guidelines">Acessibilidade XUL - diretrizes de autoria</a></dt> - <dd>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 (<em>QA</em>) devem se familiarizar com elas.</dd> - </dl> - </td> - <td style="vertical-align: top;"> - <h2 id="Recursos_Externos">Recursos Externos</h2> - - <dl> - <dt><a href="http://diveintoaccessibility.info/">Mergulhe na Acessibilidade</a></dt> - <dd>Este livro responde a duas questões e a primeira, é: "<em>Por que eu devo tornar meu sítio mais acessível</em>?". A segunda, é: "<em>Como eu posso fazer meu sítio mais acessível</em>?"</dd> - <dt><a href="http://www-306.ibm.com/able/guidelines/web/accessweb.html">Construindo páginas acessíveis</a></dt> - <dd>Uma boa lista sobre acessiblidade na rede mundial, feita pela IBM.</dd> - </dl> - </td> - </tr> - </tbody> -</table> - -<p> </p> diff --git a/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html b/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html deleted file mode 100644 index 77f6ade2cc..0000000000 --- a/files/pt-br/conflicting/web/api/crypto/getrandomvalues/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: RandomSource -slug: conflicting/Web/API/Crypto/getRandomValues -tags: - - API - - Interface - - RandomSource - - Referencia - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource -original_slug: Web/API/RandomSource ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> 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.</p> - -<p><code>RandomSource</code> não é uma interface e nenhum objeto deste tipo pode ser criado.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em><code>RandomSource</code> não define ou herda nenhuma propriedade.</em></p> - -<dl> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Completa o {{ domxref("ArrayBufferView") }} com valores aleatoriamente criptografados.</dd> -</dl> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Apesar da <code>RandomSource</code> estar disponível apenas a partir da versão Firefox 26, ela já estava implementada na versão Firefox 21.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} para conseguir um objeto {{domxref("Crypto")}}.</li> - <li>{{jsxref("Math.random")}}, uma fonte de números aleatórios não criptografados.</li> -</ul> diff --git a/files/pt-br/conflicting/web/api/cryptokey/index.html b/files/pt-br/conflicting/web/api/cryptokey/index.html deleted file mode 100644 index c3357ad127..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: CryptoKey.algorithm -slug: conflicting/Web/API/CryptoKey -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/algorithm -original_slug: Web/API/CryptoKey/algorithm ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>A propriedade <code><strong>CryptoKey.algorithm</strong></code> de apenas leitura é um valor opaco contendo todas as informações sobre o algoritmo relacionado à key.</p> - -<p>Implementações diferentes tem diferentes tipos de valores opacos para os mesmos: tal objeto não pode ser compartilhado.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.algorithm</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um objeto opaco descrevendo o algoritmo com o qual a key está relacionado.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-algorithm', 'CryptoKey.algorithm') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h2 id="Dicionário">Dicionário</h2> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html b/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html deleted file mode 100644 index aa0e144712..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey_33bd21ca8f20b4cd8c7b8c762e2fc597/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: CryptoKey.type -slug: conflicting/Web/API/CryptoKey_33bd21ca8f20b4cd8c7b8c762e2fc597 -tags: - - API - - Apenas Leitura - - CryptoKey - - Propriedades - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/type -original_slug: Web/API/CryptoKey/type ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>O <code><strong>CryptoKey.type</strong></code> é uma propriedade de apenas leitura que indica o tipo de key: se for uma key para um algoritmo simétrico (<code>"secret"</code>) ou, para um algoritmo assimétrico, (<code>"public"</code> ou <code>"private"</code>, dependendo do seu propósito).</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.type</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um valor enumerado que pode ser: - - <ul> - <li><code>"secret"</code> representa uma key única utilizada para criptografar ou descriptografar uma mensagem que faz uso de um algoritmo simétrico.</li> - <li><code>"public"</code> representa uma key pública e compartilhável usada em um algoritmo assimétrico.</li> - <li><code>"private"</code> representa uma key utilizada em um algoritmo assimétrico que deve ser mantida em privado.</li> - </ul> - </li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificações</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-type', 'CryptoKey.type') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h3 id="Dicionário">Dicionário:</h3> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html b/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html deleted file mode 100644 index ef55c0bd81..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey_53ae81677f4d9298717f2f245ae4da0d/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: CryptoKey.extractable -slug: conflicting/Web/API/CryptoKey_53ae81677f4d9298717f2f245ae4da0d -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/extractable -original_slug: Web/API/CryptoKey/extractable ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>A propriedade de apenas leitura <code><strong>CryptoKey.extractable</strong></code> que indica se a key bruta do material pode ser extraída, para por exemplo arquivá-la.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.extractable</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um {{jsxref("Boolean")}} indicando se a chave pode ser extraída.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-extractable', 'CryptoKey.extractable') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h3 id="Dicionário">Dicionário</h3> - -<p>"Key" = "Chave"</p> diff --git a/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html b/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html deleted file mode 100644 index af426c976c..0000000000 --- a/files/pt-br/conflicting/web/api/cryptokey_f39d256ef7fbd1cf0a1f26de1e887ae7/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: CryptoKey.usages -slug: conflicting/Web/API/CryptoKey_f39d256ef7fbd1cf0a1f26de1e887ae7 -tags: - - API - - CryptoKey - - Propriedade - - Read-only - - Referencia - - Web Crypto API -translation_of: Web/API/CryptoKey -translation_of_original: Web/API/CryptoKey/usages -original_slug: Web/API/CryptoKey/usages ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p>A propriedade de apenas leitura <code><strong>CryptoKey.usages</strong></code> é um conjunto enumerado que indica os propósitos da key.</p> - -<p>Possíveis valores são:</p> - -<ul> - <li><code>"encrypt"</code>, permitindo que a key seja utilizada para {{glossary("encryption", "encrypting")}} mensagens.</li> - <li><code>"decrypt"</code>, permitindo que a key seja utilizada para {{glossary("decryption", "decrypting")}} mensagens.</li> - <li><code>"sign"</code>, permitindo que a key seja utilizada para {{glossary("signature", "signing")}} mensagens.</li> - <li><code>"verify"</code>, permitindo que a key seja utilizada para {{glossary("verification", "verifying the signature")}} de mensagens.</li> - <li><code>"deriveKey"</code>, permitindo que a key seja utilizada como key base na derivação de uma nova key.</li> - <li><code>"deriveBits"</code>, permitindo que a key seja utilizada como key base na derivação de bits de informação para uso em criptografias primitivas.</li> - <li><code>"wrapKey"</code>, permitindo que a key envolva uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li> - <li><code>"unwrapKey"</code>, permitindo que a key desvincule uma key simétrica para uso (transferência, armazenamento) em ambientes não seguros.</li> -</ul> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>result</em> = <em><code>key</code></em><code>.usages</code> -</pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<ul> - <li><code><em>result</em></code> é um {{jsxref("Array")}} de valores enumerados.</li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{ SpecName('Web Crypto API', '#dfn-CryptoKey-usages', 'CryptoKey.usages') }}</td> - <td>{{ Spec2('Web Crypto API') }}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatChrome(37) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(34) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>37</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(34) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("Crypto")}} e {{domxref("Crypto.subtle")}}.</li> - <li>{{domxref("CryptoKey")}}, a interface a qual ele pertence.</li> -</ul> - -<h2 id="Dicionário">Dicionário:</h2> - -<p>"Key" = "Chave"</p> 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 deleted file mode 100644 index ef2930bbcb..0000000000 --- a/files/pt-br/conflicting/web/api/document_object_model/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Document Object Model (DOM) -slug: conflicting/Web/API/Document_Object_Model -tags: - - DOM - - NeedsTranslation - - References - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: DOM -original_slug: DOM ---- -<div class="callout-box"> - <strong><a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="en-US/docs/Using_the_W3C_DOM_Level_1_Core">Using the W3C DOM Level 1 Core</a></strong><br> - Introduction to the W3C DOM.</div> -<div> - <p>The <strong>Document Object Model</strong> (<strong>DOM</strong>) is an API for <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> 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 <a href="/en-US/docs/JavaScript" title="https://developer.mozilla.org/en-US/docs/JavaScript">JavaScript</a>.</p> -</div> - <div class="cleared topicpage-table row"> - <div class="section"> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentation about the DOM</h2> - <dl> - <dt> - <a href="/en-US/docs/Gecko_DOM_Reference" title="en-US/docs/Gecko_DOM_Reference">Gecko DOM Reference</a></dt> - <dd> - The Gecko Document Object Model Reference.</dd> - <dt> - <a href="/en-US/docs/DOM/About_the_Document_Object_Model" title="en-US/docs/About_the_Document_Object_Model">About the Document Object Model</a></dt> - <dd> - A short introduction to the DOM.</dd> - <dt> - <a href="/en-US/docs/JavaScript_technologies_overview" title="en-US/docs/The_DOM_and_JavaScript">The DOM and JavaScript</a></dt> - <dd> - What is the DOM? What is JavaScript? How do I use them together on my web page? This document answers these questions and more.</dd> - <dt> - <a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="en-US/docs/DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt> - <dd> - How to obtain information on and manipulate styling via the DOM.</dd> - <dt> - <a href="/en-US/docs/DOM/DOM_event_reference" title="DOM event reference">DOM event reference</a></dt> - <dd> - Lists all the DOM events and their meanings.</dd> - <dt> - <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="en-US/docs/DOM/Manipulating_the_browser_history">History API: Manipulating the browser history</a></dt> - <dd> - Demonstrates the HTML5-introduced DOM {{ domxref("window.history") }} object, allowing dynamic changes to the browser history.</dd> - <dt> - <a href="/en-US/docs/Using_files_from_web_applications" title="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications">File API: Using files from web applications</a></dt> - <dd> - Describes the HTML5-introduced capability to select a local file and read data from it.</dd> - <dt> - <a href="/en-US/docs/DOM/Using_the_Page_Visibility_API" title="en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></dt> - <dd> - Explains how to detect and use information about a web page being in the foreground or in the background.</dd> - <dt> - <a href="/en-US/docs/DOM/Using_full-screen_mode" title="Using full-screen mode">Fullscreen API: Using the fullscreen mode</a></dt> - <dd> - Describes how to set up a page that use the whole screen, without any browser UI around it.</dd> - <dt> - <a href="/en-US/docs/Determining_the_dimensions_of_elements" title="en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a></dt> - <dd> - How to figure out the right way to determine the dimensions of elements, given your needs.</dd> - <dt> - <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface" title="en-US/docs/Dynamically_modifying_XUL-based_user_interface">Dynamically modifying XUL-based user interface</a></dt> - <dd> - The basics of manipulating the XUL UI with DOM methods.</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/DOM" title="/en-US/docs/tag/DOM">View All...</a></span></p> - </div> - <div class="section"> - <h2 class="Community" id="Community" name="Community">Getting help from the community</h2> - <p>You need help on a DOM-related problem and can't find the solution in the documentation?</p> - <ul> - <li>Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> - </ul> - <h2 class="Tools" id="Tools" name="Tools">Tools easing working with the DOM</h2> - <ul> - <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> - <li><a href="/en-US/docs/DOM_Inspector" title="en-US/docs/DOM_Inspector">DOM Inspector</a></li> - <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> - <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> - </ul> - <p><span class="alllinks"><a href="/en-US/docs/tag/DOM:Tools" title="/en-US/docs/tag/DOM:Tools">View All...</a></span></p> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> - <ul> - <li><a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/CSS" title="en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/DHTML" title="en-US/docs/DHTML">DHTML</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></li> - </ul> - </div> - </div> -<p> </p> diff --git a/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html b/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html deleted file mode 100644 index 03eb4f79de..0000000000 --- a/files/pt-br/conflicting/web/api/globaleventhandlers/onscroll/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: window.onscroll -slug: conflicting/Web/API/GlobalEventHandlers/onscroll -translation_of: Web/API/GlobalEventHandlers/onscroll -translation_of_original: Web/API/Window/onscroll -original_slug: Web/API/Window/onscroll ---- -<p>{{ ApiRef() }}</p> -<h3 id="Summary" name="Summary">Sumário</h3> -<p>Especifica a função a ser chamada quando é feito o scroll na janela.</p> -<h3 id="Syntax" name="Syntax">Sintaxe</h3> -<pre class="eval">window.onscroll = <em>funcRef</em>; -</pre> -<ul> - <li><code>funcRef</code> é uma função de referência.</li> -</ul> -<h3 id="Example" name="Example">Exemplos</h3> -<h4 id="Exemplo_1_Genérico">Exemplo 1: Genérico</h4> -<pre class="brush: js">window.onscroll = function (oEvent) { - // executa um bloco de código ou funções, quando o scroll é feito na janela. -} -</pre> -<h4 id="Examplo_2_Dectando_a_rolagem">Examplo 2: Dectando a rolagem</h4> -<p>O exemplo a seguir, irá disparar um <code><a href="/pt-BR/docs/DOM/window.alert" title="/pt-BR/docs/DOM/window.alert">alerta</a></code> sempre que o usuário rolar a página .</p> -<pre class="brush: html"><!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> -</pre> -<h4 id="Examplo_3_Mostra_um_link_no_topo_da_página_depois_da_rolagem.">Examplo 3: Mostra um link no topo da página depois da rolagem.</h4> -<p>O exemplo a seguir irá mostrar um link( uma imagem de seta ) no topo da página quando a rolagem vertical atingir 500 pixels</p> -<p> </p> -<pre class="brush: html"><!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></pre> -<h3 id="Notes" name="Notes">Notas</h3> -<p>{{ 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.<br> - Esse bug foi corrigido no Gecko 1.8/Firefox 1.5</p> -<p>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.</p> -<h3 id="Specification" name="Specification">Especificação</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects" title="http://www.w3.org/TR/html5/webappapis.html#event-handlers-on-elements-document-objects-and-window-objects">HTML5: Event handlers on elements, Document objects, and Window objects</a></li> -</ul> -<p>{{ languages( { "zh-cn": "zh-cn/DOM/window.onscroll"} ) }}</p> 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 deleted file mode 100644 index e8dd96166b..0000000000 --- a/files/pt-br/conflicting/web/api/html_drag_and_drop_api/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: DragDrop -slug: conflicting/Web/API/HTML_Drag_and_Drop_API -tags: - - NeedsTranslation - - TopicStub -translation_of: Web/API/HTML_Drag_and_Drop_API -translation_of_original: DragDrop -original_slug: DragDrop ---- -<p> </p> -<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p> diff --git a/files/pt-br/conflicting/web/api/index.html b/files/pt-br/conflicting/web/api/index.html deleted file mode 100644 index 0755dab0cf..0000000000 --- a/files/pt-br/conflicting/web/api/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Element.name -slug: conflicting/Web/API -tags: - - API - - DOM - - Element - - NeedsBrowserCompatibility - - NeedsUpdate - - Property - - Reference - - Web -translation_of: Web/API -translation_of_original: Web/API/Element/name -original_slug: Web/API/Element/name ---- -<p>{{ APIRef("DOM") }}</p> - -<h2 id="Summary" name="Summary">Summary</h2> - -<p><code><strong>name</strong></code> 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") }}.</p> - -<div class="note"> -<p><strong>Nota:</strong> A propriedade <code>name</code> não existe para outros elementos; diferente de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> e <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ela não é uma propriedade das interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> -</div> - -<p><code>name</code> pode ser usada no método {{ domxref("document.getElementsByName()") }}, em um <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> 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.</p> - -<h2 id="Syntax" name="Syntax">Sintaxe</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">Exemplo</h2> - -<pre class="eval"><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> -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>No Internet Explorer (IE), não é possível ajustar ou modificar a propriedade <code>name</code> de objetos do DOM criados com {{ domxref("document.createElement()") }}.</p> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<p>Especificação W3C DOM 2 HTML:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/pt-br/conflicting/web/api/url/index.html b/files/pt-br/conflicting/web/api/url/index.html deleted file mode 100644 index a4ffb566f8..0000000000 --- a/files/pt-br/conflicting/web/api/url/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Window.URL -slug: conflicting/Web/API/URL -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL -original_slug: Web/API/Window/URL ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p>A propriedade <strong><code>Window.URL</code></strong> 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")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>Chamando um método estático:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>Construindo um novo objeto:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Do Gecko 2 (Firefox 4) ao Gecko 18 incluído, o Gecko retornou um objeto com o tipo interno <code>nsIDOMMozURLProperty</code> não padrão. Na prática, isso não fez diferença.</p> - -<p>[2] Implementado sob o nome não padronizado <code>webkitURL</code>.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("URL")}} API.</li> -</ul> diff --git a/files/pt-br/conflicting/web/api/webrtc_api/index.html b/files/pt-br/conflicting/web/api/webrtc_api/index.html deleted file mode 100644 index 5f6c532f3a..0000000000 --- a/files/pt-br/conflicting/web/api/webrtc_api/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: WebRTC -slug: conflicting/Web/API/WebRTC_API -tags: - - Media - - NeedsContent - - NeedsTranslation - - TopicStub - - WebRTC -translation_of: Web/API/WebRTC_API -translation_of_original: WebRTC -original_slug: WebRTC ---- -<p>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.</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note:</strong> Grande parte desse co nteúdo está desatualizado. Vamos atualizá-lo em breve.</p> -</div> - -<p>Quer descobrir WebRTC? Assista a este <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="/en-US/docs/https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">vídeo introdutório na web!</a>!</p> - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentação sobre WebRTC</h2> - - <dl> - <dt><a href="/en-US/docs/WebRTC/Introduction" title="en-US/docs/Mozilla/Boot_to_Gecko/Introduction">Introdução ao WebRTC</a></dt> - <dd>Um guia introdutório sobre o que é WebRTC e como funciona. -</dd> - <dt><a href="/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="/en-US/docs/WebRTC/Using_the_Network_Stream_API">Usando a API Network Stream</a></dt> - <dd>Um guia para usar a API Network Stream para transmitir áudio e vídeo.</dd> - <dt><a href="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC" title="/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Comunicações ponto a ponto com WebRTC</a></dt> - <dd> Como executar comunicações ponto a ponto usando as APIs WebRTC.</dd> - <dt><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="taking webcam photos">Capturando imagens de uma webcam</a></dt> - <dd>Um guia introdutório sobre o que é WebRTC e como funciona.</dd> - <dt><a href="/en-US/docs/WebRTC/MediaStream_API" title="/en-US/docs/WebRTC/MediaStream_API">API MediaStream</a></dt> - <dd>A API que suporta a geração e manipulação de objetos de fluxo de mídia.</dd> - <dt><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/">getUserMedia()</a></dt> - <dd>A função de navegador que fornece acesso aos dispositivos de mídia do sistema.</dd> - </dl> - - <p><span class="alllinks"><a href="/en-US/docs/tag/WebRTC" title="/en-US/docs/tag/B2G">Saiba mais...</a></span></p> - - <h2 class="Tools" id="Exemplos">Exemplos</h2> - - <ul> - <li><a href="http://idevelop.github.com/ascii-camera/" title="http://idevelop.github.com/ascii-camera/">Câmera ASCII</a></li> - </ul> - </td> - <td> - <h2 class="Community" id="Community" name="Community">Obter ajuda da comunidade</h2> -Ao desenvolver sites e aplicações web que aproveitarão as tecnologias WebRTC, pode ser útil conversar com outras pessoas do mesmo modo.<p></p> - - <ul> - <li>Consulte o fórum de tópicos da mídia: {{ DiscussionList("dev-media", "mozilla.dev.media") }}</li> - </ul> - - <ul> - <li>Faça sua pergunta no canal IRC de mídia da Mozilla: <a class="link-irc" href="irc://irc.mozilla.org/media" title="irc://irc.mozilla.org/b2g">#media</a></li> - </ul> - - <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Não se esqueça da etiqueta...</a></span></p> - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos relacionados</h2> - - <ul> - <li><a href="/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">Usando HTML5 áudio e vídeo</a></li> - </ul> - - <h2 class="Tools" id="Recursos">Recursos</h2> - - <ul> - <li>{{spec("http://www.w3.org/TR/webrtc/", "Especificação WebRTC", "wd")}}</li> - <li><a href="http://mozilla.github.io/webrtc-landing/" title="http://mozilla.github.io/webrtc-landing/">WebRTC teste da página de destino</a></li> - </ul> - </td> - </tr> - </tbody> -</table> diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html deleted file mode 100644 index 69bc73a64f..0000000000 --- a/files/pt-br/conflicting/web/api/windoworworkerglobalscope/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: WindowBase64 -slug: conflicting/Web/API/WindowOrWorkerGlobalScope -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 -original_slug: Web/API/WindowBase64 ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> - -<p>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.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This helper neither defines nor inherits any properties.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This helper does not inherit any methods.</em></p> - -<dl> - <dt>{{domxref("WindowBase64.atob()")}}</dt> - <dd>Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt>{{domxref("WindowBase64.btoa()")}}</dt> - <dd>Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html b/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html deleted file mode 100644 index 4fbad68ef6..0000000000 --- a/files/pt-br/conflicting/web/api/windoworworkerglobalscope_e2691f7ad05781a30c5fc5bb3b3f633a/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: WindowTimers -slug: conflicting/Web/API/WindowOrWorkerGlobalScope_e2691f7ad05781a30c5fc5bb3b3f633a -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers -original_slug: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>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.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html deleted file mode 100644 index f8041d40bb..0000000000 --- a/files/pt-br/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: WebAPI -slug: conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3 -tags: - - Apps - - DOM - - Firefox OS - - Mobile -translation_of: Web/API -translation_of_original: WebAPI -original_slug: WebAPI ---- -<p><strong>WebAPI</strong><span id="result_box" lang="pt"><span class="hps"> é um termo usado</span> <span class="hps">para se referir a</span> <span class="hps">um conjunto de</span> <span class="hps">compatibilidade de dispositivos</span> <span class="alt-edited hps">e acessar</span> <span class="hps">APIs</span> <span class="hps">que permitem que</span> <span class="hps">aplicativos</span> <span class="alt-edited hps">Web e</span> <span class="alt-edited hps">conteúdos para</span> <span class="hps">acessar o hardware</span> <span class="hps">do dispositivo (como</span> <span class="hps">o estado da bateria</span> <span class="hps">ou</span> <span class="hps">o</span> <span class="hps">hardware</span> <span class="hps">de vibração</span> <span class="hps">do dispositivo)</span><span>, bem como</span> <span class="hps">o acesso aos dados</span> <span class="hps">armazenados no dispositivo</span> <span class="hps">(como</span> <span class="hps">como o calendário</span> <span class="hps">ou</span> <span class="hps">lista de contatos</span><span>)</span><span>.</span> <span class="hps">Ao acrescentar estas</span> <span class="hps">APIs</span><span>,</span> <span class="hps">esperamos expandir</span> <span class="hps">o que a</span> <span class="hps">Web</span> <span class="hps">pode fazer hoje</span> <span class="hps">e apenas</span> <span class="hps">plataformas proprietárias</span> <span class="hps">foram capazes de fazer</span> <span class="hps">no passado.</span></span></p> - -<div class="note"> -<p><strong>Nota:</strong> 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 <a href="/en-US/docs/WebAPI/Doc_status">status da documentação da WebAPI</a>, onde estamos acompanhando o trabalho em documentos WebAPI.</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: para uma breve explicação de cada distintivo, consulte a documentação do <a href="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">pacote de aplicativos</a>.</p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">APIs de Comunicação</h2> - -<dl> - <dt><a href="/pt-BR/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API (API de Informação de Rede)</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Fornece</span> <span class="hps">informações básicas sobre</span> <span class="hps">a conexão de rede</span> <span class="hps">atual, como a</span> <span class="hps">velocidade de conexão.</span></span></dd> - <dt><a href="/pt-BR/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a> {{NonStandardBadge}}</dt> - <dd><span id="result_box" lang="pt"><span class="hps">A API</span> <span class="hps">WebBluetooth</span> <span class="hps">fornece acesso</span> <span class="hps">de baixo nível ao</span> <span class="hps">hardware</span> <span class="hps">Bluetooth</span> <span class="hps">do dispositivo.</span></span></dd> - <dt><a href="/pt-BR/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API (API de Conexão Móvel)</a> {{NonStandardBadge}}</dt> - <dd>Expões informações sobre a conectividade do celular, como a força do sinal, informação da operadora, assim por diante.</dd> - <dt><a href="/pt-BR/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API (API de Estatísticas de Rede)</a> {{NonStandardBadge}}</dt> - <dd><span id="result_box" lang="pt"><span class="hps">Monitora a utilização</span> <span class="hps">de dados e</span> <span class="hps">expõe</span> <span class="hps">esses dados para</span> <span class="hps">aplicações</span> <span class="hps">privilegiadas.</span></span></dd> - <dt><a href="/en-US/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony (Telefonia)</a> {{NonStandardBadge}}</dt> - <dd><span id="result_box" lang="pt"><span class="hps">Permite</span> <span class="hps">aplicações</span> <span class="hps">efectuar e atender</span> <span class="hps">chamadas telefônicas e</span> <span class="hps">usar a interface de</span> <span class="hps">usuário de telefonia</span> <span class="alt-edited hps">embutida.</span></span></dd> - <dt><a href="/en-US/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> - <dd><span id="result_box" lang="pt"><span class="hps">Permite</span> <span class="alt-edited hps">que aplicações</span> <span class="alt-edited hps">enviem e recebam</span> <span class="hps">mensagens de texto SMS</span><span>, bem como</span> <span class="hps">para acessar e gerenciar</span> <span class="hps">as mensagens armazenadas</span> <span class="hps">no dispositivo.</span></span></dd> - <dt><a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API (API de Informações WiFi)</a> {{NonStandardBadge}}</dt> - <dd> - <div class="almost_half_cell" id="gt-res-content"> - <div dir="ltr" style="zoom: 1;"><span id="result_box" lang="pt"><span class="alt-edited hps">Uma</span> <span class="hps">API</span> <span class="alt-edited hps">privilegiada</span> <span class="hps">que fornece informações sobre</span> <span class="hps">a força do sinal</span><span>, o nome</span> <span class="hps">da rede atual</span><span>, as redes</span> <span class="hps">Wi-Fi disponíveis</span><span>,</span> <span class="hps">e assim por diante</span><span>.</span></span></div> - </div> - </dd> -</dl> - -<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">APIs de Acesso ao Hardware</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Using_Light_Events">Ambiente Light Sensor API (API do Sensor de Luz Ambiente)</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Fornece acesso ao</span> <span class="hps">sensor de luz ambiente</span><span>, que permite que</span> <span class="hps">seu aplicativo</span> <span class="alt-edited hps">detecte</span> <span class="hps">o nível de luz</span> <span class="alt-edited hps">ao redor</span> <span class="hps">do dispositivo.</span></span></dd> - <dt><a href="/en-US/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status"><span class="short_text" id="result_box" lang="pt"><span class="alt-edited hps">Battery Status API (API de</span> <span class="alt-edited hps">Estado da Bateria</span></span></a>)</dt> - <dd><span class="short_text" lang="pt"><span class="alt-edited hps">Fornece informações sobre nível de carregamento da bateria e quando ou não o dispositivo está plugado e carregando.</span></span></dd> - <dt><a href="/en-US/docs/Using_geolocation" title="Using_geolocation">Geolocation API (API de Geolocalização)</a></dt> - <dd>Provê informação sobre a localização física do dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API (API de Bloqueio do mouse)</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Permitir</span> <span class="hps">aplicativos</span> <span class="alt-edited hps">bloquearem</span> <span class="hps">o acesso</span> <span class="hps">ao mouse</span> <span class="hps">e ter acesso a</span> <span class="hps">deltas</span> <span class="hps">de movimento</span> <span class="hps">ao invés de</span> <span class="hps">coordenadas absolutas</span><span>, o que</span> <span class="hps">é ótimo</span> <span class="hps">para jogos.</span></span></dd> - <dt><a href="/en-US/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API (API de Proximidade)</a></dt> - <dd>Permite dectar a proximidade do dispositivo a objetos próximos, como o rosto do usuário.</dd> - <dt><a href="/en-US/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API (API de Orientação do Dispositivo)</a></dt> - <dd>Fornece notificações quando a orientação do dispositivo muda.</dd> - <dt><a href="/en-US/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API (API de Orientação de Tela)</a></dt> - <dd>Fornece notificações quando a tela do dispositivo muda. Você também uasr a API para permitir seu aplicativo indicar qual orientação é preferida.</dd> - <dt><a href="/en-US/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API (API de Vibração)</a></dt> - <dd>Permite aplicativos controlarem o hardware de vibração do dispositivo para coisas como feedback tátil em jogos. <strong>Não </strong>é a intenção para utilização como vibrações de notificação. Veja a <a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">API de Alarme</a> para isso.</dd> - <dt><a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API (API de Camera)</a> {{NonStandardBadge}}</dt> - <dd>Permite aplicativos tirarem fotograficas e/ou gravar vídeos usando a camera do dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API (API Gerenciamento de Energia) </a>{{NonStandardBadge}}</dt> - <dd>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.<span class="alllinks"><a href="/en-US/docs/tag/WebAPI" title="tag/CSS">Ver todos...</a></span></dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">APIs de Gerenciamento de Dados</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt> - <dd>Fornece suporte para escrever arquivos com suporte a bloqueio.</dd> - <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Armazenamento</span> <span class="hps">do lado do cliente</span> <span class="hps">de dados estruturados</span><span>, com suporte para</span> <span class="hps">pesquisas</span> <span class="hps">de alto desempenho.</span></span></dd> - <dt><a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API (API de Configurações)</a> {{NonStandardBadge}}</dt> - <dd>Permite apps examinarem e alterar todas opções de configuração do sistema que são permanentemente armazenadas no dispositivo.</dd> -</dl> - -<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Outras APIs</h2> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API (API de Alarme)</a></dt> - <dd>Permite apps agendarem notificações. Também fornece suporte para automaticamente abrir um app em um tempo específico.</dd> - <dt><a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> - <dd>Permite a plataforma enviar mensagens de notificação para aplicações específicas.</dd> - <dt><a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Notificações Web</a></dt> - <dd>Permites aplicações enviarem notificacões mostradas no nível do sistema.</dd> - <dt><a href="/en-US/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> - <dd>As WebApps APIs abertas fornecem suporte para instalar e gerenciar WebApps. Em complemento, suporte é dado para permitir apps determinem informações de pagamento.</dd> - <dt><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities </a><a href="/en-US/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">(Atividades Web)</a> {{NonStandardBadge}}</dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">WebPayment API</a> <a href="/en-US/docs/Apps/Publishing/In-app_payments" title="Apps/Publishing/In-app_payments">(API Pagamento Web)</a> {{NonStandardBadge}}</dt> - <dd>Permite conteúdos web iniciar pagamentos e restituição para bens virtuais.</dd> - <dt><a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> - <dd><span id="result_box" lang="pt"><span class="hps">Fornece suporte</span> <span class="hps">para a construção de</span> <span class="alt-edited hps">um navegador Web</span> <span class="hps">completamente</span> <span class="alt-edited hps">utilizando tecnologias</span> <span class="hps">da Web</span> <span class="atn hps">(</span><span>em essência,</span> <span class="hps">um navegador</span> <span class="hps">em um navegador</span><span>)</span><span>.</span></span></dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>(Notificações em Segundo Plano)</dt> - <dd>Permite apps receberem notificações quando o usuário não estiver ativamente utilizando o dispositivo.</dd> - <dt><a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions AP</a><a href="/en-US/docs/WebAPI/Permissions" style="line-height: 1.5;" title="WebAPI/Permissions">I(API de Permissões</a><a href="/en-US/docs/WebAPI/Permissions" style="line-height: 1.5;" title="WebAPI/Permissions">)</a><span style="line-height: 1.5;"> {{NonStandardBadge}}</span></dt> - <dd>Gerencia permissão de apps em localização centralizada. Utilizado pelo app de Configurações.</dd> - <dt><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API (</a><a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">API de Tempo/Relógio) </a> {{NonStandardBadge}}</dt> - <dd>Fornece suporte para configuração do tempo atual. O fuso horário é definido utilizando a <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API (API de Configurações)</a>.</dd> -</dl> - -<h2 class="Community" id="Community" name="Community">Comunidade WebAPI</h2> - -<p>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.</p> - -<ul> - <li>Consultar forum de WebAPI {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> - <li>Visite o canal no IRC WebAPI: <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> -</ul> - -<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h2> - -<ul> - <li><a href="/en-US/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a> é a representação do HTML como uma árvore.</li> - <li><a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a> - a linguagem de scripts para a Web.</li> - <li><a href="/en-US/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: uma lista de tópicos da WebAPI e o status da documentação.</li> -</ul> -</div> -</div> - -<p> </p> 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 deleted file mode 100644 index 48fdec5b1a..0000000000 --- a/files/pt-br/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ /dev/null @@ -1,329 +0,0 @@ ---- -title: Usando CSS flexible boxes (Caixas Flexíveis) -slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -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 -original_slug: CSS/Usando_caixas_flexiveis_css ---- -<p>{{ SeeCompatTable() }}</p> - -<p>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.</p> - -<div class="note"><strong>Nota:</strong> a especificação de CSS Flexible Boxes Layout ainda é um rascunho, portanto todas as propriedade devem ser prefixadas com <code>-ms-</code>, <code>-moz-</code>, <code>-o-</code> e <code>-webkit-</code> para garantir a compatibilidade com os navegadores Internet Explorer, Firefox (Gecko), Opera e Chrome/Safari (Webkit), respectivamente.</div> - -<p>Veja <a href="/en/CSS/Flexbox" title="/en/CSS/Flexbox">Flexbox</a> para uma introdução à API.</p> - -<h2 id="Conceito_de_Caixas_Flexíveis">Conceito de Caixas Flexíveis</h2> - -<p>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.</p> - -<h2 id="Terminologia_de_Caixas_Flexíveis">Terminologia de Caixas Flexíveis</h2> - -<p>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: <code>flex-direction</code> of <code>row</code>), o que significa que os itens flex seguem uns aos outros horizontalmente através do eixo principal (NT: <em>main axis</em>) de acordo com o sentido de escrita (sentido em que o texto flui), nesse caso da esquerda para a direita.</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> - -<dl> - <dt>Container Flex</dt> - <dd>O elemento pai sobre o qual os itens flex estão contidos. Um container flex é definido usando os valores <code>flex</code> ou <code>inline-flex</code> da propriedade <code><a href="/en/CSS/display" rel="internal" title="display">display</a>.</code></dd> - <dt>Item Flex</dt> - <dd> - <p>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.</p> - - <div class="note">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 <code>display:none</code>.</div> - - <div class="note">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.</div> - </dd> - <dt>Eixos</dt> - <dd> - <p>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.</p> - - <ul> - <li>A propriedade <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> define o eixo principal.</li> - <li>A propriedade <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define como os itens flex são posicionados sobre o eixo principal em uma determinada linha.</li> - <li>A propriedade <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define o padrão sobre como os itens flex são posicionados sobre o eixo cruzado em uma determinada linha.</li> - <li>A propriedade <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define como um determinado item flex deve ser alinhado no eixo principal. Essa propriedade sobrescreve o padrão estabelecido por <code>align-items.</code></li> - </ul> - </dd> - <dt>Directions</dt> - <dd> - <p>The <strong>main start</strong>/<strong>main end </strong>and <strong>cross start</strong>/<strong>cross end</strong> 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 <code>writing-mode</code> (left-to-right, right-to-left, etc.).</p> - - <ul> - <li>The <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> property assigns elements to ordinal groups and determines which elements appear first.</li> - <li>The <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> property shorthands the <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> and <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> properties to lay out the flex items.</li> - </ul> - </dd> - <dt>Lines</dt> - <dd> - <p>Flex items can be laid out on either a single line or on several lines according to the <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> property, which controls the direction of the cross axis and the direction in which new lines are stacked.</p> - </dd> - <dt>Dimensions</dt> - <dd> - <p>The flex items' agnostic equivalents of height and width are <strong>main size</strong> and <strong>cross size,</strong> which respectively follow the main axis and cross axis of the flex container.</p> - - <ul> - <li>The <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> and <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> properties have a new value, <code>auto</code> that establishes the minimum size of a flex item.</li> - <li>The <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> property shorthands the <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, and <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> properties to establish the flexibility of the flex items.</li> - </ul> - </dd> -</dl> - -<h2 id="Designando_uma_flexible_box">Designando uma flexible box</h2> - -<p>Para designar o CSS parar elementos usandos esse estilo, a propriedade <a href="/en/CSS/display" title="/en/CSS/display">display</a> deve ser setada da seguinte forma:</p> - -<pre>display : flex</pre> - -<p>ou</p> - -<pre>display : inline-flex</pre> - -<p>Definindo o elemento como flex container e seus filhos como flex items. O valor <code>flex</code> faz o conteiner uma elemento de block-level. O valor <code>inline-flex</code> faz o flex conteiner um elemento inline-level atmico.</p> - -<div class="note"><strong>Note:</strong> For the vendor prefix tag, append the string on the display property (not on the display attribute itself). For example, <code>display : -webkit-flex</code>.</div> - -<h2 id="Flexible_box_properties">Flexible box properties</h2> - -<p><span id="cke_bm_69S"> </span>{{ page("/en-US/docs/CSS/Flexbox", "flex- properties") }}<span id="cke_bm_69E"> </span></p> - -<dl> -</dl> - -<h3 id="Propriedades_que_não_afetam_container_flexíveis">Propriedades que não afetam container flexíveis</h3> - -<p>Desde que os containers flexíveis usam um algoritmo de layout diferente, algumas propriedades não fazem sentido em um container flex.</p> - -<ul> - <li>Propriedades column-* do <a href="/en/CSS/Using_CSS_multi-column_layouts" title="Using CSS multi-column layouts">Módulo de múltiplas colunas</a> não tem efeito no flex.</li> - <li><a href="/en/CSS/float" title="float"><code>float</code></a> e <a href="/en/CSS/clear" title="clear"><code>clear</code></a> não tem efeito em um item de um container flex. Usar <code>float</code> faz com que a propriedade de display do elemento seja um <code>block.</code></li> - <li><a href="/en/CSS/vertical-align" title="vertical-align"><code>vertical-align</code></a> não tem efeito no alinhamento de itens de um container flex.</li> -</ul> - -<h2 id="Examples">Examples</h2> - -<p>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.</p> - -<h3 id="Basic_flex_example">Basic flex example</h3> - -<p>This basic example shows how to apply "flexibility" to an element, and how sibling elements behave in a flexible state. </p> - -<pre><!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></pre> - -<h3 id="Holy_Grail_Layout_example">Holy Grail Layout example</h3> - -<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>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.</p> - -<pre> -<!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></pre> - -<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2> - -<p>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.</p> - -<p>Flexibles boxes are laid out in conformance of the <a href="/pl/XUL/Własność/mode" title="mode">writing mode</a>. Which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p> - -<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p> - -<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code> and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> and <code>page-break-inside</code> properties are accepted on a flex container, flex items and inside flex items.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>21.0{{ property_prefix("-webkit") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> diff --git a/files/pt-br/conflicting/web/css/cursor/index.html b/files/pt-br/conflicting/web/css/cursor/index.html deleted file mode 100644 index 868643493e..0000000000 --- a/files/pt-br/conflicting/web/css/cursor/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: '-moz-cell' -slug: conflicting/Web/CSS/cursor -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell -original_slug: Web/CSS/-moz-cell ---- -<div>{{CSSRef}} {{deprecated_header}}</div> - -<p><em>Não use esse valor! </em>Use o valor <code>cursor</code> {{cssxref("cursor#cell","cell")}} em seu lugar.</p> diff --git a/files/pt-br/conflicting/web/guide/index.html b/files/pt-br/conflicting/web/guide/index.html deleted file mode 100644 index 946da629f5..0000000000 --- a/files/pt-br/conflicting/web/guide/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Desenvolvimento Web -slug: conflicting/Web/Guide -translation_of: Web/Guide -translation_of_original: Web_Development -original_slug: desenvolvimento_web ---- -<p><strong>Desenvolvimento web </strong>compreende todos os aspectos do desenvolvimento de um site ou aplicação web.</p> -<p>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.</p> -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation_topics">Documentation topics</h2> - <h3 id="Technologies">Technologies</h3> - <dl> - <dt> - <a class="internal" href="/en-US/docs/Web_Development/Introduction_to_Web_development" title="en-US/docs/Web Development/Introduction to Web development">Introduction to Web development</a></dt> - <dd> - A guide to learning how to develop for the Web.</dd> - <dt> - <a class="internal" href="/en-US/docs/HTML" rel="internal">HTML</a></dt> - <dd> - HyperText Markup Language is the basic language for creating web pages and other documents displayed in a browser.</dd> - <dt> - <a class="internal" href="/en-US/docs/CSS" rel="internal">CSS</a></dt> - <dd> - Cascading Style Sheets make it possible to do advanced layout and page design on the Web.</dd> - <dt> - <a class="internal" href="/en-US/docs/JavaScript" rel="internal">JavaScript</a></dt> - <dd> - JavaScript is the most commonly used scripting language for developing web applications; it's also used in the development of Mozilla-based software.</dd> - <dt> - <a class="internal" href="/en-US/docs/DOM" rel="internal">DOM</a></dt> - <dd> - 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.</dd> - <dt> - <a class="internal" href="/en-US/docs/AJAX" rel="internal">AJAX</a></dt> - <dd> - 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.</dd> - <dt> - <a class="internal" href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a></dt> - <dd> - Extensible HyperText Markup Language is an XML-based HTML-like language that offers a stricter syntax than HTML.</dd> - <dt> - <a class="internal" href="/en-US/docs/SVG" rel="internal">SVG</a></dt> - <dd> - Scalable Vector Graphics is an XML markup language for describing 2D vector graphics.</dd> - </dl> - <h3 id="Strategies">Strategies</h3> - <dl> - <dt> - <a class="internal" href="/en-US/docs/Web_Standards" title="en-US/docs/Web Standards">Web standards</a></dt> - <dd> - Learn how to make your Web site or application reach the largest number of users through compatibility with the open Web.</dd> - <dt> - <a href="/en-US/docs/Web_Development/Responsive_Web_design" title="en-US/docs/Web development/Responsive Web design">Responsive Web design</a></dt> - <dd> - Use CSS to present the same content across all hardware platforms, from mobile phones to wide-screen, high-res desktop displays.</dd> - <dt> - <a href="/en-US/docs/Web_development/Writing_forward-compatible_websites" title="Writing forward-compatible websites">Writing forward-compatible websites</a></dt> - <dd> - Best practices for creating websites that do not break when browsers are updated.</dd> - <dt> - <a href="/en-US/docs/Web_Development/Mobile" title="/en-US/docs/Web development/Mobile">Mobile Web development</a></dt> - <dd> - 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.</dd> - <dt> - <a class="internal" href="/en-US/docs/Mozilla_Web_Developer_FAQ" title="en-US/docs/Mozilla Web Developer FAQ">Mozilla Web developer FAQ</a></dt> - <dd> - Frequently asked questions from Web developers. With answers!</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development" title="en-US/docs/tag/Web_Development">View All...</a></span></p> - </td> - <td> - <h2 class="Community" id="Community">Community</h2> - <ul> - <li><a class="external" href="http://hacks.mozilla.org" title="http://hacks.mozilla.org">Mozilla Hacks blog</a></li> - <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> - <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> - </ul> - <h2 class="Tools" id="Tools">Tools</h2> - <ul> - <li><a href="/en-US/docs/Tools" title="en-US/docs/Tools">Main Tools page</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a></li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a></li> - <li><a href="/en-US/docs/Venkman" rel="internal">Venkman</a>, the JavaScript debugger</li> - <li><a href="/en-US/docs/DOM_Inspector" rel="internal" title="en-US/docs/DOM Inspector">DOM Inspector</a></li> - <li><a href="/en-US/docs/Tools/Scratchpad" title="en-US/docs/Tools/Scratchpad">Scratchpad</a></li> - </ul> - <p><span class="alllinks"><a href="/en-US/docs/tag/Web_Development:Tools" title="en-US/docs/tag/Web_Development:Tools">View All...</a></span></p> - </td> - </tr> - </tbody> -</table> -<p> </p> diff --git a/files/pt-br/conflicting/web/guide/mobile/index.html b/files/pt-br/conflicting/web/guide/mobile/index.html deleted file mode 100644 index 9396f67ed5..0000000000 --- a/files/pt-br/conflicting/web/guide/mobile/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Desenvolvimento Web móvel -slug: conflicting/Web/Guide/Mobile -tags: - - Mobile - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -<p>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.</p> -<ul> - <li><a class="vt-p" href="/pt-BR/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">O que é site móvel amigável?</a></li> - <li><a class="vt-p" href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Sites Separados para celular e desktop">Sites Separados</a></li> - <li><a class="vt-p" href="/pt-BR/Web_Development/Mobile/Design_Responsivo">Design Responsivo</a></li> - <li><a class="vt-p" href="/pt-BR/Web_development/Mobile/A_hybrid_approach" title="Uma nova abordagem para aplicações Web (externo)">Uma abordagem híbrida</a></li> -</ul> diff --git a/files/pt-br/conflicting/web/http/cors/index.html b/files/pt-br/conflicting/web/http/cors/index.html deleted file mode 100644 index a0062279d9..0000000000 --- a/files/pt-br/conflicting/web/http/cors/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Controle de Acesso do lado do servidor (CORS) -slug: conflicting/Web/HTTP/CORS -translation_of: Web/HTTP/CORS -translation_of_original: Web/HTTP/Server-Side_Access_Control -original_slug: Web/HTTP/Server-Side_Access_Control ---- -<p><font><font>Os sistemas de controle de acesso realizam </font><font> identificação de </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsoftwarequality.techtarget.com/definition/authorization&usg=ALkJrhgrx7L6XQEL-QG4A5SY3jla7SrNHA" rel="noopener"><font><font>autorização</font></font></a><font><font> , </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsecurity.techtarget.com/definition/authentication&usg=ALkJrhhWsbD8tDshChXZ3hnAhempgwOyXw" rel="noopener"><font><font>autenticação</font></font></a><font><font> , aprovação de acesso e prestação de contas de entidades por meio de credenciais de login, incluindo </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsecurity.techtarget.com/definition/password&usg=ALkJrhilnjZN5ktJEcxF-46B0IA7otOZEg" rel="noopener"><font><font>senhas</font></font></a><font><font> , números de identificação pessoal (PINs), </font><font> varreduras </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://searchsecurity.techtarget.com/definition/biometrics&usg=ALkJrhhhm_VuMmwP8y53PpOCxVJttPPfhA" rel="noopener"><font><font>biométricas</font></font></a><font><font> e chaves físicas ou eletrônicas.</font></font></p> - -<p><font><font>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.</font></font></p> - -<p>{{HTTPSidebar}}</p> - -<p><font><font>Os navegadores enviam </font></font><a href="/pt-BR/docs/Web/HTTP/Headers">Cabeçalhos HTTP </a><font><font><a href="/pt-BR/docs/"> </a>específicos </font><font>para solicitações entre sites iniciadas de dentro </font></font>XMLHttpRequest<font><font> </font></font><font><font>ou da </font></font><a href="/en-US/docs/Web/API/Fetch_API"> </a><a href="/pt-BR/docs/Web/API/Fetch_API/Using_Fetch">Fetch Api </a><font><font>. </font><font>Eles também esperam ver cabeçalhos HTTP específicos enviados de volta com respostas entre sites. </font><font>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</font></font> <a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">HTTP Access Control (CORS) article</a><font><font> e deve ser lida como um artigo complementar para este. </font><font>Este artigo aborda o processamento de </font></font><strong><font><font>solicitações de controle de acesso</font></font></strong><font><font> e a formulação de </font></font><strong><font><font>respostas de controle de acesso</font></font></strong><font><font>em PHP. </font><font>O público-alvo deste artigo são programadores ou administradores de servidores. </font><font>Embora os exemplos de código mostrados aqui estejam em PHP, conceitos semelhantes se aplicam ao ASP.net, Perl, Python, Java, etc .; </font><font>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.</font></font></p> - -<h2 id="Discussão_de_cabeçalhos_HTTP"><font><font>Discussão de cabeçalhos HTTP</font></font></h2> - -<p><font><font>O artigo que cobre os<a href="/pt-BR/docs/Web/HTTP/Headers"> cabeçalhos HTTP usados por clientes e servidores</a></font></font> <font><font>deve ser considerado leitura de pré-requisito.</font></font></p> - -<h2 id="Amostras_de_código_de_trabalho"><font><font>Amostras de código de trabalho</font></font></h2> - -<p><font><font>Os trechos de PHP (e as invocações de JavaScript para o servidor) nas seções subseqüentes são obtidos das </font></font><a class="external" href="http://arunranga.com/examples/access-control/" rel="noopener"><font><font>amostras de código de trabalho postadas aqui. </font></font></a><font><font>Eles funcionarão em navegadores que implementam sites cruzados </font></font>{{domxref("XMLHttpRequest")}}.</p> - -<h2 id="Solicitações_simples_entre_sites"><font><font>Solicitações simples entre sites</font></font></h2> - -<p><a href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS">Solicitações simples de controle de acesso </a><font><font><a href="/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests"> </a>são iniciadas quando:</font></font></p> - -<ul> - <li><font><font>Um HTTP / 1.1 </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/GET" title="O método HTTP GET solicita uma representação do recurso especificado. Solicitações usando GET devem recuperar apenas dados."><code>GET</code></a><font><font> ou a </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> é usado como método de solicitação. </font><font>No caso de um POST, o </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Content-Type" title="O cabeçalho da entidade Content-Type é usado para indicar o tipo de mídia do recurso."><code>Content-Type</code></a><font><font> do corpo do pedido é uma de </font></font><code>application/x-www-form-urlencoded</code><font><font>, </font></font><code>multipart/form-data</code><font><font>ou</font></font><code>text/plain.</code></li> - <li><font><font>Nenhum cabeçalho personalizado é enviado com a solicitação HTTP (como </font></font><code>X-Modified</code><font><font>, etc.)</font></font></li> -</ul> - -<p><font><font>Nesse caso, as respostas podem ser enviadas de volta com base em algumas considerações.</font></font></p> - -<ul> - <li><font><font>Se o recurso em questão for amplamente acessado (como qualquer recurso HTTP acessado pelo GET), o envio do </font><font>cabeçalho será suficiente, a </font><strong><font>menos que</font></strong><font> o recurso precise de credenciais, como </font><font>informações de autenticação de </font><a href="/pt-BR/docs/Web/HTTP/Cookies"><font>cookies</font></a><font> e HTTP. </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: *</code></li> - <li><font><font>Se o recurso deve ser mantido restrito com base no domínio do solicitante, </font></font><strong><font><font>OU</font></font></strong><font><font> se o recurso precisar ser acessado com credenciais (ou define credenciais), </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina. Não inclui nenhuma informação de caminho, mas apenas o nome do servidor. É enviado com solicitações CORS, bem como com solicitações POST. É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font> pode ser necessário </font><font>filtrar pelo </font><font>cabeçalho </font><font>da solicitação </font><font>ou, pelo menos, repetir o retorno do solicitante </font></font><code>Origin</code><font><font> ( por exemplo </font><font>). </font><font>Além disso, o </font><font>cabeçalho deverá ser enviado. </font><font>Isso é discutido em uma </font><a href="/pt-BR/docs/Web/HTTP/Server-Side_Access_Control"><font>seção subsequente</font></a><font> . </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/&usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener">http://arunranga.com </a></code><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials" title='O cabeçalho de resposta Access-Control-Allow-Credentials informa aos navegadores se deve expor a resposta ao código JavaScript de front-end quando o modo de credenciais da solicitação (Request.credentials) é "include".'><code>Access-Control-Allow-Credentials</code></a><code>: true</code></li> -</ul> - -<p><font><font>A seção </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso simples</font></font></a><font><font> mostra as trocas de cabeçalho entre cliente e servidor. </font><font>Aqui está um segmento de código PHP que lida com uma solicitação simples:</font></font></p> - -<pre class="brush: php"><?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>"; -} -?> -</pre> - -<p><font><font>O </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina. Não inclui nenhuma informação de caminho, mas apenas o nome do servidor. É enviado com solicitações CORS, bem como com solicitações POST. É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font> item </font><font>acima verifica se o </font><font>cabeçalho enviado pelo navegador (obtido através de $ _SERVER ['HTTP_ORIGIN']]) corresponde a ' </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/&usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener"><font><font>http://arunranga.com</font></font></a><font><font> '. </font><font>Se sim, ele retorna </font><font>. </font><font>Este exemplo pode ser </font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/examples/access-control/&usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font>visto em execução aqui</font></a><font> . </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Origin" title="O cabeçalho da resposta Access-Control-Allow-Origin indica se a resposta pode ser compartilhada com o código solicitante da origem especificada."><code>Access-Control-Allow-Origin</code></a><code>: <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/&usg=ALkJrhjGkKIBAoEKxwNFuLJLg9smgZgatQ" rel="freelink noopener">http://arunranga.com</a></code></p> - -<h2 id="Solicitações_comprovadas"><font><font>Solicitações comprovadas</font></font></h2> - -<p><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso comprovadas</font></font></a><font><font> ocorrem quando:</font></font></p> - -<ul> - <li><font><font>Um outro método que não </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/GET" title="O método HTTP GET solicita uma representação do recurso especificado. Solicitações usando GET devem recuperar apenas dados."><code>GET</code></a><font><font> ou </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font>é utilizado, ou se </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> é usado com um </font></font>{{HTTPHeader("Content-Type")}} diferente de um <code>application/x-www-form-urlencoded</code>, <code>multipart/form-data </code>ou <font><font> </font></font><code>text/plain</code><font><font>. </font></font><span class="tlid-translation translation" lang="pt"><span title="">Por exemplo, se o Tipo de Conteúdo do corpo <code>POST</code> for <code>application / xml</code>, uma solicitação será comprovada.</span></span></li> - <li><font><font>Um cabeçalho personalizado (como </font></font><code>X-PINGARUNER</code><font><font>) é enviado com a solicitação.</font></font></li> -</ul> - -<p><font><font>A seção </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Solicitações de controle de acesso</font></font></a><font><font> comprovado mostra uma troca de cabeçalho entre cliente e servidor. </font><font>Um recurso do servidor que responde a uma solicitação de comprovação precisa poder fazer as seguintes determinações:</font></font></p> - -<ul> - <li><font><font>Filtragem baseada </font></font><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin&usg=ALkJrhhwNS3HqZius2soHeJ_asp-bwvgYA" title="O cabeçalho da solicitação de origem indica de onde uma busca se origina. Não inclui nenhuma informação de caminho, mas apenas o nome do servidor. É enviado com solicitações CORS, bem como com solicitações POST. É semelhante ao cabeçalho Referer, mas, diferentemente desse cabeçalho, não divulga todo o caminho."><code>Origin</code></a><font><font>, se houver.</font></font></li> - <li><font><font>Resposta a uma </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/OPTIONS" title="O método HTTP OPTIONS é usado para descrever as opções de comunicação para o recurso de destino. O cliente pode especificar uma URL para o método OPTIONS ou um asterisco (*) para se referir a todo o servidor."><code>OPTIONS</code></a><font><font> solicitação (que é a solicitação de comprovação), incluindo o envio de valores necessários com </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Methods" title="O cabeçalho de resposta Access-Control-Allow-Methods especifica o método ou métodos permitidos ao acessar o recurso em resposta a uma solicitação de comprovação."><code>Access-Control-Allow-Methods</code></a><font><font>, </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Headers" title="O cabeçalho de resposta Access-Control-Allow-Headers é usado em resposta a uma solicitação de comprovação que inclui os Access-Control-Request-Headers para indicar quais cabeçalhos HTTP podem ser usados durante a solicitação real."><code>Access-Control-Allow-Headers</code></a><font><font>(se forem necessários cabeçalhos adicionais para que o aplicativo funcione) e, se credenciais forem necessárias para este recurso </font></font><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials" title='O cabeçalho de resposta Access-Control-Allow-Credentials informa aos navegadores se deve expor a resposta ao código JavaScript de front-end quando o modo de credenciais da solicitação (Request.credentials) é "include".'><code>Access-Control-Allow-Credentials</code></a><font><font>,.</font></font></li> - <li><font><font>Resposta à solicitação real, incluindo manipulação de </font></font><code>POST</code><font><font> dados, etc.</font></font></li> -</ul> - -<p><font><font>Aqui está um exemplo no PHP de manipulação de uma </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font><font>solicitação preflighted</font></font></a><font><font> :</font></font></p> - -<pre class="brush: php"><?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"); -} -?> -</pre> - -<p><font><font>Observe os cabeçalhos apropriados sendo enviados de volta em resposta à </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/OPTIONS" title="O método HTTP OPTIONS é usado para descrever as opções de comunicação para o recurso de destino. O cliente pode especificar uma URL para o método OPTIONS ou um asterisco (*) para se referir a todo o servidor."><code>OPTIONS</code></a><font><font> comprovação, bem como aos </font></font><a href="/pt-BR/docs/Web/HTTP/Methods/POST" title="O método HTTP POST envia dados para o servidor. O tipo do corpo da solicitação é indicado pelo cabeçalho Content-Type."><code>POST</code></a><font><font> dados. </font><font>Um recurso lida com a comprovação e com a solicitação real. </font><font>Na resposta à </font></font><code>OPTIONS</code><font><font> solicitação, o servidor notifica o cliente de que a solicitação real pode realmente ser feita com o </font></font><code>POST</code><font><font> método e campos de cabeçalho como </font></font><code>X-PINGARUNER</code><font><font>podem ser enviados com a solicitação real. </font><font>Este exemplo pode ser </font></font><a class="external" href="http://arunranga.com/examples/access-control/" rel="noopener"><font><font>visto em execução aqui</font></font></a><font><font> .</font></font></p> - -<h2 id="Solicitações_credenciadas"><font><font>Solicitações credenciadas</font></font></h2> - -<p><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Requests_with_credentials"><font><font>Solicitações de controle de acesso credenciadas</font></font></a><font><font> - ou seja, solicitações acompanhadas de informações sobre </font></font><a href="/pt-BR/docs/Web/HTTP/Cookies"><font><font>cookies</font></font></a><font><font> ou autenticação HTTP (e que esperam que os cookies sejam enviados com respostas) - podem ser </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Simple_requests"><font><font>simples</font></font></a><font><font> ou </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font><font>comprovadas</font></font></a><font><font> , dependendo dos métodos de solicitação utilizados.</font></font></p> - -<p><font><font>Em um </font><font>cenário de </font></font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Simple_requests"><font><font>solicitação simples</font></font></a><font><font> , a solicitação será enviada com cookies (por exemplo, se o </font></font><code><a href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials&usg=ALkJrhgvgswWP53yIsn9CbNdLjlz6qnTuw">withCredentials</a></code><font><font> sinalizador estiver ativado </font></font><a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="Use objetos XMLHttpRequest (XHR) para interagir com servidores. Você pode recuperar dados de um URL sem precisar atualizar a página inteira. Isso permite que uma página da Web atualize apenas parte de uma página sem interromper o que o usuário está fazendo."><code>XMLHttpRequest</code></a><font><font>). </font><font>Se o servidor responder com </font><font>anexado à resposta credenciada, a resposta será aceita pelo cliente e exposta ao conteúdo da web. </font><font>Em uma </font><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS#Preflighted_requests"><font>solicitação comprovada</font></a><font> , </font></font>Se o servidor responder com <code><a href="/pt-BR/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials">Access-Control-Allow-Credentials</a>: true</code> 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 <code>Acesso-Controle-Permitir Credenciais: true</code> à solicitação <code>OPTIONS</code>.</p> - -<p><font><font>Aqui está um PHP que lida com solicitações credenciadas:</font></font></p> - -<pre class="brush: php"><?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"); -} -?> -</pre> - -<p><font><font>Observe que, no caso de solicitações credenciadas, o </font></font><code>Access-Control-Allow-Origin:</code><font><font> cabeçalho </font></font><strong><font><font>não deve</font></font></strong><font><font> ter um valor curinga de <strong>"*"</strong>. </font><font>Ele </font></font><strong><font><font>deve</font></font></strong><font><font> mencionar um domínio de origem válido. </font><font>O exemplo acima pode ser visto em </font></font><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/examples/access-control/&usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font><font>execução aqui</font></font></a><font><font> .</font></font></p> - -<h2 id="Exemplos_do_Apache"><font><font>Exemplos do Apache</font></font></h2> - -<h3 id="Restringir_o_acesso_a_determinados_URIs"><font><font>Restringir o acesso a determinados URIs</font></font></h3> - -<p><font><font>Um truque útil é usar uma reescrita do Apache, variável de ambiente e cabeçalhos para aplicar </font></font><code>Access-Control-Allow-*</code><font><font>a determinados URIs. </font><font>Isso é útil, por exemplo, para restringir solicitações de origem cruzada a </font></font><code>GET /api(.*).json</code><font><font>solicitações sem credenciais:</font></font></p> - -<pre>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 -</pre> - -<h2 id="Veja_também"><font><font>Veja também</font></font></h2> - -<ul> - <li><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&pto=aue&rurl=translate.google.com&sl=en&sp=nmt4&tl=pt&u=http://arunranga.com/examples/access-control/&usg=ALkJrhgk6_MrqOBSrD829megYQb7ZI8x5w" rel="noopener"><font><font>Exemplos de controle de acesso em ação</font></font></a></li> - <li><a class="external" href="https://github.com/jackblackevo/cors-jsonp-sample" rel="noopener"><font><font>Amostra do lado do cliente e do lado do servidor (Java) para compartilhamento de recursos de origem cruzada (CORS)</font></font></a></li> - <li><a class="internal" href="/pt-BR/docs/Web/HTTP/Controle_Acesso_CORS"><font><font>Controle de acesso HTTP cobrindo os cabeçalhos HTTP</font></font></a></li> - <li><a href="/pt-BR/docs/Web/API/XMLHttpRequest" title="Use objetos XMLHttpRequest (XHR) para interagir com servidores. Você pode recuperar dados de um URL sem precisar atualizar a página inteira. Isso permite que uma página da Web atualize apenas parte de uma página sem interromper o que o usuário está fazendo."><code>XMLHttpRequest</code></a></li> - <li><a href="/pt-BR/docs/Web/API/Fetch_API"><font><font>Fetch API</font></font></a></li> -</ul> 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 deleted file mode 100644 index 6248d01153..0000000000 --- a/files/pt-br/conflicting/web/javascript/equality_comparisons_and_sameness/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -title: Igualdade em JavaScript -slug: conflicting/Web/JavaScript/Equality_comparisons_and_sameness -translation_of: Web/JavaScript/Equality_comparisons_and_sameness -translation_of_original: Web/JavaScript/Guide/Sameness -original_slug: Web/JavaScript/Guide/Igualdade ---- -<p>A ES6 possui três facilidades internas para determinar se algum <var>x</var> e algum <var>y</var> são "os mesmos". Elas são: igualdade ou "igual duplo" (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a>), igualdade rigorosa ou "igual triplo" (<a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a>), e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>. (Note que <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> foi adicionado na ES6. Ambos igual duplo e igual triplo existiam antes da ES6, e seu comportamento permanece o mesmo.)</p> -<h2 id="Visão_geral">Visão geral</h2> -<p>Para demonstração, aqui estão as três comparações de igualdade em uso:</p> -<pre class="brush:js">x == y</pre> -<pre class="brush:js">x === y</pre> -<pre class="brush:js">Object.is(x, y)</pre> -<p>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 <code>false</code> se os tipos forem diferentes); e <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> se comportará da mesma forma que o operador igual triplo, mas lidando de forma especial com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> e <code>-0</code> e <code>+0</code> de modo que os dois últimos não são considerados os mesmos, enquanto que <code>Object.is(NaN, NaN)</code> será <code>true</code>. (Comparar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> geralmente—i.e., usando-se o operador igual duplo ou o operador igual triplo—resulta em <code>false</code>, de acordo com a IEEE 754.)</p> -<p>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 <var>x</var> e <var>y</var> que têm a mesma estrutura mas que são objetos distintos, todas as formas de comparação acima resultarão no valor <code>false</code>.</p> -<p>Por exemplo:</p> -<pre class="brush:js">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</pre> -<h2 id="Igualdade_abstrata_igualdade_rigorosa_e_mesmo_valor">Igualdade abstrata, igualdade rigorosa, e mesmo valor</h2> -<p>Na ES5, a comparação realizada por <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>==</code></a> é descrita na <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">Seção 11.9.3, O Algoritmo de Igualdade Abstrata</a>. A comparação <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> é descrita em <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">11.9.6, O Algoritmo de Igualdade Rigorosa</a>. (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 <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">Seção 9.12, O Algoritmo de MesmoValor</a> 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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a>s (números). A ES6 simplesmente propõe expôr esse algoritmo através de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a>.</p> -<p>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.</p> -<h2 id="Um_modelo_para_entender_comparações_de_igualdade">Um modelo para entender comparações de igualdade?</h2> -<p>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 <code>6 == "6"</code>). 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.</p> -<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> da ES6 nesse "espectro". O <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> lida com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>. Perceba que se <code>Object.is(NaN, NaN)</code> resultasse no valor <code>false</code>, nós <em>poderíamos</em> 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 <code>-0</code> e <code>+0</code>. A forma de lidar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> significa que isso não é verdade, no entanto. Infelizmente, <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 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.</p> -<table class="standard-table"> - <caption> - Comparações de Igualdade</caption> - <thead> - <tr> - <th scope="col" style="text-align: center;">x</th> - <th scope="col" style="text-align: center;">y</th> - <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th> - <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th> - </tr> - </thead> - <tbody> - <tr> - <td><code>undefined</code></td> - <td><code>undefined</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>null</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>true</code></td> - <td><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>false</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>"foo"</code></td> - <td><code>"foo"</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>{ foo: "bar" }</code></td> - <td><code>x</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - <tr> - <td><code>+0</code></td> - <td><code>-0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>""</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>"0"</code></td> - <td><code>0</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>"17"</code></td> - <td><code>17</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>new String("foo")</code></td> - <td><code>"foo"</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>undefined</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>null</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>undefined</code></td> - <td><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>{ foo: "bar" }</code></td> - <td><code>{ foo: "bar" }</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>new String("foo")</code></td> - <td><code>new String("foo")</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>null</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>0</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>"foo"</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - </tr> - <tr> - <td><code>NaN</code></td> - <td><code>NaN</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> - <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> - </tr> - </tbody> -</table> -<h2 id="Quando_usar_Object.is_versus_o_operador_igual_triplo">Quando usar <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> versus o operador igual triplo</h2> -<p>Além da forma com que trata o valor it <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>, de modo geral, o único caso em o comportamento especial de <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> 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 <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty</code></a>. Se seu caso de uso não requer isso, sugere-se evitar-se <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> e usar-se o operador <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators"><code>===</code></a> ao invés disso. Mesmo se seus requerimentos envolvem que comparações entre dois valores <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a> resultem em <code>true</code>, de modo geral é mais fácil fazer-se uma checagem especial por <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN"><code>NaN</code></a>s (usando-se o método <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN"><code>isNaN</code></a> 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.</p> -<p>Aqui está uma lista não-exaustiva de métodos e operadores internos que podem fazer com que uma distinção entre <code>-0</code> e <code>+0</code> se manifeste em seu código:</p> -<dl> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#-_.28Unary_Negation.29" title="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators"><code>- (negação unária)</code></a></dt> -</dl> -<dl> - <dd> - <p>É óbvio que negar <code>0</code> produz <code>-0</code>. Mas a abstração de uma expressão pode fazer com o valor <code>-0</code> apareça de modo despercebido. Por exemplo, considere o seguinte:</p> - <pre class="brush:js">let stoppingForce = obj.mass * -obj.velocity</pre> - <p>Se <code>obj.velocity</code> é <code>0</code> (ou resulta no valor <code>0</code>), um <code>-0</code> é introduzido naquele ponto e propaga-se para <code>stoppingForce</code>.</p> - </dd> -</dl> -<dl> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan2"><code>Math.atan2</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil"><code>Math.ceil</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round"><code>Math.round</code></a></dt> -</dl> -<dl> - <dd> - É possível que um <code>-0</code> seja introduzido em uma expressão como um valor de retorno desses métodos em alguns casos, mesmo quando nenhum <code>-0</code> existe como um dos parâmetros. Por exemplo, usando-se <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/pow"><code>Math.pow</code></a> para elevar o valor <code>-<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></code> à potência de qualquer expoente negativo ímpar resulta no valor <code>-0</code>. Veja a documentação para os métodos individuais.</dd> -</dl> -<dl> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor"><code>Math.floor</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max"><code>Math.max</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/min"><code>Math.min</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>Math.sin</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt"><code>Math.sqrt</code></a></dt> - <dt> - <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/tan"><code>Math.tan</code></a></dt> -</dl> -<dl> - <dd> - É possível obter-se um valor de retorno <code>-0</code> desses métodos em alguns casos quando um <code>-0</code> existe como um dos parâmetros. Por exemplo, <code>Math.min(-0, +0)</code> resulta no valor <code>-0</code>. Veja a documentação para os métodos individuais.</dd> -</dl> -<dl> - <dt> - <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">~</a></code></dt> - <dt> - <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators"><<</a></code></dt> - <dt> - <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">>></a></code></dt> - <dd> - 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 <code>-0</code> não irá sobreviver a um arredondamento depois de uma operação inversa. Por exemplo, ambos <code>Object.is(~~(-0), -0)</code> e <code>Object.is(-0 << 2 >> 2, -0)</code> resultam no valor <code>false</code>.</dd> -</dl> -<p>Contar com <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> quando o sinal de zeros não é levado em consideração pode ser problemático. É claro que quando a intenção é distinguir entre <code>-0</code> e <code>+0</code>, ele faz exatamente o que é desejado.gual</p> 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 deleted file mode 100644 index 7a36613082..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Boolean.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <strong><code>Boolean.prototype</code></strong> representa o prototype para o construtor de {{jsxref("Boolean")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descrição">Descrição</h2> - -<p>Instancias de {{jsxref("Boolean")}} herdam de <code>Boolean.prototype</code>. Você pode usar os construtores do objeto prototype para adicionar propriedados ou metodos para todas as instancias de {{jsxref("Boolean")}} instances.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Boolean.prototype.constructor</code></dt> - <dd>Retorna a função que criou a instancia do prototype. Esta é a função {{jsxref("Boolean")}} por padrão.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>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()")}}.</dd> - <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> - <dd>Retorna uma string com valor <code>"true"</code> ou <code>"false"</code> dependendo qual o valor do objeto. Sobreescreve o método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> - <dd>Retorna o valor primitivo do objeto {{jsxref("Boolean")}}. Sobreescreve o método {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definição inicial. Implementano no JavaScript 1.0.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> 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 deleted file mode 100644 index 5c6a594ef3..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/function/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Function.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <code><strong>Function.prototype</strong></code> representa o objeto <code>prototype</code> de {{jsxref("Function")}}.</p> - -<h2 id="Descrição">Descrição</h2> - -<p>Objetos {{jsxref("Function")}} herdam de <code>Function.prototype</code>. <code>Function.prototype</code> não pode ser modificado.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> - <dd>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.</dd> - <dt><s class="obsoleteElement">{{jsxref("Function.arity")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Usado para especificar o número de argumentos esperados pela função. Foi removido, utilize em vez disso a propriedade {{jsxref("Function.length", "length")}}.</s></dd> - <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> - <dd>Especifica a função que invocou a função sendo executada.</dd> - <dt>{{jsxref("Function.length")}}</dt> - <dd>Especifica o número de argumentos esperados pela função.</dd> - <dt>{{jsxref("Function.name")}}</dt> - <dd>O nome da função.</dd> - <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> - <dd>O nome de exibição da função.</dd> - <dt><code>Function.prototype.constructor</code></dt> - <dd>Especifica a função que cria o <code>prototype</code> do objeto. Veja {{jsxref("Object.prototype.constructor")}} para mais detalhes.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>Chama uma função e define seu <code>this</code> com o valor fornecido. Argumentos podem ser passados como um objeto {{jsxref("Array")}}.</dd> - <dt>{{jsxref("Function.prototype.bind()")}}</dt> - <dd>Cria uma nova função que, quando chamada, tem seu <code>this</code> definido com o valor fornecido, com uma sequência de argumentos determinada precedendo quaisquer argumentos fornecidos quando a nova função é chamada.</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>Chama (executa) uma função e define seu <code>this</code> com o valor fornecido. Argumentos podem ser passados como são.</dd> - <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> - <dd>Retorna <code>true</code> se a função é um <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">gerador</a>; se não, retorna <code>false</code>.</dd> - <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Retorna uma <em>string</em> representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toSource")}}.</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>Retorna uma <em>string</em> representando o código-fonte da função. Sobrescreve o método {{jsxref("Object.prototype.toString")}}.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definição inicial. Implementada no JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<div> - <p>{{Compat("javascript.builtins.Function.prototype")}}</p> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Function")}}</li> -</ul> 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 deleted file mode 100644 index 50ffddd6b3..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -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 -original_slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <strong><code>Intl.NumberFormat.prototype</code></strong> representa o objeto do protótipo do construtor de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descrição">Descrição</h2> - -<p>Veja {{jsxref("NumberFormat")}} para uma descrição sobre instâncias de <code>Intl.NumberFormat</code>.</p> - -<p>As instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}} herdam de <code>Intl.NumberFormat.prototype</code>. Modificações ao objeto do protótipo são herdados por todas as instâncias de {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> - <dd>Uma referência a <code>Intl.NumberFormat</code>.</dd> - <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt> - <dd>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")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> - <dd>Retorna um novo objeto com propriedades refletindo a localização e as opções de agrupamento obtidos durante a inicialização do objeto.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentários</th> - </tr> - <tr> - <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 1.0')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int 2.0')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> - <td>{{Spec2('ES Int Draft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatChrome("24")}}</td> - <td>{{CompatGeckoDesktop("29")}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatOpera("15")}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("26")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> -</ul> 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 deleted file mode 100644 index 66e5c4d1c4..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Map.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <code><strong>Map</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Map")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descrição">Descrição</h2> - -<p>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 <code>Map</code>.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Retorna a função que criou um protótipo da instância. Isso é a funçao de {{jsxref("Map")}} por padrão.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd>Retorna o número de pares chave/valor no objeto <code>Map</code>.</dd> -</dl> - -<h2 id="Metódos">Metódos</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Remove todas os pares chave/valor do objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(chave)")}}</dt> - <dd>Remove qualquer valor associado à chave passada e retorna o valor que <code>Map.prototype.has(chave)</code> deveria retornar anteriormente. <code>Map.prototype.has(chave)</code> irá retornar <code>false</code> após tal remoção ser feita.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Retorna um novo objeto <code>Iterador</code> que contem<strong> um array de <code>[chave, valor]</code></strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Chama callbackFn uma vez para cada par chave/valor presente no objeto <code>Map</code>, 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.</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(chave)")}}</dt> - <dd>Retorna o valor associado para a <code>chave</code>, ou <code>undefined</code> se esta não existir no objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd>Retorna um valor booleano caso um valor tenha sido associado à <code>chave</code> no objeto <code>Map</code> ou não.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd>Retorna um novo objeto <code>Iterador</code> que contem as <strong>chaves</strong> para cada elemento no objeto <code>Map</code> object pela ordem de inserção.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd>Configura o valor par a <code>chave</code> no objeto <code>Map</code>. Retorna o objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd>Retorna um novo objeto <code>Iterador</code> que contém os <strong>valores</strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Retorna um novo objeto <code>Iterator</code> que contém<strong> um array de <code>[chave, valor]</code></strong> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("13") }}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td> - <p>8</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> 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 deleted file mode 100644 index d034d79336..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/number/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Number.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number -tags: - - JavaScript - - Número - - Propriedade - - Prototipo -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <strong><code>Number.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Number")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descrição">Descrição</h2> - -<p>Todas instâncias {{jsxref("Number")}} herdam de <code>Number.prototype</code>. O objeto 'prototype' do construtor {{jsxref("Number")}} pode ser modificado para afetar todas instâncias {{jsxref( "Number")}}.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Number.prototype.constructor</code></dt> - <dd>Retorna a função que criou esta instância do objeto. Por padrão, este é o objeto {{jsxref("Number")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> - <dd>Retorna uma 'string' representando o número em notação exponencial.</dd> - <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> - <dd>Retorna uma 'string' representando o número em notação em ponto fixo.</dd> - <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> - <dd>Retorna uma 'string' com uma representação sensível ao idioma deste número. Substitui o método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> - <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> - <dd>Retorna uma 'string' representando o número para uma precisão específica em notação ponto fixo ou exponencial.</dd> - <dt>{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>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()")}}.</dd> - <dt>{{jsxref("Number.prototype.toString()")}}</dt> - <dd>Retorna uma 'string' representando o objeto especificado na raiz especificada (base). Substitui o método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> - <dd>Retorna o valor primitivo do objeto especificado. Substitui o método {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Situação</th> - <th scope="col">Comentários</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definição inicial. Implementado em JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Configuração</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Configuração</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Number")}}</li> -</ul> 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 deleted file mode 100644 index d71b6247e2..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/object/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: Object.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object -tags: - - JavaScript - - Objeto - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef("Global_Objects", "Object")}}</div> - -<h2 id="Summary" name="Summary">Sumário</h2> - -<p>A propriedade <code><strong>Object.prototype</strong></code> representa o {{jsxref("Global_Objects/Object", "Object")}} protótipo do objeto.</p> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Description" name="Description">Descrição</h2> - -<p>Praticamente todos os objetos em JavaScript descendem de {{jsxref("Global_Objects/Object", "Object")}}; todos os métodos e propriedades herdados de <code>Object.prototype</code>, embora possam ser sobrescritos (exceto um <code>Objeto</code> com protótipo nulo, i.e. <code>Object.create(null)</code>). Por exemplo, outros protótipos construtores sobrescrevem a propriedade construtora e fornece seus próprios {{jsxref("Object.prototype.toString()", "toString()")}} métodos.</p> - -<p>Modificações no <code>Objeto protótipo</code> do objeto são propagadas a <strong>todos</strong> 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 <em>sobrescrita</em> e <em>extensão</em> de objetos.</p> - -<h2 id="Properties" name="Properties">Propriedades</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>Especifica a função que cria um objeto protótipo.</dd> - <dt>{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}</dt> - <dd>Aponta para o objeto que foi usado como protótipo quando o objeto foi instanciado.</dd> - <dt>{{jsxref("Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> - <dd>Permite definir uma função que será executada quando um membro indefinido do objeto for chamado como método.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Usado para retornar um número de propriedades enumeráveis diretamente num objeto definido pelo usuário, mas foi removida.</s></dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Usado para apontar a um contexto do objeto, mas foi removida.</s></dd> -</dl> - -<h2 id="Methods" name="Methods">Métodos</h2> - -<dl> - <dt>{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Associa uma função com uma propriedade que, quando acessada, executa uma função e retorna seu valor de retorno.</dd> - <dt>{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Associa uma função com uma propriedade que, quando definida, executa uma função que modifica a propriedade.</dd> - <dt>{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Retorna a função associada com a propriedade específicada pelo {{jsxref("Object.defineGetter", "__defineGetter__")}} método.</dd> - <dt>{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> - <dd>Retorna a função associada com a propriedade especificada pelo {{jsxref("Object.defineSetter", "__defineSetter__")}} método.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>Retorna uma indicação booleana se o objeto especificado está na cadeia de protótipo do objeto este método é chamado.</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>Retorna um boolean indicando se o atributo interno <a href="/en-US/docs/ECMAScript_DontEnum_attribute" title="ECMAScript_DontEnum_attribute">ECMAScript DontEnum attribute</a> está definido.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>Chama {{jsxref("Object.toString", "toString()")}}.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>Retorna uma representação do objeto em forma de string.</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> - <dd>Remove um ponto de escuta da propriedade do objeto.</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>Retorna o valor primitivo do objeto especificado.</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> - <dd>Adiciona um ponto de escuta à propriedade do objeto.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Usado para avaliar uma string de código JavaScript no contexto do objeto especificado, mas foi removido.</s></dd> -</dl> - -<h2 id="Examples" name="Examples">Exemplos</h2> - -<p>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.</p> - -<p>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 <em>this</em> & a variável <em>arguments</em> (o estado de chamada) para o comportamento atual pela chamada <em>apply()</em> na função. Este padrão pode ser usado por qualquer protótipo, tal como <em>Node.prototype, Function.prototype, etc.</em></p> - -<pre><code>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 <em>apply</em> se comporta como o<em>"super"</em> em outras linguagens. - // Mesmo que <em>valueOf()</em> não receba argumentos, alguns outros ganchos podem. - return current.apply(this, arguments); - } -}</code></pre> - -<p>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:</p> - -<pre class="brush: js">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(); -</pre> - -<p>O retorno será:</p> - -<pre>Hi, I'm Bob, the Builder -Hi, I'm Joe -Hi, I'm Red Green, the Handyman -Hi, I'm Mike -</pre> - -<h2 id="Specifications" name="Specifications">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificações</th> - <th scope="col">Situação</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>ECMAScript 1st Edition. Implemented in JavaScript 1.0.</td> - <td>Padrão</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Aspecto</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Aspecto</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico.</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> 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 deleted file mode 100644 index 4a914e3e34..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/promise/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Promise.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Promise -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef("Global_Objects", "Promise")}}</div> - -<h2 id="Summary" name="Summary">Sumário</h2> - -<p>A propriedade <code><strong>Promise</strong></code><strong><code>.prototype</code></strong> representa o protótipo para o construtor {{jsxref("Promise")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description">Descrição</h2> - -<p>{{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 <code>Promise</code>.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>Retorna a função que cria uma instância. Isso é a função padrão {{jsxref("Promise")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(onRejected)")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("Promise.then", "Promise.prototype.then(onFulfilled, onRejected)")}}</dt> - <dd>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.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>32</td> - <td>{{CompatGeckoDesktop(24.0)}} as <code>Future</code><br> - {{CompatGeckoDesktop(25.0)}} as <code>Promise</code> behind a flag[1]<br> - {{CompatGeckoDesktop(29.0)}} by default</td> - <td>{{CompatNo}}</td> - <td>19</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile(24.0)}} as <code>Future</code><br> - {{CompatGeckoMobile(25.0)}} as <code>Promise</code> behind a flag[1]<br> - {{CompatGeckoMobile(29.0)}} by default</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - <td>32</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Gecko 24 has an experimental implementation of <code>Promise</code>, under the initial name of <code>Future</code>. It got renamed to its final name in Gecko 25, but disabled by default behind the flag <code>dom.promise.enabled</code>. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=918806">Bug 918806</a> enabled Promises by default in Gecko 29.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> 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 deleted file mode 100644 index 955b187c6f..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/set/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Set.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/Set -tags: - - Propriedade - - Prototipo - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <code><strong>Set</strong></code><strong><code>.prototype</code></strong> representa o protótipo do construtor do objeto {{jsxref("Set")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descrição">Descrição</h2> - -<p>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 <code>Set</code> .</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Set.prototype.constructor</code></dt> - <dd>Retorna a função que criou o protótipo de uma instância. Esta é a função {{jsxref("Set")}} por padrão.</dd> - <dt>{{jsxref("Set.prototype.size")}}</dt> - <dd>Retorna o número de valores no objeto <code>Set</code>.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Set.add", "Set.prototype.add(value)")}}</dt> - <dd>Anexa um novo elemento com o valor passado ao objeto <code>Set</code> . Retorna o objeto <code>Set</code>.</dd> - <dt>{{jsxref("Set.prototype.clear()")}}</dt> - <dd>Remove todos os elementos do objeto <code>Set</code>.</dd> - <dt>{{jsxref("Set.delete", "Set.prototype.delete(value)")}}</dt> - <dd>Remove o elemento associado ao <code>value</code> e retorna o valor que <code>Set.prototype.has(value)</code> teria retornado anteriormente. <code>Set.prototype.has(value)</code> irá retornar <code>false</code> depois disso.</dd> - <dt>{{jsxref("Set.prototype.entries()")}}</dt> - <dd>Retorna um novo objeto <code>Iterator</code> que contém<strong> um array de <code>[value, value]</code></strong> para cada elemento no objeto <code>Set</code> , em ordem de inserção. Isso é similar ao objeto <code>Map</code>, para que cada entrada tenha o mesmo valor para sua <em>chave</em> e<em>valor </em>aqui.</dd> - <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Chama <code>callbackFn</code> uma vez para cada valor presente no objeto <code>Set</code>, em ordem de inserção. Se um parâmetro <code>thisArg</code> for passado para o <code>forEach</code>, ele será usado como valor de <code>this</code> para cada callback.</dd> - <dt>{{jsxref("Set.has", "Set.prototype.has(value)")}}</dt> - <dd>Retorna um booleano afirmando se um elemento está presente com o dado valor no objeto <code>Set</code> ou não.</dd> - <dt>{{jsxref("Set.prototype.keys()")}}</dt> - <dd>É a mesma função que a função <strong><code>values()</code></strong> e retorna um novo objeto <code>Iterator</code> que contém os valores para cada elemento no objeto <code>Set</code> em ordem de inserção.</dd> - <dt>{{jsxref("Set.prototype.values()")}}</dt> - <dd>Retorna um novo objeto <code>Iterator</code> que contém os <strong>values</strong> para cada elemento no objeto <code>Set</code> em ordem de inserção.</dd> - <dt>{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}</dt> - <dd>Retorna um novo objeto <code>Iterator</code> que contém os <strong>values</strong> para cada elemento do objeto <code>Set</code> em ordem de inserção.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Set.prototype")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> 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 deleted file mode 100644 index ea98bd39c7..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: String.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<div>{{JSRef}}</div> - -<p>A <strong><code>String.prototype</code></strong> representa o prototipo de objeto {{jsxref("String")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descrição">Descrição</h2> - -<p>Todas as instâncias {{jsxref("String")}} herdam de <code>String.prototype</code>. Alterações na <code>String</code> são propagadas para todas as instâncias {{jsxref("String")}}.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>Especifica a função que cria o protótipo de um objeto.</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>Reflete o comprimento da string.</dd> - <dt><code><em>N</em></code></dt> - <dd>Usado para acessar o caractere na posição <em>N</em> onde <em>N</em> é um número inteiro entre 0 e um menor que o valor da <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/length">length</a></code>. Estas propriedades são apenas de leitura.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<h3 id="Métodos_não_relacionados_ao_HTML">Métodos não relacionados ao HTML</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>Retorna o caractere (exatamente uma unidade de código UTF-16) no índice especificado.</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>Retorna um número que é o valor da unidade de código UTF-16 em dado índice.</dd> - <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>Combina o texto de duas strings e retorna uma nova string.</dd> - <dt>{{jsxref("String.prototype.includes()")}}</dt> - <dd> Determina se uma string deve ser encontrada dentro de outra string.</dd> - <dt>{{jsxref("String.prototype.endsWith()")}}</dt> - <dd>Determina se uma string termina com os caracteres de outra string.</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>Retorna o índice dentro do objeto String chamado da primeira ocorrência do valor especificado, ou -1 se não encontrado.</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd>Retorna o índice dentro do objeto String chamado da última ocorrência do valor especificado, ou -1 se não encontrado.</dd> - <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> - <dd>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.</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>Usado para combinar uma expressão regular com uma string.</dd> - <dt>{{jsxref("String.prototype.normalize()")}}</dt> - <dd>Retorna o Formulário de Normalização Unicode do valor string chamado.</dd> - <dt>{{jsxref("String.prototype.padEnd()")}}</dt> - <dd>Empacota a string atual desde o final com uma string dada para criar uma nova string de um dado comprimento.</dd> - <dt>{{jsxref("String.prototype.padStart()")}}</dt> - <dd>Empacota a string atual desde o início com uma string dada para criar uma nova string de um dado comprimento.</dd> - <dt><s class="obsoleteElement">{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Envolve a cadeia entre aspas duplas ("" ").</s></dd> - <dt>{{jsxref("String.prototype.repeat()")}}</dt> - <dd>Retorna uma string consistindo elementos do objeto repetido pelas vezes definidas.</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>Usado para encontrar uma combinação entre uma expressão regular e uma string, e para substituir uma substring combinada com uma nova substring.</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>Executa a procura por uma combinação entre uma expressão regular e uma string especificada.</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>Extrai uma seção de uma string e retorna uma nova string.</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Separa um objeto <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String" title="The String global object is a constructor for strings, or a sequence of characters."><code>String</code></a> em um array de strings separando a string em substrings.</dd> - <dt>{{jsxref("String.prototype.startsWith()")}}</dt> - <dd>Determina se uma string começa com os caracteres de outra string.</dd> - <dt>{{jsxref("String.prototype.substr()")}}</dt> - <dd>Retorna os caracteres em uma string começando no local especificado através do número especificado de caracteres.</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>Retorna os caracteres em uma string entre dois índices na string.</dd> - <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> - <dd>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 <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase" title="The toLowerCase() method returns the calling string value converted to lower case."><code>toLowerCase()</code></a>.</dd> - <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> - <dd>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 <a href="pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase" title="The toUpperCase() method returns the calling string value converted to upper case."><code>toUpperCase()</code></a>.</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>Retorna o valor da string de chamada convertido em minúsculas.</dd> - <dt>{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>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()")}}</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>Retorna uma string que representa o objeto especificado. Substitui o metodo:{{jsxref("Object.prototype.toString()")}}</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>Retorna o valor da string de chamada convertido em maiúscula.</dd> - <dt>{{jsxref("String.prototype.trim()")}}</dt> - <dd>Retira o espaço em branco desde o início e o fim da string. Parte do padrão ECMAScript 5.</dd> - <dt>{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}</dt> - <dd>Retira o espaço em branco do lado esquerdo da string.</dd> - <dt>{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}</dt> - <dd>Retira o espaço em branco do lado esquerdo da string.</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>Retorna o valor primitivo do objeto especificado. Substitui o metodo: {{jsxref("Object.prototype.valueOf()")}} </dd> - <dt>{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}}</dt> - <dd>Retorna um novo objeto <code>Iterator </code>que repete sobre os pontos de código de um valor String, retornando cada ponto de código como um valor String.</dd> -</dl> - -<h3 id="Métodos_de_envoltório_HTML">Métodos de envoltório HTML</h3> - -<p>Esses métodos são de uso limitado, pois fornecem apenas um subconjunto das tags e atributos HTML disponíveis.</p> - -<dl> - <dt>{{jsxref("String.prototype.anchor()")}}</dt> - <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (alvo hipertexto)</dd> - <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> - <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> - <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> - <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}}</dt> - <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (link para URL)</dd> - <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificacoes</th> - <th scope="col">Status</th> - <th scope="col">Comentarios</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("javascript.builtins.String.prototype")}}</p> - -<h2 id="Veja_também">Veja também </h2> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> 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 deleted file mode 100644 index a6d5051c36..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/global_objects/weakmap/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WeakMap.prototype -slug: conflicting/Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<div>{{JSRef("Global_Objects", "WeakMap")}}</div> - -<h2 id="Summary" name="Summary">Sumário</h2> - -<p>A propriedade <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa o prototype fara o construtor {{jsxref("WeakMap")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Description" name="Description">Descrição</h2> - -<p>Instâncias {{jsxref("WeakMap")}} herdam de {{jsxref("WeakMap.prototype")}}. Você pode usar o objeto <code>prototype</code> do construtor para adicionar propriedades ou métodos para todas as instâncias <code>WeakMap</code>.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>Retorna a função construtora das instâncias, neste caso a própria <code>{{jsxref("WeakMap")}}</code>.</dd> -</dl> - -<h2 id="Metodos">Metodos</h2> - -<dl> - <dt>{{jsxref("WeakMap.prototype.clear()")}}</dt> - <dd>Remove todos os pares chave/valor do objeto <code>WeakMap</code></dd> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd>Remove qualquer valor associado à <code style="font-style: normal; line-height: 1.5;">key</code><span style="line-height: 1.5;">. </span><code style="font-style: normal; line-height: 1.5;">WeakMap.prototype.has(key)</code> e retorna <code style="font-style: normal; line-height: 1.5;">false</code> após.</dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> - <dd>Retorna o valor associado a <code>key</code>, ou <code>undefined</code> se nenhum existir.</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd>Retorna um Boolean verificando se há algum valor associado a <code>key</code> no objeto <code>WeakMap</code> ou não.</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> - <dd>Configura um valor para <code>key</code> no objeto <code>WeakMap</code>. Retorna <code>undefined</code>.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Especificação inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_browsers">Compatibilidade de browsers </h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Chrome</th> - <th>Firefox (SpiderMonkey)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>11</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Android</th> - <th>Firefox Mobile (SpiderMonkey)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Notas_para_o_Chrome">Notas para o Chrome</h3> - -<ul> - <li>O recurso é ativado por preferência. Em <span style="font-family: 'Courier New','Andale Mono',monospace;">chrome://flags </span>ative "Enable Experimental JavaScript".</li> -</ul> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/pt-br/conflicting/web/javascript/reference/operators/index.html b/files/pt-br/conflicting/web/javascript/reference/operators/index.html deleted file mode 100644 index e9ec88b42e..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,330 +0,0 @@ ---- -title: Arithmetic operators -slug: conflicting/Web/JavaScript/Reference/Operators -tags: - - JavaScript - - Operadores -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators -original_slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operadores")}}</div> - -<p><strong>Operadores aritméticos</strong> 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 (/).</p> - -<h2 id="Adição_()"><a name="Addition">Adição (+)</a></h2> - -<p>O operador de adição produz a soma dos operadores numéricos ou a concatenação de strings.</p> - -<h3 id="Sintaxe">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> x + y -</pre> - -<h3 id="Exemplos">Exemplos</h3> - -<pre class="brush: js">// 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" -</pre> - -<h2 id="Subtração_(-)"><a name="Subtraction">Subtração (-)</a></h2> - -<p>O operador de subtração subtrai os dois operandos, produzindo sua diferença.</p> - -<h3 id="Sintaxe_2">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> x - y -</pre> - -<h3 id="Exemplos_2">Exemplos</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -"foo" - 3 // NaN</pre> - -<h2 id="Divisão_()"><a name="Division">Divisão (/)</a></h2> - -<p>O operador de divisão produz o quociente de seus operandos onde o operando da esquerda é o dividendo e o da direita é o divisor.</p> - -<h3 id="Sintaxe_3">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> x / y -</pre> - -<h3 id="Exemplos_3">Exemplos</h3> - -<pre class="brush: js">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</pre> - -<h2 id="Multiplicação_(*)"><a name="Multiplication">Multiplicação (*)</a></h2> - -<p>O operador de multiplicação produz o produto dos operandos.</p> - -<h3 id="Sintaxe_4">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> x * y -</pre> - -<h3 id="Exemplos_4">Exemplos</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinity * 0 // NaN -Infinity * Infinity // Infinity -"foo" * 2 // NaN -</pre> - -<h2 id="Módulo_()"><a name="Remainder">Módulo (%)</a></h2> - -<p>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. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator" title="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe uma proposta de ter um operador real de módulo em uma versão futura do ECMAScript.</a></p> - -<h3 id="Sintaxe_5">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> var1 % var2 -</pre> - -<h3 id="Examples">Examples</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -NaN % 2 // NaN -</pre> - -<h2 id="Exponenciação_(**)"><a id="Exponenciação" name="Exponenciação">Exponenciação (**)</a></h2> - -<p>O operador de exponenciação retorna o resultado do primeiro operando elevado ao segundo operando. É o mesmo que <code>var1</code><sup><code>var2</code></sup>, onde <code>var1</code> e <code>var2</code> são variáveis. O operador de exponenciação é associativo à direita, ou seja, <code>a ** b ** c</code> é igual a <code>a ** (b ** c)</code>.</p> - -<h3 id="Sintaxe_6">Sintaxe</h3> - -<pre><strong>Operador:</strong> var1 ** var2 -</pre> - -<h3 id="Notas">Notas</h3> - -<p>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 (<code>+/-/~/!/delete/void/typeof</code>) imediatamente antes do número base.</p> - -<pre>-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. -</pre> - -<h3 id="Exemplos_5">Exemplos</h3> - -<pre>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 -</pre> - -<p>Para inverter o sinal do resultado de uma expressão de exponenciação:</p> - -<pre>-(2 ** 2) // -4 -</pre> - -<p>Para forçar a base de uma expressão de exponenciação para ser um número negativo:</p> - -<pre>(-2) ** 2 // 4 -</pre> - -<div class="note"> -<p><strong>Nota:</strong> JavaScript também tem <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">um operador de lógica binária ^ (XOR)</a>. <code>**</code> e <code>^</code> são diferentes (por exemplo : <code>2 ** 3 === 8</code> enquanto <code>2 ^ 3 === 1</code>.)</p> -</div> - -<h2 id="Incremento_()"><a name="Increment">Incremento (++)</a></h2> - -<p>O operador de incremento incrementa (adiciona um a) seu operando e retorna um valor;</p> - -<ul> - <li>Se usado na forma posfixa, com o operador depois do operando (por exemplo, x++), então ele retorna o valor antes de incrementá-lo.</li> - <li>Se usado na forma prefixa, com o operador antes do operando (por exemplo, ++x), então ele retorna o valor depois de incrementá-lo.</li> -</ul> - -<h3 id="Sintaxe_7">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> x++ or ++x -</pre> - -<h3 id="Exemplos_6">Exemplos</h3> - -<pre class="brush: js">// Posfixo -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefixo -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="Decremento_(--)"><a name="Decrement">Decremento (--)</a></h2> - -<p>O operador de decremento decrementa (subtrai um de) seu operando e retorna um valor.</p> - -<ul> - <li>Se usado na forma posfixa (por exemplo, x--), então ele retorna o valor antes de decrementá-lo.</li> - <li>Se usado na forma prefixa (por exemplo, --x), então ele retorna o valor depois de decrementá-lo.</li> -</ul> - -<h3 id="Sintaxe_8">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> x-- or --x -</pre> - -<h3 id="Exemplos_7">Exemplos</h3> - -<pre class="brush: js">// Posfixo -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefixo -var a = 2; -b = --a; // a = 1, b = 1 -</pre> - -<h2 id="Negação_Unária_(-)"><a name="Unary_negation">Negação Unária (-)</a></h2> - -<p>O operador de negação unária precede seu operando e o nega.</p> - -<h3 id="Sintaxe_9">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> -x -</pre> - -<h3 id="Exemplos_8">Exemplos</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 -</pre> - -<h2 id="Soma_Unária_()"><a name="Unary_plus">Soma Unária</a> (+)</h2> - -<p>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 <code>true</code>, <code>false</code>, e <code>null</code>. 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á <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> - -<h3 id="Sintaxe_10">Sintaxe</h3> - -<pre class="syntaxbox"><strong>Operador:</strong> +x -</pre> - -<h3 id="Exemplos_9">Exemplos</h3> - -<pre class="brush: js">+3 // 3 -+"3" // 3 -+true // 1 -+false // 0 -+null // 0 -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>ECMAScript 1ª Edição.</td> - <td>Padrão</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores Multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expressões Posfixas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores Unários</a>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operatores de atribuição</a></li> -</ul> 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 deleted file mode 100644 index dd25a185a7..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators/spread_syntax/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Spread operator -slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator -original_slug: Web/JavaScript/Reference/Operators/Spread_operator ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>A sintaxe de propagação (<strong>Spread</strong>) 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.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>Para chamadas de função:</p> - -<pre class="brush: js">minhaFuncao(...objIteravel); -</pre> - -<p>Para array literais:</p> - -<pre class="brush: js">[...objIteravel, 4, 5, 6]</pre> - -<p>Desestruturação:</p> - -<pre class="brush: js">[a, b, ...objIteravel] = [1, 2, 3, 4, 5];</pre> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Uma_melhor_aplicação">Uma melhor aplicação</h3> - -<p><strong>Exemplo:</strong> é comum usar {{jsxref( "Function.prototype.apply")}} em casos onde você quer usar um array como argumentos em uma função.</p> - -<pre class="brush: js">function minhaFuncao(x, y, z) { } -var args = [0, 1, 2]; -minhaFuncao.apply(null, args);</pre> - -<p>Com o spread do ES2015 você pode agora escrever isso acima como:</p> - -<pre class="brush: js">function minhaFuncao(x, y, z) { } -var args = [0, 1, 2]; -minhaFuncao(...args);</pre> - -<p>Qualquer argumento na lista de argumento pode usar a sintaxe spread e pode ser usado várias vezes.</p> - -<pre class="brush: js">function minhaFuncao(v, w, x, y, z) { } -var args = [0, 1]; -minhaFuncao(-1, ...args, 2, ...[3]);</pre> - -<h3 id="Um_literal_array_mais_poderoso">Um literal array mais poderoso</h3> - -<p><strong>Exemplo:</strong> 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 <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Com a sintaxe spread isso se torna muito mais sucinto:</p> - -<pre class="brush: js">var partes = ['ombros', 'joelhos']; -var letra = ['cabeca', ...partes, 'e', 'dedos']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"</span></span>cabeca<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>ombros<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>joelhos<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"e"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"dedos"</span></span>] -</pre> - -<p>Assim como em spread para listas de argumentos <code>...</code> pode ser usado em qualquer lugar no literal do array e pode ser usado várias vezes.</p> - -<h3 id="Apply_para_new">Apply para new</h3> - -<p><strong>Exemplo:</strong> No ES5 não é possível usar <code>new</code> com <code>apply.</code> (Em ES5 termos, <code>apply</code> faz uma <code>[[Call]]</code> e nao um <code>[[Construct]].</code>) Em ES2015 a sintaxe spread naturalmente suporta isso:</p> - -<pre class="brush: js">var camposData = lerCamposData(bancoDeDados); -var d = new Date(...camposData);</pre> - -<h3 id="Um_push_melhor">Um push melhor</h3> - -<p><strong>Exemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} é frequentemente usado para adicionar um array no final de um array existente. No ES5 isso é geralmente feito assim:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Acrescenta todos itens do arr2 ao arr1 -Array.prototype.push.apply(arr1, arr2);</pre> - -<p>No ES2015 com spread isso se torna:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1.push(...arr2);</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definido em várias seções da especificação: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Inicializador do array</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Listas de argumento</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_browser">Compatibilidade com browser</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Operação spread em array literais</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoDesktop("16") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operação spread em chamadas de função</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoDesktop("27") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operação spread em desestruturação</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("34") }}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Operação spread em array literais</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoMobile("16") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - <td>{{CompatChrome("46")}}</td> - </tr> - <tr> - <td>Operação spread em chamadas de função</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome("46")}}</td> - <td>{{ CompatGeckoMobile("27") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - <td>{{CompatChrome("46")}}</td> - </tr> - <tr> - <td>Operação spread em desestruturação</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("34") }}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parâmetros rest</a></li> -</ul> 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 deleted file mode 100644 index 24a222bb43..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators_0d2e4b8154642b5a9dbd76a2a48cf96a/index.html +++ /dev/null @@ -1,251 +0,0 @@ ---- -title: Operadores de comparação -slug: >- - conflicting/Web/JavaScript/Reference/Operators_0d2e4b8154642b5a9dbd76a2a48cf96a -tags: - - Comparando String - - Comparação - - Igualdade - - Operadores - - Relacionais -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators -original_slug: Web/JavaScript/Reference/Operators/Operadores_de_comparação ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>O JavaScript possui comparações estritas e conversão de tipos. Uma comparação estrita (e.g., <code>===</code>) somente é verdade se os operandos forem do mesmo tipo e de conteúdo correspondente. A comparação abstrata mais comumente utilizada (e.g. <code>==</code>) converte os operandos no mesmo tipo antes da comparação. Para comparações abstratas relacionais (e.g., <code><=</code>), os operandos são primeiro convertidos em primitivos, depois para o mesmo tipo, depois comparados.</p> - -<p>Strings são comparadas baseadas na ordenação lexicografica padrão, usando valores Unicode.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> - -<p class="hidden">Os fontes para este exemplo interativo estão em um repositório no GitHub. Se você gostaria de contribuir com projetos de exemplos interativos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie para nós um pull request.</p> - -<p>Características de comparação:</p> - -<ul> - <li>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.</li> - <li>Dois números são estritamente iguais quando eles são numericamente iguais (tem o mesmo valor numérico). <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" title="NaN">NaN</a> não é igual a nada, incluindo NaN. Zeros positivos e negativos são iguals entre si.</li> - <li>Dois operadores Boleanos são estritamente iguais se ambos são <code>true</code> ou ambos são <code>false</code>.</li> - <li>Dois objetos distintos nunca são iguais para comparações estritas ou abstratas.</li> - <li>Uma expressão comparando Objetos somente é verdadeira se os operandos referenciarem o mesmo Objeto.</li> - <li>Os tipo Null e Undefined são estritamente iguais entre eles mesmos e abstratamente iguais entre si.</li> -</ul> - -<h2 id="Operadores_de_Igualdade">Operadores de Igualdade </h2> - -<h3 id="Igualdade"><a name="Equality">Igualdade (==)</a></h3> - -<p>O operador de igualdade converte o operando se ele <strong>não for do mesmo tipo</strong>, então aplica a comparação estrita. Se <strong>ambos os operandos são objetos</strong>, então o JavaScript compara referencias internas que são iguais quando os operandos se referem ao mesmo objeto em memória.</p> - -<h4 id="Sintaxe">Sintaxe</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Exemplos">Exemplos</h4> - -<pre class="brush: js notranslate">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 -</pre> - -<h3 id="Desigualdade_!"><a name="Inequality">Desigualdade (!=)</a></h3> - -<p>O operador de desigualdade retorna true (verdade) se os operandos não são iguais. Se os dois operandos <strong>não são do mesmo tipo</strong>, o JavaScript tenta converter os operandos para o tipo apropriado para a comparação. Se <strong>ambos os operandos são objetos</strong>, 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.</p> - -<h4 id="Sintaxe_2">Sintaxe</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Exemplos_2">Exemplos</h4> - -<pre class="brush: js notranslate">1 != 2 // verdade -1 != '1' // falso -1 != "1" // falso -1 != true // falso -0 != false // falso -</pre> - -<h3 id="Identidade_igualdade_estrita"><a name="Identity">Identidade / igualdade estrita (===)</a></h3> - -<p>O operador de identidade retorna true (verdade) se os operandos são estritamente iguais (veja acima) <strong>sem conversão de tipo</strong>. </p> - -<h4 id="Sintaxe_3">Sintaxe</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Exemplos_3">Exemplos</h4> - -<pre class="brush: js notranslate">3 === 3 // verdade -3 === '3' // falso -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 //f also</pre> - -<h3 id="Non-identity_desigualdade_estrita_!"><a name="Nonidentity">Non-identity / desigualdade estrita (!==)</a></h3> - -<p>O operador desigualdade estrita (Non-identity) retorna verdadeiro se os operandos <strong>não são iguais e / ou não são do mesmo tipo</strong>.</p> - -<h4 id="Sintaxe_4">Sintaxe</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Exemplos_4">Exemplos</h4> - -<pre class="brush: js notranslate">3 !== '3' // verdade -4 !== 3 // verdade -</pre> - -<h2 id="Operadores_relacionais">Operadores relacionais</h2> - -<p>Cada um desses operadores chamará a função valueOf () em cada operando antes que uma comparação seja feita.</p> - -<h3 id="Operador_Maior_>"><a name="Greater_than_operator">Operador Maior (>)</a></h3> - -<p>O operador de Maior retorna true se o operando da esquerda for maior que o operando da direita.</p> - -<h4 id="Sintaxe_5">Sintaxe</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Exemplos_5">Exemplos</h4> - -<pre class="brush: js notranslate">4 > 3 // verdade -</pre> - -<h3 id="Operador_maior_ou_igual_>"><a name="Greater_than_or_equal_operator">Operador maior ou igual (>=)</a></h3> - -<p>O operador maior ou igual retorna true se o operando da esquerda for maior ou igual ao operando da direita.</p> - -<h4 id="Sintaxe_6">Sintaxe</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Exemplos_6">Exemplos</h4> - -<pre class="brush: js notranslate">4 >= 3 // verdade -3 >= 3 // verdade -</pre> - -<h3 id="Operador_Menor_<"><a name="Less_than_operator">Operador Menor (<)</a></h3> - -<p>O operador menor retorna true (verdadeiro) se o operando da esquerda for menor que o operando da direita.</p> - -<h4 id="Sintaxe_7">Sintaxe</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Exemplos_7">Exemplos</h4> - -<pre class="brush: js notranslate">3 < 4 // verdade -</pre> - -<h3 id="Operador_menor_ou_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor ou igual (<=)</a></h3> - -<p>O operador menor ou igual retorna true (verdadeiro) se o operando da esquerda for menor ou igual ao operando da direita.</p> - -<h4 id="Sintaxe_8">Sintaxe</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Exemplos_8">Exemplos</h4> - -<pre class="brush: js notranslate">3 <= 4 // verdade -</pre> - -<h2 id="Usando_Operadores_de_Igualdade">Usando Operadores de Igualdade</h2> - -<p>Os operadores de igualdade padrão (== e! =) Usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparação de Igualdade Abstrata</a> </p> - -<p>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.</p> - -<p>Os operadores de igualdade estrita (=== e! ==) usam o <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de comparação estrita de igualdade</a> 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'.<br> - <br> - 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.<br> - <br> - 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:</p> - -<ul> - <li>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.</li> - <li>Se um dos operandos for booleano, o operando booleano é convertido em 1 se for verdadeiro e +0 se for falso.</li> - <li>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.</li> - <li>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.</li> -</ul> - -<div class="note"><strong>Nota:</strong> 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:</div> - -<pre class="brush:js notranslate">// 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'</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definição Inicial. Implementado em JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Adicionandos os operadores <code>===</code> e <code>!==</code> . Implementado em JavaScript 1.3</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Definidos em várias seções das especificações: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionais </a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdade</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="Consulte_também">Consulte também</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparações de igualdade e similaridades</a></li> -</ul> - -<div id="gtx-trans" style="position: absolute; left: 32px; top: 2185.4px;"> -<div class="gtx-trans-icon"></div> -</div> 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 deleted file mode 100644 index e265714e18..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html +++ /dev/null @@ -1,557 +0,0 @@ ---- -title: Bitwise operators -slug: >- - conflicting/Web/JavaScript/Reference/Operators_7c8eb9475d97a4a734c5991857698560 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators -original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<div></div> - -<div>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.</div> - -<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> - -<p class="hidden">O código para este interactivo exemplo está armazenado em um repositório GitHub . Se você quiser contribuir para o projeto exemplo interativo, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e mande-nos um pull request.</p> - -<p>A seguinte tabela resume os Operadores bit-a-bit:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descrição</th> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_AND)">Bitwise AND</a></td> - <td><code>a & b</code></td> - <td>Retorna <code>1</code> em cada posição de bit para à qual o bit correspondente de ambos eram <code>1</code>s.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_OR)">Bitwise OR</a></td> - <td><code>a | b</code></td> - <td> - <p>Retorna 1 para cada posição de bit para à qual o correspondente de um ou ambos eram <code>1</code>s.</p> - </td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_XOR)">Bitwise XOR</a></td> - <td><code>a ^ b</code></td> - <td>Retorna 1 para cada posição de bit para à qual o bit correspondente de um mas não ambos eram <code>1</code>s.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#(Bitwise_NOT)">Bitwise NOT</a></td> - <td><code>~ a</code></td> - <td>Inverte os bits de seus operandos.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3C%3C_(Left_shift)">Left shift</a></td> - <td><code>a << b</code></td> - <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à esquerda, mudando de zeros à diretia.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E_(Sign-propagating_right_shift)">Sign-propagating right shift</a></td> - <td><code>a >> b</code></td> - <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à direita, descartando bits que foram tornados off.</td> - </tr> - <tr> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#%3E%3E%3E_(Zero-fill_right_shift)">Zero-fill right shift</a></td> - <td><code>a >>> b</code> </td> - <td>Jogam <code>a</code> em representação binária <code>b</code> (< 32) bits à direita, descartando bits que foram tornados off, e jogando <code>0</code>s para à esquerda.</td> - </tr> - </tbody> -</table> - -<h2 id="Inteiros_assinados_em_32-bit">Inteiros assinados em 32-bit</h2> - -<p>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:</p> - -<pre class="brush: js">00000000000000000000000100111010 -</pre> - -<p>Os seguintes encodes <code>~314</code>, i.e. são os únicos complementos de <code>314</code>:</p> - -<pre class="brush: js">11111111111111111111111011000101 -</pre> - -<p>Finalmente, os seguintes encodes <code>-314,</code> i.e. são dois complementos de <code>314</code>:</p> - -<pre class="brush: js">11111111111111111111111011000110 -</pre> - -<p>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 <em>sign bit </em>ou <em>bit assinalado.</em></p> - -<p>O número 0 é o inteiro composto completamente de 0 bits.</p> - -<pre class="brush: js">0 (base 10) = 00000000000000000000000000000000 (base 2) -</pre> - -<p>O número <code>-1</code> é o inteiro que é composto completamente de 1 bits.</p> - -<pre class="brush: js">-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>O número <code>-2147483648</code> (representação hexadecimal: <code>-0x80000000</code>) é o inteiro completamente composto de 0 bits exceto o primeiro (left-most) único.</p> - -<pre class="brush: js">-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>O número <code>2147483647</code> (representação hexadecimal: <code>0x7fffffff</code>) é o inteiro composto completamente por bits 1, exceto pelo primeiro (o mais à esquerda).</p> - -<pre class="brush: js">2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>Os números <code>-2147483648</code> e <code>2147483647</code> são, respectivamente, o minimo e o máximo inteiro representáveis atráves de um número de 32 bits assinados.</p> - -<h2 id="Operadores_lógico_bit-abit">Operadores lógico bit-abit</h2> - -<p>Conceitualmente, os operadores lógicos bit-abit funcionam da seguinte forma:</p> - -<ul> - <li>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: - <pre class="brush: js">Before: 11100110111110100000000000000110000000000001 -After: 10100000000000000110000000000001</pre> - </li> - <li>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.</li> - <li>O operador é aplicado para cada par de bits e o resultado é construído bit a bit.</li> -</ul> - -<h3 id="(Bitwise_AND)"><a name="Bitwise_AND">& (Bitwise AND)</a></h3> - -<p>Performa a operação AND em cada par de bits. <code>a</code> AND <code>b</code> retorna 1, apenas quando <code>a</code> e <code>b</code> são <code>1</code>. A tabela verdade para a operação AND é:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação AND bit-a-bit de qualquer número <code>x</code> com <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">-1</span></font> retornará <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">x</span></font>.</p> - -<h3 id="(Bitwise_OR)"><a name="Bitwise_OR">| (Bitwise OR)</a></h3> - -<p>Performa a operação OR em cada par de bits. <code>a</code> OR <code>b</code> retorna 1 se pelo menos <code>a</code> ou pelo menos <code>b</code> é <code>1</code>. As tabela versão para a operação <code>OR</code> é:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Performar a operação <code>OR</code> de qulalquer número <code>x</code> com <code>0</code> retornará <code>0</code>. Performar a operação <code>OR</code> de qualquer número <code>X</code> com <code>-1</code> retornará <code>-1</code>.</p> - -<h3 id="(Bitwise_XOR)"><a name="Bitwise_XOR">^ (Bitwise XOR)</a></h3> - -<p>Performs the XOR operation on each pair of bits. <code>a</code> XOR <code>b</code> yields 1 if <code>a</code> and <code>b</code> are different. The truth table for the <code>XOR</code> operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js">. 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Bitwise XORing any number <code>x</code> with <code>0</code> yields x. Bitwise XORing any number <code>x</code> with <code>-1</code> yields <code>~x</code>.</p> - -<h3 id="(Bitwise_NOT)"><a name="Bitwise_NOT">~ (Bitwise NOT)</a></h3> - -<p>Performs the NOT operator on each bit. NOT <code>a</code> yields the inverted value (a.k.a. one's complement) of <code>a</code>. The truth table for the <code>NOT</code> operation is:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre class="brush: js"> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p>Bitwise NOTing any number <code>x</code> yields <code>-(x + 1)</code>. For example, <code>~-5</code> yields <code>4</code>.</p> - -<p>Note that due to using 32-bit representation for numbers both <code>~-1</code> and <code>~4294967295</code> (2<sup>32</sup>-1) results in <code>0</code>.</p> - -<h2 id="Operadores_de_deslocamento_bit_a_bit">Operadores de deslocamento bit a bit</h2> - -<p>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.</p> - -<p>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.</p> - -<h3 id="<<_(Left_shift)"><a name="Left_shift"><< (Left shift)</a></h3> - -<p>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.</p> - -<p>For example, <code>9 << 2</code> yields 36:</p> - -<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Bitwise shifting any number <code>x</code> to the left by <code>y</code> bits yields <code>x * 2 ** y</code>.</p> - -<h3 id=">>_(Sign-propagating_right_shift)"><a name="Right_shift">>> (Sign-propagating right shift)</a></h3> - -<p>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".</p> - -<p>For example, <code>9 >> 2</code> yields 2:</p> - -<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Likewise, <code>-9 >> 2</code> yields <code>-3</code>, because the sign is preserved:</p> - -<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(Zero-fill_right_shift)"><a name="Unsigned_right_shift">>>> (Zero-fill right shift)</a></h3> - -<p>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.</p> - -<p>For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, <code>9 >>> 2</code> yields 2, the same as <code>9 >> 2</code>:</p> - -<pre class="brush: js">. 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>However, this is not the case for negative numbers. For example, <code>-9 >>> 2</code> yields 1073741821, which is different than <code>-9 >> 2</code> (which yields <code>-3</code>):</p> - -<pre class="brush: js">. -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Examples">Examples</h2> - -<h3 id="Flags_and_bitmasks">Flags and bitmasks</h3> - -<p>The bitwise logical operators are often used to create, manipulate, and read sequences of <em>flags</em>, 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).</p> - -<p>Suppose there are 4 flags:</p> - -<ul> - <li>flag A: we have an ant problem</li> - <li>flag B: we own a bat</li> - <li>flag C: we own a cat</li> - <li>flag D: we own a duck</li> -</ul> - -<p>These flags are represented by a sequence of bits: DCBA. When a flag is <em>set</em>, it has a value of 1. When a flag is <em>cleared</em>, it has a value of 0. Suppose a variable <code>flags</code> has the binary value 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>This value indicates:</p> - -<ul> - <li>flag A is true (we have an ant problem);</li> - <li>flag B is false (we don't own a bat);</li> - <li>flag C is true (we own a cat);</li> - <li>flag D is false (we don't own a duck);</li> -</ul> - -<p>Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.</p> - -<p>A <em>bitmask</em> is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>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:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>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 <em>masks</em> 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:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:</p> - -<pre class="brush: js">// 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 -} -</pre> - -<pre class="brush: js">// 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 -} -</pre> - -<p>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:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>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:</p> - -<pre class="brush: js">// 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 -</pre> - -<p>The mask could also have been created with <code>~FLAG_A & ~FLAG_C</code> (De Morgan's law):</p> - -<pre class="brush: js">// 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 -</pre> - -<p>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:</p> - -<pre class="brush: js">// 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 -</pre> - -<p>Finally, the flags can all be flipped with the NOT operator:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Conversion_snippets">Conversion snippets</h3> - -<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = '1011'; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p>Convert a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code> to a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code>:</p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automate_Mask_Creation">Automate Mask Creation</h3> - -<p>You can create multiple masks from a set of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code> values, like this:</p> - -<pre class="brush: js">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 -</pre> - -<h3 id="Reverse_algorithm_an_array_of_booleans_from_a_mask">Reverse algorithm: an array of booleans from a mask</h3> - -<p>If you want to create an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code> from a mask you can use this code:</p> - -<pre class="brush: js">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 -</pre> - -<p>You can test both algorithms at the same time…</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>For the didactic purpose only (since there is the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number/toString">Number.toString(2)</a></code> method), we show how it is possible to modify the <code>arrayFromMask</code> algorithm in order to create a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> containing the binary representation of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>, rather than an <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code> of <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" title="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean">Booleans</a></code>:</p> - -<pre class="brush: js">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 -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Binary bitwise operators</a></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined in several sections of the specification: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">Bitwise NOT operator</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">Bitwise shift operators</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">Binary bitwise operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("javascript.operators.bitwise")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Logical operators</a></li> -</ul> 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 deleted file mode 100644 index dd222f5285..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/operators_8fa8b34b0547a749514637a15d386886/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Operadores Lógicos -slug: >- - conflicting/Web/JavaScript/Reference/Operators_8fa8b34b0547a749514637a15d386886 -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 -original_slug: Web/JavaScript/Reference/Operators/Operadores_Logicos ---- -<div>{{jsSidebar("Operators")}}</div> - -<h2 id="Summary" name="Summary">Resumo</h2> - -<p>Operadores lógicos são tipicamente usados com valores <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Booleanos</a></code> (lógicos). Quando eles o são, retornam um valor booleano. Porém, os operadores <code>&&</code> e <code>||</code> 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.</p> - -<h2 id="Descrição">Descrição</h2> - -<p>Os operadores lógicos são descritos na tabela abaixo:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Utilização</th> - <th>Descrição</th> - </tr> - <tr> - <td>Logical AND (<code>&&</code>)</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>falso</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>&&</code> retorna <code>verdadeiro</code> se ambos os operandos forem <code>verdadeiro</code> ; senão, retorna <code>falso</code>.</td> - </tr> - <tr> - <td>Logical OR (<code>||</code>)</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td>Retorna <code>expr1</code> se essa pode ser convertido para <code>verdadeiro</code>; senão, retorna <code>expr2</code>. Dessa forma, quando usado para valores Booleanos, <code>||</code> retorna <code>verdadeiro</code> se qualquer dos operandos for <code>verdadeiro</code>; se ambos são <code>falso</code>, retorna <code>falso</code>.</td> - </tr> - <tr> - <td>Logical NOT (<code>!</code>)</td> - <td><code>!<em>expr</em></code></td> - <td> - <p>Retorna <code>falso</code>se o seu operando pode ser convertido para verdadeiro; senão, retorna <code>verdadeiro</code>.</p> - </td> - </tr> - </tbody> -</table> - -<p>Se um valor pode ser convertido para <code>verdadeiro</code>, este valor é chamado de {{Glossary("truthy")}}. Se um valor pode ser convertido para <code>falso</code>, este valor é chamado de {{Glossary("falsy")}}.</p> - -<p>Exemplos de expressões que podem ser convertidas para falso são:</p> - -<ul> - <li><code>null</code>;</li> - <li><code>NaN;</code></li> - <li><code>0</code>;</li> - <li>string vazia (<code>""</code>); </li> - <li><code>undefined</code>.</li> -</ul> - -<p>Mesmo que os operadores <code>&&</code> and <code>||</code> 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.</p> - -<h3 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">Avaliação de Curto-Circuito (Short-Circuit) </h3> - -<p>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:</p> - -<ul> - <li><code>falso && (<em>qualquer coisa)</em></code><em> </em>é avaliado como falso através de curto-circuito.</li> - <li><code>true || (<em>qualquer coisa)</em></code><em> </em>é avaliado como verdadeiro através de curto-circuito.</li> -</ul> - -<p>As regras de lógica garantem que essas avaliações estejam sempre corretas. Repare que a porção <em>qualquer coisa</em> das expressões acima não é avaliada, logo qualquer problema oriundo de tê-lo feito não é consumado. Note também que a parte<em> qualquer coisa</em> das expressões acima pode ser qualquer expressão lógica unitária (conforme é indicado pelos <span style="line-height: 1.5;">parênteses</span>).</p> - -<p>Por exemplo, as duas funções a seguir são equivalentes.</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">shortCircuitEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token">// logical OR (||)</span> - <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">||</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - - <span class="comment token">// logical AND (&&)</span> - <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">&&</span> <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="keyword token">function</span> <span class="function token">equivalentEvaluation</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - - <span class="comment token">// logical OR (||)</span> - <span class="keyword token">var</span> orFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>orFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - - <span class="comment token">// logical AND (&&)</span> - <span class="keyword token">var</span> andFlag <span class="operator token">=</span> <span class="function token">doSomething</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>andFlag<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="function token">doSomethingElse</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> - -<p>Contudo, as expressões a seguir não são equivalentes, devido <span style="line-height: 1.5;">a <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedência do operador</a>, 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)</span><span style="line-height: 1.5;">.</span></p> - -<pre class="brush: js"> false && true || true // retorna true - false && (true || true) // retorna falso</pre> - -<h3 id="Logical_AND_.28.29" name="Logical_AND_.28&&.29"><a name="Logical_AND">AND Lógico (<code>&&</code>)</a></h3> - -<p>O código a seguir demonstra exemplos do operador <code>&&</code> (AND lógico). </p> - -<pre class="brush: js">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 -</pre> - -<h3 id="OR_Lógico_()"><a name="Logical_OR">OR Lógico (<code>||</code>)</a></h3> - -<p>O código a seguir demonstra exemplos do operador <code>||</code> (OR lógico).</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">o1 <span class="operator token">=</span> <span class="keyword token">true</span> <span class="operator token">||</span> <span class="keyword token">true</span> <span class="comment token">// t || t retorna true</span> -o2 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="keyword token">true</span> <span class="comment token">// f || t retorna true</span> -o3 <span class="operator token">=</span> <span class="keyword token">true</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// t || f retorna true</span> -o4 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="punctuation token">(</span><span class="number token">3</span> <span class="operator token">==</span> <span class="number token">4</span><span class="punctuation token">)</span> <span class="comment token">// f || f retorna false</span> -o5 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="string token">'Dog'</span> <span class="comment token">// t || t retorna "Cat"</span> -o6 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">'Cat'</span> <span class="comment token">// f || t retorna "Cat"</span> -o7 <span class="operator token">=</span> <span class="string token">'Cat'</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// t || f retorna "Cat"</span> -o8 <span class="operator token">=</span> <span class="string token">''</span> <span class="operator token">||</span> <span class="keyword token">false</span> <span class="comment token">// f || f retorna false</span> -o9 <span class="operator token">=</span> <span class="keyword token">false</span> <span class="operator token">||</span> <span class="string token">''</span> <span class="comment token">// f || f retorna ""</span></code></pre> - -<h3 id="Logical_NOT_.28.21.29" name="Logical_NOT_.28.21.29"><a name="Logical_NOT">NOT Logico (<code>!</code>)</a></h3> - -<p>O código a seguir demonstra exemplos do operador <code>!</code> (NOT lógico) .</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">n1 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">true</span> <span class="comment token">// !t returns false</span> -n2 <span class="operator token">=</span> <span class="operator token">!</span><span class="keyword token">false</span> <span class="comment token">// !f returns true</span> -n3 <span class="operator token">=</span> <span class="operator token">!</span><span class="string token">'Cat'</span> <span class="comment token">// !t returns false</span></code></pre> - -<h3 id="Regras_de_conversão">Regras de conversão</h3> - -<h4 id="Convertendo_AND_para_OR">Convertendo AND para OR</h4> - -<p>A operação a seguir, envolvendo Booleanos:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>é sempre igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="Convertendo_OR_to_AND">Convertendo OR to AND</h4> - -<p>A operação a seguir, envolvendo Booleanos:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>é sempre igual a:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="Convertendo_entre_dois_NOT">Convertendo entre dois NOT</h4> - -<p>A seguinte operação envolvendo Booleanos:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="operator token">!</span><span class="operator token">!</span>bCondition</code></pre> - -<p>é sempre igual a:</p> - -<pre class="brush: js line-numbers language-js"><code class="language-js">bCondition</code></pre> - -<h3 id="Removendo_parenteses_aninhados">Removendo parenteses aninhados</h3> - -<p>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:</p> - -<h4 id="Removendo_AND_aninhado">Removendo AND aninhado</h4> - -<p>A seguinte operação composta envolvendo Booleanos:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>é igual a :</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="Removendo_OR_aninhado">Removendo OR aninhado</h4> - -<p>A operação composta a seguir, envolvendo Booleanos:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>é sempre igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estatus</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.4.9', 'Logical NOT Operator')}}<br> - {{SpecName('ES5.1', '#sec-11.11', 'Binary Logical Operators')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-logical-not-operator', 'Logical NOT operator')}}<br> - {{SpecName('ES6', '#sec-binary-logical-operators', 'Binary Logical Operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_o_Navegador">Compatibilidade com o Navegador</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><a href="#Logical_AND">Logical AND (<code>&&</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><a href="#Logical_AND">Logical AND (<code>&&</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Logical_OR">Logical OR (<code>||</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a href="#Logical_NOT">Logical NOT (<code>!</code>)</a></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="JavaScript_1.0_and_1.1" name="JavaScript_1.0_and_1.1">Retrocompatibilidade: Comportamento no JavaScript 1.0 e1.1</h3> - -<p>Os operadores && and <code>|| se comportam da seguinte maneira:</code></p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Utilização</th> - <th>Comportamento</th> - </tr> - <tr> - <td><code>&&</code></td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td>Se o primeiro operando (<code>expr1</code>) pode ser convertido para falso, o operador <code>&& </code> retorna false ao invés do valor do <code>expr1</code>.</td> - </tr> - <tr> - <td><code>||</code></td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td>If the first operand (<code>expr1</code>) can be converted to true, the <code>||</code> operator retorna true rather than the value of <code>expr1</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">Veja Também</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise operators</a></li> -</ul> 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 deleted file mode 100644 index 769a86e29f..0000000000 --- a/files/pt-br/conflicting/web/javascript/reference/statements/switch/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: default -slug: conflicting/Web/JavaScript/Reference/Statements/switch -tags: - - JavaScript - - Keyword - - Palavra-chave -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default -original_slug: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Statements")}}</div> - -<p>A <strong>palavra-chave default </strong>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")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>Com uma declaração {{jsxref("Statements/switch", "switch")}}:</p> - -<pre class="syntaxbox">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;] -}</pre> - -<p>Com a declaração {{jsxref("Statements/export", "export")}}:</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="Descrição">Descrição</h2> - -<p>Para mais detalhes, veja as páginas:</p> - -<ul> - <li>Declaração {{jsxref("Statements/switch", "switch")}}</li> - <li>Declaração {{jsxref("Statements/export", "export")}}.</li> -</ul> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_default_em_declarações_switch">Usando <code>default</code> em declarações <code>switch</code></h3> - -<p>No exemplo a seguir, se a variável <code>expr</code> 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 <code>default</code> vai ajudar em qualquer outro caso e executará a declaração associada.</p> - -<pre class="brush: js">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 + '.'); -}</pre> - -<h3 id="Usando_default_com_export">Usando <code>default</code> com <code>export</code></h3> - -<p>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:</p> - -<pre class="brush: js">// module "my-module.js" -let cube = function cube(x) { - return x * x * x; -}; -export default cube;</pre> - -<p>Então, no outro script, isso pode ser passado direto para o import do default export:</p> - -<pre class="brush: js">// module "my-module.js" -import myFunction from 'my-module'; -console.log(myFunction(3)); // 27 -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Situação</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Switch default</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Export default</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Switch default</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Export default</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Statements/export", "export")}}</li> - <li>{{jsxref("Statements/switch", "switch")}}</li> -</ul> diff --git a/files/pt-br/conflicting/web/progressive_web_apps/index.html b/files/pt-br/conflicting/web/progressive_web_apps/index.html deleted file mode 100644 index 43a6e52cbd..0000000000 --- a/files/pt-br/conflicting/web/progressive_web_apps/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Design Responsivo -slug: conflicting/Web/Progressive_web_apps -translation_of: Web/Progressive_web_apps -translation_of_original: Web/Guide/Responsive_design -original_slug: Web_Development/Mobile/Design_responsivo ---- -<p>Como uma reação aos problemas associados com a abordagem de <a href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Web development/Mobile/Separate sites">sites separados</a> para desenvolvimento de sites para celular e desktop, uma ideia relativamente nova (que é atualmente <a href="http://www.alistapart.com/articles/dao/">bastante antiga</a>) 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 href="http://alistapart.com" title="http://alistapart.com">A List Apart</a>, veio a ser conhecido como <a href="http://www.alistapart.com/articles/responsive-web-design/" style="line-height: 1.572;">Responsive Web Design</a>. Como a abordagem de sites separados, WebDesgin Responsivo tem aspectos positivos e negativos.</p> - -<h2 id="As_Vantagens">As Vantagens</h2> - -<p>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.</p> - -<ol style="font-size: medium;"> - <li>Economiza tempo e dinheiro, como não há uma necessidade de manter sites separados para diferentes dispositivos.</li> - <li>Design Responsivo fornece cada página com uma URL única e original.</li> - <li>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.</li> - <li>Design Responsivo não se preocupa sobre agentes de usuário.</li> -</ol> - -<p>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.</p> - -<h2 id="Os_Negativos">Os Negativos</h2> - -<p>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.</p> - -<p><span style="line-height: inherit;">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 </span><a href="http://www.smashingmagazine.com/2008/06/26/flexible-layouts-challenge-for-the-future/" style="line-height: inherit;">layout flexível</a><span style="line-height: inherit;">. 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.</span></p> - -<p><span style="line-height: inherit;">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.</span></p> - -<h2 id="Quando_há_que_escolher_esta_opção">Quando há que escolher esta opção</h2> - -<p><a href="/@api/deki/files/5894/=teixido_responsive-300x177.png" title="teixido_responsive-300x177.png"><img alt="teixido_responsive-300x177.png" class="internal rwrap" src="/@api/deki/files/5894/=teixido_responsive-300x177.png?size=webview" style="float: right; height: 177px; width: 300px;"></a>Como 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!</p> - -<h2 id="Examples" name="Examples" style="overflow: hidden;">Exemplos</h2> - -<p>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:</p> - -<ul> - <li><a href="http://teixido.co/">http://teixido.co/</a> – um dos meus designs responsivos favoritos, também na foto acima!</li> - <li><a href="http://adactio.com/journal/1696">http://adactio.com/journal/1696</a> – também um artigo bom de ler, com seus próprios links para exemplos</li> - <li><a href="http://thinkvitamin.com/">http://thinkvitamin.com/</a></li> - <li><a href="http://stephencaver.com/">http://stephencaver.com/</a></li> - <li><a href="http://hicksdesign.co.uk/">http://hicksdesign.co.uk/</a></li> -</ul> - -<p>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 <a href="http://www.lukew.com/ff/entry.asp?1117">criar um design de tela pequena primeiro</a>, 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 <a href="http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu">aqui</a>.</p> - -<h2 id="Abordagem_para_desenvolvimento_web_móvel">Abordagem para desenvolvimento web móvel</h2> - -<p>Consulte os seguintes artigos de abaixo e outras abordagens ao desenvolvimento para plataformas móveis.</p> - -<ul> - <li><a href="/pt-BR/docs/Web_Development/Mobile/Mobile-friendliness" title="XML Web Services">O que é um site móvel amigável?</a></li> - <li><a href="/pt-BR/docs/Web_Development/Mobile/Sites_separados" title="Web development/Mobile/Separate sites">Sites Separados</a></li> - <li><a href="/pt-BR/docs/Web_development/Mobile/A_hybrid_approach" title="Web development/Mobile/Hybrid approach">Uma abordagem híbrida</a></li> -</ul> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Web_Development/Responsive_Web_design" title="Responsive Web design">Web Design Responsivo</a> para recursos adicionais</li> -</ul> - -<div class="originaldocinfo"> -<h3 id="Informação_Original_do_Documento">Informação Original do Documento</h3> - -<p>Originalmente publicado em 27 de Maio de 2011 no blog Mozilla Webdev como "<a href="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/" title="http://blog.mozilla.com/webdev/2011/05/27/approaches-to-mobile-web-development-part-3-responsive-design/">Approaches to Mobile Web Development Part 3 - Responsive Design</a>", por Jason Grlicky.</p> -</div> diff --git a/files/pt-br/orphaned/glossary/tratando_formulários_com_php/index.html b/files/pt-br/orphaned/glossary/tratando_formulários_com_php/index.html deleted file mode 100644 index fc4c7baa22..0000000000 --- a/files/pt-br/orphaned/glossary/tratando_formulários_com_php/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Tratando Formulários com PHP -slug: orphaned/Glossary/Tratando_Formulários_com_PHP -tags: - - Método POST - - PHP -translation_of: Glossary/Tratando_Formulários_com_PHP -original_slug: Glossario/Tratando_Formulários_com_PHP ---- -<p>Uma das características mais fortes do <a href="/pt-BR/docs/Glossario/PHP">PHP</a> é 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:</p> - -<h3 id="Enviando_Dados_com_método_POST">Enviando Dados com método POST</h3> - -<p> </p> - -<pre><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></pre> - -<p> </p> diff --git a/files/pt-br/orphaned/hello_world_rust/index.html b/files/pt-br/orphaned/hello_world_rust/index.html deleted file mode 100644 index baef01d161..0000000000 --- a/files/pt-br/orphaned/hello_world_rust/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: Hello World Rust -slug: orphaned/Hello_World_Rust -tags: - - Performance - - baixo-nível - - brazil - - compilada - - compile - - hello world - - low-level - - programar - - programming - - pt-br - - rust - - rustontherocks - - servo -original_slug: Hello_World_Rust ---- -<h2 id="Hello_World!" style="margin-bottom: 0in; border-width: medium medium 1px; border-style: none none solid; border-color: -moz-use-text-color -moz-use-text-color rgb(0, 0, 0); padding: 0in 0in 0.03in; font-style: normal; line-height: 100%;"><font color="#000000"><font face="Cantarell"><font size="5"><strong><span style="background: transparent;">Hello, World!</span></strong></font></font></font></h2> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Que tal escrevermos um clássico programa em Rust? </span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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. </span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">A primeira coisa que nós precisamos fazer é criar um local para que possamos organizar nossos códigos. Eu gosto de criar uma pasta <font color="#cc0000">projetos</font> dentro da minha pasta <font color="#cc0000">home</font>. Lembrando que o Rust não se importa com o local onde o seu código se encontra.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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(<a href="https://github.com/oakes/SolidOak">https://github.com/oakes/SolidOak</a> ), 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(<a href="https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md">https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md</a> ). </span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Dito isso, vamos criar um deretório dentro da nossa pasta projetos.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">$ mkdir ~/projects</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">$ cd ~/projects</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">$ mkdir hello_world</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">$ cd hello_world</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Caso você esteja no Windows e não esteja utilizando PowerShell, talvez o <font color="#cc0000">~</font> não funcione. Consulte a documentação do seu shell para mais detalhes.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Vamos criar um arquivo para o nosso código. Nós chamamos nosso arquivo de <font color="#cc0000">main.rs</font>. Arquivos Rust são sempre terminados com a extensão <font color="#cc0000">.rs</font>. Caso você esteja utilizando mais de uma palavra no nome de seu arquivo, é preferível que você utilize o underscore/underline: <font color="#cc0000">hello_world.rs</font> ao invés de concatenar tudo como: <font color="#cc0000">helloword.rs</font>.</span></font></font></font> No mundo rust isso é chamado de snake_case.</p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Agora que você já tem o seu arquivo abra-o e digite o seguinte código:</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;"><em>fn main() {</em></span></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">println!("Hello, world!");</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">}</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Salve o arquivo e digite o seguinte no seu terminal:</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">$ rustc main.rs</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">$ ./main # ou main.exe no Windows</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">Hello, world!</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Sucesso!</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Agora, como diria Jack: "Vamos por partes...".</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">fn main() {</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><em><span style="background: transparent;">}</span></em></font></font></font></p> - -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Estas linhas definem uma função em Rust. A função <font color="#cc0000">main</font> é de fato especial: ela é o começo de todo programa feito em Rust. Essas primeiras linhas dizem “Eu estou declarando uma função chamada <font color="#cc0000">main</font> que não possui nenhum argumento e não retorna valor nenhum.” Caso tivesse argumentos eles estariam dentro dos parênteses (<font color="#cc0000">(</font> <font color="#cc0000">)</font>), e como não estamos retornando nada nós podemos omitir o tipo de retorno inteiramente. Falaremos mais sobre isso em tutoriais futuros.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Você também deve notar que a função é envolta por chaves (<font color="#cc0000">{ }</font>). 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.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Próxima linha:</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;"><em>println!("Hello, world!");</em></span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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 (<a href="https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md">https://github.com/rust-lang/rust/blob/master/src/etc/CONFIGS.md</a>).</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">O segundo ponto é a parte do <strong>println!( )</strong>. </span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Este trecho de código chama uma<strong> macro</strong>(<a href="http://doc.rust-lang.org/book/macros.html">http://doc.rust-lang.org/book/macros.html</a>) 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. </span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="font-style: normal;"><span style="font-weight: normal;"><span style="background: transparent;">Próximo, </span></span></span></font></font></font><code><font color="#cc0000">"Hello, world!" </font></code><code><font color="#000000"><font face="DejaVu Serif, serif">é 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: <a href="http://doc.rust-lang.org/book/the-stack-and-the-heap.html">http://doc.rust-lang.org/book/the-stack-and-the-heap.html</a>, mas por hora não se faz necessário. </font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif">Voltando, nós passamos a nossa string como um argumento para a macro </font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif">println!</font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif">, que por sua vez imprime na tela a nossa 'string'. Fácil!</font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif">Finalmente, a nossa linha de código termina com um ponto e vírgula ( </font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif">;</font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"> ). 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 </font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif">;</font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"> é 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 </font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif">;</font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif">.</font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif">Por fim, compilar e executar. </font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif">Para compilar usamos o nosso compilador </font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif">rustc</font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"> e em seguida passamos o nome do nosso arquivo:</font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><em>$ rustc main.rs</em></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">Caso você tenha experiência com C/C++ verá que existe semelhança com o </span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">gcc</span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;"> e </span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">clang</span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">. Após o comando, Rust gerará um binário executável. Podemos vê-lo utilizando o comando </span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">ls</span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">:</span></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><em>$ ls</em></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><em><strong>main</strong></em></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><em>main.rs</em></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">No Windows:</span></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><em>$ dir</em></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><em><strong>main.exe</strong></em></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><em>main.rs</em></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">Agora temos dois arquivos, o nosso código com a extensão </span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">.rs </span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">e o executável(</span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">main.exe</span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;"> para Windows ou </span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">main</span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;"> para os demais).</span></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><em>$ ./main # or main.exe on Windows</em></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">O comando acima exibe a nossa string </span></font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">hello, world!</span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;"> no terminal.</span></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">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. </span></font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">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.</span></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><span style="font-style: normal;">Parabéns! Você oficialmente escreveu seu primeiro programa em Rust. Isso lhe torna um programador Rust! Bem-vindo!!!</span></font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> diff --git a/files/pt-br/orphaned/instalando_rust/index.html b/files/pt-br/orphaned/instalando_rust/index.html deleted file mode 100644 index cf7c77a442..0000000000 --- a/files/pt-br/orphaned/instalando_rust/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Instalando Rust -slug: orphaned/Instalando_Rust -tags: - - Linux - - Tutorial - - Windows - - baixo nivel - - brasil - - brazil - - hello world - - install - - low-level - - programming - - rust - - rustontherocks - - system language -original_slug: Instalando_Rust ---- -<h2 id="Instalando_o_Rust" style="margin-bottom: 0in; border-width: medium medium 1px; border-style: none none solid; border-color: -moz-use-text-color -moz-use-text-color rgb(0, 0, 0); padding: 0in 0in 0.03in; line-height: 100%;"><font color="#000000"><span style="background: transparent;"><font face="Cantarell"><font size="4"><strong>Instalando o Rust</strong></font></font></span></font></h2> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><span style="background: transparent;">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:</span></font></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<div class="note"> -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><span style="background: transparent;">$ curl -sf -L https://static.rust-lang.org/rustup.sh | sh</span></font></code></p> -</div> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><span style="background: transparent;">Se você está preocupado com a potencial brecha de segurança de usar <font color="#cc0000">curl | sh </font>, por favor continue lendo e veja a nossa alternativa abaixo. Sinta-se à vontade para fazer o processo em dois passos:</span></font></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<div class="note"> -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><span style="background: transparent;">$ curl -f -L https://static.rust-lang.org/rustup.sh -O</span></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><code><font color="#000000"><span style="background: transparent;">$ sh rustup.sh</span></font></code></p> -</div> - -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"> </p> - -<div class="note"> -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"><font color="#000000"><span style="background: transparent;">Se você utiliza Windows, por favor baixe o instalador correto para a sua máquina: </span></font></p> - -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"><font color="#000000"><span style="background: transparent;">32bits <a href="https://static.rust-lang.org/dist/rust-1.0.0-beta-i686-pc-windows-gnu.msi">https://static.rust-lang.org/dist/rust-1.0.0-beta-i686-pc-windows-gnu.msi</a></span></font></p> - -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"><font color="#000000"><span style="background: transparent;">64bits <a href="https://static.rust-lang.org/dist/rust-1.0.0-beta-i686-pc-windows-gnu.msi">https://static.rust-lang.org/dist/rust-1.0.0-beta-x86_64-pc-windows-gnu.msi</a></span></font></p> -</div> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Ah, antes que eu esqueça! </span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Plataformas oficialmente suportadas:</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<div class="note"> -<p><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;"><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>Windows (7, 8, Server 2008 R2)</span></font></font></font></p> - -<p><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Gnu/Linux(2.6.18 ou posterior, várias distribuições), x86 e x86-64</span></font></font></font></p> - -<p><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">OSX 10.7(Lion) ou posterior, x86 e x86-64</span></font></font></font></p> -</div> - -<dl> -</dl> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Se você tem Rust instalado, você pode abrir um terminal e digitar o seguinte:</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<div class="note"> -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">$ rustc –version</span></font></font></font></code></p> -</div> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">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.</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<div class="note"> -<p style="margin-bottom: 0in; font-weight: normal; line-height: 100%;"><code><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">rustc 1.0.0-beta (9854143cb 2015-04-02) (built 2015-04-02)</span></font></font></font></code></p> -</div> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; font-style: normal; font-weight: normal; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="background: transparent;">Caso você veja uma saída parecida com essa, parabéns Rust foi instalado com sucesso!</span></font></font></font></p> - -<p style="margin-bottom: 0in; font-style: normal; line-height: 100%;"> </p> - -<blockquote> -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif"><font size="3"><span style="font-style: normal;"><span style="font-weight: normal;"><span style="background: transparent none repeat scroll 0% 0%;">O instalador oficial também instala uma cópia da documentação para que você possa lê-la offline. Em sistemas UNIX, </span></span></span></font></font></font><code><font color="#cc0000"><font face="DejaVu Serif, serif">/usr/local/share/doc/rust </font></font><font color="#000000"><font face="DejaVu Serif, serif">é o local onde ela se encontra. No windows a documentação encontra-se na pasta </font></font></code><code><font color="#cc0000"><font face="DejaVu Serif, serif">share/doc</font></font></code><code><font color="#000000"><font face="DejaVu Serif, serif"> dentro do local onde o Rust foi instalado.</font></font></code></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> -</blockquote> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif">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: <a href="https://client02.chat.mibbit.com/server=irc.mozilla.org&channel=%23rust">https://client02.chat.mibbit.com/server=irc.mozilla.org&channel=%23rust</a> . </font></font></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<div class="note"> -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif">Outro importantes links...</font></font></p> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif">fórum dos usuários <a href="https://users.rust-lang.org/">https://users.rust-lang.org/ </a></font></font></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif">RoR Project<a href="http://rustontherocks.org"> http://rustontherocks.org</a></font></font></p> - -<p style="margin-bottom: 0in; line-height: 100%;"><font color="#000000"><font face="DejaVu Serif, serif">Stack Overflow <a href="http://stackoverflow.com/questions/tagged/rust">http://stackoverflow.com/questions/tagged/rust </a></font></font></p> - -<h4 id="sect1" style="margin-bottom: 0in; line-height: 100%;"> </h4> - -<p style="margin-bottom: 0in; line-height: 100%;"> </p> -</div> diff --git a/files/pt-br/orphaned/learn/how_to_contribute/index.html b/files/pt-br/orphaned/learn/how_to_contribute/index.html deleted file mode 100644 index 63586e3320..0000000000 --- a/files/pt-br/orphaned/learn/how_to_contribute/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Como contribuir para a área de aprendizagem da MDN -slug: orphaned/Learn/How_to_contribute -tags: - - Documentação - - Guia(2) - - Iniciante - - MDN Meta - - aprendizado - - contribuir - - prioridde - - pt-br -translation_of: Learn/How_to_contribute -original_slug: Aprender/Como_contribuir ---- -<p>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!</p> - -<p>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ê é<span class="seoSummary"><a href="/en-US/Learn/How_to_contribute#I'm_a_beginner">um iniciante</a>, <a href="/en-US/Learn/How_to_contribute#I'm_a_web_developer">um desenvolvedor web</a>, ou <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">um professor</a>.</span></p> - -<div class="note"> -<p><strong>Nota:</strong> se você já é um contribuinte do MDN, não hesite em checar novamente a <a href="/en-US/docs/MDN/Doc_status/Learn">pagina com o status da documentação </a>para acompanhar o trabalho que tem sido feito e ver quais prioridades estão sendo escritas.</p> -</div> - -<div class="note"> -<p><strong>Nota:</strong> Os contribuintes estão utilizando <a href="https://trello.com/b/LDggrYSV">um painel na Trello</a> para organizar as suas tarefas. Se você quiser utilizar esta ferramenta, apena <a href="https://trello.com/signup">se registre na Trello</a> e procure por <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> lhe dar acesso de escrita ao painel.</p> -</div> - -<h2 id="Encontre_tarefas_específicas">Encontre tarefas específicas</h2> - -<p><strong>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 <a href="https://github.com/mdn/learning-area/">repositório do github</a> também é bem vindo e entre em contato conosco se você quiser pedir o que mais precisar.</strong></p> - -<p>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 "<a href="https://discourse.mozilla.org/t/learning-web-development-marking-guides-and-questions/16294">Fórum de conversa e aprendizado</a>" ou no <a href="https://developer.mozilla.org/en-US/docs/MDN/Community#Get_into_IRC">canal IRC </a>(Veja o final da página para mais detalhes). <a href="https://developer.mozilla.org/en-US/profiles/chrisdavidmills">Chris Mills</a> é o "topic driver" da Área de aprendizado - você também poderia tentar contatá-lo diretamente.</p> - -<p>As sessões a seguir oferecem algumas ideias gerais de tipos de tarefas que você pode fazer.</p> - -<h2 id="Eu_sou_um_iniciante"><strong>Eu sou um iniciante</strong></h2> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nossa lista de e-mail</a> ou <a href="/en-US/docs/MDN/Community#Get_into_IRC">no nosso canal IRC</a> (obtenha detalhes na parte inferior desta página).</p> - -<p>Aqui temos algumas sugestões de como você pode contribuir:</p> - -<dl> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Adicionar tags para os nossos artigos</a> (<em>5 min</em>)</dt> - <dd>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 <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">entradas do glosário</a> e <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">artigos de aprendizagem</a> sem nenhuma tag.</dd> - <dt><a href="/en-US/docs/Glossary">Escrever e revisar entradas no glossário</a> (<em>15 min</em>)</dt> - <dd>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nossa lista de e-mail</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escrever uma nova entrada no glossário</a> (<em>1 horas</em>)</dt> - <dd>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!.</dd> - <dt><a href="/en-US/Learn/Index">Ler e revisar um artigo de aprendizagem</a> (<em>2 hora</em>s)</dt> - <dd>É muito parecido com revisar entradas no glossário (veja acima); apenas leva mais tempo, geralmente estes artigos são um pouco maiores.</dd> -</dl> - -<h2 id="Eu_sou_um_desenvolvedor_web"><strong>Eu sou um desenvolvedor web</strong></h2> - -<p>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.</p> - -<dl> - <dt><a href="/en-US/docs/Glossary">Escrever e revisar entradas no glossário</a> (<em>15 min</em>)</dt> - <dd>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nossa lista de e-mail</a> ou <a href="/en-US/docs/MDN/Community#Get_into_IRC">canal IRC</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escrever uma nova entrada no glossário</a> (<em>1 hora</em>)</dt> - <dd>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 <a href="/en-US/docs/Glossary#Contribute">muitos termos indefinidos</a> que precisam da sua atenção. Pegue um e você já estará pronto para começar.</dd> - <dt><a href="/en-US/Learn/Index">Escrever e revisar artigos de prendizagem</a> (<em>2 hora</em>)</dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Escrever um novo artigo de aprendizagem</a> (<em>4 horas</em>)</dt> - <dd>A MDN está em falta de alguns artigos simples sobre o uso de tecnologias web (<a href="/en-US/docs/Learn/CSS">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, 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.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Criar exercícios, exemplos de código e ferramentas de aprendizagem interativas</a> (<em>? horas</em>)</dt> - <dd>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 <a href="http://jsfiddle.net" rel="external">JSFiddle</a>, ou similar, liberte a sua criatividade para a construção de conteúdo interativo com <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>.</dd> -</dl> - -<h2 id="Eu_sou_um_professor"><strong>Eu sou um professor</strong></h2> - -<p>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.</p> - -<dl> - <dt><a href="/en-US/docs/Glossary">Ler e revisar uma entrada no glossário</a> (<em>15 min</em>)</dt> - <dd>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">nossa lista de e-mail</a> ou <a href="/en-US/docs/MDN/Community#Get_into_IRC">canal IRC</a>.</dd> - <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Escrever uma nova entrada no glossário</a> (<em>1 hora</em>)</dt> - <dd>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 <a href="/en-US/docs/Glossary#Contribute">muitos termos indefinidos</a> que precisam da sua atenção. Escolha um e vá a diante.</dd> - <dt><a href="/en-US/docs/tag/needsSchema">Adicionar ilustrações/ou esquemas para os artigos</a> (<em>1 hora</em>)</dt> - <dd>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 <a href="/en-US/docs/tag/needsSchema">artigos que necessitam conteúdo ilustrativo</a> e pegue um que você queira criar gráficos.</dd> - <dt><a href="/en-US/Learn/Index">Ler e revisar um artigo de aprendizagem</a> (<em>2 horas</em>)</dt> - <dd>Isto é semelhante a revisar entradas de glossário (veja acima), mas exige mais tempo porque os artigos são um pouco maiores.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Escrever um novo artigo de aprendizagem</a> (<em>4 horas</em>)</dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Criar exercícios, questionários e ferramentas interativas de aprendizado</a> (<em>? horas</em>)</dt> - <dd>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 <a href="https://thimble.mozilla.org/" rel="external">Thimble</a>. Solte a sua criatividade!</dd> - <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Criar planos de aprendizagem</a> (<em>? horas</em>)</dt> - <dd>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.</dd> -</dl> 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 deleted file mode 100644 index 40721d4f3c..0000000000 --- a/files/pt-br/orphaned/learn/html/forms/html5_updates/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Formulários em HTML -slug: orphaned/Learn/HTML/Forms/HTML5_updates -translation_of: Learn/HTML/Forms/HTML5_updates -original_slug: HTML/Forms_in_HTML ---- -<p>{{ gecko_minversion_header("2") }}</p> - -<p>Elementos e atributos de formulários em <strong>HTML5</strong> 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.</p> - -<p>Este tópico descreve itens novos ou modificados que são suportados por Gecko/Firefox, versão 4 ou mais recente.</p> - -<h3 id="O_elemento_<input>">O elemento <code><input></code></h3> - -<p>O elemento <code>{{ HTMLElement("input") }}</code> tem novos valores para o atributo {{ htmlattrxref("type", "input") }}.</p> - -<ul> - <li><code>search</code>: O elemento representa um campo de entrada de pesquisa. Quebras de linha são automaticamente retiradas do valor de entrada, mas nenhuma outra sintaxe é aplicada.</li> - <li><code>tel</code>: O elemento representa um controle para edição de um número telefônico. Quebras de linha são automaticamente retiradas do valor de entrada, mas nenhuma outra sintaxe é aplicada, porque números telefônicos variam muito dependendo do país em que se encontra. Você pode usar atributos como {{ htmlattrxref("pattern", "input") }} e {{ htmlattrxref("maxlength", "input") }} para restringir valores de entrada.</li> - <li><code>url</code>: O elemento representa um controle para edição de uma <a class="external" href="http://pt.wikipedia.org/wiki/URL" title="http://pt.wikipedia.org/wiki/URL">URL</a>. Quebreas de linha e espaços em branco à esquerda e direita são automaticamente retirados do valor de entrada.</li> - <li> - <p><code>email</code>: O elemento representa um endereço de email. Quebras de linha são automaticamente retiradas do valor de entrada. Um email inválido até pode ser colocado, mas o campo de entrada só aceitará se ele respeitar o formato da ABNF <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> onde <code>atext</code> é definido em <a class="external" href="http://tools.ietf.org/html/rfc5322#section-3.2.3">RFC 5322 section 3.2.3</a>, e <code>ldh-str</code> é definido em <a class="external" href="http://tools.ietf.org/html/rfc1034#section-3.5">RFC 1034 section 3.5</a>.</p> - - <div class="note"><strong>Nota:</strong> Se o atributo {{ htmlattrxref("multiple", "input") }} for aplicado, multiplos endereços de email podem ser colocador neste elemento {{ HTMLElement("input") }} , como uma lista separada por vírgulas, mas este recurso ainda está sendo implementado no Firefox.</div> - </li> -</ul> - -<p>O elemento {{ HTMLElement("input") }} também tem novos atributos:</p> - -<ul> - <li>{{ htmlattrxref("list", "input") }}: O ID de um elemento {{ HTMLElement("datalist") }} cujo conteúdo, elementos {{ HTMLElement("option") }} , e são usados como dicas e mostrados como sugestões no campo de entrada.</li> - <li>{{ htmlattrxref("pattern", "input") }}: Uma expressão regular que o valor de controle é comparado, que podem ser usados com valores {{ htmlattrxref("type", "input") }} de <code>text</code>, <code>tel</code>, <code>search</code>, <code>url</code>, e <code>email</code>.</li> - <li>{{ htmlattrxref("formmethod", "input") }}: Uma string indicando qual método HTTP (GET or POST) deve ser usado quando enviado; ele substitui o {{ htmlattrxref("method", "form") }} do elemento {{ HTMLElement("form") }} , se definido. O {{ htmlattrxref("formmethod", "input") }} só aplica quando o {{ htmlattrxref("type", "input") }} é <code>image</code> ou <code>submit</code>.</li> - <li>{{ htmlattrxref("x-moz-errormessage", "input") }} {{ non-standard_inline() }}: Uma string que é mostrada como uma mensagem de erro quando o a validação falha. Esta é uma extensão Mozilla, e não é padrão.</li> -</ul> - -<h3 id="O_elemento_<form>">O elemento <code><form></code></h3> - -<p>O elemento {{ HTMLElement("form") }} possui um novo atributo:</p> - -<ul> - <li>{{ htmlattrxref("novalidate", "form") }}: Este atributo previne o formulário de ser validado antes de ser enviado.</li> -</ul> - -<h3 id="O_elemento_<datalist>">O elemento <code><datalist></code></h3> - -<p>O elemento {{ HTMLElement("datalist") }} representa a lista de elementos {{ HTMLElement("option") }} to suggest when filling an {{ HTMLElement("input") }} field.</p> - -<p>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") }}.</p> - -<h3 id="O_elemento_<output>">O elemento <code><output></code></h3> - -<p>O elemento <code>{{ HTMLElement("output") }}</code> representa o resultado de um cálculo.</p> - -<p>Você pode usar o atributo {{ htmlattrxref("for", "output") }} para especificar uma relação entre o elemento<code> {{ HTMLElement("output") }}</code> 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.</p> - -<p>{{ 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").</p> - -<h3 id="O_atributo_placeholder">O atributo <em>placeholder</em></h3> - -<p>O atributo {{ htmlattrxref("placeholder", "input") }} nos elementos <code>{{ HTMLElement("input") }}</code> e <code>{{ HTMLElement("textarea") }}</code> 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.</p> - -<h3 id="O_atributo_autofocus">O atributo <em>autofocus</em></h3> - -<p>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 <em>autofocus</em>, que é um booleano. Este atributo pode ser aplicado aos seguintes elementos: <code style="font-style: normal;">{{ HTMLElement("input") }}</code>, <code style="font-style: normal;">{{ HTMLElement("button") }}</code>, <code style="font-style: normal;">{{ HTMLElement("select") }}</code>, and <code style="font-style: normal;">{{ HTMLElement("textarea") }}. A única exceção é que o atributo <em>autofocus </em>não pode ser aplicado a um elemento </code>{{ HTMLElement("input") }} caso seu atributo {{ htmlattrxref("type", "input") }} seja <em>hidden.</em></p> - -<h3 id="The_label.control_DOM_property">The label.control DOM property</h3> - -<p>The <code><a href="/en/DOM/HTMLLabelElement" title="en/DOM/HTMLLabelElement">HTMLLabelElement</a></code> DOM interface provides an extra property, in addition to the properties that correspond to the HTML <code>{{ HTMLElement("label") }}</code> element attributes. The <strong>control</strong> 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.</p> - -<h3 id="Constraint_Validation">Constraint Validation</h3> - -<p>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.</p> - -<p>If the <code>title</code> attribute is set on the {{ HTMLElement("input") }} element, that string is displayed in a tooltip when validation fails. If the <code>title</code> is set to the empty string, no tooltip is displayed. If the <code>title</code> attribute isn't set, the standard validation message (as specified by the {{ htmlattrxref("x-moz-errormessage") }} attribute or by calling the <code>setCustomValidity()</code> method) is displayed instead.</p> - -<div class="note"><strong>Note:</strong> 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.</div> - -<h4 id="HTML_Syntax_for_Constraint_Validation">HTML Syntax for Constraint Validation</h4> - -<p>The following items in HTML5 syntax can be used to specify constraints on form data.</p> - -<ul> - <li>The {{ htmlattrxref("required", "input") }} attribute on the {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, and {{ HTMLElement("textarea") }} elements indicates that a value must be supplied. (On the {{ HTMLElement("input") }} element, {{ htmlattrxref("required", "input") }} applies only in conjunction with certain values of the {{ htmlattrxref("type", "input") }} attribute.)</li> - <li>The {{ htmlattrxref("pattern", "input") }} attribute on the {{ HTMLElement("input") }} element constrains the value to match a specific regular expression.</li> - <li>The {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes of the {{ HTMLElement("input") }} element constrain the minimum and maximum values that can be entered.</li> - <li>The {{ htmlattrxref("step", "input") }} attribute of the {{ HTMLElement("input") }} element (when used in combination with the {{ htmlattrxref("min", "input") }} and {{ htmlattrxref("max", "input") }} attributes) constrains the granularity of values that can be entered. A value that does not correspond an allowed value step does not validate.</li> - <li>The {{ htmlattrxref("maxlength", "input") }} attribute of the {{ HTMLElement("input") }} and {{ HTMLElement("textarea") }} elements constrains the maximum number of characters (in Unicode code points) that the user can enter.</li> - <li>The values <code>url</code> and <code>email</code> for the {{ htmlattrxref("type", "input") }} constrain the value to being a valid URL or e-mail address, respectively.</li> -</ul> - -<p>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 <code>submit</code> or <code>image</code>). These attributes indicate that the form is not to be validated when it is submitted.</p> - -<h4 id="Constraint_Validation_API">Constraint Validation API</h4> - -<p>The following DOM properties and methods related to constraint validation are available to client-side scripts:</p> - -<ul> - <li>On <code><a href="/en/DOM/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code> objects, the <code>checkValidity()</code> method, which returns true if all of this form element's associated elements that are subject to constraint validation satisfy their constraints, and false if any do not.</li> - <li>On <a href="/en/HTML/Content_categories#form-associated" title="en/HTML/Content Categories#form-associated">form-associated elements</a>: - <ul> - <li><code>willValidate</code> property, which is false if the element has constraints that are not satisfied.</li> - <li><code>validity</code> property, which is a <code><a href="/en/DOM/ValidityState" title="en/DOM/ValidityState Interface">ValidityState</a></code> object representing the validity states that the element is in (i.e., constraint failure or success conditions).</li> - <li><code>validationMessage</code> property, which is a message describing any constraint failures that pertain to the element.</li> - <li><code>checkValidity()</code> method, which returns false if the element fails to satisfy any of its constraints, or true otherwise.</li> - <li><code>setCustomValidity()</code> method, which sets a custom validation message, allowing for constraints to be imposed and validated beyond those that are predefined.</li> - </ul> - </li> -</ul> - -<p>{{ languages({"es": "es/HTML/HTML5/Formularios_en_HTML5", "ja": "ja/HTML/HTML5/Forms_in_HTML5", "ko": "ko/HTML/HTML에서_폼"}) }}</p> - -<p>{{ HTML5ArticleTOC() }}</p> diff --git a/files/pt-br/orphaned/mdn/community/index.html b/files/pt-br/orphaned/mdn/community/index.html deleted file mode 100644 index 7f0ccafa6d..0000000000 --- a/files/pt-br/orphaned/mdn/community/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Participe da comunidade MDN -slug: orphaned/MDN/Community -tags: - - Comunidade - - Guia(2) - - Iniciando -translation_of: MDN/Community -original_slug: MDN/Comunidade ---- -<div>{{MDNSidebar}}</div> - -<div class="summary"> -<p>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.</p> -</div> - -<p>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:</p> - -<ol> - <li><a href="/pt-BR/docs/MDN/Contribute/guia/Create_an_MDN_account">Crie uma conta no MDN.</a></li> - <li><a href="/pt-BR/docs/">Participe das conversas.</a></li> - <li><a href="/pt-BR/docs/MDN/Comunidade/Whats_happening">Siga o que está acontecendo.</a></li> -</ol> - -<h2 id="Como_a_comunidade_funciona">Como a comunidade funciona</h2> - -<p>A seguir, mais artigos que descrevem a comunidade MDN.</p> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt class="landingPageList"><a href="">Cargos da comunidade</a></dt> - <dd class="landingPageList">Existem vários cargos dentro da comunidade MDN com responsabilidades específicas.</dd> - <dt class="landingPageList"><a href="">Sprints de documentação</a></dt> - <dd class="landingPageList">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.</dd> - <dt class="landingPageList"><a href="">Siga o que está acontecendo</a></dt> - <dd class="landingPageList">A MDN chega até você através da <a class="external" href="">comunidade da Rede de Desenvolvedores da Mozilla</a>. Aqui estão algumas formas das quais nós compartilhamos informações sobre o que fazemos.</dd> -</dl> - -<dl> -</dl> -</div> -</div> diff --git a/files/pt-br/orphaned/mdn/community/whats_happening/index.html b/files/pt-br/orphaned/mdn/community/whats_happening/index.html deleted file mode 100644 index 842f8b7fdf..0000000000 --- a/files/pt-br/orphaned/mdn/community/whats_happening/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Siga o que está acontecendo -slug: orphaned/MDN/Community/Whats_happening -translation_of: MDN/Community/Whats_happening -original_slug: MDN/Comunidade/Whats_happening ---- -<div>{{MDNSidebar}}</div><p>MDN is brought to you by Mozilla's <a href="https://wiki.mozilla.org/Engagement/Developer_Engagement" title="https://wiki.mozilla.org/Engagement/Developer_Engagement">Developer Engagement</a> community. Here are some ways to that we share information about what we're doing.</p> - -<h2 id="Blogs">Blogs</h2> - -<dl> - <dt><a href="https://hacks.mozilla.org/" title="https://hacks.mozilla.org/">Mozilla Hacks</a></dt> - <dd>News about and in-depth coverage of Web and Mozilla technologies and features.</dd> - <dt><a href="https://blog.mozilla.org/community/category/developer-engagement/">Engaging Developers</a></dt> - <dd>Promoting activity and discussion amongst the community involved in Developer Relations at Mozilla.</dd> -</dl> - -<h2 id="Streams_of_ephemera">Streams of ephemera</h2> - -<ul> - <li><a href="https://twitter.com/mozhacks" title="https://twitter.com/mozhacks"><span id="cke_bm_286S" class="hidden"> </span>@MozHacks</a>: Tweets about new web technologies, great HTML5 apps, and Firefox features.</li> - <li><a href="https://twitter.com/NewOnMDN" title="https://twitter.com/NewOnMDN">@NewOnMDN</a>: Curated feed of new pages, significant updates, and other news about Mozilla Developer Network.</li> - <li><a href="https://plus.google.com/+MozillaDeveloperNetwork" title="https://plus.google.com/+MozillaDeveloperNetwork">+MozillaDeveloperNetwork</a></li> - <li><a href="http://www.youtube.com/user/mozhacks" title="http://www.youtube.com/user/mozhacks">Mozilla Hacks (YouTube)</a></li> - <li><a href="https://twitter.com/mozhacks/moz-developer-engagement" title="https://twitter.com/mozhacks/moz-developer-engagement">Moz Developer Engagment</a>: People on Twitter who are actively involved in Developer Engagement for Mozilla.</li> -</ul> - -<h2 id="Status_boards_and_dashboards">Status boards and dashboards</h2> - -<p>The MDN documentation team maintains a <a href="https://trello.com/b/HAhl54zz/status">Trello board</a> 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.</p> - -<p>In addtion, take a look at the <a href="/en-US/docs/MDN/Doc_status">Documentation status</a> 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.</p> - -<h2 id="MDN_community_meetings">MDN community meetings</h2> - -<p>Community meetings occur every two weeks on Wednesdays, 10:00 US Pacific time (UTC-0800 October-March, UTC-0700 in March-October), in the <a href="irc://irc.mozilla.org/mdn" title="irc://irc.mozilla.org/devmo">#mdn</a> <a href="http://wiki.mozilla.org/IRC" title="http://wiki.mozilla.org/IRC">IRC</a> channel. See the <a href="https://wiki.mozilla.org/MDN/Community_meetings" title="https://wiki.mozilla.org/MDN/Community_meetings">MDN community meetings</a> wiki page for agendas and notes from past meetings.</p> - -<p>The <a class="external text" href="https://mail.mozilla.com/home/publiccalendar@mozilla.com/MDN_Events.html" rel="nofollow">MDN Events</a> calendar contains MDN community meetings, doc sprints, and other MDN-related events.</p> 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 deleted file mode 100644 index 09ede56d3c..0000000000 --- a/files/pt-br/orphaned/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Trabalhando em comunidade -slug: orphaned/MDN/Community/Working_in_community -translation_of: MDN/Community/Working_in_community -original_slug: MDN/Comunidade/Trabalhando_em_comunidade ---- -<div>{{MDNSidebar}}</div> - -<p>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.</p> - -<h2 id="Dicas_gerais_de_etiqueta">Dicas gerais de etiqueta</h2> - -<p>Aqui estão algumas dicas gerais de conduta quando trabalhando na comunidade Mozilla.</p> - -<ul> - <li>Seja educado! Mesmo em discordância, todos nós temos a mesma missão: melhorar a Web.</li> - <li>Peça, não exija. As pessoas estarão muito mais dispostas a ajudar de forma responsiva quando você educadamente pedir ajuda em vez de exigi-la. Ainda que o trabalho de documentação seja importante, e nossa comunidade de desenvolvimento saiba disso, o instinto humano tende a fazer com que as pessoas sejam abrasivas e difíceis de lidar se você não tratá-las com o devido respeito.</li> - <li>Equilibre sua necessidade de informação juntamente com a urgência da documentação e o tempo que os outros na sua discussão tem para dedicar a ajudá-lo. Não fique pedindo mais e mais detalhes, a ponto de deixar loucos os outros envolvidos na conversa, se realmente não forem necessários nesse momento.</li> - <li>Tenha em mente que seu pedido toma tempo valioso das pessoas com as quais você entrou em contato, então tenha certeza de fazer bom uso do tempo delas.</li> - <li>Considere diferentes culturas. Mozilla é uma multinacional e possui uma equipe multicultural, então quando contatar alguém cuja cultura é, ou pode ser, diferente da sua, seja claro e mantenha em mente isto enquanto se comunica.</li> - <li>Inicie uma nova conversa em vez de reutilizar uma conversa existente. Não insira suas questões dentro de uma conversa não relacionada ao assunto principal somente porque as pessoas nas quais você precisa falar estão prestando atenção nisto. Embora isso pareça ser conveniente para você, isso pode irritar as pessoas que você está tentando conversar, e ocasiona um resultado abaixo do ideal.</li> - <li>Evite a {{interwiki("wikipedia", "Lei da trivialidade")}}. Não deixe seu entusiasmo virar pedantice chata. Isso faz com que as conversas fiquem cansativas e percam o foco.</li> -</ul> - -<h2 id="Tenha_sensatez">Tenha sensatez</h2> - -<p>Sempre seja sensato e respeitoso quando se comunicar com os outros.</p> - -<h3 id="Gentilmente_aponte_os_erros">Gentilmente aponte os erros</h3> - -<p>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.</p> - -<p>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):</p> - -<blockquote> -<p>Oi, <u>MrBigglesworth</u>, eu tenho que notificar suas contribuições para a <u>documentação da </u> <u><em>Wormhole</em> API</u> e isto é fantástico ter sua ajuda! Eu particularmente gosto <u>do modo que você equilibra seu nível de detalhes com legibilidade</u>. Dito isto, contudo, você poderia fazer estes artigos sempre melhores e mais pertinentes se <u>adicionar as corretas tags para as páginas </u>enquanto você elabora.</p> - -<p><u>Veja o MDN guia de etiquetas (https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/guia/Como-marcar-as-paginas-corretamente) para detalhes.</u></p> - -<p>Obrigado novamente, e aguardo suas futuras contribuições!</p> -</blockquote> - -<h2 id="Compartilhe_conhecimento">Compartilhe conhecimento</h2> - -<p>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.</p> - -<h3 id="Canais_de_comunicação">Canais de comunicação</h3> - -<p>Há muitos caminhos que você pode engajar como membro da comunidade (como desenvolvedor ou como escritor), cada um tem algumas regras particulares de etiqueta.</p> - -<h4 id="Bugzilla">Bugzilla</h4> - -<p>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 <a href="https://bugzilla.mozilla.org/page.cgi?id=etiquette.html">etiqueta Bugzilla</a> em mente em todas às vezes!</p> - -<h4 id="E-mail">E-mail</h4> - -<p>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.</p> - -<div class="note"> -<p><strong>Nota:</strong> Como regra geral, <span id="result_box" lang="pt"><span>se alguém postou o endereço de e-mail pessoal em documentos sobre a tecnologia que você está documentando</span></span>, ou deu a você o endereço de e-mail pessoal, <span id="result_box" lang="pt"><span>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"</span></span>. <span id="result_box" lang="pt"><span>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.</span></span></p> -</div> - -<h3 id="Ferramenta_de_status_de_conteúdo">Ferramenta de status de conteúdo</h3> - -<p>Nós temos muitas ferramentas úteis que fornecem informações sobre o status do conteúdo da documentação.</p> - -<dl> - <dt><a href="/dashboards/revisions">Painel de Controle (<em>Dashboard</em> ) para revisão</a></dt> - <dd>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, <span id="result_box" lang="pt"><span>abrir rapidamente a página, ver um histórico completo ou até reverter as alterações (se você tiver esses privilégios)</span></span>.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Visão geral do status da documentação </a></dt> - <dd><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/Overview">Nossa visão geral do status da documentação</a> 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.</dd> - <dt><a href="/en-US/docs/MDN/Plans">Documentação dos planos de projetos</a></dt> - <dd>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.</dd> - <dt><a href="https://trello.com/b/HAhl54zz/status">MDN Trello board</a></dt> - <dd>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 <a href="/en-US/docs/MDN/Contribute/Community/Trello">this page</a>.</dd> -</dl> - -<h3 id="A_comunidade_de_desenvolvimento">A comunidade de desenvolvimento</h3> - -<p>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!</p> - -<p>Em adição, você representa a comunidade de escrita MDN.</p> - -<p>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.</p> - -<p>Em uma nota de relato, um grande caminho para encontrar a pessoa certa para falar olhe nas <a href="https://wiki.mozilla.org/Modules">listas dos responsáveis dos módulos.</a></p> - -<h2 id="A_comunidade_de_escrita">A comunidade de escrita</h2> - -<p>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.</p> - -<p>Veja o artigo <a href="/en-US/docs/MDN/Community">una a comunidade</a> para mais informações sobre a comunidade MDN.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/pt-BR/docs/Project:MDN/Contributing" title="/en-US/docs/Project:MDN/Contributing">Contribuindo para o MDN</a></li> - <li><a href="/pt-BR/docs/Project:MDN/Contributing/Join_the_community" title="/pt-BR/docs/Project:MDN/Contributing/Join_the_community">Comunidade MDN</a></li> - <li><a href="http://matt.might.net/articles/how-to-email/" title="http://matt.might.net/articles/how-to-email/">Como enviar e responder um e-mail</a></li> - <li><a href="http://blog.gerv.net/2012/10/how-to-be-a-mozillia/">Como ser um<em> Mozillian</em></a></li> -</ul> 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 deleted file mode 100644 index 10410e5a37..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Como criar uma conta na MDN -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - Conta - - Guia(2) - - Início(2) - - Novato - - como fazer -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/guia/Create_an_MDN_account ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">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.</span></p> - -<div class="standardSidebar" style="width: 280px;"><strong>Por que o MDN precisa do meu endereço de email?</strong><br> -<br> -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.<br> -<br> -Além disso, você pode opcionalmente inscrever-se para receber notificações (como <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">quando uma página específica é modificada</a>) 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).<br> -<br> -Seu endereço de email nunca é mostrado no MDN e será usado apenas de acordo com nossa <a href="https://www.mozilla.org/privacy/websites/">política de privacidade</a>.</div> - -<p>Assim que você tiver decidido que quer contribuir para o MDN, aqui está tudo que você deve fazer para configurar o seu perfil:</p> - -<ol> - <li>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.</li> - <li>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.</li> - <li>Siga os passos do serviço para conectar sua conta ao MDN.</li> - <li>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<strong>. Não use o seu endereço de email como seu nome de usuário.</strong></li> - <li>Clique no botão "Criar meu perfil MDN".</li> - <li>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ê.</li> -</ol> - -<p>É isso! Você adquiriu uma conta MDN, e você pode imediatamente editar ou marcar páginas e postar demonstrações!</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Observação:</strong> 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!</p> -</div> - -<p> </p> 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 deleted file mode 100644 index 2651c5f134..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Como fazer uma revisão técnica -slug: orphaned/MDN/Contribute/Howto/Do_a_technical_review -tags: - - Documentação - - Guía - - MDN Meta - - Revisão - - como fazer -translation_of: MDN/Contribute/Howto/Do_a_technical_review -original_slug: MDN/Contribute/guia/Do_a_technical_review ---- -<div>{{MDNSidebar}}</div><p class="summary"><span id="result_box" lang="pt"><span><strong>Uma Revisão técnica</strong> consiste em revisar a precisão técnica e a integridade de um artigo e corrigi-lo, se necessário.</span></span> 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. <span id="result_box" lang="pt"><span>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.</span></span></p> - -<p><span id="result_box" lang="pt"><span>Este artigo descreve como realizar uma revisão técnica, ajudando assim a garantir que o conteúdo do MDN seja exato.</span></span></p> - -<dl> - <dt>Como é essa tarefa?</dt> - <dd>Revisar e corrigir artigos com precisão técnica e completude.</dd> - <dt>Onde deve ser feita?</dt> - <dd>Em artigos específicos aonde estão marcados como uma <a href="/en-US/docs/needs-review/technical">revisão técnica</a>.</dd> - <dt>O que você precisa saber para fazer a tarefa?</dt> - <dd> - <ul> - <li>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.</li> - <li>Como editar um artigo wiki no MDN</li> - </ul> - </dd> - <dt>Quais são os passos para fazê-lo?</dt> - <dd> - <ol> - <li>Escolha um artigo para revisar: - <ol> - <li>Vá até a lista de páginas que necessitam de <a href="/en-US/docs/needs-review/technical">revisão técnica</a>. Lá estará listado todas as páginas as quais uma revisão técnica foi solicitada.</li> - <li>Escolha uma página cujo tópico você conheça muito.</li> - <li>Clique no link do artigo para carregar a página.</li> - </ol> - </li> - <li>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ê.</li> - <li>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:<br> - <img alt="" src="https://screenshots.firefoxusercontent.com/images/1c23894f-9e24-41f5-b9cc-ba040829e99a.png" style="height: 173px; width: 295px;"></li> - <li>Desmarque a opção <strong>Técnico</strong> e clique em salvar.</li> - <li>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: - <ol> - <li>Para editar a página clique no botão editar no canto superior da página; desse modo você estará acessando o <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Editor">editor do MDN</a>.</li> - <li>Corrija qualquer informação técnica que não esteja correta e/ou adicione qualquer informação importante que esteja faltando.</li> - <li>Digite um <strong>Comentário da revisão</strong> 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.</li> - <li>Clique no botão <strong>PUBLICAR.</strong></li> - </ol> - </li> - </ol> - Parabéns! Você terminou sua primeira revisão técnica. Obrigado pela ajuda!</dd> -</dl> 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 deleted file mode 100644 index d1e9b29246..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Como fazer uma revisão editorial -slug: orphaned/MDN/Contribute/Howto/Do_an_editorial_review -tags: - - Documentação - - Guia(2) - - MDN Meta - - Revisão - - como fazer -translation_of: MDN/Contribute/Howto/Do_an_editorial_review -original_slug: MDN/Contribute/guia/Do_an_editorial_review ---- -<div>{{MDNSidebar}}</div> - -<p class="summary"><strong>A revisão editorial consiste em corrigir erros gramaticais e no modo de se expressar em um artigo</strong>. 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.</p> - -<p><span class="seoSummary">Esse artigo descreve como fazer uma revisão editorial, assim ajudando para assegurar que o conteúdo do MDN é preciso.</span></p> - -<dl> - <dd><strong>Qual é a tarefa?</strong></dd> - <dd>Edição e revisão de artigos que estiverem marcados como "<em>precisando de revisão editorial</em>."</dd> - <dd><strong>Onde é que isso precisa ser feito?</strong></dd> - <dd>Em artigos específicos que são marcados como <em>"precisando de revisão editorial</em>."</dd> - <dd><strong>O que é preciso conhecer para fazer essa tarefa?</strong></dd> - <dt><span id="result_box" lang="pt"><span>Você precisa ter</span> <span>um bom dominio do idioma Ingles</span> e <span>habilidades</span> <span>de ortografia e gramática</span><span>.</span> <span>Uma revisão editorial</span> <span>consiste em garantir</span> <span>que a gramática</span><span>, ortografia e</span> <span>redação</span> <span>estejão corretas e</span> <span>fazendo sentido; E</span><span> que o</span> <span>guia de</span> <span>estilo de escrita</span> <span>MDN seja seguido</span><span>.</span></span></dt> - <dd><strong>Quais são os passos a seguir?</strong></dd> - <dd> - <ol> - <li>Escolha um artigo para revisão: - <ol> - <li>Vá para a lista de <a href="/en-US/docs/needs-review/editorial">artigos que precisam de revisão editorial</a>. Essa lista contém todas as páginas que precisam de revisão editorial.</li> - <li>Escolha uma página que tenha título em português que não comece com <code>Template:(Template: Páginas que contém macro-códigos MDN)</code></li> - <li>Clique no link do artigo para carregar a página.</li> - </ol> - </li> - <li>Quando a página estiver carregada, clique no botão <strong>Editar </strong>próximo ao topo da página; Isso colocará você no <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">editor MDN</a>. Não hesite em trocar para uma página diferente se você não entendeu bem a página atual.</li> - <li>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:</li> - </ol> - - <p> Selecione a caixa <strong>Editorial</strong> , e clique em <strong>Review Completed</strong>.</p> - - <p>4. Se você precisa consertar erros que precisam correção:</p> - - <ol> - <li>Clique no botão <strong>Editar </strong>próximo ao topo da página; Isso colocará você no <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide">editor MDN</a>.</li> - <li>Corrija todas palavras e a gramática ou erros de uso.</li> - <li>Digite um <strong>Comentário de Revisão </strong>na parte de baixo do artigo, algo como 'Editorial revisado, foram corrigidos alguns erros de gramática e ortografia'.</li> - <li><em>Tire a seleção</em> da caixa <strong>Editorial</strong> abaixo do <strong>Revisão necessária?</strong></li> - <li>Clique no botão <strong>Salvar alterações</strong>.</li> - </ol> - - <div class="note"> - <p>Por razões de perfomance, sua edição pode não aparecer logo na página.</p> - </div> - </dd> -</dl> 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 deleted file mode 100644 index 0019d0a7e7..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Como definir o resumo de uma página -slug: orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page -tags: - - Como - - Guia(2) - - MDN Meta -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page -original_slug: MDN/Contribute/guia/Set_the_summary_for_a_page ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">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.</span> 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.</p> - -<p>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.</p> - -<table class="full-width-table"> - <tbody> - <tr> - <td><strong>Qual é a tarefa?</strong></td> - <td><span>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.</span></td> - </tr> - <tr> - <td><strong>Onde isto deve ser feito?</strong></td> - <td><span>Em páginas que não possuem um resumo ou têm um resumo menos do que ótimo.</span></td> - </tr> - <tr> - <td><strong>O que você deve saber para fazer a tarefa?</strong></td> - <td>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.</td> - </tr> - <tr> - <td><strong>Quais são os passos a fazer?</strong></td> - <td> - <ol> - <li>Escolha uma página para fazer o resumo: - <ol> - <li>Na página <a href="/en-US/docs/MDN/Doc_status">MDN documentation status</a>, clique sob o link <strong>Sections</strong> para um tema que você conhece um pouco sobre (por exemplo, HTML):<br> - <img alt="" src="https://mdn.mozillademos.org/files/8681/sections.png" style="height: 130px; width: 504px;"></li> - <li>Na página de status da documentação do tópico, clique no cabeçalho de <strong>páginas</strong> na tabela de </li> - <li><strong>Resumo</strong>. Isso leva você a um índice de todas as páginas em que seção do tópico; Ele mostra a página </li> - <li>de links na coluna da esquerda e as tags e resumos na coluna à direita:</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/8675/pages.png" style="height: 82px; width: 361px;"></li> - <li>Escolha uma página que está faltando um resumo, ou que tem um resumo fraco:<br> - <img alt="" src="https://mdn.mozillademos.org/files/8677/summary.png" style="height: 38px; width: 296px;"></li> - <li>Clique no link para ir para essa página.</li> - </ol> - </li> - <li>Clique em <strong>Editar</strong> para abrir a página no editor MDN.</li> - <li>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.</li> - <li>Selecionar o texto a ser usado como um resumo.</li> - <li>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 = "<code>seoSummary</code> " em torno do texto selecionado.)<br> - <img alt="" src="https://mdn.mozillademos.org/files/8679/styles.png" style="height: 231px; width: 403px;"></li> - <li>Salve <span id="ouHighlight__5_8TO7_10">suas</span> <span id="ouHighlight__10_16TO12_21">alterações</span> <span id="ouHighlight__18_21TO23_25">com</span> um <span id="ouHighlight__23_23TO37_39">comentário</span><span id="noHighlight_0.6311055598476647"> de revisão em </span><span id="ouHighlight__42_45TO52_55">como</span> <span id="ouHighlight__47_50TO57_64">"Definir</span> <span id="ouHighlight__52_54TO66_66">a</span> <span id="ouHighlight__56_59TO68_73">página</span> <span id="ouHighlight__61_68TO75_80">Resumo</span><span id="ouHighlight__69_69TO81_82">."</span></li> - </ol> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p> </p> - -<p> </p> 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 deleted file mode 100644 index 66db20d0e5..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Como marcar páginas de JavaScript -slug: orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages -tags: - - Como - - Guia(2) - - JavaScript - - MDN Meta -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages -original_slug: MDN/Contribute/guia/Tag_JavaScript_pages ---- -<div>{{MDNSidebar}}</div><p class="summary"><strong>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.</strong></p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <td><strong>E onde isso precisa ser feito?</strong></td> - <td>Dentro de páginas especificas relacionadas com <a href="/en-US/docs/Web/JavaScript/Doc_status#No_tags">Javascript e sem marcação.</a></td> - </tr> - <tr> - <td><strong>O que é preciso saber para fazer a tarefa ?</strong></td> - <td> - <ul> - <li>O basico de javascript como saber o que é um metodo ou uma propriedade.</li> - </ul> - </td> - </tr> - <tr> - <td><strong>Quais são os passos para fazê-lo?</strong></td> - <td> - <ol> - <li>Escolha uma das paginas na lista 'linkada' acima.</li> - <li>Click no link do artigo e carregue a página.</li> - <li>Uma vez que a página foi carregada, clique no botão <strong>Editar</strong> no topo, isso deve lhe posicionar no editor MDN.</li> - <li>Pelo menos uma tag Javascript deve ser adicionada. Aqui estão algumas outras tags possíveis para adicionar: - <table class="standard-table"> - <thead> - <tr> - <th scope="col">Tag</th> - <th scope="col">A página que está em uso.</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Method</code></td> - <td>método</td> - </tr> - <tr> - <td><code>Property</code></td> - <td>Propriedade</td> - </tr> - <tr> - <td><code>prototype</code></td> - <td>protótipo</td> - </tr> - <tr> - <td>Object type name</td> - <td>método de um objeto; por exemplo<code> </code><code>String.fromCharCode</code> deve ser a sequência da tag <code>String</code></td> - </tr> - <tr> - <td><code>ECMAScript6 </code>and <code>Experimental</code></td> - <td>recursos adicionados na nova versão do ECMAScript</td> - </tr> - <tr> - <td><code>Deprecated</code></td> - <td>recursos obsoletos (cujo o uso é desencorajado, mas ainda suportada)</td> - </tr> - <tr> - <td><code>Obsolete</code></td> - <td>recursos obsoletos (que não são mais suportados em browsers modernos)</td> - </tr> - <tr> - <td>others</td> - <td>ver as <a href="/en-US/docs/Project:MDN/Contributing/Tagging_standards">normas de tagueamento MDN </a>para aplicar outras tags possíveis.</td> - </tr> - </tbody> - </table> - </li> - <li>Salve com um comentário.</li> - <li>E está pronto!</li> - </ol> - </td> - </tr> - </tbody> -</table> 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 deleted file mode 100644 index 6a8d7e9bb0..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Como escrever um artigo para ajudar as pessoas aprender sobre a Web -slug: orphaned/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -tags: - - Guía - - MDN Meta - - aprendizado - - como fazer -translation_of: MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web -original_slug: MDN/Contribute/guia/Escreva_um_artigo_para_ajudar_aprender_sobre_a_Web ---- -<div>{{MDNSidebar}}</div> - -<p>MDN's <strong><a href="/en-US/docs/Learn">Área de aprendizado</a></strong> é 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.</p> - -<p><span class="seoSummary">Este artigo explica como escrever para a <a href="/en-US/docs/Learn">Área de aprendizado</a>.</span></p> - -<h2 id="Como_escrever_um_artigo_na_Área_de_aprendizado">Como escrever um artigo na Área de aprendizado</h2> - -<p>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 <a href="https://trello.com/b/LDggrYSV">nosso quadro de time Trello</a>!</p> - -<p></p><div class="align-center"><a class="button ignore-external mega positive" href="/en-US/docs/new?parent=111819">Escreva um artigo de aprendizado<div></div></a></div><p></p> - -<p>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 <a href="/en-US/docs/Learn#Contact_us">Contate-nos</a>.</p> - -<h3 id="Passo_1_Escreva_uma_linha-dupla">Passo 1: Escreva uma linha-dupla</h3> - -<p>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:</p> - -<div class="summary"> -<p>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.</p> -</div> - -<p>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.</p> - -<p>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!</p> - -<h3 id="Passo_2_Adicionar_uma_top_box">Passo 2: Adicionar uma top box</h3> - -<p>Então adicione uma<strong> top box</strong> para ajudar os leitores com dicas sobre onde eles estão no processo de aprendizagem. Aqui é um exemplo de top box do <a href="/en-US/docs/Learn/Understanding_URLs">"Entendendo URLs e suas estruturas"</a>. Você pode usar este artigo como um modelo quando estiver escrevendo o seu próprio.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Pré-requisitos:</th> - <td>Você primeiro precisa saber <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/How_the_Internet_works">Como a Internet funciona</a>, <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/What_is_a_Web_server">O que é um servidor Web</a>, and <a class="new" href="https://developer.mozilla.org/en-US/docs/Learn/Understanding_links_on_the_web">Os conceitos por trás dos links na web</a>.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Você vai aprender o que é uma URL e como ela funciona na Web.</td> - </tr> - </tbody> -</table> - -<dl> - <dt>Pré-requisitos</dt> - <dd>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).</dd> - <dt>Objetivos</dt> - <dd>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.</dd> - <dt> </dt> -</dl> - -<div class="note"> -<p><strong>Nota:</strong> Para criar esta tabela você pode copiar e colar a tabela do exemplo acima, ou usar a ferramenta do editor do MDN <a href="/en-US/docs/MDN/Contribute/Editor/Tables">Tabela</a>. Se você escolher usar a ferramenta Tabela, você precisa especificamente adicionar uma classe CSS <code>learn-box</code> adicional a classe padrão <code>standard-table</code>. Para fazer isto, quando você criar ou editar as propriedades da tabela, vá no painel "Avançado" e no campo <strong>Classes</strong> mudar para "<code>standard-table learn-box</code>".</p> -</div> - -<h3 id="Passo_3_Escreva_uma_descrição_completa">Passo 3: Escreva uma descrição completa</h3> - -<p>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!</p> - -<h3 id="Passo_4_Vá_fundo">Passo 4: Vá fundo</h3> - -<p>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 <a href="/en-US/docs/MDN/Contribute/Style_guide">guia de estilo</a>). 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ê!</p> - -<p>Como um guia, aqui são algumas dicas de escrita para iniciantes:</p> - -<ul> - <li>Foque somente em um tema. Se você sentir que precisa cobrir outros temas, isto significa que você está deixando faltar um pré-requisito para o artigo, ou você precisa quebrar seu artigo em mais de um.</li> - <li>Use uma linguagem simples. Evite termos técnicos quando puder, ou pelo menos defina eles e <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary#How_to_use_the_.7B.7BGlossary.7D.7D_macro">link para os termos do glossário</a> onde for possível.</li> - <li>Inclua exemplos diretos para fazer o conceito teórico ser compreendido mais facilmente.Muitas pessoas aprendem melhor com exemplos. Ao contrário de textos acadêmicos, nós queremos que o texto seja legível para os iniciantes seguir.</li> - <li>Esquemas visuais podem fazer o conteúdo mais fácil de digerir e carregam informação extra, então fique à vontade para usar imagens, diagramas, vídeos e tabelas. Se você está usando diagramas ou cartas para incluir texto, nós o encorajamos a usar {{Glossary("SVG")}} então nosso time de tradução pode localizar o texto.</li> -</ul> - -<p>Dê uma olhada nas primeiras seções do nosso artigo <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funções - blocos reutilizáveis de código</a> para uma boa seção descritiva.</p> - -<h3 id="Passo_5_Forneça_material_de_aprendizado_ativo">Passo 5: Forneça material de "aprendizado ativo"</h3> - -<p>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.</p> - -<p>Você pode escolher incluir os exemplos diretamente nas páginas como <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">exemplos ao vivo</a>, ou <a href="/en-US/docs/MDN/Contribute/Editor/Links">fazer links para eles</a> 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 <a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Criar um exercício interativo para ajudar o Aprendendo a Web</a>.</p> - -<p>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.</p> - -<p>Dê uma olhada no <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Simple_selectors#Active_learning_Selecting_different_elements">Aprendizado ativo: selecionando diferentes elementos</a> para um exemplo de exercício de aprendizado interativo, ou <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Active_learning_Playing_with_scope">Aprendizado ativo: Jogando com escopo</a> 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.</p> - -<h3 id="Passo_6_Tenha_o_artigo_revisto_e_colocado_no_menu_de_navegação_da_Área_de_aprendizado">Passo 6: Tenha o artigo revisto e colocado no menu de navegação da Área de aprendizado</h3> - -<p>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 <a href="/en-US/docs/Learn#Contact_us">Contato</a>, é a melhor maneira de manter contato.</p> - -<p>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 <a href="/en-US/docs/Template:LearnSidebar">LearnSidebar macro</a>, o qual você precisa de privilégios especiais para editar, então, novamente, converse com alguém do nosso time sobre adicionar isto.</p> - -<p>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</p> - -<ul> -</ul> - -<h2 id="Artigos_sugeridos">Artigos sugeridos</h2> - -<p>Então você quer contribuir, mas você não tem certeza sobre o que escrever?</p> - -<p>O time da Área de aprendizado mantém <a href="https://trello.com/b/LDggrYSV">um quadro Trello com ideias de artigos</a> para escrever. Sinta-se livre para pegar um e começar a trabalhar!</p> - -<p> </p> - -<p> </p> 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 deleted file mode 100644 index d87f3eacad..0000000000 --- a/files/pt-br/orphaned/mdn/contribute/processes/cross-team_collaboration_tactics/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Táticas de colaboração intra equipe para documentação -slug: orphaned/MDN/Contribute/Processes/Cross-team_collaboration_tactics -tags: - - Documentação - - Guia(2) - - Guía - - MDN - - Projeto MDC -translation_of: MDN/Contribute/Processes/Cross-team_collaboration_tactics -original_slug: MDN/Contribute/Collaboration_tactics ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">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.</span></p> - -<div class="note"> -<p><strong>Nota:</strong> 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!</p> -</div> - -<h2 id="Integrando-se">Integrando-se</h2> - -<p>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.</p> - -<p>A melhor maneira de notificar a equipe MDN sobre um novo projeto o qual precisamos ficar cientes é <a href="https://bugzilla.mozilla.org/form.doc">preenchendo uma requisição de documentação de defeito</a>. 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.</p> - -<h2 id="Compartilhando_informação">Compartilhando informação</h2> - -<p>Existem diversas maneiras úteis e diferentes de compartilhar informação. Apresentamos algumas sugestões a seguir.</p> - -<h3 id="Defeitos">Defeitos</h3> - -<p>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 <a href="/en-US/docs/Developer_Guide/Getting_documentation_updated">Atualizando documentação</a> para mais informações.</p> - -<h3 id="Reuniões">Reuniões</h3> - -<p>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.</p> - -<p>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.</p> - -<p>Estas reuniões geralmente são curtas e possuem uma agenda similar a esta:</p> - -<ol> - <li>Atualizações sobre o andamento das atividades de documentação.</li> - <li>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.</li> - <li>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.</li> -</ol> - -<p><a href="https://wiki.mozilla.org/MDN/WebAPI_documentation_meetings">Reuniões de documentação de APIs Web</a> 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.</p> - -<h3 id="Semanas_de_trabalho">Semanas de trabalho</h3> - -<p>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:</p> - -<ul> - <li>Melhora na comunicação pois a equipe de documentação sabe das mudanças em primeira mão.</li> - <li>Melhora na convivência entre os membros da equipe de desenvolvimento e documentação pois cada uma se conhecerá melhor.</li> - <li>Os membros da equipe de documentação encontram as pessoas corretas com quem falar de forma mais cômoda e acessível.</li> - <li>Oferece uma oportunidade especial para responder perguntas ou solucionar problemas em uma conversa um-para-um.</li> -</ul> - -<p>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 <a href="mailto:eshepherd@mozilla.com?subject=Writer%20for%20work%20week">enviar um e-mail para o líder da equipe de documentação</a>, 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> - -<h3 id="Páginas_de_estado_de_documentação">Páginas de estado de documentação</h3> - -<p>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.</p> diff --git a/files/pt-br/orphaned/mdn/dashboards/index.html b/files/pt-br/orphaned/mdn/dashboards/index.html deleted file mode 100644 index ff496d8bbf..0000000000 --- a/files/pt-br/orphaned/mdn/dashboards/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Painéis -slug: orphaned/MDN/Dashboards -tags: - - MDN Meta - - Rascunho - - Visão Geral - - painéis -translation_of: MDN/Dashboards -original_slug: MDN/Paineis ---- -<div>{{MDNSidebar}}{{Draft}}</div> - -<p class="summary">Aqui estão alguns painéis que exibem algumas métricas.</p> - -<p><a href="/en-US/docs/MDN/Dashboards/Editors">Saiba mais sobre nossos Editores</a></p> - -<p>{{SubpagesWithSummaries}}</p> diff --git a/files/pt-br/orphaned/mdn/editor/basics/index.html b/files/pt-br/orphaned/mdn/editor/basics/index.html deleted file mode 100644 index bc1805b308..0000000000 --- a/files/pt-br/orphaned/mdn/editor/basics/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Elementos de Interface do Editor -slug: orphaned/MDN/Editor/Basics -translation_of: MDN/Editor/Basics -original_slug: MDN/Editor/Basics ---- -<div>{{MDNSidebar}}</div> - -<p><span class="seoSummary">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.</span> 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.</p> - -<div class="note"> -<p>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.</p> -</div> - -<p><img alt="Screenshot of the editor UI (August 2017) with each section labeled" src="https://mdn.mozillademos.org/files/15261/edit-page-with-labels.png" style="border-style: solid; border-width: 2px; height: 723px; width: 808px;"></p> - -<p>A interface do editor contém as seguintes seções, como mostrado acima. Clique abaixo para ler sobre cada seção do editor respectivamente.</p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Page_info">Página de informações</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Page_controls">Comandos</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Toolbar">Barra de ferramentas</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics#Edit_box">Caixa de edição</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Tags">Tags</a></li> - <li><a href="#Revision_comment">Comentário de revisão</a></li> - <li><a href="#Review_requests">Solicitação de revisão</a></li> - <li><a href="/en-US/docs/MDN/Contribute/Editor/Basics/Attachments">Anexos</a></li> -</ul> - -<h2 id="Caixa_de_ediçao">Caixa de ediçao</h2> - -<p>A caixa de edição é, evidementente, onde você irá realmente produzir o seu texto.</p> - -<p>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 <kbd>Shift</kbd> ou a tecla <kbd>Control</kbd> (tecla <kbd>Command</kbd> no Mac OS X) enquanto estiver clicando.</p> - -<p>Quando estiver trabalhando na caixa de edição, você pode usar essas <a href="https://wiki.developer.mozilla.org/en-US/docs/MDN/Contribute/Editor/Keyboard_shortcuts">teclas de atalho</a>.</p> - -<h2 id="Comentários_de_revisão">Comentários de revisão</h2> - -<p>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 <a href="/en-US/dashboards/revisions">Painel de controle</a>. 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 <strong>Publicar</strong> na parte superior e inferior da página.</p> - -<p>Existem algumas razões pelas quais isto é útil:</p> - -<ul> - <li>Se o motivo a sua alteração não for óbvio, seu comentário pode explicar o seu raciocínio para os outros.</li> - <li>Se sua alteração for tecnicamente complexa, pode explicar aos editores a lógica por trás dela; isto pode incluir um número de <em>bug</em>, por exemplo, que os editores podem consultar para obter mais informações.</li> - <li>Se a sua alteração inclui deletar uma grande parte de um conteúdo, você pode justificar a sua exclusão (por exemplo, "Eu movi este conteúdo para o artigo X").</li> -</ul> - -<h2 id="Review_requests">Review requests</h2> - -<p>The MDN community uses <strong>reviews</strong> 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 <a href="/en-US/docs/MDN/Contribute/Howto/Do_a_technical_review">technical reviews</a> and <a href="/en-US/docs/MDN/Contribute/Howto/Do_an_editorial_review">editorial review</a> in the <a href="/en-US/docs/MDN/Contribute/Howto">How to</a> guides.</p> - -<p>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.</p> - -<p>While selecting a review checkbox adds the article to the lists of those <a href="/en-US/docs/needs-review/technical">needing technical review</a> or <a href="/en-US/docs/needs-review/editorial">needing editorial review</a>, it does not guarantee that anyone will immediately review the article. For technical reviews, it's a good idea to directly contact a <a href="/en-US/docs/MDN/Community/Roles/Subject-matter_experts">subject-matter expert</a> in the relevant technical area. For editorial reviews, you can post in the <a href="https://discourse.mozilla.org/c/mdn">MDN discussion forum</a> to request that someone review your changes.</p> - -<p>Be sure to click one of the <strong>Publish</strong> buttons after making your selections, to commit your review request.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://docs.ckeditor.com/">CKEditor User's Guide</a></li> -</ul> - -<h6 id="EditorGuideQuicklinks">{{EditorGuideQuicklinks}}</h6> diff --git a/files/pt-br/orphaned/mdn/editor/index.html b/files/pt-br/orphaned/mdn/editor/index.html deleted file mode 100644 index dc516147af..0000000000 --- a/files/pt-br/orphaned/mdn/editor/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Guia do editor MDN -slug: orphaned/MDN/Editor -translation_of: MDN/Editor -original_slug: MDN/Editor ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">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 <a href="https://www.mozilla.org/pt-BR/about/legal/terms/mozilla/">Mozilla Terms</a> antes de editar ou criar novas páginas. </span></p> - -<p>O <a href="/pt-BR/docs/MDN/Contribute/Content/Style_guide" title="/pt-BR/docs/Project:MDN/Style_guide">Guia de estilo MDN</a> oferece informação sobre como formatar e estilizar o conteúdo em si, incluindo as nossas regras de gramática e ortografia preferenciais.</p> -<p>{{LandingPageListSubpages}}</p> -<p>{{EditorGuideQuicklinks}}</p> diff --git a/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html b/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html deleted file mode 100644 index fed90e8565..0000000000 --- a/files/pt-br/orphaned/mdn/tools/page_regeneration/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Page regeneration -slug: orphaned/MDN/Tools/Page_regeneration -tags: - - Ferramentas - - Guia(2) - - MDN Meta - - Page-level -translation_of: MDN/Tools/Page_regeneration -original_slug: MDN/Tools/Page_regeneration ---- -<div>{{MDNSidebar}}</div><p>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.</p> - -<p>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.</p> - -<p>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")}}).</p> - -<p>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.</p> - -<p>Para habilitar a regeneração automática de páginas:</p> - -<ol> - <li>Clique no botão <strong>Editar</strong> na página para entrar no modo de edição.</li> - <li>Abaixo do título da página, clique em <strong>Editar o título e propriedades</strong> localizado perto do título da página. Os metadados da página aparecerão.</li> - <li>Selecione um valor para <strong>Tempo máximo de regeneração</strong>. 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.</li> - <li>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".</li> -</ol> - -<p>Essa página vai ser regerada automaticamente no tempo que você especificou.</p> - -<blockquote> -<p>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.</p> -</blockquote> 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 deleted file mode 100644 index 47eff12a4c..0000000000 --- a/files/pt-br/orphaned/mozilla/add-ons/webextensions/temporary_installation_in_firefox/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Empacotando e Instalando -slug: orphaned/Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of: Mozilla/Add-ons/WebExtensions/Temporary_Installation_in_Firefox -translation_of_original: Mozilla/Add-ons/WebExtensions/Packaging_and_installation -original_slug: Mozilla/Add-ons/WebExtensions/Empacotando_e_instalando ---- -<h2 id="Packaging_your_extension">Packaging your extension</h2> - -<div class="note"> -<p>Nós estamos trabalhando em uma GUI para empacotar e carregar extensões. Veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1185460">Bug 1185460</a> para mais informações. Enquanto isso, siga as etapas abaixo.</p> -</div> - -<p>Firefox extensões são empacotados como arquivos XPI, que nada mais são arquivos ZIP mas com extensão ".xpi".</p> - -<p>Uma dica para empacotar o arquivo você precisa "zipar" todos os arquivos que está na root do seu diretório.</p> - -<h3 id="Windows">Windows</h3> - -<ol> - <li>Abra a pasta com seus arquivos da extensão.</li> - <li>Selecione todos os arquivos.</li> - <li>Clique com o direito e escolha Enviar para → Pasta Compactada.</li> - <li>Renomeie o arquivo de "something.zip" para "something.xpi".</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11949/install-windows.png" style="display: block; height: 576px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<h3 id="Mac_OS_X">Mac OS X</h3> - -<ol> - <li>Abra a pasta com seus arquivos da extensão.</li> - <li>Selecione todos os arquivos.</li> - <li>Clique com o direito e escolha Compress <em>n</em> Items.</li> - <li>Renomeie o arquivo de<code> Archive.zip</code> para <code>something.xpi</code>.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11951/install-osx.png" style="display: block; height: 449px; margin-left: auto; margin-right: auto; width: 800px;"></p> - -<h3 id="Linux_Mac_OS_X_Terminal">Linux / Mac OS X Terminal</h3> - -<ol> - <li><code>cd path/to/my-extension/</code></li> - <li><code>zip -r ../my-extension.xpi *</code></li> -</ol> - -<h2 id="Installing_your_extension">Installing your extension</h2> - -<ol> - <li>Digite no caminho de URL <code>about:addons</code></li> - <li>Clique e araste o arquivo XPI para dentro da página, ou abra o menu de ferramentas e escolha "Install Add-On From File..."</li> - <li>Clique instalar no dialog que irá aparecer</li> -</ol> - -<h2 id="Instalando_suas_extensões_no_Firefox_OS">Instalando suas extensões no Firefox OS</h2> - -<p>You can install your extension from <a href="/en-US/docs/Tools/WebIDE">WebIDE</a> running on a Desktop connected via USB or Wifi. Open "path/to/my-extension/" as a Packaged App in WebIDE.</p> - -<p>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.</p> - -<p>The extension will first have to be enabled in Settings->Add-ons on the Firefox OS device.</p> - -<h2 id="Soluções_de_problemas">Soluções de problemas</h2> - -<p>There are a few common problems that you might run into:</p> - -<h3 id="Este_add-on_não_poderá_ser_instalado_porque_não_pode_ser_verificado.">"Este add-on não poderá ser instalado porque não pode ser verificado."</h3> - -<ul> - <li>Make sure you're using <a href="https://nightly.mozilla.org/">Nightly</a> and that <code>xpinstall.signatures.required</code> is <code>false</code> in <code>about:config</code>.</li> - <li>Learn more about <a href="/en-US/docs/Mozilla/Add-ons/Distribution">add-on signing and distribution</a>.</li> -</ul> - -<h3 id="Este_add-on_não_pode_ser_instalado_porque_pode_está_corrompido.">"Este add-on não pode ser instalado porque pode está corrompido."</h3> - -<ul> - <li>Make sure you zipped your add-ons files directly, <em>not</em> the folder <em>containing</em> your add-ons files. Your manifest.json must be at the root of the zip file.</li> - <li>Make sure you are using a <a href="https://nightly.mozilla.org/">Nightly</a> build of Firefox.</li> -</ul> - -<h3 id="Nada_aconteceu">Nada aconteceu</h3> - -<ul> - <li>Make sure your file name actually ends in <code>.xpi</code>, since some operating systems <em>really</em> like to hide file extensions. - - <ul> - <li>On Windows, check with View → Show / Hide: File Name Extensions.</li> - <li>On Mac OS X, check with File → Get Info → Name and Extension.</li> - </ul> - </li> - <li>It's possible you misclicked and dismissed the installation prompt. Look for a puzzle piece icon next to the Back button in Nightly. Click that to bring the popup back.</li> -</ul> - -<h3 id="Observe_o_console">Observe o console</h3> - -<p>Some additional error information relating to how your extension was extracted and loaded might be available in the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</p> 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 deleted file mode 100644 index 797450921e..0000000000 --- a/files/pt-br/orphaned/tools/add-ons/dom_inspector/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: DOM Inspector (Em Pt-Br) -slug: orphaned/Tools/Add-ons/DOM_Inspector -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 -original_slug: Tools/Add-ons/DOM_Inspector_Pt-Br ---- -<div>{{ToolsSidebar}}</div><p>O <strong>DOM Inspector</strong> (<span class="highlighted" id="ouHighlight__0_3TO0_5">também</span><span id="noHighlight_0.8210939667615293"> </span><span id="ouHighlight__5_9TO7_15">conhecido</span><span id="noHighlight_0.10419950422281188"> </span><span id="ouHighlight__11_12TO17_20">como</span> <strong>DOMi</strong>) é uma ferramenta de desennvolvimento usada para inspecionar, browse, e editar o DOM (<a href="/en/DOM" title="en/DOM">Document Object Model</a>) de documentos - usando páginas da web ou windows <a href="/en/XUL" title="en/XUL">XUL</a> . <span id="ouHighlight__0_2TO0_0">A</span><span id="noHighlight_0.5958907524347828"> </span><span id="ouHighlight__8_16TO2_11">hierarquia</span><span id="noHighlight_0.7166773220412167"> do </span><span id="ouHighlight__4_6TO16_18">DOM</span><span id="noHighlight_0.30348121513700943"> </span><span id="ouHighlight__18_20TO20_23">pode</span><span id="noHighlight_0.9707276454337468"> </span><span id="ouHighlight__22_23TO25_27">ser</span><span id="noHighlight_0.6536102141047954"> </span><span class="highlighted" id="ouHighlight__25_33TO29_36">navegada</span> usando dois paíneis (two-paned) <span class="highlighted" id="ouHighlight__0_5TO0_5">janela</span><span id="noHighlight_0.5312195703712447"> </span><span id="ouHighlight__7_10TO7_9">que</span><span id="noHighlight_0.9994998737946401"> </span><span id="ouHighlight__12_17TO11_17">permite</span><span id="noHighlight_0.7270030957685153"> </span><span id="ouHighlight__19_19TO19_21">uma</span><span id="noHighlight_0.11231931693430264"> </span><span id="ouHighlight__21_27TO23_31">variedade</span><span id="noHighlight_0.36486474241091016"> </span><span id="ouHighlight__29_30TO33_34">de</span><span id="noHighlight_0.46086701262430685"> </span><span id="noHighlight_0.8085067351475806">pontos de </span><span id="ouHighlight__42_46TO57_61">vista</span><span id="noHighlight_0.008857009421050388"> </span><span id="ouHighlight__32_40TO36_45">diferentes</span><span id="noHighlight_0.8085067351475806"> </span><span id="ouHighlight__48_49TO63_67">sobre</span><span id="noHighlight_0.13700261631713284"> </span><span id="ouHighlight__51_53TO69_69">o</span><span id="noHighlight_0.1633085506840356"> </span><span id="ouHighlight__55_62TO71_79">documento</span><span id="noHighlight_0.7343980002693096"> </span><span id="ouHighlight__64_66TO81_81">e</span><span id="noHighlight_0.1714538003338918"> </span><span id="ouHighlight__68_70TO83_87">todos</span><span id="noHighlight_0.3688022075739785"> os </span><span id="ouHighlight__72_76TO89_91">nós</span><span id="noHighlight_0.472842706334597"> </span><span id="ouHighlight__78_83TO93_98">dentro.</span></p> - -<div class="note"> -<p>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 <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. </p> -</div> - -<h2 id="Documentation" name="Documentation">Documentação</h2> - -<dl> - <dt><a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/DOM_Inspector/Introduction_to_DOM_Inspector">Introdução ao DOM Inspector</a></dt> - <dd> - <div class="textArea" id="destText" style="direction: ltr;"> - <div><span id="ouHighlight__0_0TO0_1">Aqui um </span><span id="ouHighlight__9_16TO3_10">tutorial</span><span id="noHighlight_0.6125305086888332"> </span><span id="ouHighlight__18_21TO19_21">que</span><span id="noHighlight_0.4269113443136816"> </span><span id="ouHighlight__23_26TO23_25">irá</span><span id="noHighlight_0.6326109664824034"> </span><span id="ouHighlight__28_31TO27_31">ajudá</span><span id="noHighlight_0.034229960779964874">-</span><span id="ouHighlight__33_35TO33_34">lo</span><span id="noHighlight_0.7917926088385331"> a </span><span id="ouHighlight__37_47TO38_44">começar</span><span id="noHighlight_0.9367370038721418"> </span><span id="ouHighlight__49_52TO46_48">com</span><span id="noHighlight_0.21054018653915696"> o </span><span id="ouHighlight__54_56TO52_54">DOM</span><span id="noHighlight_0.5884021418203362"> </span><span id="ouHighlight__58_66TO56_64">Inspector</span>.</div> - </div> - </dd> -</dl> - -<dl> - <dt><a href="/en/DOM_Inspector/DOM_Inspector_FAQ" title="en/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt> - <dd>Perguntas e Respostas comuns sobre o DOM Inspector.</dd> -</dl> - -<dl> - <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">Página DOM Inspector no MozillaZine</a></dt> - <dd>Mais informaçãoe sobre o DOM Inspector.</dd> - <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">Como criar um DOM Inspector</a></dt> - <dd>Postagens sobre como criar o DOM Inspector do início</dd> -</dl> - -<h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">Obter DOM Inspector</h2> - -<dl> - <dt>Firefox & Thunderbird</dt> - <dd>Você pode Baixar e Instalar o <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622">DOM Inspector</a> 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 <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/6622" title="https://addons.mozilla.org/en-US/thunderbird/addon/6622">DOM Inspector para Thunderbird</a>.).</dd> -</dl> - -<dl> - <dt>Thunderbird 2</dt> - <dd><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/1806">DOM Inspector para Thunderbird 2</a> está disponível para <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/">Thunderbird Add-ons</a>. Ou, construa você mesmo no Thunderbird com as seguintes opções:</dd> -</dl> - -<pre>ac_add_options --enable-extensions="default inspector" -ac_add_options --enable-inspector-apis -</pre> - -<dl> - <dt>Mozilla Suite e SeaMonkey</dt> - <dd>Select Tools > Web Development > DOM Inspector.</dd> - <dd>Você pode instalar o painel lateral através de:</dd> - <dd>Edit > Preferences > Advanced > DOM Inspector</dd> - <dd>Então basta abrir o painel inspector e visitar um Web Site..</dd> -</dl> - -<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Relatar um bug no DOM Inspector</h2> - -<p>Use um nome conveniente <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&product=Other%20Applications&component=DOM%20Inspector">"DOM Inspector" componente no Bugzilla</a>.</p> - -<p>Para descobrir o <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector">DOM Inspector code</a> e onde vive, consulte o DOM Inspector lista de módulos (<a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"><span class="external">DOM Inspector module listing)</span></a>.</p> - -<p>{{ 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" } ) }}</p> diff --git a/files/pt-br/orphaned/tools/add-ons/index.html b/files/pt-br/orphaned/tools/add-ons/index.html deleted file mode 100644 index 095399ef16..0000000000 --- a/files/pt-br/orphaned/tools/add-ons/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Add-ons -slug: orphaned/Tools/Add-ons -tags: - - Add-ons - - Monitor de WebSocket - - Mozilla - - dev -translation_of: Tools/Add-ons -original_slug: Tools/Add-ons ---- -<div>{{ToolsSidebar}}</div><p>Ferramenta de desenvolvimento não incorporados ao Firefox, mas envia complementos separados (Add-ons).</p> - -<dl> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">Monitor de WebSocket </a></dt> - <dd> - <div class="textArea" id="destText" style="direction: ltr;"> - <div><span id="ouHighlight__0_6TO0_6">Examine</span><span id="noHighlight_0.7801873951987488"> </span><span id="ouHighlight__8_10TO8_9">os</span><span id="noHighlight_0.03673517912521185"> </span><span class="highlighted" id="ouHighlight__12_15TO11_15">dados</span><span id="noHighlight_0.10902071587841122"> </span><span id="ouHighlight__17_25TO17_24">trocados</span><span id="noHighlight_0.08447518103517893"> </span><span id="ouHighlight__27_28TO26_27">em</span><span id="noHighlight_0.08281588762759473"> </span><span id="ouHighlight__30_30TO29_31">uma</span><span id="noHighlight_0.9886508826786672"> </span><span id="ouHighlight__42_51TO33_39">conexão</span><span id="noHighlight_0.921900981942863"> de </span><span id="ouHighlight__32_40TO44_53">WebSockets</span><span id="noHighlight_0.25783072364355797">.</span></div> - </div> - </dd> - <dd> </dd> -</dl> diff --git a/files/pt-br/orphaned/tools/css_coverage/index.html b/files/pt-br/orphaned/tools/css_coverage/index.html deleted file mode 100644 index e23e49f7f1..0000000000 --- a/files/pt-br/orphaned/tools/css_coverage/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: CSS Coverage -slug: orphaned/Tools/CSS_Coverage -tags: - - CSS - - cobertura CSS -translation_of: Tools/CSS_Coverage -original_slug: Tools/CSS_Coverage ---- -<div>{{ToolsSidebar}}</div><div class="note"> -<p>Este componente é experimental e não está ainda avaliado no Firefox</p> -</div> - -<p>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.</p> - -<p>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.</p> - -<p>O caminho que eles usam no geral é:</p> - -<ul> - <li>Iniciar a cobrir o rastro ("<code>csscoverage start</code>")</li> - <li>Visitar um conjunto representativo das páginas em seu site.</li> - <li>Parar o rastreador ("<code>csscoverage stop</code>") e ver as regras não usadas no editor de estilos.</li> - <li>Ver um relatório("<code>csscoverage report</code>") que contém as regras que podem ser na linha em cada página.</li> -</ul> - -<p>Um outro comando ("<code>csscoverage oneshot</code>") permite você efetivamente rodar ("<code>csscoverage start; csscoverage stop</code>").</p> - -<h2 id="O_que_uso_significa">O que "uso" significa?</h2> - -<h3 id="TLDR">TL;DR:</h3> - -<p>CSS cobertura checa se o <span style="color: #008000;"><code>tag#id.class</code></span> seletor no exemplo abaixo existe em um conjunto de páginas web.</p> - -<pre class="brush: css">@media thing { - tag#id.class:hover { - foo: bar; - } -}</pre> - -<h3 id="Porque">Porque?</h3> - -<p>Supostamente seu CSS tem o seguinte: Se, durante o teste, seu mouse não entrar o span. Esta regra é usada?</p> - -<pre class="brush: html"><style> - span:hover { - color: purple; - } -</style> - -<span>Test</span> -</pre> - -<p>Tecnicamente <code>span:hover</code> 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 <code>span:hover</code> claramente tem relevância para a página..</p> - -<p>Similarmente, suponha que o seu CSS tenha o seguinte:</p> - -<pre class="brush: html"><style> - @media tv { - span { - color: purple; - } - } -</style> - -<span>Test</span> -</pre> - -<p>Você deve estar querendo plugar uma TV dentro de seu ambiente em ordem para medir relevância? </p> - -<p>Mas 'use' não é somente sobre relevância </p> - -<p>É a seguinte regra relevante:</p> - -<pre class="brush: html"><style> - span { } -</style> - -<span>Test</span> -</pre> - -<p>Isto pode ser argumentado que não é relevante porque não tem efeito na página e pode portanto se seguramente removido</p> - -<p>No entanto acontece o seguinte:</p> - -<pre class="brush: html"><style> - span { - -o-text-curl: minor; - } -</style> - -<span>Test</span> -</pre> - -<p>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.</p> - -<p>Isto também explica o porquê da div de regra é considerada "usada" no seguinte exemplo.</p> - -<pre class="brush: html"><style> - div { color: red; } - span { color: blue; } -</style> - -<div><span>Test</span></div> -</pre> - -<p>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:</p> - -<pre class="brush: html"><style> - div { color: red; border: none; } - span { color: blue; } -</style> -</pre> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Ressalvas">Ressalvas</h2> - -<p>Tenha consciência destas coisas:</p> - -<ul> - <li>Nós assumimos que uma URL retorna o mesmo cojunto de bytes cada vez que referenciado ao longo do período de teste.</li> - <li>Nós não trilhamos folhas de estilos alternativas.</li> -</ul> - -<h2 id="Erros">Erros</h2> - -<p>Nós estamos trabalhando em um número de imortantes bugs ( erros ):</p> - -<ul> - <li>Nós não atualmente trilhamos mudanças para o CSSOM pelo Javascript, inc</li> - <li>Adiciona folhas de estilos. Veja erro (bug) 1007533.</li> - <li>Marcação no editor de estilo é feito em uma base por linha, e nós atualmente processamos mapas-recurso, então coisas ainda estão confusas se você rodar isso em um comprimido CSS. Veja Erro( <a href="https://bugzil.la/1007073">bug ) 1007073</a>.</li> - <li>Nós não incluímos @keyframe informação no pre-carregado sumário. Veja erro ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1034062">bug ) 1034062</a>.</li> -</ul> 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 deleted file mode 100644 index d3a58117d7..0000000000 --- a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/disable_breakpoints/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Desabilitar breakpoints -slug: orphaned/Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -tags: - - breakpoint - - breakpoints -translation_of: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints -original_slug: Tools/Debugger_(before_Firefox_52)/Disable_breakpoints ---- -<div>{{ToolsSidebar}}</div><p>Para desabilitar um breakpoint, desmarqueo check box próximo ao breakpoint's entrada no <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="#source-list-pane">Source list pane</a>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13204/debugger-disable.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 904px;"></p> - -<p>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".</p> - -<p>Você pode também remover um brekpoint somente apertando na seta que o representa.</p> - -<p>Para desabilitar/habilitar todos os breakpoints, use o "Toggle all breakpoints" botão no Source list pane:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13206/debugger-toggle-all.png" style="display: block; height: 415px; margin-left: auto; margin-right: auto; width: 904px;"></p> 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 deleted file mode 100644 index bd8046254a..0000000000 --- a/files/pt-br/orphaned/tools/debugger_(before_firefox_52)/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Debugger (before Firefox 52) -slug: orphaned/Tools/Debugger_(before_Firefox_52) -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger_(before_Firefox_52) -original_slug: Tools/Debugger_(before_Firefox_52) ---- -<div>{{ToolsSidebar}}</div><div class="note"> -<p>This page describes the JavaScript Debugger as it appears before Firefox 52.</p> - -<p><a href="/en-US/docs/Tools/Debugger">See what it looks like from Firefox 52 onwards.</a></p> -</div> - -<p>The JavaScript Debugger enables you to step through JavaScript code and examine or modify its state to help track down bugs.</p> - -<p>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 <a href="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>to learn how to connect the debugger to a remote target.</p> - -<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> - -<hr> -<h2 id="User_Interface_Tour">User Interface Tour</h2> - -<p>To find your way around the debugger, here's a <a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/UI_Tour">quick tour of the UI</a>.</p> - -<hr> -<h2 id="How_to">How to</h2> - -<p>To find out what you can do with the debugger, see the following how-to guides:</p> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Open_the_debugger">Open the debugger</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_breakpoint">Set a breakpoint</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Disable_breakpoints">Disable breakpoints</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Step_through_code">Step through code</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Break_on_a_DOM_event">Break on a DOM event</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Search_and_filter">Search and filter</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Use_a_source_map">Use a source map</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Black_box_a_source">Black box a source</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Debug_eval_sources">Debug eval sources</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></li> -</ul> -</div> - -<hr> -<h2 id="Reference">Reference</h2> - -<div class="twocolumns"> -<ul> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/Keyboard_shortcuts">Keyboard shortcuts</a></li> - <li><a href="/en-US/docs/Tools/Debugger_(Before_Firefox_52)/Settings">Settings</a></li> -</ul> -</div> 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 deleted file mode 100644 index 40fc26b856..0000000000 --- a/files/pt-br/orphaned/web/accessibility/jaws_issues_with_firefox/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Problemas com JAWS no Firefox -slug: orphaned/Web/Accessibility/JAWS_Issues_with_Firefox -tags: - - Acessibilidade - - Obsolento -translation_of: Web/Accessibility/JAWS_Issues_with_Firefox -original_slug: Web/Acessibilidade/Problemas_com_JAWS_no_Firefox ---- -<h2 id="Known_JAWS_Firefox_Issues" name="Known_JAWS_Firefox_Issues">Problemas JAWS Firefox conhecidos</h2> - -<p>Esse artigo não é mais relevante. Por favor, veja o <a class="external" href="http://support.mozilla.com/en-US/kb/Firefox+3+with+Screen+Readers+FAQ" title="http://support.mozilla.com/en-US/kb/Firefox+3+with+Screen+Readers+FAQ">FAQ</a> no site de suporte Mozilla.</p> diff --git a/files/pt-br/orphaned/web/api/abstractworker/index.html b/files/pt-br/orphaned/web/api/abstractworker/index.html deleted file mode 100644 index 2b5355f865..0000000000 --- a/files/pt-br/orphaned/web/api/abstractworker/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: AbstractWorker -slug: orphaned/Web/API/AbstractWorker -translation_of: Web/API/AbstractWorker -original_slug: Web/API/AbstractWorker ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<h2 id="Resumo">Resumo</h2> - -<p>A interface <strong><code>AbstractWorker</code></strong> abstrai propriedades e métodos comuns para todo o tipo de Workers, sendo {{domxref("Worker")}} ou {{domxref("SharedWorker")}}.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em>A interface <code>AbstractWorker</code></em><em> não herda qualquer propriedade..</em></p> - -<dl> - <dt>{{domxref("AbstractWorker.onerror")}}</dt> - <dd>É um {{ domxref("EventListener") }} que é chamado sempre que um {{domxref("ErrorEvent")}} do tipo <code>error</code> borbulha através do Worker.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p><em>A interface <code>AbstractWorker</code></em><em> não implementa ou herda qualquer método.</em></p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sem mudanças para {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers', "#the-abstractworker-abstract-interface", "AbstractWorker")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Definição Inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte Básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte Básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>O {{domxref("Worker")}} e {{domxref("SharedWorker")}} herdá-lo.</li> -</ul> - -<p> </p> diff --git a/files/pt-br/orphaned/web/api/abstractworker/onerror/index.html b/files/pt-br/orphaned/web/api/abstractworker/onerror/index.html deleted file mode 100644 index 9ad74fd3fe..0000000000 --- a/files/pt-br/orphaned/web/api/abstractworker/onerror/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: AbstractWorker.onerror -slug: orphaned/Web/API/AbstractWorker/onerror -translation_of: Web/API/AbstractWorker/onerror -original_slug: Web/API/AbstractWorker/onerror ---- -<p>{{ APIRef("Web Workers API") }}</p> - -<h2 id="Resumo">Resumo</h2> - -<p>A propriedade <code><strong>AbstractWorker</strong></code><strong><code>.onerror</code></strong> da interface {{domxref("AbstractWorker")}} representa um {{event("Event_handlers", "event handler")}}, que é uma função a ser chamada quando o evento {{event("error")}} ocorre através de um balão de notificação {{domxref("Worker")}}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox">myWorker.onerror = function() { ... };</pre> - -<h2 id="Exemplo">Exemplo</h2> - -<p>O seguinte trecho de código mostra criação de um objeto <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker" title="The Worker interface represents a background task that can be easily created and can send messages back to its creator. Creating a worker is as simple as calling the Worker() constructor and specifying a script to be run in the worker thread."><code>Worker</code></a> usando o construtor de <a href="https://developer.mozilla.org/en-US/docs/Web/API/Worker.Worker" title="The Worker() constructor creates a Worker that executes the script at the specified URL. This script must obey the same-origin policy."><code>Worker()</code></a> e criando um manipulador <code>onerror</code> no objeto resultante:</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -myWorker.onerror = function() { - console.log('Há um erro com o seu worker!'); -}</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Nenhuma mudança em {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers', "#handler-abstractworker-onerror", "AbstractWorker.onerror")}}</td> - <td>{{Spec2('Web Workers')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_dos_Navegadores">Compatibilidade dos Navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{CompatChrome(4)}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>10</td> - <td>10.6</td> - <td>4</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>4.4</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>1.0.1</td> - <td>10</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>A interface {{domxref("AbstractWorker")}} a que pertence.</li> -</ul> diff --git a/files/pt-br/orphaned/web/api/ambient_light_events/index.html b/files/pt-br/orphaned/web/api/ambient_light_events/index.html deleted file mode 100644 index 92bcf75e04..0000000000 --- a/files/pt-br/orphaned/web/api/ambient_light_events/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Ambient Light Events -slug: orphaned/Web/API/Ambient_Light_Events -tags: - - Ambiente de luz - - Ambiente de luz API - - Ambiente e luz HTML5 API -translation_of: Web/API/Ambient_Light_Events -original_slug: Web/API/Ambient_Light_Events ---- -<div>Os eventos de luz ambiente são uma maneira útil de tornar uma página da Web ou uma aplicação consciente de qualquer alteração na intensidade da luz. Isso permite que eles reajam a tal mudança, por exemplo alterando o contraste de cores da interface do usuário (UI) ou alterando a exposição necessária para tirar uma foto.</div> - -<div> </div> - -<h2 id="Eventos_de_luz">Eventos de luz</h2> - -<p>Quando o sensor de luz de um dispositivo detecta uma mudança no nível de luz, ele notifica o navegador dessa alteração. Quando o navegador obtém tal notificação, ele dispara um evento <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">DeviceLightEvent </a>que fornece informações sobre a intensidade da luz exata.</p> - -<p>Este evento pode ser capturado no nível do objeto da janela usando o método <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener </a>(usando o nome do evento <a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">devicelight</a>) ou anexando um manipulador de eventos à propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/ondevicelight">window.ondevicelight</a>.</p> - -<p>Uma vez capturado, o objeto de evento dá acesso à intensidade da luz expressa em <a href="http://en.wikipedia.org/wiki/Lux">lux </a>através da propriedade <a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent/value">DeviceLightEvent.value</a>.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js">window.addEventListener('devicelight', function(event) { - var html = document.getElementsByTagName('html')[0]; - - if (event.value < 50) { - html.classList.add('darklight'); - html.classList.remove('brightlight'); - } else { - html.classList.add('brightlight'); - html.classList.remove('darklight'); - } -});</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Estatus</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://w3c.github.io/ambient-light/">Sensor de luz ambiente A definição de "Ambient Light Events" nessa especificação</a>.</td> - <td> - <p>Rascunho do Editor</p> - </td> - <td>Definição inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>{{domxref("DeviceLightEvent")}}</td> - <td>{{CompatNo}}</td> - <td>support</td> - <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] O evento "<a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">devicelight</a>" é implementado e a preferência ativada por padrão no Firefox Mobile para Android (15.0) e no Firefox OS (B2G). Começando com Gecko 22.0 geckoRelease ("22.0"), uma implementação de desktop para Mac OS X também está disponível. O suporte para o Windows 7 está em andamento (veja <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=754199">bug (754199)</a>).</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/DeviceLightEvent">DeviceLightEvent</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events/devicelight">event("devicelight")</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/api/body/index.html b/files/pt-br/orphaned/web/api/body/index.html deleted file mode 100644 index fb7edd01c1..0000000000 --- a/files/pt-br/orphaned/web/api/body/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Body -slug: orphaned/Web/API/Body -tags: - - API - - BODY - - Experimental - - Fetch - - Fetch API - - Interface - - NeedsTranslation - - Reference - - TopicStub - - request -translation_of: Web/API/Body -original_slug: Web/API/Body ---- -<div>{{ APIRef("Fetch") }}</div> - -<p><span class="seoSummary">The <strong><code>Body</code></strong> {{glossary("mixin")}} of the <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> represents the body of the response/request, allowing you to declare what its content type is and how it should be handled.</span></p> - -<p><code>Body</code> is implemented by both {{domxref("Request")}} and {{domxref("Response")}}. This provides these objects with an associated <dfn>body</dfn> (a <a href="/en-US/docs/Web/API/Streams_API">stream</a>), a <dfn>used flag</dfn> (initially unset), and a <dfn>MIME type</dfn> (initially the empty byte sequence).</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("Body.body")}} {{readonlyInline}}</dt> - <dd>A simple getter used to expose a {{domxref("ReadableStream")}} of the body contents.</dd> - <dt>{{domxref("Body.bodyUsed")}} {{readonlyInline}}</dt> - <dd>A {{jsxref("Boolean")}} that indicates whether the body has been read.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Body.arrayBuffer()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with an {{jsxref("ArrayBuffer")}}.</dd> - <dt>{{domxref("Body.blob()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("Blob")}}.</dd> - <dt>{{domxref("Body.formData()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("FormData")}} object.</dd> - <dt>{{domxref("Body.json()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as {{jsxref("JSON")}}.</dd> - <dt>{{domxref("Body.text()")}}</dt> - <dd>Takes a {{domxref("Response")}} stream and reads it to completion. It returns a promise that resolves with a {{domxref("USVString")}} (text). The response is <em>always</em> decoded using UTF-8.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The example below uses a simple fetch call to grab an image and display it in an {{htmlelement("img")}} tag. You'll notice that since we are requesting an image, we need to run {{domxref("Body.blob","Body.blob()")}} ({{domxref("Response")}} implements body) to give the response its correct MIME type.</p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush: html notranslate"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> -</pre> - -<h3 id="JS_Content">JS Content</h3> - -<pre class="brush: js notranslate">const myImage = document.querySelector('.my-image'); -fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg') - .then(res => res.blob()) - .then(res => { - const objectURL = URL.createObjectURL(res); - myImage.src = objectURL; -});</pre> - -<p>{{ EmbedLiveSample('Examples', '100%', '250px') }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Fetch','#body-mixin','Body')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Body")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/api/body/json/index.html b/files/pt-br/orphaned/web/api/body/json/index.html deleted file mode 100644 index e49273e9ba..0000000000 --- a/files/pt-br/orphaned/web/api/body/json/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Body.json() -slug: orphaned/Web/API/Body/json -tags: - - API - - Experimental - - Fetch - - JSON - - Referencia -translation_of: Web/API/Body/json -original_slug: Web/API/Body/json ---- -<div>{{APIRef("Fetch API")}}</div> - -<p>O método <strong><code>json()</code></strong> do mixin {{DOMxRef("Body")}} usa uma stream do objeto {{DOMxRef("Response")}} para tratar. O método <strong>json() </strong>retorna uma Promise como resultado do processamento da stream, retornando um objeto {{JSxRef("JSON")}} em caso de sucesso.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox notranslate"><em>response</em>.json().then(<em>data</em> => { - // do something with your data -});</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<p>Nenhum.</p> - -<h3 id="Retorno">Retorno</h3> - -<p>Uma {{jsxref("Promise")}} que retorna um objeto Javascript no método <strong>resolve()</strong>. Pode ser qualquer tipo que pode ser representado com JSON — objeto, array, string, numeral...</p> - -<h2 id="Exemplo">Exemplo</h2> - -<p>Em nosso <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">exemplo de fetch em json</a> (teste <a href="http://mdn.github.io/fetch-examples/fetch-json/">aqui a busca em json com fetch</a>), nós criamos uma nova requisição usando o constructor de {{DOMxRef("Request.Request", "Request()")}}, e em seguimos a usamos para buscar um arquivo <code>.json</code>. Quando o fetch é bem-sucedido, nós lemos e tratamos a stream com o método <code>json()</code>, lê os valores em forma de objeto retornados como esperado e inserimos na lista para exibir os dados dos produtos.</p> - -<pre class="brush: js highlight[5] notranslate">const myList = document.querySelector('ul'); -const myRequest = new Request('products.json'); - -fetch(myRequest) - .then(response => response.json()) - .then(data => { - for (const product of data.products) { - let listItem = document.createElement('li'); - listItem.appendChild( - document.createElement('strong') - ).textContent = product.Name; - listItem.append( - ` can be found in ${ - product.Location - }. Cost: ` - ); - listItem.appendChild( - document.createElement('strong') - ).textContent = `£${product.Price}`; - myList.appendChild(listItem); - } - }) - .catch(console.error);</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specificações</th> - <th scope="col">Status</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("Fetch", "#dom-body-json", "Body.json()")}}</td> - <td>{{Spec2("Fetch")}}</td> - <td>Definição Inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_Navegador">Compatibilidade de Navegador</h2> - - - -<p>{{Compat("api.Body.json")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/CORS">Cross-Origin Resource Sharing (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/api/childnode/after/index.html b/files/pt-br/orphaned/web/api/childnode/after/index.html deleted file mode 100644 index 8fa84d11ee..0000000000 --- a/files/pt-br/orphaned/web/api/childnode/after/index.html +++ /dev/null @@ -1,186 +0,0 @@ ---- -title: ChildNode.after() -slug: orphaned/Web/API/ChildNode/after -tags: - - API - - DOM - - Experimental - - Nó - - Referencia - - metodo -translation_of: Web/API/ChildNode/after -original_slug: Web/API/ChildNode/after ---- -<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> - -<p>The <code><strong>ChildNode</strong></code><strong><code>.after()</code></strong> method inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox">[Throws, Unscopable] -void ChildNode.after((Node or DOMString)... nodes); -</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>nós</code></dt> - <dd>A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.</dd> -</dl> - -<h3 id="Exceções">Exceções</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: Nó não pode ser inserido até que seja especificado o ponto da hierarquia. </li> -</ul> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Inserindo_uum_elemento">Inserindo uum elemento</h3> - -<pre class="brush: js">var parente = document.createElement("div"); -var filho = document.createElement("p"); -parente.appendChild(filho); -var span = document.createElement("span"); - -filho.after(span); - -console.log(parente.outerHTML); -// "<div><p></p><span></span></div>" -</pre> - -<h3 id="Inserindo_texto">Inserindo texto</h3> - -<pre class="brush: js">var parente = document.createElement("div"); -var filho = document.createElement("p"); -parente.appendChild(filho); - -filho.after("Text"); - -console.log(parente.outerHTML); -// "<div><p></p>Text</div>"</pre> - -<h3 id="Inserindo_um_elemento_e_um_texto">Inserindo um elemento e um texto </h3> - -<pre class="brush: js">var parente = document.createElement("div"); -var filho = document.createElement("p"); -parente.appendChild(filho); -var span = document.createElement("span"); - -filho.after(span, "Text"); - -console.log(parente.outerHTML); -// "<div><p></p><span></span>Text</div>"</pre> - -<h3 id="ChildNode.after()_is_unscopable"><code>ChildNode.after()</code> is unscopable</h3> - -<p>The <code>after()</code> method is not scoped into the <code>with</code> statement. Veja {{jsxref("Symbol.unscopables")}} para maior infomação.</p> - -<pre class="brush: js">with(node) { - after("foo"); -} -// ReferenceError: after is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Você pode usar polyfill com o método <code> after() </code> no Internet Explorer 9 e com o seguinte código:</p> - -<pre class="brush: js">//from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('after')) { - return; - } - Object.defineProperty(item, 'after', { - configurable: true, - enumerable: true, - writable: true, - value: function after() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.parentNode.insertBefore(docFrag, this.nextSibling); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="_Polyfill_Element.prototype.after" name="_Polyfill_Element.prototype.after"> </h2> - -<pre class="brush: js">//https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js - -(function(x){ - var o=x.prototype,p='after'; - if(!o[p]){ - o[p]=function(){ - var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document; - if(p!==null){ - while(i<l){ - e=m[i]; - if(e instanceof n){ - t=t.nextSibling; - if(t!==null){ - p.insertBefore(e,t); - }else{ - p.appendChild(e); - }; - }else{ - p.appendChild(d.createTextNode(s(e))); - }; - ++i; - }; - }; - }; - }; -})(Element); - - - -/* -min: - -(function(x){ - var o=x.prototype; - o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}}); -}(Element)); - -*/ -</pre> - -<h3 id="sect1"> </h3> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("api.ChildNode.after")}}</p> - -<h2 id="Veja_mais">Veja mais</h2> - -<ul> - <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/api/childnode/index.html b/files/pt-br/orphaned/web/api/childnode/index.html deleted file mode 100644 index 282b89ee3a..0000000000 --- a/files/pt-br/orphaned/web/api/childnode/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: ChildNode -slug: orphaned/Web/API/ChildNode -tags: - - API - - DOM - - Experimental - - Interface - - NeedsTranslation - - Node - - TopicStub -translation_of: Web/API/ChildNode -original_slug: Web/API/ChildNode ---- -<div>{{APIRef("DOM")}}</div> - -<div>A interface <code><strong>ChildNode</strong></code> contém métodos que são particulares para os objetos</div> - -<p>{{domxref("Node")}} que podem ter um pai.</p> - -<p><code>ChildNode</code> é uma interface bruta e nenhum objeto desse tipo pode ser criado; eles são implementados pelos objetos {{domxref("Element")}}, {{domxref("DocumentType")}}, e {{domxref("CharacterData")}}.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<p><em><font><font>Não há propriedades herdadas nem específicas.</font></font></em></p> - -<h2 id="Métodos">Métodos</h2> - -<p><em>Não há métodos herdados.</em></p> - -<dl> - <dt>{{domxref("ChildNode.remove()")}} {{experimental_inline}}</dt> - <dd>Removes this <code>ChildNode</code> from the children list of its parent.</dd> - <dt>{{domxref("ChildNode.before()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just before this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.after()")}} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects in the children list of this <code>ChildNode</code>'s parent, just after this <code>ChildNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{domxref("ChildNode.replaceWith()")}} {{experimental_inline}}</dt> - <dd>Replaces this <code>ChildNode</code> in the children list of its parent with a set of {{domxref("Node")}} or {{domxref("DOMString")}} objects. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-childnode', 'ChildNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Split the <code>ElementTraversal</code> interface in {{domxref("ParentNode")}} and <code>ChildNode</code>. <code>previousElementSibling</code> and <code>nextElementSibling</code> are now defined on the latter. The {{domxref("CharacterData")}} and {{domxref("DocumentType")}} implemented the new interfaces. Added the <code>remove()</code>, <code>before()</code>, <code>after()</code> and <code>replaceWith()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Polyfill">Polyfill</h2> - -<p>External on github: <a href="https://github.com/seznam/JAK/blob/master/lib/polyfills/childNode.js">childNode.js</a></p> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("api.ChildNode")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ParentNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("CharacterData")}}, {{domxref("Element")}}, and {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/pt-br/orphaned/web/api/childnode/remove/index.html b/files/pt-br/orphaned/web/api/childnode/remove/index.html deleted file mode 100644 index 57dcc06698..0000000000 --- a/files/pt-br/orphaned/web/api/childnode/remove/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: ChildNode.remove() -slug: orphaned/Web/API/ChildNode/remove -tags: - - API - - ChildNode - - DOM - - Experimental - - Método(2) - - remove -translation_of: Web/API/ChildNode/remove -original_slug: Web/API/ChildNode/remove ---- -<div>{{APIRef("DOM")}}</div> - -<p>O método <code><strong>ChildNode.remove()</strong></code> remove o objeto da árvore a que ele pertence.</p> - -<h2 id="Sintase">Sintase</h2> - -<pre class="syntaxbox"><em>elementNodeReference</em>.remove(); -</pre> - -<h2 id="Exemplo">Exemplo</h2> - -<h3 id="Usando_remove()">Usando <code>remove()</code></h3> - -<pre class="brush: html"><div id="div-01">Here is div-01</div> -<div id="div-02">Here is div-02</div> -<div id="div-03">Here is div-03</div> -</pre> - -<pre class="brush: js">var el = document.getElementById('div-01'); -el.nextElementSibling.remove(); // Remove o div com o id 'div-02' -</pre> - -<h3 id="ChildNode.remove()_não_tem_escopo"><code>ChildNode.remove()</code> não tem escopo</h3> - -<p>O método <code>remove()</code> não tem escopo na função <code>with</code>. Veja {{jsxref("Symbol.unscopables")}} para mais informação.</p> - -<pre class="brush: js">with(node) { - remove(); -} -// ReferenceError: remove is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>Você pode evitar incompatibilidade ao usar o método <code>remove() no</code> Internet Explorer 9 em diante com o seguinte código:</p> - -<pre class="brush: js">// de: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('remove')) { - return; - } - Object.defineProperty(item, 'remove', { - configurable: true, - enumerable: true, - writable: true, - value: function remove() { - this.parentNode.removeChild(this); - } - }); - }); -})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Situação</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definição Inicial.</td> - </tr> - <tr> - <td>{{SpecName('DOM4', '#dom-childnode-remove', 'ChildNode.remove')}}</td> - <td>{{Spec2('DOM4')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<div>{{Compat("api.ChildNode.remove")}}</div> - -<p> </p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>A interface pura {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos de objeto implementando esta interface pura: {{domxref("CharacterData")}}, {{domxref("Element")}}, e {{domxref("DocumentType")}}.</div> - </li> -</ul> diff --git a/files/pt-br/orphaned/web/api/document_object_model/events/index.html b/files/pt-br/orphaned/web/api/document_object_model/events/index.html deleted file mode 100644 index 76e6ec64e1..0000000000 --- a/files/pt-br/orphaned/web/api/document_object_model/events/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Events and the DOM -slug: orphaned/Web/API/Document_Object_Model/Events -translation_of: Web/API/Document_Object_Model/Events -original_slug: Web/API/Document_Object_Model/Events ---- -<div>{{DefaultAPISidebar("DOM")}}</div> - -<h2 id="Introduction" name="Introduction">Introdução</h2> - -<p>Este capítulo descreve o Modelo de Eventos do DOM. A interface de <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event" rel="noopener">Eventos</a> é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>, 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 <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> - -<p>Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture" rel="noopener">DOM Level 3 Events draft</a>.</p> - -<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando event listeners</h2> - -<p>Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.</p> - -<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> - -<pre class="brush: js notranslate">// 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') -} -</pre> - -<p>Este é o método que você deve usar em páginas web modernas.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> 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.</p> -</div> - -<p>Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.</p> - -<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">atributo HTML</a></h3> - -<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> -</pre> - -<p>O código JavaScript no atributo é passado para o objeto Evento através do parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de uma maneira especial, descrita na especificação HTML.</a></p> - -<div class="blockIndicator warning"> -<p><strong>Cuidado:</strong> 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.</p> -</div> - -<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3> - -<pre class="brush: js notranslate">// Supondo que myButton seja um elemento button -myButton.onclick = function(event){alert('Hello world')} -</pre> - -<p>A função pode ser definida para receber um parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de maneira especial, descrita na especificação HTML.</a></p> - -<p>O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.</p> - -<h2 id="Acessando_interfaces_doEvento">Acessando interfaces doEvento</h2> - -<p>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.</p> - -<p>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.</p> - -<pre class="brush: js notranslate">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 -</pre> - -<h2 id="Subnav">Subnav</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> - <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index 43394c700b..0000000000 --- a/files/pt-br/orphaned/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: HTMLElement.dataset -slug: orphaned/Web/API/HTMLOrForeignElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset -original_slug: Web/API/HTMLOrForeignElement/dataset ---- -<p>{{ APIRef }}</p> - -<p>A propriedade <code><strong>HTMLElement.dataset</strong></code> permite o acesso, em modo de leitura e escrita, a todos os <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">atributos de dados personalizado</a> (<em>data-*</em>) no elemento. Ele é um mapa de <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">DOMString</a>, com uma entrada para cada atributo de dados personalizado.</p> - -<p>O nome de um atributo de dados customizado inicia com <code>data-</code>. Ele deve conter somente letras, números e os seguintes caracteres: dash (<code>-</code>), dot (<code>.</code>), collon(<code>:</code>), underscore (<code>_</code>). Além disso, ele não deve conter letras ASCII captalizadas (<code>A</code> à <code>Z</code>).</p> - -<p>Um atributo de dados personalizado é transformado em uma chave para uma entrada no {{ domxref("DOMStringMap") }} de acordo com as seguintes regras</p> - -<ul> - <li>O prefixo <code>data-</code> é removido (incluindo o dash);</li> - <li>Para qualquer dash (<code>U+002D</code>) seguido por uma ASCII letra minúscula (<code>a</code><span style="line-height: 1.5;"> à </span><code>z</code>)<span style="line-height: 1.5;">, o dash é removido e a letra que segue é tranformada em maíscula;</span></li> - <li>outros caracteres (incluindo outros dash) são deixados inalterados.</li> -</ul> - -<p>A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:</p> - -<ul> - <li>Restrição: um dash pode não ser imediatamente seguido de uma letra ASCII minúscula (<code>a</code> à <code>z</code>)(antes da transformação);</li> - <li>Um prefixo <code>data-</code> é adicionado;</li> - <li>Qualquer caractere ASCII maiúsculo (<code>A</code> à <code>Z</code>) é transformado em um dash seguido pela sua forma mínúscula;</li> - <li>outros caracteres são deixados inalterados.</li> -</ul> - -<p>A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.</p> - -<p>Por exemplo, o atributo <code>data-abc-def</code> corresponde a chave <code>abcDef</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><em>string</em> = <em>element</em>.dataset.<em>camelCasedName</em>; -<em>element.</em>dataset.<em>camelCasedName</em> = <em>string</em>;</pre> - -<h2 id="Exemplos">Exemplos</h2> - -<pre class="brush: js"><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 -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Espeficicação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sem mudanças desde o último snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot de {{SpecName('HTML WHATWG')}}, sem mudanças desde {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot de {{SpecName('HTML WHATWG')}}, definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>A classe HTML <a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a> de atributos globais.</li> -</ul> diff --git a/files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index ae5b41c66d..0000000000 --- a/files/pt-br/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: Conceitos Básicos sobre IndexedDb -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - Avançado - - IndexedDB - - conceitos -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p>{{DefaultAPISidebar("IndexedDB")}}</p> - -<div class="summary"> -<p><strong>IndexedDB</strong> é uma forma de você armazenar dados no browser do usuário. <span lang="pt-PT">Permite criar aplicativos da Web com habilidades de consulta ricas, independentemente da disponibilidade da rede, esses aplicativos podem trabalhar on-line e off-line. IndexedDB é útil para aplicativos que armazenam uma grande quantidade de dados (por exemplo, um catálogo de DVDs em uma biblioteca de empréstimos) e aplicativos que não precisam de conectividade persistente à Internet para trabalhar (por exemplo, clientes de e-mail, listas de tarefas e Blocos de notas).</span></p> -</div> - -<h2 class="western" id="Sobre_esse_documento">Sobre esse documento</h2> - -<p>Essa introdução discute conceitos essenciais e a terminologia do IndexedDB. Ele vai ter dar um visão geral e explicar conceitos chaves.</p> - -<p>Você vai achar útil:</p> - -<ul> - <li> - <p style="margin-bottom: 0cm;">Para aprender mais sobre termos do IndexedDB, veja a seção <a href="#definitions">Definições</a>.</p> - </li> - <li> - <p style="margin-bottom: 0cm;">Para um tutorial detalhado de como usar a API, veja <a href="https://developer.mozilla.org/pt-BR/docs/IndexedDB/Usando_IndexedDB">Usando IndexedDB</a>.</p> - </li> - <li> - <p style="margin-bottom: 0cm;">Para obter a documentação da referência da API IndexedDB, volte para o artigo principal <a href="https://developer.mozilla.org/pt-BR/docs/IndexedDB">IndexedDB API</a> e suas sub-páginas, que documentam os tipos de objetos suportados pelo IndexedDB.</p> - </li> - <li> - <p>Para mais informações de como o navegador armazena seus dados em segundo plano, leia <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a>.</p> - </li> -</ul> - -<h2 class="western" id="Visão_geral_do_IndexedDB">Visão geral do IndexedDB</h2> - -<p>IndexedDB permite você armazenar e consultar objetos que são indexados com uma chave. Todas as mudanças na base dados são feitas por transações. Como a maioria soluções de armazenamento web, IndexedDB segue a <a href="http://www.w3.org/Security/wiki/Same_Origin_Policy">política de mesma origem</a>. Então enquanto você pode acessar dados armazenados em um domínio, você não pode acessar em diferentes domínios.</p> - -<p>IndexedDB é uma API <a>assíncrona</a> que pode ser usada em diversos contextos, incluindo <a>WebWorkers</a>. Isso permite o uso de uma versão <a>síncrona</a> também, para o uso em web workers, mas isso foi removido da especificação por falta de interesse da comunidade web.</p> - -<p><br> - IndexedDB foi pensado para ser uma especificação concorrente ao banco de dados WebSQL, mas o W3C depreciou o WebSQL em 18 de novembro de 2010. Embora IndexedDB e WebSQL sejam soluções para armazenamento, eles não oferecem as mesmas funcionalidades. WebSQL Database é um sistema de acesso a banco de dados relacional, enquanto que IndexedDB é um sistema de tabelas indexadas.</p> - -<h2 class="western" id="Principais_conceitos">Principais conceitos</h2> - -<p> Se você já trabalhou com outros tipos de banco de dados, você pode esquecer enquanto trabalha com IndexedDB. E tenha esses importantes conceitos em mente:</p> - -<ul> - <li> - <p><strong>Bases de dados IndexedDB armazenam pares chave-valor.</strong> Os valores podem ser objetos de estruturas complexas, e chaves podem ser propriedades desses objetos. Você pode criar índices que usam qualquer propriedade dos objetos para pesquisa rápida, bem como enumerações ordenadas. As chaves podem ser objetos binários.</p> - </li> - <li> - <p><strong>IndexedDB é </strong><strong>construído</strong><strong> em um modelo de base de dado</strong><strong>s</strong><strong> transacional</strong>. Tudo o que você faz no IndexedDB sempre acontece no contexo de uma <a href="#gloss_transaction">transaction</a>. A API IndexedDB fornece uma série de objetos que representam índices, tabelas, cursores, assim por diante, mas cada um vinculado a uma transação. Assim, você não pode executar comandos ou abrir cursores fora de uma transação. As transações têm um tempo de vida bem definido, portanto, tentar usar uma transação após concluída irá gerar exceções. Além disso, as transações fazem commits automaticamente sem opção de se fazer manualmente.</p> - - <p>Esse modelo de transação é muito útil se você considerar que o usuário pode abrir duas instâncias da sua aplicação em duas diferentes abas simultaneamente. Sem as operações de transação, As duas instâncias poderiam interferir outras modificações. Se você não está familiarizado com transações no banco de dados, leia o <a href="https://en.wikipedia.org/wiki/Database_transaction">Wikipedia article on transactions</a>. Também veja <a href="#gloss_transaction">transaction</a> na seção de definições.</p> - </li> -</ul> - -<p style="margin-bottom: 0cm; line-height: 100%;"> </p> - -<ul> - <li> - <p><strong><span id="result_box" lang="pt"><span>A API IndexedDB é na maior parte assíncrona</span></span>.</strong> A API não retorna dados usando valores; em vez disso você deve passar uma função <a href="https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/Using_js-ctypes/Declaring_and_Using_Callbacks">callback</a>. <span id="result_box" lang="pt"><span>Você não "armazena" um valor no banco de dados, ou "recupera" um valor do banco de dados através de meios síncronos.</span> <span>Em vez disso, você "solicita" que uma operação de banco de dados aconteça.</span> <span>Você será notificado por um evento DOM quando a operação for concluída e o tipo de evento recebido informará se a operação foi bem-sucedida ou falhou.</span> <span>Isto soa um pouco complicado no início, mas faz sentido no fundo. Não é tão diferente da maneira que </span></span><a href="/en/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a> funciona.</p> - </li> - <li> - <p><strong>IndexedDB usa várias requisições. </strong> <span id="result_box" lang="pt"><span>As </span></span>requisições <span lang="pt"><span>são objetos que recebem os eventos de sucesso ou falha do DOM mencionados anteriormente</span></span> . Eles têm propriedades <code style="font-size: 14px;">onsuccess</code> e <code style="font-size: 14px;">onerror</code>, e você pode chamar <code style="font-size: 14px;">addEventListener()</code> e <code style="font-size: 14px;">removeEventListener()</code> neles. Eles também tem as propriedades <code style="font-size: 14px;">readyState</code>, <code style="font-size: 14px;">result</code>, e <code style="font-size: 14px;">errorCode</code> que informam o status da requisição. A propriedade <code style="font-size: 14px;">result</code> é particurlamente mágica, pode ser muitas coisas diferentes , depende de como a requisção foi feita (por exemplo, uma instancia <code style="font-size: 14px;">IDBCursor</code>, ou uma chave para um valor que você inseriu na base).</p> - </li> - <li> - <p><span id="result_box" lang="pt"><span><strong>IndexedDB usa eventos DOM para notificá-lo quando os resultados estão disponíveis</strong>.</span> <span>Eventos DOM sempre têm um tipo propriedade (em IndexedDB, é mais comumente definido como "sucesso" ou "erro").</span> <span>Os eventos DOM também têm uma propriedade de destino que indica para onde o evento é dirigido.</span> <span>Na maioria dos casos, o destino de um evento é o objeto IDBRequest que foi gerado como resultado de alguma operação no banco de dados.</span> <span>Eventos de sucesso não disparam um evento em bolha (bubble up) e não podem ser cancelados.</span> <span>Eventos de erro, por outro lado, criam evento bolha que podem ser cancelados.</span> <span>Isso é muito importante, pois eventos de erro podem cancelar qualquer transações em que estejam rodando, a menos que elas sejam canceladas.</span></span></p> - </li> - <li> - <p><span id="result_box" lang="pt"><span><strong>IndexedDB é orientado a objetos</strong>.</span> <span>IndexedDB não é um banco de dados relacional com tabelas que representam coleções de linhas e colunas.</span> <span>Esta diferença importante e fundamental afeta a maneira como você projeta e constrói suas aplicações.</span></span></p> - - <p><span id="result_box" lang="pt"><span>Em um banco de dados relacional tradicional, você teria uma tabela que armazena uma coleção de linhas de dados e colunas de tipos de dados nomeados.</span> <span>IndexedDB, por outro lado, requer que você crie um armazenamento de objetos para um tipo de dado e simplesmente persista objetos JavaScript nesse armazenamento.</span> <span>Cada armazenamento de objeto pode ter uma coleção de índices que o torna eficiente para consultar e iterar</span></span>. Se você não está familiarizado com sitemas de banco de dados orientados a objetos, leia o artigo <a class="external" href="https://en.wikipedia.org/wiki/Object_database" title="http://en.wikipedia.org/wiki/Object_database">Wikipedia article on object database</a>.</p> - </li> - <li> - <p><strong>IndexedDB não usa Structured Query Language (<abbr>SQL</abbr>).</strong> <span id="result_box" lang="pt"><span>Ele usa consultas em um índice que produz um cursor, que você usa para iterar em todo o conjunto de resultados.</span> <span>Se você não estiver familiarizado com os sistemas NoSQL, leia o artigo</span></span> <a class="external" href="https://en.wikipedia.org/wiki/NoSQL" title="http://en.wikipedia.org/wiki/NoSQL">Wikipedia article on NoSQL</a>.</p> - </li> - <li> - <p><strong>IndexedDB segue a política de mesma origem</strong>. Uma origem equivale a um domínio, um protocolo de camada de aplicação e porta de uma URL de um documento de onde um script está sendo executado. Cada origem tem seu próprio conjunto de bancos de dados associados. Cada banco de dados tem um nome que o identifica dentro da origem.<br> - <br> - A restrição de segurança imposta sobre o IndexedDB previne que aplicações acessem dados de uma origem diferente. Por exemplo, enquanto um app ou página em <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.exemplo.com/app/</a> pode obter dados de <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.exemplo.com/dir/</a>, porque compartilham a mesma origem, ela não pode obter dados de <a class="external" href="http://www.example.com/app/" rel="freelink">http://www.exemplo.com:8080/app</a> (porta diferente) ou <a class="external" href="http://www.example.com/app/" rel="freelink">https://www.exemplo.com/app</a> (protocolo diferente), porque possuem diferentes origens.<br> - </p> - - <div class="note"><strong>Nota</strong>: O conteúdo de janelas de terceiros (por exemplo, {{htmlelement ("iframe")}} conteúdo) pode acessar o armazenamento IndexedDB para a origem em que está incorporado, a menos que o navegador esteja configurado para <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">nunca aceitar cookies de terceiros</a> (veja {{bug ("1147821 ")}}.)</div> - </li> -</ul> - -<h2 id="definitions" name="definitions">Definições</h2> - -<p>Essa seção define e explica os termos usado na API IndexedDB.</p> - -<h3 id="database" name="database">Base de dados</h3> - -<dl> - <dt>Base de dados</dt> - <dd>Um repositório de informação, normalmente é composto por um ou mais <a href="#gloss_object_store" title="#gloss_object_store"><em>object stores</em></a>. cada base de dados deve possuir: - <ul> - <li>Name. This identifies the database within a specific origin and stays constant throughout its lifetime. The name can be any string value (including an empty string).</li> - <li> - <p>Current <a href="#gloss_version"><em>version</em></a>. When a database is first created, its version is the integer 1 if not specified otherwise. Each database can have only one version at any given time.</p> - </li> - </ul> - </dd> - <dt><a name="durable">durable</a></dt> - <dd> - <p>In Firefox, IndexedDB used to be <strong>durable</strong>, meaning that in a readwrite transaction {{domxref("IDBTransaction.oncomplete")}} was fired only when all data was guaranteed to have been flushed to disk.</p> - - <p>As of Firefox 40, IndexedDB transactions have relaxed durability guarantees to increase performance (see {{Bug("1112702")}}), which is the same behaviour as other IndexedDB-supporting browsers. In this case the {{Event("complete")}} event is fired after the OS has been told to write the data but potentially before that data has actually been flushed to disk. The event may thus be delivered quicker than before, however, there exists a small chance that the entire transaction will be lost if the OS crashes or there is a loss of system power before the data is flushed to disk. Since such catastrophic events are rare, most consumers should not need to concern themselves further.</p> - - <div class="note"> - <p><strong>Note</strong>: In Firefox, if you wish to ensure durability for some reason (e.g. you're storing critical data that cannot be recomputed later) you can force a transaction to flush to disk before delivering the <code>complete</code> event by creating a transaction using the experimental (non-standard) <code>readwriteflush</code> mode (see {{domxref("IDBDatabase.transaction")}}.) This is currently experimental, and can only be used if the <code>dom.indexedDB.experimental</code> pref is set to <code>true</code> in <code>about:config</code>.</p> - </div> - </dd> - <dt><a name="gloss_object_store">object store</a></dt> - <dd> - <p>The mechanism by which data is stored in the database. The object store persistently holds records, which are key-value pairs. Records within an object store are sorted according to the <em><a href="#gloss_key">keys</a></em> in an ascending order.</p> - - <p>Every object store must have a name that is unique within its database. The object store can optionally have a <em><a href="#gloss_keygenerator">key generator</a></em> and a <em><a href="#gloss_keypath">key path</a></em>. If the object store has a key path, it is using <em><a href="#gloss_inline_key">in-line keys</a></em>; otherwise, it is using <em><a href="#gloss_outofline_key">out-of-line keys</a></em>.</p> - - <p>For the reference documentation on object store, see <a href="../../../../en/IndexedDB/IDBObjectStore" rel="internal">IDBObjectStore</a> or <a href="../../../../en/IndexedDB/IDBObjectStoreSync" rel="internal">IDBObjectStoreSync</a>.</p> - </dd> - <dt><a name="gloss_version">version</a></dt> - <dd>When a database is first created, its version is the integer 1. Each database has one version at a time; a database can't exist in multiple versions at once. The only way to change the version is by opening it with a greater version than the current one. This will start a <a href="/en-US/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>transaction</em> and fire an <a href="/en-US/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> event. The only place where the schema of the database can be updated is inside the handler of that event.</dd> - <dd>Note: This definition describes the <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">most recent specification</a>, which is only implemented in up-to-date browsers. Old browsers implemented the now deprecated and removed <a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="/en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> method.</dd> - <dt><a name="gloss_database_connection">database connection</a></dt> - <dd>An operation created by opening a <em><a href="#gloss_database">database</a></em>. A given database can have multiple connections at the same time.</dd> - <dt><a name="gloss_transaction">transaction</a></dt> - <dd> - <p>An atomic set of data-access and data-modification operations on a particular database. It is how you interact with the data in a database. In fact, any reading or changing of data in the database must happen in a transaction.</p> - - <p>A database connection can have several active transaction associated with it at a time, so long as the writing transactions do not have overlapping <a href="#scope"><em>scopes</em></a>. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the <code>flyingMonkey</code> object store, you can start a second transaction with a scope of the <code>unicornCentaur</code> and <code>unicornPegasus</code> object stores. As for reading transactions, you can have several of them — even overlapping ones.</p> - - <p>Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.</p> - - <p>The three modes of transactions are: <code>readwrite</code>, <code>readonly</code>, and <code>versionchange</code>. The only way to create and delete object stores and indexes is by using a <a href="/en-US/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> transaction. To learn more about transaction types, see the reference article for <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a>.</p> - - <p>Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see <a href="../../../../en/IndexedDB/IDBTransaction" rel="internal">IDBTransaction</a>, which also has reference documentation. For the documentation on the synchronous API, see <a href="../../../../en/IndexedDB/IDBTransactionSync" rel="internal">IDBTransactionSync</a>.</p> - </dd> - <dt><a name="gloss_request">request</a></dt> - <dd>The operation by which reading and writing on a database is done. Every request represents one read or write operation.</dd> - <dt><a name="gloss_index">index</a></dt> - <dd> - <p>An index is a specialized object store for looking up records in another object store, called the <em>referenced object store</em>. The index is a persistent key-value storage where the value part of its records is the key part of a record in the referenced object store. The records in an index are automatically populated whenever records in the referenced object store are inserted, updated, or deleted. Each record in an index can point to only one record in its referenced object store, but several indexes can reference the same object store. When the object store changes, all indexes that refer to the object store are automatically updated.</p> - - <p>Alternatively, you can also look up records in an object store using the <a href="#gloss_key"> key</a><em>.</em></p> - - <p>To learn more on using indexes, see <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="en/IndexedDB/Using_IndexedDB#Using_an_index">Using IndexedDB</a>. For the reference documentation on index, see <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h3 id="key" name="key">Chave e valor</h3> - -<dl> - <dt><a name="gloss_key">key</a></dt> - <dd> - <p>A data value by which stored values are organized and retrieved in the object store. The object store can derive the key from one of three sources: a <em><a href="#gloss_keygenerator">key generator</a></em>, a <em><a href="#gloss_keypath">key path</a></em>, or an explicitly specified value. The key must be of a data type that has a number that is greater than the one before it. Each record in an object store must have a key that is unique within the same store, so you cannot have multiple records with the same key in a given object store.</p> - - <p>A key can be one of the following types: <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, float, a binary blob, and <a href="/en/JavaScript/Reference/Global_Objects/Array" title="en/JavaScript/Reference/Global Objects/Array">array</a>. For arrays, the key can range from an empty value to infinity. And you can include an array within an array.</p> - - <p>Alternatively, you can also look up records in an object store using the <em><a href="#gloss_index">index</a>.</em></p> - </dd> - <dt><a name="gloss_keygenerator">key generator</a></dt> - <dd>A mechanism for producing new keys in an ordered sequence. If an object store does not have a key generator, then the application must provide keys for records being stored. Generators are not shared between stores. This is more a browser implementation detail, because in web development, you don't really create or access key generators.</dd> - <dt><a name="gloss_inline_key">in-line key</a></dt> - <dd>A key that is stored as part of the stored value. It is found using a <em>key path</em>. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.</dd> - <dt><a name="gloss_outofline_key">out-of-line key</a></dt> - <dd>A key that is stored separately from the value being stored.</dd> - <dt><a name="gloss_keypath">key path</a></dt> - <dd>Defines where the browser should extract the key from in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods or an array containing any of those. It cannot include spaces.</dd> - <dt><a name="gloss_value">value</a></dt> - <dd> - <p>Each record has a value, which could include anything that can be expressed in JavaScript, including <a href="/en/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="en/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, <a href="/en/JavaScript/Reference/Global_Objects/Number" rel="internal" title="en/JavaScript/Reference/Global_Objects/Number">number</a>, <a href="/en/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">string</a>, <a href="/en/JavaScript/Reference/Global_Objects/Date" title="en/JavaScript/Reference/Global Objects/Date">date</a>, <a href="/en/JavaScript/Reference/Global_Objects/Object" title="en/JavaScript/Reference/Global Objects/Object">object</a>, <a href="/en/JavaScript/Reference/Global_Objects/Array" rel="internal" title="en/JavaScript/Reference/Global_Objects/Array">array</a>, <a href="/en/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="en/JavaScript/Reference/Global_Objects/RegExp">regexp</a>, <a href="/en/JavaScript/Reference/Global_Objects/undefined" title="en/JavaScript/Reference/Global_Objects/undefined">undefined</a>, and null.</p> - - <p>When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.</p> - - <p><a href="/en/DOM/Blob" title="en/DOM/Blob">Blobs</a> and files can be stored, cf. <a class="external" href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">specification</a>.</p> - </dd> -</dl> - -<h3 id="range" name="range">Intervalo e escopo</h3> - -<dl> - <dt id="scope"><a id="gloss_scope" name="gloss_scope">scope</a></dt> - <dd>The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.</dd> - <dt id="cursor"><a id="gloss_cursor" name="gloss_cursor">cursor</a></dt> - <dd>A mechanism for iterating over multiple records with a <em>key range</em>. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see <a href="../../../../en/IndexedDB/IDBCursor" rel="internal">IDBCursor</a> or <a href="../../../../en/IndexedDB/IDBCursorSync" rel="internal">IDBCursorSync</a>.</dd> - <dt id="key_range"><a id="gloss_keyrange" name="gloss_keyrange">key range</a></dt> - <dd> - <p>A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.</p> - - <p>For the reference documentation on key range, see <a href="../../../../en/IndexedDB/IDBKeyRange" rel="internal">IDBKeyRange</a>.</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">Limitações</h2> - -<p>IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:</p> - -<ul> - <li>Internationalized sorting. Not all languages sort strings in the same way, so internationalized sorting is not supported. While the database can't store data in a specific internationalized order, you can sort the data that you've read out of the database yourself. Note, however, that <a href="/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">locale-aware sorting</a> has been allowed with an experimental flag enabled (currently for Firefox only) since Firefox 43.</li> - <li>Synchronizing. The API is not designed to take care of synchronizing with a server-side database. You have to write code that synchronizes a client-side indexedDB database with a server-side database.</li> - <li>Full text searching. The API<span style="direction: ltr;"> does not have an</span><span style="direction: ltr;"> equivalent of the <code>LIKE</code> operator in SQL. </span></li> -</ul> - -<p>In addition, be aware that browsers can wipe out the database, such as in the following conditions:</p> - -<ul> - <li>The user requests a wipe out. Many browsers have settings that let users wipe all data stored for a given website, including cookies, bookmarks, stored passwords, and IndexedDB data.</li> - <li>The browser is in private browsing mode. Some browsers, have "private browsing" (Firefox) or "incognito" (Chrome) modes. At the end of the session, the browser wipes out the database.</li> - <li>The disk or quota limit has been reached.</li> - <li>The data is corrupt.</li> - <li>An incompatible change is made to the feature.</li> -</ul> - -<p>The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.</p> - -<h2 id="next" name="next">Próximos passos</h2> - -<p>With these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see <a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a>.</p> - -<h2 id="See_also">See also</h2> - -<p>Especificação</p> - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API Specification</span></a></li> -</ul> - -<p>Referência</p> - -<ul> - <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB API Reference</a></li> -</ul> - -<p>Tutoriais</p> - -<ul> - <li><a href="/en/IndexedDB/Using_IndexedDB" title="en/IndexedDB/IndexedDB primer">Using IndexedDB</a></li> - <li><a class="external" href="http://www.html5rocks.com/en/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a><span class="external">. </span><span class="external"> {{ Note("This example uses an old version of the spec and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li> -</ul> - -<p>Artigo relacionado</p> - -<ul> - <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html b/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html deleted file mode 100644 index a068a36455..0000000000 --- a/files/pt-br/orphaned/web/api/node/entendendo_o_uso_do_método_appendchild-javascript/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Entendendo o uso do método appendChild em javascript -slug: orphaned/Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript -original_slug: Web/API/Node/Entendendo_o_uso_do_método_AppendChild-javascript ---- -<div>{{ApiRef("DOM")}}</div> - -<h2 id="Summary" name="Summary">Resumo</h2> - -<p>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.</p> - -<h2 id="Syntax" name="Syntax">Sintaxe</h2> - -<pre class="syntaxbox">var filho = <em>elemento</em>.appendChild(<em>filho</em>);</pre> - -<ul> - <li><code>elemento</code> é o <a href="/pt-BR/docs/DOM/element" title="/en-US/docs/DOM/element">elemento</a> pai.</li> - <li><code>filho</code> é o nó a ser adicionado como filho de <code>elemento</code>. Também é devolvido.</li> -</ul> - -<h2 id="Descrição">Descrição</h2> - -<p>O método <code>appendChild</code> devolve uma referência ao nó adicionado.</p> - -<h2 id="Example" name="Example">Exemplo</h2> - -<pre class="brush:js">// Cria um novo elemento de parágrafo e adiciona-o ao final do documento -var p = document.createElement("p"); -document.body.appendChild(p);</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>Se <code>filho</code> é uma referência a um nó existente no documento, <code>appendChild</code> 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ó).</p> - -<p>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, <em>só então</em>, ser adicionado na nova posição.</p> - -<p>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 <code>cloneNode</code> <strong>não </strong>serão mantidas sincronizadas automaticamente)</p> - -<p>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")}}.</p> - -<p><code>appendChild()</code> é um dos métodos fundamentais da programação para a web usando o DOM. O método <code>appendChild()</code> 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.</p> - -<h2 id="Specification" name="Specification">Especificação</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107" title="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-184E7107">DOM Level 3 Core: appendChild</a></li> -</ul> - -<h2 id="See_also" name="See_also">Ver também</h2> - -<ul> - <li>{{domxref("Node.removeChild")}}</li> - <li>{{domxref("Node.replaceChild")}}</li> - <li>{{domxref("Node.insertBefore")}}</li> - <li>{{domxref("Node.hasChildNodes")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/api/parentnode/children/index.html b/files/pt-br/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 64c0f40d68..0000000000 --- a/files/pt-br/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<p>{{ APIRef("DOM") }}</p> - -<p><code><strong>Node.children</strong></code> é uma propriedade exclusivamente de leitura que retorna uma coleção {{domxref("HTMLCollection")}} dos elementos filhos do <code>nó</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre>var <em>elList</em> = elementNodeReference.children; </pre> - -<p><code><var>elList</var></code> é uma {{ domxref("HTMLCollection") }}, que é uma lista ordenada de uma coleção de elementos do DOM que são filhos do <code>elementNodeReference</code>. Se não existir nenhum elemento filho, o <code>elList</code> não terá elemento algum sua propriedade <code>length</code> será 0.</p> - -<h2 id="Exemplo">Exemplo</h2> - -<pre class="brush: js">// pEl é uma referência à um elemento <p> -var elementChildren = pEl.children; -for (var i = 0; i < elementChildren.length; i++) { - console.log(elementChildren[i].tagName); - // NOTE: elementChildren é uma lista viva, adicionar ou remover filhos de pEl - // mudará instantaneamente o valor retornado por elementChildren -} -</pre> - -<h2 id="Especificação">Especificação</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Definição inicial.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Edge</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>38.0</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>29.0</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Support on {{domxref("SVGElement")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 e 8 suportaram esse método, mas erroneamente incluiam nós de {{domxref("Comment")}}.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>As interfaces de {{domxref("ParentNode")}} e {{domxref("ChildNode")}}.</li> - <li> - <div class="syntaxbox">Tipos de objetos implementando esta interface: {{domxref("Document")}}, {{domxref("Element")}}, e {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/pt-br/orphaned/web/api/parentnode/index.html b/files/pt-br/orphaned/web/api/parentnode/index.html deleted file mode 100644 index fd327f7adf..0000000000 --- a/files/pt-br/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - NeedsTranslation - - TopicStub -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p>The <code><strong>ParentNode</strong></code> interface contains methods that are particular to {{domxref("Node")}} objects that can have children.</p> - -<p><code>ParentNode</code> is a raw interface and no object of this type can be created; it is implemented by {{domxref("Element")}}, {{domxref("Document")}}, and {{domxref("DocumentFragment")}} objects.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{ domxref("ParentNode.children") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns a live {{domxref("HTMLCollection")}} containing all objects of type {{domxref("Element")}} that are children of this <code>ParentNode</code>.</dd> - <dt>{{ domxref("ParentNode.firstElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the first child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("Element")}} that is the last child of this <code>ParentNode</code>, or <code>null</code> if there is none.</dd> - <dt>{{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}</dt> - <dd>Returns an <code>unsigned long</code> giving the amount of children that the object has.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{ domxref("ParentNode.append()") }} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after the last child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> - <dt>{{ domxref("ParentNode.prepend()") }} {{experimental_inline}}</dt> - <dd>Inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child of the <code>ParentNode</code>. {{domxref("DOMString")}} objects are inserted as equivalent {{domxref("Text")}} nodes.</dd> -</dl> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</code>. The <code>firstElementChild</code>, <code>lastElementChild</code>, and <code>childElementCount</code> properties are now defined on the latter.<br> - The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.<br> - Added the <code>children</code> property.<br> - Added the <code>append()</code> and <code>prepend()</code> methods.</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9.0 [1]</td> - <td>10.0</td> - <td>4.0</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatChrome(29.0)}}</td> - <td>{{CompatGeckoDesktop(25)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoDesktop(49)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatOpera(39)}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Mobile</th> - </tr> - <tr> - <td>Basic support (on {{domxref("Element")}})</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.9.1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(25)}}</td> - <td>{{CompatNo}}</td> - <td>16.0</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>append()</code> and <code>prepend()</code> {{experimental_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - <td>{{CompatGeckoMobile(49)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatOperaMobile(39)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(54.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer 6, 7 and 8 supported it, but erroneously returns {{domxref("Comment")}} nodes as part of the results.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("ChildNode")}} pure interface.</li> - <li> - <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> - </li> -</ul> diff --git a/files/pt-br/orphaned/web/api/parentnode/queryselector/index.html b/files/pt-br/orphaned/web/api/parentnode/queryselector/index.html deleted file mode 100644 index db43662895..0000000000 --- a/files/pt-br/orphaned/web/api/parentnode/queryselector/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: ParentNode.querySelector() -slug: orphaned/Web/API/ParentNode/querySelector -tags: - - PrecisaDeExemplo - - Projeto - - Referencia - - Seletores - - metodo -translation_of: Web/API/ParentNode/querySelector -original_slug: Web/API/ParentNode/querySelector ---- -<p>{{APIRef("DOM")}}{{Draft}}</p> - -<p>O {{DOMxRef("ParentNode")}} mixin define o <code><strong>querySelector()</strong></code> método como retornar um {{DOMxRef("Element")}} representando o primeiro elemento que corresponde ao grupo especificado de seletores que são descendentes do objeto no qual o método foi chamado.</p> - -<p>Se você precisar de todos os elementos correspondentes à lista de seletores, use{{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} instead.</p> - -<div class="blockIndicator note"> -<p>Nota: Este método é implementado como {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} e {{DOMxRef("Element.querySelector()")}}.</p> -</div> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>); -</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>Um {{DOMxRef("DOMString")}} contendo um ou mais seletores para comparar. Essa sequência deve ser um válido <a href="/en-US/docs/Web/CSS/CSS_Selectors">lista de seletores compostos</a> suportado pelo navegador; se não for, um <code>SyntaxError</code> exceção é lançada. Veja <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM usando seletores</a> para obter mais informações sobre o uso de seletores para identificar elementos. Vários seletores podem ser especificados, separando-os usando vírgulas.</dd> -</dl> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Os caracteres que não fazem parte da sintaxe CSS padrão devem ser escapados usando um caractere de barra invertida. Como o JavaScript também usa escape de backspace, deve-se tomar cuidado especial ao escrever literais de string usando esses caracteres. Veja {{anch("Escaping special characters")}} Para maiores informações.</p> -</div> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>O primeiro {{DOMxRef("Element")}} que corresponda a pelo menos um dos seletores ou <code>null</code> se esse elemento não for encontrado.</p> - -<div class="blockIndicator note"> -<p><strong>Nota:</strong> Se o especificado <code>selectors</code> inclua um <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-elemento</a>, o valor retornado é sempre <code>null</code>.</p> -</div> - -<h3 id="Exceções">Exceções</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>A sintaxe do especificado <code>selectors</code> string não é válida.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Padrão de vida</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>Sem alteração</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>Definição inicial</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>Definição original</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("api.ParentNode.querySelector")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Localizando elementos DOM usando seletores</a></li> - <li><a href="/en-US/docs/Code_snippets/QuerySelector">Snippets de código para <code>querySelector()</code></a></li> - <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Seletores de atributos</a> no guia CSS</li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Seletores de atributos </a>na MDN Área de Aprendizagem</li> - <li>Seu método está disponível como {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/api/window/ondevicelight/index.html b/files/pt-br/orphaned/web/api/window/ondevicelight/index.html deleted file mode 100644 index 6e8733e6cb..0000000000 --- a/files/pt-br/orphaned/web/api/window/ondevicelight/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Window.ondevicelight -slug: orphaned/Web/API/Window/ondevicelight -translation_of: Web/API/Window/ondevicelight -original_slug: Web/API/Window/ondevicelight ---- -<div>{{APIRef}}</div> - -<p>Especifica um event listener para receber eventos {{event("devicelight")}}. Esses eventos ocorrem quando um dispositivo com sensores de nível de luz detecta uma mudança na intensidade do nível de luz do ambiente.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox">window.ondevicelight = <var>funcRef</var></pre> - -<p>Onde <code><em>funcRef</em></code> é a função a ser chamada quando o evento {{event("devicelight")}} ocorre. Estes eventos são do tipo {{domxref("DeviceLightEvent")}}.</p> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specificação</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('AmbientLight', '#event-handlers', 'Ambient Light Events')}}</td> - <td>{{Spec2('AmbientLight')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_Navegadores">Compatibilidade com os Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("22.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("15.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] The {{event("devicelight")}} event is implemented and by preference enabled by default in Firefox Mobile for Android (15.0) and in Firefox OS (B2G). Starting with Gecko 22.0 {{geckoRelease("22.0")}}, a desktop implementation for Mac OS X is also available. Support for Windows 7 is in progress (see {{bug(754199)}}).</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{event("devicelight")}}</li> - <li>{{domxref("DeviceLightEvent")}}</li> - <li><a href="/en-US/docs/Web/API/DeviceLightEvent/Using_light_events">Using Light Events</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/css/image-set()/index.html b/files/pt-br/orphaned/web/css/image-set()/index.html deleted file mode 100644 index b85425c4f1..0000000000 --- a/files/pt-br/orphaned/web/css/image-set()/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: image-set() -slug: orphaned/Web/CSS/image-set() -translation_of: Web/CSS/image-set() -original_slug: Web/CSS/image-set() ---- -<div>{{cssref}}</div> - -<p class="summary">A notação de função CSS <code>image-set()</code> é um método de deixar o navegador escolher a imagem CSS mais apropriada de um dado conjunto, principalmente para telas de alta densidade de pixels.</p> - -<p>Resolução e largura de banda diferem por dispositivo e acesso à rede. A função <code>image-set()</code> oferece a resolução de imagem mais apropriada para o dispositivo de um usuário, fornecendo um conjunto de opções de imagem — cada uma com uma declaração de resolução associada — da qual o navegador escolhe o mais apropriado para o dispositivo e as configurações. A resolução pode ser usada como um proxy para o tamanho do arquivo — um agente de usuário em uma conexão móvel lenta, com uma tela de alta resolução, pode preferir receber imagens de baixa resolução em vez de aguardar uma imagem de alta resolução carregar.</p> - -<p><code>image-set()</code> permite que o autor forneça opções em vez de determinar o que cada usuário individual precisa.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate">image-set() = image-set( <image-set-option># ) -where <image-set-option> = [ <image> | <string> ] <resolution> and - <string> is an <url> -</pre> - -<h3 id="Valores">Valores</h3> - -<p>Mais comumente, você verá um valor de <code>url()</code> <code><string></code>, mas o <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> pode ser qualquer tipo de imagem, exceto para um conjunto de imagens. A função <code>image-set()</code> não pode ser aninhada dentro de outra função <code>image-set()</code>.</p> - -<p>unidades <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> incluem <code>x </code>ou <code>ddpx,</code> para pontos por unidade de pixel, <code>dpi</code>, para pontos por polegada, e <code>dpcm</code> para pontos per centímetro. Toda imagem dentro de <code>image-set()</code> deve ter uma única resolução.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<pre class="brush: css notranslate">background-image: image-set( "cat.png" 1x, - "cat-2x.png" 2x);</pre> - -<p>Este exemplo mostra como usar <code><a class="css" href="https://drafts.csswg.org/css-images-4/#funcdef-image-set" id="ref-for-funcdef-image-set⑨">image-set()</a></code> para fornecer duas opções alternativas {{cssxref("background-image")}}, escolhidas dependendo da resolução necessária: uma versão normal e uma versão de alta-resolução.</p> - -<h2 id="Preocupações_de_Acessibilidade">Preocupações de Acessibilidade</h2> - -<p>Tecnologia assistiva não pode analisar imagens de fundo. Se a imagem contiver informações críticas para entender a finalidade geral da página, é melhor descrevê-la semanticamente no documento.</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> - <li><a class="external external-icon" href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html" rel="noopener">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th>Especificação</th> - <th>Status</th> - <th>Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#image-set-notation', 'The image-set() notation')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("css.types.image.image-set")}}</p> - -<h2 id="See_also" name="See_also">Veja também</h2> - -<ul> - <li>{{cssxref("image")}}</li> - <li>{{cssxref("_image", "image()")}}</li> - <li>{{cssxref("element")}}</li> - <li>{{cssxref("url")}}</li> - <li>{{cssxref("<gradient>")}}</li> - <li>{{cssxref("image-set","image-set()")}}</li> - <li>{{cssxref("cross-fade")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/css/radial-gradient()/index.html b/files/pt-br/orphaned/web/css/radial-gradient()/index.html deleted file mode 100644 index 094be5d107..0000000000 --- a/files/pt-br/orphaned/web/css/radial-gradient()/index.html +++ /dev/null @@ -1,210 +0,0 @@ ---- -title: radial-gradient() -slug: orphaned/Web/CSS/radial-gradient() -translation_of: Web/CSS/radial-gradient() -original_slug: Web/CSS/radial-gradient() ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumo">Resumo</h2> - -<p>A função do CSS <code>radial-gradient()</code> cria uma {{cssxref("<image>")}} que representa um gradiente de cores irradiando de uma origem, o <em>centro</em> do gradiente. O resultado dessa função é um objeto do CSS do tipo {{cssxref("<gradient>")}}.</p> - -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Gradientes radiais são definidos pelo seu <em>centro</em>, o contorno e a posição da <em>forma de fechamento (ending shape)</em> e as <em>paradas de cor (color stops)</em>. O gradiente radial consiste de formas concêntricas uniformemente escaladas partindo do centro até sua forma de fechamento, indo potencialmente além, com a mesma forma da forma de fechamento. As paradas de cor são posicionadas num <em>raio de gradiente virtual</em> saindo do centro horizontalmente para a direita. O posicionamento das porcentagens das paradas de cor são relativas à interseção entre a forma de fechamento e esse raio de gradiente representando <code>100%</code>. Cada forma é monocromática e a cor, definida pela cor no raio de gradiente que intersecta.</p> - -<p>Formas de fechamento podem ser apenas círculo <code>(circle)</code> ou elipse <code>(ellipse)</code>.</p> - -<p>Como qualquer outro gradiente, um gradiente radial do CSS não é uma <a href="color_value" rel="custom"><code><cor></code></a> do CSS, mas uma imagem <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">sem dimensões intrínsecas</a>, i. e. uma imagem sem tamanho natural ou preferencial, tampouco proporção. Seu tamanho concreto será idêntico ao tamanho do elemento ao qual for aplicado.</p> - -<p>A função <code>radial-gradient</code> não permite criar gradientes repetitivos. Para esse efeito, use a função do CSS {{ Cssxref("repeating-radial-gradient") }}.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre style=""><code>Gramática formal: radial-gradient( [ circle || <a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length"><length></a> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , -| [ ellipse || [<a href="/en-US/docs/CSS/length" title="/en-US/docs/CSS/length"><length></a> | <a href="/en-US/docs/CSS/percentage" title="/en-US/docs/CSS/percentage"><percentage></a> ]{2}] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , -| [ [ circle | ellipse ] || <extent-keyword> ] [ at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> ]? , -| at <a href="/en-US/CSS/position_value" title="/en-US/CSS/position_value"><position></a> , -<color-stop> [ , <color-stop> ]+ ) -</code></pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code><position></code></dt> - <dd>Uma {{cssxref("<position>")}}, interpretada da mesma forma que {{Cssxref("background-position")}} ou {{Cssxref("transform-origin")}}. Se omitida, assume o padrão <code>center</code>.</dd> - <dt><code><shape></code></dt> - <dd>A forma do gradiente. Esse valor é <code>circle</code> (indicando que a forma do gradiente é um círculo com raio constante) ou <code>ellipse</code> (indicando que a forma é uma elipse com os eixos alinhados ao elemento). O valor padrão é <code>ellipse</code>.</dd> - <dt><code><size></code></dt> - <dd>O tamanho do gradiente. Essa valor é uma das {{anch("Restrições de tamanho")}} listada abaixo.</dd> - <dt><code><color-stop></code></dt> - <dd>Representando uma cor fixa num determinado ponto, esse valor é composto por um valor {{cssxref("<color>")}}, seguido de uma posição de parada opcional (uma {{cssxref("<percentage>")}} ou uma {{cssxref("<length>")}} referente ao raio de gradiente virtual). Uma porcentagem de <code>0%</code>, ou um tamanho de <code>0</code> representa o centro do gradiente e o valor <code>100%</code> a interseção da forma de fechamento com o raio de gradiente virtual. Valores de porcentagem intermediários são posicionados linearmente no raio de gradiente.</dd> - <dt><code><extent-keyword></code></dt> - <dd>Palavras-chave descrevendo quão grande a forma de fechamento deve ser. Os possíveis valores são:</dd> - <dd> - <table class="standard-table"> - <tbody> - <tr> - <th>Constante</th> - <th>Descrição</th> - </tr> - <tr> - <td><code>closest-side</code></td> - <td>A forma de fechamento do gradiente encontra o lado do elemento mais próximo ao seu centro (para círculos) ou encontra ambos os lados vertical e horizontal mais próximos ao centro (para elipses).</td> - </tr> - <tr> - <td><code>closest-corner</code></td> - <td>A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais próximo ao seu centro.</td> - </tr> - <tr> - <td><code>farthest-side</code></td> - <td>Similar ao closest-side, mas a forma de fechamento fica com o tamanho necessário para encontrar o lado do elemento mais distante do centro do gradiente (ou lados vertical e horizontal).</td> - </tr> - <tr> - <td><code>farthest-corner</code></td> - <td>A forma de fechamento do gradiente tem o tamanho exato para encontrar o canto da caixa mais distante de seu centro.</td> - </tr> - </tbody> - </table> - Rascunhos preliminares incluiam outras palavras-chave (<code>cover</code> e <code>contain</code>) como sinônimos dos valores do padrão <span class="st"><code>farthest-corner</code></span> e <code>closest-side</code> respectivamente. Use somente os valores do padrão, uma vez que algumas implementações podem já ter removido suporte a esses valores mais antigos.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<div style="">ellipse farthest-corner</div> - -<pre class="notranslate">background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%); -</pre> - -<div style="">470px 47px</div> - -<pre class="notranslate">background-image: radial-gradient(ellipse farthest-corner at 470px 47px , #FFFF80 20%, rgba(204, 153, 153, 0.4) 30%, #E6E6FF 60%); -</pre> - -<div style="">farthest-corner</div> - -<pre class="notranslate">background-image: radial-gradient(farthest-corner at 45px 45px , #FF0000 0%, #0000FF 100%);</pre> - -<div style="">16px radius fuzzy circle</div> - -<pre class="notranslate">background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px); -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentários</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Images', '#radial-gradients', 'radial-gradients()') }}</td> - <td>{{ Spec2('CSS3 Images') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico (suporte à função <code>radial-gradient()</code>, mas não necessariamente com a sintaxe final)</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoDesktop("16") }}</td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> - <td>11.60{{ property_prefix("-o") }}</td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxe legada do webkit</a> {{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.0{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - </tr> - <tr> - <td>Sintaxe <code>at</code> (sintaxe do padrão final)</td> - <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoDesktop("16") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.0</td> - <td>11.60{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup><br> - Presto 2.12 will remove the prefix.</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Funcionalidade</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico (suporte à função radial-gradient(), mas não necessariamente com a sintaxe final)</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoMobile("16") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Sintaxe legada do webkit</a> {{ non-standard_inline() }}</td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Sintaxe <code>at</code> (sintaxe do padrão final)</td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoMobile("10") }}{{ property_prefix("-moz") }} <sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoMobile("16") }}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 a 9.0 suportam a funcionalidade proprietária <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p><sup><a name="bc2">[2]</a></sup> WebKit desde 528 suporta a função legada <a class="external" href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Veja também o <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15" title="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">suporte atual</a> para gradientes radiais.</p> - -<p><sup><a name="bc3">[3]</a></sup> Firefox 3.6 e Webkit implementaram uma sintaxe anterior, prefixada.</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("repeating-radial-gradient") }}, {{ cssxref("linear-gradient") }}</li> - <li>Proposta original do WebKit: <a class="external" href="http://webkit.org/blog/175/introducing-css-gradients/" title="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> - <li>Nova implementação do WebKit: <a class="external" href="http://webkit.org/blog/1424/css3-gradients/" title="http://webkit.org/blog/1424/css3-gradients/">http://webkit.org/blog/1424/css3-gradients/</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html b/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html deleted file mode 100644 index 259e9fe941..0000000000 --- a/files/pt-br/orphaned/web/css/repeating-linear-gradient()/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: repeating-linear-gradient -slug: orphaned/Web/CSS/repeating-linear-gradient() -translation_of: Web/CSS/repeating-linear-gradient() -original_slug: Web/CSS/repeating-linear-gradient() ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Summary">Summary</h2> - -<p>A função CSS <code>repeating-linear-gradient</code> cria uma {{cssxref("<image>")}} de repetidos gradientes. Isso funciona da mesma forma, e recebe os mesmos argumentos dos gradientes lineares básicos, como descrito em {{ cssxref("linear-gradient") }}, mas ele automaticamente repete as paradas das cores infinitamente em ambas as direções, com suas posições trocadas por múltiplos da diferença entre a posição da última parada de cor e a posição da primeira.</p> - -<p>The consequence is that an end color of a gradient always coincide with a start color. If both are not identical, this will result in a sharp transition.</p> - -<p>Like any other gradient, a repeating CSS linear gradient is not a CSS <span class="lang lang-en"><code><a href="color_value" rel="custom"><color></a></code> </span> but an image with <a href="/en/CSS/image#no_intrinsic" title="en/CSS/image#no_intrinsic">no intrinsic dimensions</a>; that is, it has no natural or preferred size, nor ratio. Its concrete size will match the one of the element it applies to.</p> - -<p>Mozilla currently only supports CSS gradients as values of the {{ Cssxref("background-image") }} property, as well as within the shorthand {{ Cssxref("background") }}. You specify a gradient value instead of an image URL.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="twopartsyntaxbox notranslate">Formal grammar: repeating-linear-gradient( [ <a href="/en-US/CSS/angle" title="angle"><angle></a> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ ) - \---------------------------------/ \----------------------------/ - Definition of the gradient line List of color stops - - where <code><side-or-corner> = [left | right] || [top | bottom]</code> - and <code><color-stop> = <color> [ <percentage> | <length> ]?</code> -</pre> - -<pre class="notranslate">repeating-linear-gradient( 45deg, blue, red ); /* A repeating gradient on 45deg axe starting blue and finishing red */ -repeating-linear-gradient( to left top, blue, red); /* A repeating gradient going from the bottom right to the top left - starting blue and finishing red */ - -repeating-linear-gradient( 0deg, blue, green 40%, red ); /* A repeating gradient going from the bottom to top, starting blue, - being green after 40% and finishing red */ -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code><side-or-corner></code></dt> - <dd>Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, <code>left</code> or <code>right</code>, and the second one the vertical side, <code>top</code> or <code>bottom</code>. The order is not relevant and each of the keyword is optional.<br> - The values <code>to top</code>, <code>to bottom</code>, <code>to left</code> and <code>to right</code> are translated into the angles <code>0deg</code>, <code>180deg</code>, <code>270deg</code>, <code>90deg</code> respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <code><color-stop></code> will exactly apply to the corner point. This is sometimes called the "<em>magic corner</em>" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.</dd> - <dt><code><angle></code></dt> - <dd>An angle of direction for the gradient. See {{ cssxref("<angle>") }}.</dd> - <dt><code><color-stop></code></dt> - <dd>This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage between 0% and 100% or a {{cssxref("<length>")}} along the gradient axis).<br> - Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: css notranslate">background: repeating-linear-gradient(to bottom right, red, red 5px, white 5px, white 10px); -</pre> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Images', '#repeating-gradients', 'repeating-linear-gradient()') }}</td> - <td>{{ Spec2('CSS3 Images') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }})</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}<sup><a href="#bc3">[3]</a></sup><br> - {{ CompatGeckoDesktop("16") }}</td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - <td>10.0 <sup><a href="#bc1">[1]</a></sup></td> - <td>11.10{{ property_prefix("-o") }} <sup><a href="#bc3">[3]</a></sup></td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup><sup><a href="#bc3">[3]</a></sup></td> - </tr> - <tr> - <td>On any properties that accept {{cssxref("<image>")}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - <tr> - <td><a class="external" href="http://www.webkit.org/blog/175/introducing-css-gradients/">Legacy webkit syntax</a>{{ non-standard_inline() }}</td> - <td>{{ CompatNo() }}</td> - <td>3{{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>4.0{{ property_prefix("-webkit") }}<sup><a href="#bc2">[2]</a></sup></td> - </tr> - <tr> - <td>Legacy <em>from </em>syntax (without <code>to</code>){{ non-standard_inline() }}</td> - <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} <sup><a href="#bc4">[4]</a></sup><br> - Removed in {{ CompatGeckoDesktop("16") }}</td> - <td>10.0 (534.16){{ property_prefix("-webkit") }} <sup><a href="#bc2">[2]</a></sup></td> - <td>10.0</td> - <td>11.10{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup></td> - <td>5.1{{ property_prefix("-webkit") }}<sup><a href="#bc2%3E">[2]</a></sup></td> - </tr> - <tr> - <td><code>to </code>syntax</td> - <td>{{ CompatGeckoDesktop("10") }}{{ property_prefix("-moz") }}<sup><a href="#bc4">[4]</a></sup><br> - {{ CompatGeckoDesktop("16") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.0</td> - <td>11.60{{ property_prefix("-o") }}<sup><a href="#bc4">[4]</a></sup><br> - Presto 2.12 will remove the prefix.</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> - -<p><sup><a name="bc1">[1]</a></sup> Internet Explorer 5.5 through 9.0 supports proprietary <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code> filter</a>.</p> - -<p><sup><a name="bc2">[2]</a></sup> WebKit since 528 supports the legacy <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html"><code>-webkit-gradient(linear,…)</code> function</a>. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in <code>-webkit-linear-gradient()</code>. You can achieve the same effect by offsetting the color stops.</p> - -<p><sup><a name="bc3">[3]</a></sup> Gecko, Opera & Webkit considers {{cssxref("<angle>")}} to start to the right, instead of the top. I.e. it considered an angle of to start to the right, instead of the top. I.e. it considered an angle of <code>0deg</code> as a direction indicator pointing to the right. This is different from the latest specification where an angle of <code>0deg</code> as a direction indicator points to the top.</p> - -<p><sup><a name="bc4">[4]</a></sup> Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the <code>to</code> keyword, and effectively considered as a <em>from</em> position. The <code>to</code> syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:</p> - -<pre class="notranslate">-moz-repeating-linear-gradient(to top left, blue, red);</pre> - -<p>is the same as:</p> - -<pre class="notranslate">-moz-repeating-linear-gradient(bottom right, blue, red);</pre> - -<p>The legacy syntax, without <code>to</code>, is planned to go away when the prefix is removed.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/CSS/Using_CSS_gradients" title="en/Using gradients">Using CSS gradients</a>, {{ cssxref("radial-gradient", "radial-gradient()") }}, {{ cssxref("linear-gradient", "linear-gradient()") }}, {{ cssxref("repeating-radial-gradient", "repeating-radial-gradient()") }};</li> - <li>Some properties where it can be used: {{ cssxref("background-image") }}, {{ cssxref("background") }}.</li> -</ul> diff --git a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html b/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html deleted file mode 100644 index ac24931ebe..0000000000 --- a/files/pt-br/orphaned/web/guide/css/css_media_queries_(consultas_de_mídia_em_css)/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Usando CSS media queries (consultas de mídia em CSS) -slug: orphaned/Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) -tags: - - CSS - - Guía - - Iniciante - - media query -original_slug: Web/Guide/CSS/CSS_media_queries_(consultas_de_mídia_em_CSS) ---- -<p><span class="seoSummary">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.</span></p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<p>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.</p> - -<p>Fonte:</p> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries</a></p> - -<p> </p> diff --git a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html b/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html deleted file mode 100644 index ec531e58e0..0000000000 --- a/files/pt-br/orphaned/web/guide/events/creating_and_triggering_events/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Criando e disparando eventos -slug: orphaned/Web/Guide/Events/Creating_and_triggering_events -tags: - - Avançado - - DOM - - Guía - - JavaScript - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events -original_slug: Web/Guide/Events/Creating_and_triggering_events ---- -<p>Este artigo demonstra como criar e disparar eventos DOM. Tais eventos são comumente chamados <strong>eventos sintéticos</strong>, oposto aos eventos disparados pelo próprio navegador.</p> - -<h2 id="Criando_eventos_customizados">Criando eventos customizados</h2> - -<p>Eventos podem ser criados com o construtor <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> da seguinte forma:</p> - -<pre class="brush: js">var event = new Event('build'); - -// Ouve pelo evento. -elem.addEventListener('build', function (e) { ... }, false); - -// Dispara o evento. -elem.dispatchEvent(event);</pre> - -<p>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 href="#The_old-fashioned_way" title="#The_old-fashioned_way">a forma antiga</a> abaixo.</p> - -<h3 id="Adicionando_dados_customizados_–_CustomEvent()">Adicionando dados customizados – CustomEvent()</h3> - -<p>Para adicionar mais dados ao objeto do evento, usa-se a interface <a href="/en-US/docs/Web/API/CustomEvent">CustomEvent</a>, a qual possui a propriedade <u><strong>detail</strong></u> que pode ser utilizada para fornecer dados customizados.</p> - -<p><span style="line-height: 1.5;">Por exemplo, o evento pode ser criado da seguinte forma:</span></p> - -<pre class="brush: js">var event = new CustomEvent('build', { 'detail': elem.dataset.time });</pre> - -<p>Isso permitirá que você acesse dados customizados no listener do evento:</p> - -<pre class="brush: js">function eventHandler(e) { - console.log('The time is: ' + e.detail); -} -</pre> - -<h3 id="A_forma_antiga">A forma antiga</h3> - -<p>A forma antiga de criar eventos possui uma abordagem mais verbosa, tendo APIs inspiradas em Java. Abaixo temos um exemplo:</p> - -<pre class="brush: js">// Cria o evento. -var event = <a href="/en-US/docs/Web/API/Document/createEvent">document.createEvent</a>('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); - -</pre> - -<h2 id="Disparando_eventos_nativos">Disparando eventos nativos</h2> - -<p>Este exemplo mostra a simulação de um clique (isto é, gera um um clique de forma programatica) sobre um checkbox usando métodos DOM. <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">Veja o exemplo em ação.</a></p> - -<pre class="brush: js">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"); - } -}</pre> - -<h2 id="Browser_compatibility" name="Browser_compatibility" style="line-height: 30px; font-size: 2.14285714285714rem;">Compatibilidade com navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Chrome</th> - <th style="line-height: 16px;">Firefox (Gecko)</th> - <th style="line-height: 16px;">Edge</th> - <th style="line-height: 16px;">Internet Explorer</th> - <th style="line-height: 16px;">Opera</th> - <th style="line-height: 16px;">Safari (WebKit)</th> - </tr> - <tr> - <td><code>construtor Event()</code></td> - <td>15</td> - <td>11</td> - <td>{{CompatVersionUnknown}}</td> - <td>11</td> - <td>11.60</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th style="line-height: 16px;">Feature</th> - <th style="line-height: 16px;">Android</th> - <th style="line-height: 16px;">Firefox Mobile (Gecko)</th> - <th style="line-height: 16px;">IE Mobile</th> - <th style="line-height: 16px;">Opera Mobile</th> - <th style="line-height: 16px;">Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{domxref("document.createEvent()")}}</li> - <li>{{domxref("Event.initEvent()")}}</li> - <li>{{domxref("EventTarget.dispatchEvent()")}}</li> - <li>{{domxref("EventTarget.addEventListener()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/guide/events/event_handlers/index.html b/files/pt-br/orphaned/web/guide/events/event_handlers/index.html deleted file mode 100644 index 34fdcb15f8..0000000000 --- a/files/pt-br/orphaned/web/guide/events/event_handlers/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: DOM onevent handlers -slug: orphaned/Web/Guide/Events/Event_handlers -translation_of: Web/Guide/Events/Event_handlers -original_slug: Web/Guide/Events/Event_handlers ---- -<p>A plataforma web oferece várias maneiras de trabalhar com o <span class="seoSummary"><a href="/en-US/docs/Web/Events">DOM events</a>. </span>Duas abordagens comuns são:<span class="seoSummary"> {{domxref("EventTarget.addEventListener", "addEventListener()")}} e o específico <code>on<em>event</em></code> que dispara um evento.</span> Este artigo se concentra em como o último funciona.</p> - -<h2 id="Registering_onevent_handlers">Registering onevent handlers</h2> - -<p>The <strong><code>on<em>event</em></code></strong> handlers are properties on certain DOM elements to manage how that element reacts to events. Elements can be interactive (links, buttons, images, forms, and so forth) or non-interactive (such as the base <code><body></code> element). Events are actions like:</p> - -<ul> - <li>Being clicked</li> - <li>Detecting pressed keys</li> - <li>Getting focus</li> -</ul> - -<p>The on-event handler is usually named with the event it reacts to, like <code>on<em>click</em></code>, <code>on<em>keypress</em></code>, <code>on<em>focus</em></code>, etc.</p> - -<p>You can specify an <code>on<em><…></em></code> event handler for a particular event (such as {{event("click")}}) for a given object in different ways:</p> - -<ul> - <li>Adding an HTML {{Glossary("attribute")}} named <code>on<em><eventtype></em></code>:<br> - <code><button <strong>onclick="handleClick()"</strong>></code>,</li> - <li>Or by setting the corresponding {{Glossary("property/JavaScript", "property")}} from JavaScript:<br> - <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li> -</ul> - -<p>An <code>on<em>event</em></code> event handler property serves as a placeholder of sorts, to which a single event handler can be assigned. In order to allow multiple handlers to be installed for the same event on a given object, you can call its {{domxref("EventTarget.addEventListener", "addEventListener()")}} method, which manages a list of handlers for the given event on the object. A handler can then be removed from the object by calling its {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} function.</p> - -<p>When an event occurs that applies to an element, each of its event handlers is called to allow them to handle the event, one after another. You don't need to call them yourself, although you can do so in many cases to easily simulate an event taking place. For example, given a button object <code>myButton</code>, you can do <code>myButton.onclick(myEventObject)</code> to call the event handler directly. If the event handler doesn't access any data form the event object, you can leave out the event when calling <code>onclick()</code>.</p> - -<p>This continues until every handler has been called, unless one of the event handlers explicitly halts the processing of the event by calling {{domxref("Event.stopPropagation", "stopPropagation()")}} on the event object itself.</p> - -<h3 id="Non-element_objects">Non-element objects</h3> - -<p>Event handlers can also be set with properties on non-element objects that generate events, like {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others. For example, for the <code>progress</code> event on instances of <code>XMLHttpRequest</code>:</p> - -<pre class="brush: js notranslate">const xhr = new XMLHttpRequest(); -xhr.onprogress = function() { … };</pre> - -<h2 id="HTML_onevent_attributes">HTML onevent attributes</h2> - -<p>HTML elements have attributes named <code>on<em>event</em></code> which can be used to register a handler for an event directly within the HTML code. When the element is built from the HTML, the value of its <code>on<em>event</em></code> attributes are copied to the DOM object that represents the element, so that accessing the attributes' values using JavaScript will get the value set in the HTML.</p> - -<p>Further changes to the HTML attribute value can be done via the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute"><code>setAttribute</code> </a>method; Making changes to the JavaScript property will have no effect.</p> - -<h3 id="HTML">HTML</h3> - -<p>Given this HTML document:</p> - -<pre class="brush: html notranslate"><p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on - <a onclick="log('Click!')">these three words</a>. -</p> - -<div></div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Then this JavaScript demonstrates that the value of the HTML attribute is unaffected by changes to the JavaScript object's property.</p> - -<pre class="brush: js notranslate">let logElement = document.querySelector('div'); -let el = document.querySelector("a"); - -function log(msg) { logElement.innerHTML += `${msg}<br>` }; -function anchorOnClick(event) { log("Changed onclick handler") }; - -// Original Handler -log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`); - -//Changing handler using .onclick -log('<br>Changing onclick handler using <strong> onclick property </strong> '); - -el.onclick = anchorOnClick; - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`); - -//Changing handler using .setAttribute -log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> '); -el.setAttribute("onclick", 'anchorOnClick(event)'); - -log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); -log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);</pre> - -<h3 id="Result">Result</h3> - -<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p> - -<p>For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements instead set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">onblur</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror">onerror</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">onfocus</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll">onscroll</a></code>.)</p> - -<h3 id="Event_handlers_parameters_this_binding_and_the_return_value">Event handler's parameters, <code>this</code> binding, and the return value</h3> - -<p>When the event handler is specified as <strong>an HTML attribute</strong>, the specified code is wrapped into a function with <strong>the following parameters</strong>:</p> - -<ul> - <li><code>event</code> — for all event handlers except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.</li> - <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, and <code>error</code> for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the <code>event</code> parameter actually contains the error message as a string.</li> -</ul> - -<p>When the event handler is invoked, the <code>this</code> keyword inside the handler is set to the DOM element on which the handler is registered. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler">the <code>this</code> keyword documentation</a>.</p> - -<p>The return value from the handler determines if the event is canceled. The specific handling of the return value depends on the kind of event; for details, see <a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">"The event handler processing algorithm" in the HTML specification</a>.</p> - -<h3 id="When_the_event_handler_is_invoked">When the event handler is invoked</h3> - -<div class="blockIndicator note"> -<p>TBD (non-capturing listener)</p> -</div> - -<h3 id="Terminology">Terminology</h3> - -<p>The term <strong>event handler</strong> may refer to:</p> - -<ul> - <li>Any function or object that is registered to be notified of events</li> - <li>Or more specifically, to the mechanism of registering event listeners via <code>on…</code> attributes in HTML or properties in Web APIs, such as <code><button onclick="alert(this)"></code> or <code>window.onload = function() { … }</code>.</li> -</ul> - -<p>When discussing the various methods of listening to events:</p> - -<ul> - <li><strong>Event listener</strong> refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}}</li> - <li><strong>Event handler</strong> refers to a function registered via <code>on…</code> attributes or properties</li> -</ul> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> - -<h4 id="Detecting_the_presence_of_event_handler_properties">Detecting the presence of event handler properties</h4> - -<p>You can detect the presence of an event handler property with the JavaScript <a href="/en-US/JavaScript/Reference/Operators/in" title="en/JavaScript/Reference/Operators/in"><code>in</code></a> operator. For example:</p> - -<pre class="brush: js notranslate">if ("onsomenewfeature" in window) { - /* do something amazing */ -} -</pre> - -<h4 id="Event_handlers_and_prototypes">Event handlers and prototypes</h4> - -<p>You can't set or access the values of any IDL-defined attributes on DOM prototype objects. That means you can't, for example, change <code>Window.prototype.onload</code>. In the past, event handlers (<code>onload</code>, etc.) weren't implemented as IDL attributes in Gecko, so you were able to do this for those. Now you can't. This improves compatibility.</p> diff --git a/files/pt-br/orphaned/web/guide/events/index.html b/files/pt-br/orphaned/web/guide/events/index.html deleted file mode 100644 index d705b4757c..0000000000 --- a/files/pt-br/orphaned/web/guide/events/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Event developer guide -slug: orphaned/Web/Guide/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events -original_slug: Web/Guide/Events ---- -<p>{{draft()}}</p> -<p>Events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a web page and to the naming, characterization, and use of a large number of incidents of different types.</p> -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Overview_of_Events_and_Handlers">overview page</a> provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web browsers.</p> -<p>The <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">custom events page</a> describes how the event code design pattern can be used in custom code to define new event types emitted by user objects, register listener functions to handle those events, and trigger the events in user code.</p> -<p>The remaining pages describe how to use events of different kinds defined by web browsers. Unfortunately, these events have been defined piece by piece as web browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web browsers.</p> -<p>The <strong>device</strong> on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained">page on orientation coordinate systems</a> and the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Using_device_orientation_with_3D_transforms">page on the use of 3D transforms</a>. That is different, but similar, to the change in device vertical orientation. </p> -<p>The <strong>window</strong> in which the browser is displayed which might trigger events, for example, change size if the user maximizes the window or otherwise changes it.</p> -<p>The <strong>process</strong> loading of a web page might trigger events in response to the completion of different steps in the downloading, parsing, and rendering of the web page for display to the user.</p> -<p>The <strong>user interaction</strong> with the web page contents might trigger events. The events triggered by user interaction evolved during the early years of browser design and include a complicated system defining the sequence in which events will be called and the manner in which that sequence can be controlled. The different types of user interaction driven events include:</p> -<ul> - <li>the original 'click' event,</li> - <li>mouse events,</li> - <li><a href="/en-US/docs/Web/Guide/API/DOM/Events/Mouse_gesture_events">mouse gesture events</a>, and</li> - <li>both <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a> and the earlier, but deprecated, <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events_(Mozilla_experimental)">mozilla experimental touch events</a>.</li> -</ul> -<p>The <strong>modification of the web page</strong> in structure or content might trigger some events, as is explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Mutation_events">mutation events page</a>, but the use of these events has been deprecated in favour of the lighter <a href="/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> approach.</p> -<p>The <strong>media streams</strong> embedded in the HTML documents might trigger some events, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Media_events">media events</a> page.</p> -<p>The <strong>network requests</strong> made by a web page might trigger some events.</p> -<p>There are many other sources of events defined by web browsers for which pages are not yet available in this guide.</p> -<div class="note"> - <p>Note: This Event Developer Guide needs substantial work. The structure needs to be reorganized and the pages rewritten. Our hope is that everything you need to know about events will go under here.</p> -</div> -<h2 id="Docs">Docs</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/pt-br/orphaned/web/guide/events/mutation_events/index.html b/files/pt-br/orphaned/web/guide/events/mutation_events/index.html deleted file mode 100644 index c60653c55c..0000000000 --- a/files/pt-br/orphaned/web/guide/events/mutation_events/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Mutation events -slug: orphaned/Web/Guide/Events/Mutation_events -translation_of: Web/Guide/Events/Mutation_events -original_slug: Web/Guide/Events/Mutation_events ---- -<p>{{deprecated_header()}}</p> - -<p><strong>Mutation events</strong> fornecem um mecanismo, para uma página web ou uma extensão, de notificação sobre as alterações feitas no DOM. <span style="background-color: #ffff00;">Utilize ao invés, se possível, <a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>.</span></p> - -<h2 id="Prefácio">Prefácio</h2> - -<p>Os eventos de mutação foram marcados como em desuso na <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events specification</a> pelo fato do projeto da API ser falho (veja detalhes no "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" publicado em <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a>)</span>.</p> - -<p id="Replacement.3A_mutation_observers"><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> são a proposta de substituição para eventos de mutação no DOM4. Eles devem ser incluídos no Firefox 14 e <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>.</p> - -<p>As razões práticas para evitar os eventos de mutação são <strong>problemas de desempenho</strong> e suporte <strong>cross-browser.</strong></p> - -<h3 id="Performance">Performance</h3> - -<p>Adicionando listeners de mutação do DOM a um documento <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1" rel="external" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">degrada o desempenho profundamente</a> de outras modificações DOM para esse documento (tornando-os 1.5 - 7 vezes mais lento!). Além disso, remover os listeners não reverte o dano.</p> - -<p>O efeito de desempenho é <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">limitado aos documentos que têm os listeners de evento de mutação</a>.</p> - -<h3 id="Suporte_cross-browser">Suporte cross-browser</h3> - -<p>Esses eventos não são implementados de forma consistente entre os diferentes navegadores, por exemplo:</p> - -<ul> - <li>IE anteriores à versão 9 não suportavam os eventos de mutação por completo e em alguns aspectos não implementa corretamente na versão 9 (<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">por exemplo, DOMNodeInserted</a>)</li> - <li>WebKit não suporta DOMAttrModified (veja <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> e <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li> - <li>"mutation name events", por exemplo DOMElementNameChanged e DOMAttributeNameChanged não são suportados no Firefox (a partir da versão 11), e provavelmente em outros navagedores também.</li> - <li>...</li> -</ul> - -<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">suporte a eventos de mutação nos navegadores</a>.</p> - -<h2 id="Lista_de_mutation_events">Lista de mutation events</h2> - -<p>Listado a seguir todos os eventos de mutação, como definido no <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a>:</p> - -<ul> - <li><code>DOMAttrModified</code></li> - <li><code>DOMAttributeNameChanged</code></li> - <li><code>DOMCharacterDataModified</code></li> - <li><code>DOMElementNameChanged</code></li> - <li><code>DOMNodeInserted</code></li> - <li><code>DOMNodeInsertedIntoDocument</code></li> - <li><code>DOMNodeRemoved</code></li> - <li><code>DOMNodeRemovedFromDocument</code></li> - <li><code>DOMSubtreeModified</code></li> -</ul> - -<h2 id="Uso">Uso</h2> - -<p>Você pode registrar um listener para eventos de mutação usando <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a>, como mostrado a seguir:</p> - -<pre><code>element.addEventListener("DOMNodeInserted", function (event) {</code> - // ... -<code>}, false);</code> -</pre> - -<p>O objeto event é transmitido para o listener em um {{ domxref("MutationEvent") }} (veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">sua definição na especificação</a>) para a maioria dos eventos, e {{ domxref("MutationNameEvent") }} para <code>DOMAttributeNameChanged</code> e <code>DOMElementNameChanged</code>.</p> diff --git a/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html b/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html deleted file mode 100644 index 950ddd0b4f..0000000000 --- a/files/pt-br/orphaned/web/guide/events/overview_of_events_and_handlers/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Uma visão geral sobre Events e Handlers -slug: orphaned/Web/Guide/Events/Overview_of_Events_and_Handlers -translation_of: Web/Guide/Events/Overview_of_Events_and_Handlers -original_slug: Web/Guide/Events/Overview_of_Events_and_Handlers ---- -<div class="summary"> -<p>Este artigo apresenta uma visão geral sobre o design pattern usado para reagir a alterações que ocorrem quando o navegador acessa uma página, e dá um resumo sobre como os navegadores modernos reagem a eles.</p> -</div> - -<p>Eventos e a manipulação de eventos fornecem uma técnica essencial em JavaScript para reagir a algum incidente quando o navegador acessa uma página, incluindo eventos de preparação para exibir a página, ou interação com algum conteúdo da página que estejam relacionados com o dispositivo onde o navagador está rodando, e muitas outras, como reprodução de áudio ou vídeo.</p> - -<p>A manipulação de eventos tornou-se imprescindível com a evolução e mudança na arquitetura de renderização dos navegadores em relação a forma de busca e carregamento de informações na página. No início, os navegadores esperavam e recebiam os dados e recursos associados a página para analisar, processar e apresentar a página ao usuário. A página permanecia inalterada até uma requisição para um novo link. Atualmente, com a mudança para páginas dinâmicas, os navegadores estão sempre em um loop contínuo, processando, desenhando, apresentando conteúdo e esperando de algum novo evento. Os gatilhos (triggers) de evento podem ser a conclusão do carregamento de um arquivo na rede, por exemplo, uma imagem que agora pode ser mostrada na tela, a conclusão da análise de um recurso pelo navegador, o processamento do conteúdo HTML de uma página, a interação de um usuário com o conteúdo da página, com o clique em um botão. Douglas Crockford explica essa mudança de maneira eficaz em sua palestra, <em>An Inconvenient API: The Theory of the DOM.</em></p> - -<p>With the change to dynamic page rendering, browsers loop continuously between processing, drawing, presenting content, and waiting for some new event trigger. Event triggers include the completion of the loading of a resource on the network <em>e.g.,</em> downloads an image that can now be drawn on the screen, the completion of parsing a resource by the browser <em>e.g.</em>, processes the HTML content of a page, the interaction of a user with the contents of the page <em>e.g.,</em> clicks a button. Douglas Crockford explains this change effectively in several lectures, notably his talk, <em>An Inconvenient API: The Theory of the DOM,</em> which shows the change in flow from the original browser flow</p> - -<div style="margin: 0 auto; width: 68%;"><img alt="A comparison of the sequential and event-driven browser load sequences." src="https://mdn.mozillademos.org/files/6641/Browser_sequence_comparitive.svg" style="height: 454px; width: 1857px;"></div> - -<p>to the event driven browser. The latter approach changes the last steps from a single flow into a perpetual loop, where waiting for and handling the incidence of new events follows painting. The innovation of the dynamic approach allows for a page to be partially rendered even when the browser has not finished retrieving all resources; this approach also allows for event driven actions, which JavaScript leverages. (The talk is available from several sources, including <a href="http://www.youtube.com/watch?v=Y2Y0U-2qJMs">this one</a>.) Currently, all execution environments for JavaScript code use events and event handling.</p> - -<h2 id="The_event_design_pattern">The event design pattern</h2> - -<p>The event system, at its core, is simply a programming design pattern. The pattern starts with an agreement over a kind of event and:</p> - -<ul> - <li>the name String used for the event,</li> - <li>the type of the data structure used to represent the key properties of that event, and</li> - <li>the JavaScript object which will 'emit' that event.</li> -</ul> - -<p>The pattern is implemented by</p> - -<ul> - <li>defining a JavaScript function which takes as an argument the data structure which was agreed upon, and</li> - <li>registering the function using the name String with the object which will emit the event.</li> -</ul> - -<p>The function is said to be a 'listener' or a 'handler' with both names used interchangeably. This pattern can easily be followed using completely custom code, as explained in the <a href="/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events">article on custom events</a>. The pattern is also used by modern web browsers which define many events emitted in response to user input or browser activity.</p> - -<p>Modern web browsers follow the event pattern using a standardized approach. Browsers use as the data structure for the properties of the event, an object derived from the <code>EventPrototype</code> object. Browsers use as the registration method for the function which will handle those data structures a method called <code>addEventListener</code> which expects as arguments a string event type name and the handler function. Finally, browsers define a large number of objects as event emitters and define a wide variety of event types generated by the objects.</p> - -<h2 id="Button_Event_Handler" name="Button_Event_Handler">Button Event Handler Demo</h2> - -<p>For example, browser <code>button</code> elements are intended to emit events named <code>'click'</code> in response to a mouse click or, when displayed in touch sensitive surfaces, to a finger tap. We could define in the HTML page a <code>button</code> as:</p> - -<pre class="brush: html notranslate"><button id="buttonOne">Click here to emit a 'click' event</button></pre> - -<p>and, in our JavaScript code, we could first define a function to listen to that <code>'click'</code> event:</p> - -<pre class="brush: js notranslate">var example_click_handler = function (ev){ - var objKind = (ev instanceof Event) ? "EventPrototype" : "ObjectPrototype"; - alert("We got a click event at " + ev.timeStamp + " with an argument object derived from: " + objKind ); -};</pre> - -<p>and second register our function with the the <code>Button</code> object, either on the scripting side using the DOM (Document Object Model) representation of the HTML page:</p> - -<pre class="brush: js notranslate">var buttonDOMElement = document.querySelector('#buttonOne'); -buttonDOMElement.addEventListener('click', example_click_handler);</pre> - -<p>or within the HTML page by adding the function as the value of the <code>'onclick'</code> attribute, although this second approach is usually only used in very simple web pages.</p> - -<p>{{ EmbedLiveSample('Button_Event_Handler') }}</p> - -<p>This code relies on the agreement that there is a kind of event called <code>'click'</code> which will call any listener (or 'handler') function with an <code>Event</code> object argument (actually, in this case a derivative <code>MouseEvent</code> object) and which will be fired by HTML <code>button</code> elements after user interaction. The code has no visible effect until a user interacts with the button either by placing the mouse pointer over the HTML button and clicking on the left mouse button or by placing a finger or stylus of some kind on the screen above the HTML button; when that happens, the <code>buttonDOMElement</code> JavaScript object would call the <code>example_click_handler</code> function with an <code>Event</code> object as an argument. The function, in turn, would perform whatever action was chosen by the programmer, in this case to open an HTML alert dialog. Note that the handler has access to the <code>ev</code> object since it is passed as an argument; the object has information about the event, notably the time at which the event occurred.</p> - -<p>As a second example, much modern JavaScript integrated into web pages is wrapped into an event function call to ensure that the code is only executed when the HTML has been processed and is available for alteration or decoration. For example, code might be attached as:</p> - -<pre class="brush: js notranslate">var funcInit = function(){ - // user code goes here and can safely address all the HTML elements from the page - // since the document has successfully been 'loaded' -} -document.addEventListener('DOMContentLoaded', funcInit); -</pre> - -<p>so that this code will only be executed after the <code>document</code> object emits the <code>'DOMContentLoaded'</code> event because the HTML has been parsed and Javasript objects created representing each of the nodes of the HTML document. Note that in this example, the code does not even name the event argument to the function because the code never needs to use the data structure describing the event; rather, the code merely needs to wait to run until after then event has happened.</p> - -<p>The pattern is therefore easy to learn and implement. The difficulty with events comes from learning the wide variety of events which are generated in modern web browsers. There is also some subtlety in learning how to write the handler functions since such code works asynchronously and potentially will run repeatedly but in slightly different situations.</p> - -<h2 id="Notable_events">Notable events</h2> - -<p>Web browsers define a large number of events so it is not practical to list them all. The <a href="/en-US/docs/Web/Reference/Events">Event Reference</a> attempts to maintain a list of the standard Events used in modern web browsers.</p> - -<p>In general, we can distinguish events of different kinds based on the object emitting the event including:</p> - -<ul> - <li>the <code>window</code> object, such as due to resizing the browser,</li> - <li>the <code>window.screen</code> object, such as due to changes in device orientation,</li> - <li>the <code>document</code> object, including the loading, modification, user interaction, and unloading of the page,</li> - <li>the objects in the DOM (document object model) tree including user interactions or modifications,</li> - <li>the <code>XMLHttpRequest</code> objects used for network requests, and</li> - <li>the media objects such as <code>audio</code> and <code>video</code>, when the media stream players change state.</li> -</ul> - -<p>although this list is currently incomplete.</p> - -<p>Some notable events are:</p> - -<div class="note"> -<p><strong>Note:</strong> This list of events will need work to make relevant; that work is awaiting some global reorganization work on the documents. This will also need finding a good explanation of the events involved during page loading, such as discussed partially in <em><a href="http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload">this web page</a> or in <a href="http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page">this Stack Overflow question</a>. </em></p> -</div> - -<ul> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/load_(ProgressEvent)"><code>'load'</code></a> when the page has finished rendering, meaning that all resources have been downloaded and acted upon, so that the scripts have been run and the images displayed,</li> - <li>the global object <a href="/en-US/docs/Web/API/Window"><code>window</code></a> emits an event called <a href="/en-US/docs/Web/Reference/Events/resize"><code>'resize'</code></a> when the height or the width of the browser window is changed by a user,</li> - <li>the DOM object <a href="/en-US/docs/Web/API/Document"><code>document</code></a> representing the HTML document emits an event called<code> <a href="/en-US/docs/Web/Reference/Events/DOMContentLoaded">'DOMContentLoaded'</a></code> when the document has finished loading,</li> - <li>the DOM node objects such as <a href="/en-US/docs/Web/HTML/Element/div"><code>div</code></a> or <a href="/en-US/docs/Web/HTML/Element/button"><code>button</code></a> emit an event called <a href="/en-US/docs/Web/Reference/Events/click"><code>'click'</code></a> when the user presses the mouse button while the mouse pointer is on top of the DOM node in the HTML page.</li> -</ul> - - - -<h2 id="The_Event_object_hierarchy">The Event object hierarchy</h2> - -<p>The web browser defines many events of different kinds. Each definition includes, as the data structure passed to the handler function, an object which inherits from the <code>EventPrototype</code> object.</p> - -<p>A partial diagram of the class hierarchy of event objects is:</p> - -<div class="note"> -<p><strong>Note:</strong> This diagram is incomplete.</p> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6633/Js_Event_Object_Hierarchy.svg" style="height: 496px; width: 1417px;"></p> - -<p>The Web API Documentation contains <a href="/en-US/docs/Web/API/Event">a page defining the Event object</a> which also includes the known DOM event subclasses of the <code>Event</code> object.</p> - -<h2 id="Documents">Documents</h2> - -<p>Three sources on the MDN (Mozilla Developer Network) web site are particularly useful for programmers wanting to work with events:</p> - -<ul> - <li>this <a href="/en-US/docs/Web/Guide/API/DOM/Events">Event Guide</a> which is part of the <a href="/en-US/docs/Web/Guide">Web Developers' Guide</a>,</li> - <li>the <a href="/en-US/docs/Web/Reference/Events">Event Reference</a>,</li> - <li>the Web API documentation for the <a href="/en-US/docs/Web/API/Event"><code>Event</code></a> object.</li> -</ul> diff --git a/files/pt-br/orphaned/web/guide/html/html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/index.html deleted file mode 100644 index 70e852c9cb..0000000000 --- a/files/pt-br/orphaned/web/guide/html/html5/index.html +++ /dev/null @@ -1,300 +0,0 @@ ---- -title: HTML5 -slug: orphaned/Web/Guide/HTML/HTML5 -tags: - - Desenvolvimento Web - - Guía - - HTML - - HTML5 - - Visão Geral - - Web -translation_of: Web/Guide/HTML/HTML5 -original_slug: Web/Guide/HTML/HTML5 ---- -<p>HTML5 é a mais recente evolução do padrão que define o <a href="https://developer.mozilla.org/pt-BR/docs/HTML" title="https://developer.mozilla.org/pt-BR/docs/HTML">HTML</a>. O termo representa dois conceitos diferentes:</p> - -<ul> - <li>É uma nova versão da <em>linguagem </em>HTML, com novos elementos, atributos, e comportamentos</li> - <li>e um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e web sites mais diversos e poderosos. Este conjunto é chamado <em>HTML5 & friends</em> e muitas vezes abreviado apenas como <em>HTML5.</em></li> -</ul> - -<p>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;</p> - -<ul> - <li><em>Semântica</em>: permite você descrever mais precisamente o seu conteúdo.</li> - <li>Conectividade: permite uma comunicação com o servidor de formas modernas e inovadoras.</li> - <li>Offline e armazenamento: Permite que páginas web armazenem dados localmente do lado do cliente e opere de forma offline mais eficientemente.</li> - <li>Multimídia: Viabiliza a utilização de áudio e vídeo de forma primorosa na Web Aberta.</li> - <li>Gráficos e efeitos 2D/3D: viabiliza um leque diversificado de opções de representação gráfica. </li> - <li>Performance e integração: fornece grande otimização de velocidade e melhor utilização do hardware do computador.</li> - <li>Acesso ao dispositivo: viabiliza a utilização de diversos métodos e dispositivos de entrada e saída.</li> - <li>Estilização: permite aos autores a escrita de temas mais sofisticados.</li> -</ul> - -<div class="twocolumns"> - -</div> - -<h2 id="Semântica"><img alt="" src="https://mdn.mozillademos.org/files/3827/HTML5_Semantics_512.png" style="height: 50px; width: 50px;"> Semântica </h2> - -<dl> - <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document">Seções e estruturas em HTML</a></strong></dt> - <dd>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")}}</dd> - <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_HTML5_audio_and_video">Utilizando áudio e vídeo com HTML5</a></strong></dt> - <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incorporam e permitem manipulação de novos conteúdos multimídia. </dd> - <dt><strong><a href="https://developer.mozilla.org/pt-BR/docs/HTML/Forms_in_HTML">Formulários em HTML5</a></strong> </dt> - <dd>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")}}.</dd> - <dt><strong>Novos elementos semânticos</strong></dt> - <dd>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 <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element">elementos válidos do HTML5</a>.</dd> - <dt><strong>Melhorias no {{HTMLElement("iframe")}}</strong></dt> - <dd>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 <strong>{{HTMLElement("iframe")}}.</strong></dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/MathML">MathML</a></dt> - <dd>Viabiliza a inserção direta de fórmulas matemáticas no código HTML5.</dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Introduction_to_HTML5">Introdução ao HTML5</a></dt> - <dd>Este artigo introduz como indicar para o navegador que você está usando HTML5 em sua página ou aplicação web. </dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5/Parser_HTML5">HTML5 parser compatível</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Conectividade"><img alt="" src="https://mdn.mozillademos.org/files/3839/HTML5_Connectivity_512.png" style="height: 50px; width: 50px;">Conectividade</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/WebSockets">Web Sockets</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Eventos do servidor</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/API/WebRTC">WebRTC</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Offline_e_armazenamento"><img alt="" src="https://mdn.mozillademos.org/files/3833/HTML5_Offline_Storage_512.png" style="height: 50px; width: 50px;">Offline e armazenamento</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Using_the_application_cache">Recursos offline: cache de aplicação</a></dt> - <dd>Firefox possui suporte completo às especificações dos recursos offlines do HTML5. A maioria dos outros navegadores suportam apenas parte deste recurso.</dd> - <dt>Eventos online e offline</dt> - <dd> - <p>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. </p> - </dd> - <dt>WHATWG </dt> - <dd>Sessão <em>client-side</em> e armazenamento persistente permite que aplicações web armazenem dados de forma estruturada no lado do cliente.</dd> - <dt>IndexedDB</dt> - <dd>É um padrão web para armazenamento de quantidades significativas de dados estruturados no navegador e para alta performace de busca nestes dados, usando índices.</dd> - <dt>Uso de arquivos de aplicações web</dt> - <dd>Foi adicionado ao <a href="https://developer.mozilla.org/pt-BR/docs/Mozilla/Gecko">Gecko</a> 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 <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Input#attr-type">tipo</a> <span style="font-family: courier;">file</span> do HTML5. Há também o <a href="https://developer.mozilla.org/pt-BR/docs/Web/API/FileReader">FileReader</a>.</dd> -</dl> - -<h2 id="Multimídia"><img alt="" src="https://mdn.mozillademos.org/files/3835/HTML5_Multimedia_512.png" style="height: 50px; width: 50px;">Multimídia</h2> - -<dl> - <dt>Utilizando áudio e vídeo com HTML5</dt> - <dd>Os elementos {{HTMLElement("audio")}} e {{HTMLElement("video")}} incluem e permitem a manipulação de novos conteúdos multimídia.</dd> - <dt>WebRTC</dt> - <dd>Permite conexões entre usuários e controle de videoconferência diretamente no browser, sem necessidade de um <em>plugin</em> ou aplicação externa.</dd> - <dt>API da câmera</dt> - <dd>Permite o uso, manipulação e armazenamento de uma imagem diretamente da câmera do computador.</dd> - <dt>Track e WebVTT</dt> - <dd>O elemento {{HTMLElement("track")}} permite legendas e capítulos. WebVTT é o formato de texto do track {{HTMLElement("track")}}.</dd> -</dl> - -<h2 id="Gráficos_e_efeitos_3D"><img alt="" src="https://mdn.mozillademos.org/files/3841/HTML5_3D_Effects_512.png" style="height: 50px; width: 50px;">Gráficos e efeitos 3D</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Canvas_tutorial">Canvas</a></dt> - <dd>Aprenda sobre o novo elemento {{HTMLElement("canvas")}} e como utilizá-lo para desenhar gráficos e objetos no Firefox.</dd> - <dt>API de texto para {{HTMLElement("canvas")}}</dt> - <dd>O elemento {{HTMLElement("canvas")}} agora dá suporte à API de texto do HTML5.</dd> - <dt>WebGL</dt> - <dd>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")}}.</dd> - <dt>SVG</dt> - <dd>Um formato de imagens vetoriais baseada em XML que pode ser diretamente embutido no HTML5.</dd> -</dl> - -<h2 id="Performance_e_integração"><img alt="" src="https://developer.mozilla.org/files/3831/HTML5_Performance_512.png" style="height: 50px; width: 50px;">Performance e integração</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> - <dd>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.</dd> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> level 2</dt> - <dd>Permite buscar de forma <span id="result_box" lang="pt"><span>assíncrona</span></span> 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 <a href="https://developer.mozilla.org/en-US/docs/AJAX" title="AJAX">Ajax</a>.</dd> - <dt>Motor JIT-compiling para JavaScript</dt> - <dd>A nova e poderosa geração de motores JavaScript é muito mais poderosa, levando para uma maior performance.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> - <dd>Permite a manipulação do histórico do navegador. Isso é especialmente útil para páginas que carregam novas informações interativas.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML/Content Editable">O atributo contentEditable: Transforme seu website em uma wiki!</a></dt> - <dd>O HTML5 padronizou o atributo contentEditable. Saiba mais sobre este recurso.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt> - <dd>A API do HTML5 permite suportar o recurso de arrastar e soltar (<em>dragging and dropping</em>) 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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Foco de gestão em HTML</a></dt> - <dd>O novo HTML5 <code>activeElement</code> e <code>hasFocus</code> são atributos suportados.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manipuladores de protocolos beseados na web</a></dt> - <dd>Agora você pode registrar aplicações web com manipuladores de protocolos utilizando o método the<code>navigator.registerProtocolHandler()</code>.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame" title="Web-based_protocol_handlers">requestAnimationFrame</a></dt> - <dd>Permite o controle de animações de renderização para obter a performance ideal.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">API Fullscreen</a></dt> - <dd>Controla o uso de toda a tela para uma página web ou aplicação, sem mostrar a interface de UI do navegador.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">API bloqueio de ponteiro</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos online e offline</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Acesso_à_dispositivos"><img alt="" src="https://developer.mozilla.org/files/3837/HTML5_Device_Access_512.png" style="height: 50px; width: 50px;">Acesso à dispositivos</h2> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM/Using_the_Camera_API">Usando a API da câmera</a></dt> - <dd>É permitido o uso, manipulação, e armazenar imagens através câmeras dos computadores.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM/Touch_events">Eventos touch</a></dt> - <dd>Manipuladores para reagir a eventos criados por um usuário ao pressionar em telas sensíveis ao toque (<em>touch screens</em>).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="Using geolocation">Utilizando geolocalização</a></dt> - <dd>Deixa que os navegadores localizem a posição do usuário utilizando a geolocalização.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detectando a orientaçåo do dispositivo</a></dt> - <dd>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).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Estilização"><img alt="" src="https://developer.mozilla.org/files/3829/HTML5_Styling_512.png" style="height: 50px; width: 50px;">Estilização</h2> - -<p id="CSS_has_been_extended_to_be_able_to_style_elements_in_a_much_more_complex_way._This_is_often_referred_as_CSS3_though_CSS_is_not_a_monolithic_specification_any_more_and_the_different_modules_are_not_all_at_level_3_some_are_at_level_1_and_others_at_level_4_with_all_the_intermediate_levels_covered."><a href="https://developer.mozilla.org/en-US/docs/CSS" title="CSS">CSS</a> <span id="result_box" lang="pt"><span>foi estendido para</span> <span>ser</span> <span>capaz de estilo</span> <span>elementos</span> <span>de uma forma</span> <span>muito mais complexa</span></span>. Sua extensão, também conhecido como <a href="https://developer.mozilla.org/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, 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.</p> - -<dl> - <dt>Novas caracteristicas dos estilos de background</dt> - <dd>Agora é possível determinar uma sombra à um elemento, usando a propriedade <code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow" title="The box-shadow property describes one or more shadow effects as a comma-separated list.">box-shadow</a> </code>e também podemos definir <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds">diversos backgrounds</a> para um elemento.</dd> - <dt>More fancy borders</dt> - <dd>Também é possível utilizar imagens para estilizar bordas, usando a propriedade <code>border-image. </code>Bordas arredondadas são suportadas através da propriedade <code>border-radius.</code></dd> - <dt>Animating your style</dt> - <dd>Utilizando <code>transition </code>para animar diferentes estágios de determinadas propriedades ou usando <code>animation </code>para animar trechos da página sem precisar usar o JavaScript com algum evento vinculado, permitindo total controle sobre movimentação de elementos. </dd> - <dd>Using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS/Using_CSS_transitions">CSS Transitions</a> to animate between different states or using <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS/Using_CSS_animations">CSS Animations</a>to animate parts of the page without a triggering event, you can now control mobile elements on your page.</dd> - <dt>Typography improvement</dt> - <dd>Authors have better control to reach better typography. Eles podem controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow" title="The text-overflow property determines how overflowed content that is not displayed is signaled to users. It can be clipped, display an ellipsis ('…', U+2026 Horizontal Ellipsis), or display a custom string."><code>text-overflow</code></a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS/hyphens">hyphenation</a>, mas tambem pode adicionar um <a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS/text-shadow">shadow</a> a ele ou controlar mais precisamente a sua <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG/Attribute/text-decoration">decorations</a>. Tipos de letras personalizadas podem ser baixadas e aplicadas gracas a nova<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" title="The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The @font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule."><code>@font-face</code></a> at-rule.</dd> - <dt>Novos layouts de apresentaçoes</dt> - <dd>A fim de melhorar a flexibilidade dos modelos, foram adicionados, dois novos esquemas: o <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS/Using_CSS_multi-column_layouts">CSS multi-column layouts</a> e <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS/Flexbox">CSS flexible box layout</a>.</dd> -</dl> - - - -<p>(Alguns <a href="/en/HTML/HTML5/HTML5_Thematic_Classification" title="en/HTML/HTML5/HTML5 Thematic Classification">outros artigos relacionados com HTML5</a>.)</p> - -<h2 id="Introdução_ao_HTML5">Introdução ao HTML5</h2> - -<dl> - <dt><a href="/en/HTML/HTML5/Introduction_to_HTML5" title="en/HTML/Introduction to HTML5"><strong>Introdução ao HTML5</strong></a></dt> - <dd>Este artigo introduz como utilizar HTML5 no desenho de site ou de sua aplicação.</dd> -</dl> - -<h2 id="Elementos_do_HTML5">Elementos do HTML5</h2> - -<dl> - <dt><a href="/en/HTML/HTML5/HTML5_element_list" title="en"><strong>Lista de tags / elementos do HTML5</strong></a></dt> - <dd>Esta página contém uma tabela com todos os elementos (tags) baseado no rascunho atual das especificações do HTML5.</dd> -</dl> - -<dl> - <dt><a href="/en/Using_HTML5_audio_and_video" title="En/Using_audio_and_video_in_Firefox">Utilizando audio e video</a></dt> - <dd>Adicionando suporte aos elementos do HTML5 {{ HTMLElement("audio") }} e {{ HTMLElement("video") }} ao Firefox 3.5.</dd> - <dt><a href="/en/HTML/Forms_in_HTML" title="en/HTML/HTML5/Forms in HTML5">Formulários em HTML5</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Veja as</span> <span class="hps">melhorias para</span> <span class="hps">formulários web</span> <span class="hps">em</span> <span class="hps">HTML5</span><span>: a</span> <span class="hps">API</span> de <span class="hps">validação de restrição</span><span>, vários</span> <span class="hps">novos atributos,</span> <span class="hps">novos valores</span> <span class="hps">para </span></span>{{ HTMLElement("input") }} atributo {{ htmlattrxref("type", "input") }}<span id="result_box" lang="pt"> <span class="hps">e os</span> <span class="hps">novo</span> <span class="hps">elemento </span></span>{{ HTMLElement("output") }}.<span id="result_box" lang="pt"> </span></dd> - <dt><a href="/en/Sections_and_Outlines_of_an_HTML5_document" title="en/Sections and Outlines of an HTML5 document">Seções e esboços em HTML5</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Veja os novos elementos para </span><span class="hps">delinear</span> e seccionar <span class="hps">em</span> <span class="hps">HTML5:</span></span> {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} and {{ HTMLElement("hgroup") }}.</dd> - <dt>O elemento {{ HTMLElement("mark") }}</dt> - <dd>Este elemento é usado para marcar em destaque um texto de especial relevância.</dd> - <dt>O elemento {{ HTMLElement("figure") }} e {{ HTMLElement("figcaption") }}</dt> - <dd>Este elemento permite adicionar figuras e ilustrações, com uma eventual legenda, <span id="result_box" lang="pt">colocado a<span class="hps">baixo d</span><span class="hps">o texto principal</span><span>.</span></span></dd> -</dl> - -<h3 id="Suporte_Canvas">Suporte Canvas</h3> - -<dl> - <dt><a href="/en/Canvas_tutorial" title="https://developer.mozilla.org/en/Canvas_tutorial">Tutorial Canvas </a></dt> - <dd> Apreda sobre o novo elemento<code> {{ HTMLElement("canvas") }} </code>e como desenhar gráficos e outros objetos no Firefox.</dd> - <dt><a href="/en/Drawing_text_using_a_canvas" title="en/Drawing_text_using_a_canvas">HTML5 API texto para elemento <canvas></a></dt> - <dd><span id="result_box" lang="pt">HTML5 <span class="hps">API</span> <span class="hps">texto</span> <span class="hps">agora é suportado</span> <span class="atn hps">pelo </span></span>{{ HTMLElement("canvas") }}<span id="result_box" lang="pt"><span class="hps">.</span></span></dd> -</dl> - -<div class="twocolumns"> -<h2 id="Recursos_de_aplicações_web">Recursos de aplicações web</h2> -</div> - -<dl> - <dt><a href="/en/HTML/Using_the_application_cache" title="en/Offline_resources_in_Firefox">Recursos Offline</a></dt> - <dd><span id="result_box" lang="pt">O <span class="hps">Firefox</span> suporta completamente <span class="hps">as</span> <span class="hps">especificações de</span> <span class="hps">HTML5 para </span> <span class="hps">recurso</span> <span class="hps">offline.</span> <span class="hps">A maioria dos outros</span> navegadores <span class="hps">tem</span> algum nível de suporte aos <span class="hps">recursos offline</span></span>.</dd> - <dt><a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Eventos online e offline</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">O Firefox 3 suporta</span> <span class="hps">WHATWG</span> <span class="hps">eventos online e offline</span><span>, que permitem que</span> <span class="hps">aplicações e extensões</span> <span class="hps">detectem se</span> <span class="hps">há ou não</span> <span class="hps">uma conexão ativa com Internet</span><span>, bem como</span> <span class="hps">detecta</span> <span class="hps">quando a conexão</span> conecta e desconecta.</span></dd> - <dt><a href="/en/DOM/Storage" title="en/DOM/Storage">Sessão WHATWG do lado cliente e armazenamento persistente (aka DOM Storage)</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">A sessão do lado cliente</span> <span class="hps">e</span> o <span class="hps">armazenamento persistente</span> <span class="hps">permitem que as aplicações web</span> <span class="hps">armazenem</span> <span class="hps">dados estruturados</span> <span class="hps">no lado cliente</span><span>.</span></span></dd> - <dt><a href="/en/HTML/Content_Editable" title="en/HTML/Content Editable">O atributo contentEditable: transforma seu website em um wiki!</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">O HTML5</span> <span class="hps">tem</span> um<span class="hps"> atributo</span> <span class="hps">padronizado</span> <span class="hps">contentEditable</span><span>.</span> <span class="hps">Saiba mais sobre</span> <span class="hps">este recurso.</span></span></dd> - <dt><a href="/en/Using_files_from_web_applications" title="en/Using_files_from_web_applications">Usando arquivos de aplicações web</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">Suporta para </span><span class="hps">a nova HTML5 API de arquivo</span> <span class="hps">foi adicionada ao</span> <span class="hps">Gecko,</span> <span class="hps">tornando possível </span><span class="hps">as aplicações web</span> <span class="hps">para acessarem arquivos</span> <span class="hps">locais</span> <span class="hps">selecionados pelo usuário</span><span>.</span> <span class="hps">Isso inclui suporte</span> <span class="hps">para selecionar vários arquivos</span> <span class="hps">usando o novo element</span>o HTML </span><span style="font-family: monospace;">{{ HTMLElement("input") }}</span> do <a href="/en/HTML/Element/Input#attr-type" title="en/HTML/Element/input#attr-type"><strong>type</strong></a> <span style="font-family: courier new;">arquivo</span> <span id="result_box" lang="pt"><span>de</span> </span><a href="/en/HTML/Element/Input#attr-multiple" title="en/HTML/Element/input#attr-multiple"><strong>multiplos</strong></a> atributos.</dd> -</dl> - -<h2 id="Recursos_DOM">Recursos DOM</h2> - -<dl> - <dt><a href="/en/DOM/document.getElementsByClassName" title="en/DOM/document.getElementsByClassName">getElementsByClassName</a></dt> - <dd>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.</dd> - <dt><a href="/En/DragDrop/Drag_and_Drop" title="En/DragDrop/Drag_and_Drop">Arrastar e soltar</a></dt> - <dd>A HTML5 API drag and drop permite suporte para arrastar e soltar itens dentro e entre web sites. <span id="result_box" lang="pt"><span class="hps">Isto também proporciona</span> <span class="hps">uma API simples</span> <span class="hps">para uso de extensões</span> <span class="hps">e</span> <span class="hps">aplicativos baseados em</span> <span class="hps">Mozilla</span><span>.</span></span></dd> - <dt><a href="/en/Focus_management_in_HTML" title="en/Focus_management_in_HTML">Foco na gestão do HTML</a></dt> - <dd><span id="result_box" lang="pt">Os novos</span> <code>activeElement</code> e <code>hasFocus</code> são atributos suportados pelo HTML5..</dd> - <dt><a href="/en/Web-based_protocol_handlers" title="en/Web-based_protocol_handlers">Manipuladores de protocolo baseado em web</a></dt> - <dd>Agora você pode registrar uma aplicação web como um manipulador de protocolo usando o método <code>navigator.registerProtocolHandler()</code>.</dd> -</dl> - -<h2 id="HTML_parser">HTML parser</h2> - -<p>O Gecko é <a href="/en/HTML/HTML5/HTML5_Parser" title="en/HTML/HTML5/HTML5 parser">compatível com HTML5 parser</a>—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.)</p> - -<h2 id="Alterações_adicionais">Alterações adicionais</h2> - -<ul> - <li><code>localName</code> e <code>namespaceURI</code> em documentos HTML agora se comportam como em documentos XML: <code>localName</code> retorna em minúsculas e <code>namespaceURI</code> para elementos HTML é <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="external nofollow" title="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" </code></li> - <li>Quando a URI da página muda o identificador de fragmento de documento (a parte depois do caracter "#" (hash)), um novo evento <code>hashchange</code> é enviado para a página. Veja <a href="/en/DOM/window.onhashchange" title="en/DOM/window.onhashchange">window.onhashchange</a> para mais informação.</li> - <li>Suporte para <code><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></code> para facilitar o manuseio de atributo de classe.</li> - <li>evnto de documento pronto <a href="/en/DOM/document.onreadystatechange" title="en/DOM/document.onreadystatechange">document.onreadystatechange</a> e <a href="/en/DOM/document.readyState" title="en/DOM/document.readyState">document.readyState</a> são propriedades suportadas.</li> - <li><span id="result_box" lang="pt"><span class="hps">Cores em</span> <span class="hps">atributos de apresentação</span> <span class="hps">são interpretados</span> <span class="hps">de acordo com o</span> <span class="hps">HTML5.</span></span></li> -</ul> - -<h2 id="Tecnologias_muitas_vezes_chamado_de_parte_do_HTML5_que_não_são"><span id="result_box" lang="pt"><span class="hps">Tecnologias</span> <span class="hps">muitas vezes chamado de</span> <span class="hps">parte do</span> <span class="hps">HTML5</span> <span class="hps">que não</span> <span class="hps">são</span></span></h2> - -<p><span id="result_box" lang="pt"><span class="hps">Estas</span> são <span class="hps">muitas vezes </span><span class="hps">consideradas em conjunto com</span> <span class="hps">um uso</span> <span class="hps">amplo</span> <span class="hps">termo</span> <span class="atn hps">de "</span><span>HTML5</span><span>", mas</span> <span class="hps">não são</span> <span class="hps">realmente parte do</span> </span><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="W3C HTML5 Spec">W3C HTML5 Spec</a>.</p> - -<ul> - <li><a href="/en/WebGL" title="en/WebGL">WebGL</a></li> - <li><a href="/en/DOM/FileReader" title="en/DOM/FileReader"><code>FileReader</code></a></li> - <li><code><a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code></li> - <li><code><a href="/en/DOM/Locating_DOM_elements_using_selectors" title="En/DOM/Locating DOM elements using selectors">querySelector()</a></code></li> - <li><a href="/En/Using_geolocation" title="En/Using geolocation">Geolocation</a></li> - <li><a href="/en/JavaScript/ECMAScript_5_support_in_Mozilla" title="En/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript5</a></li> - <li><a href="/en/CSS/CSS3" title="CSS3">CSS3</a></li> - <li><a href="/en/XBL2_specification_(external)" title="en/XBL2 specification (external)">XBL2</a></li> - <li><a href="/En/DOM/Using_web_workers" title="En/Using web workers">Web Workers</a></li> - <li><a href="/en/WebSockets" title="https://developer.mozilla.org/en/WebSockets">Web Sockets</a></li> - <li>Faster JavaScript</li> -</ul> - -<h2 id="Veja_também">Veja também</h2> - -<p><span id="result_box" lang="pt"><span class="hps">Alterações</span> <span class="hps">nas versões</span> <span class="hps">do Firefox</span> <span class="hps">que afetam</span> <span class="hps">os desenvolvedores</span> <span class="hps">da Web:</span></span></p> - -<ul> - <li><a href="/en/Firefox_12_for_developers" title="Firefox 12 for developers">Firefox 12</a></li> - <li><a href="/en/Firefox_11_for_developers" title="Firefox 11 for developers">Firefox 11</a></li> - <li><a href="/en/Firefox_10_for_developers" title="Firefox 10 for developers">Firefox 10</a></li> - <li><a href="/en/Firefox_9_for_developers" title="Firefox 9 for developers">Firefox 9</a></li> - <li><a href="/en/Firefox_8_for_developers" title="Firefox 8 for developers">Firefox 8</a></li> - <li><a href="/en/Firefox_7_for_developers" title="Firefox 7 for developers">Firefox 7</a></li> - <li><a href="/en/Firefox_6_for_developers" title="Firefox 6 for developers">Firefox 6</a></li> - <li><a href="/en/Firefox_5_for_developers" title="Firefox 5 for developers">Firefox 5</a></li> - <li><a href="../../../../en/Firefox_4_for_developers" rel="internal">Firefox 4 </a></li> - <li><a href="/en/Firefox_3.6_for_developers" title="en/Firefox 3.6 for developers">Firefox 3.6 </a></li> - <li><a href="/En/Firefox_3.5_for_developers" title="En/Firefox 3.5 for developers">Firefox 3.5 </a></li> - <li><a href="/en/Firefox_3_for_developers" title="en/Firefox 3 for developers">Firefox 3 </a></li> - <li><a href="/en/Firefox_2_for_developers" title="en/Firefox 2 for developers">Firefox 2 </a></li> - <li><a href="/en/Firefox_1.5_for_developers" title="en/Firefox 1.5 for developers">Firefox 1.5 </a></li> -</ul> - -<div class="noinclude"> -<p>{{ 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"} ) }}</p> -</div> diff --git a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html b/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html deleted file mode 100644 index a36dbb612f..0000000000 --- a/files/pt-br/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Introdução ao HTML5 -slug: orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 -original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -<p><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> é 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.</p> - -<p>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 <a href="/en/HTML/HTML5" title="en/HTML/HTML5">página principal do HTML5</a>. Para informação detalhada sobre o suporte de vários navegadores quanto às funcionalidades do HTML5, veja o site <a class="external" href="http://caniuse.com/#cats=HTML5" title="http://caniuse.com/#cats=HTML5">CanIUse</a>.</p> - -<p>Seu primeiro passo: O doctype do HTML5</p> - -<p>O doctype para o HTML5 é muito simples. Para indicar que seu conteúdo HTML usa HTML5, simplesmente use:</p> - -<pre><!DOCTYPE html> -</pre> - -<p>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.</p> - -<div class="noinclude"> -<p>{{ 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"} ) }}</p> -</div> - -<p> </p> diff --git a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html b/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html deleted file mode 100644 index 09144f9ce4..0000000000 --- a/files/pt-br/orphaned/web/guide/html/using_html_sections_and_outlines/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Seções e estrutura de um documento HTML5 -slug: orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines -original_slug: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -<div class="warning"> -<p><strong>Importante</strong>: Atualmente não há implementações conhecidas do algorítmo de estrutura em navegadores gráficos ou <em>user agents</em> 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.</p> -</div> - -<p>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.</p> - -<h2 id="Estrutura_de_um_documento_em_HTML4">Estrutura de um documento em HTML4</h2> - -<p>A estrutura de um documento, ou seja, a estrutura semântica do que está entre <span style="font-family: courier new;"><body></span> e <span style="font-family: courier new;"></body></span>, é 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.</p> - -<p>Então a seguinte marcação:</p> - -<pre class="brush: html notranslate"><div class="section" id="elefantes-da-floresta" > -<h1>Elefantes da floresta</h1> -<p>Nesta seção, discutiremos os poucos conhecidos elefantes da floresta. -<em>...esta seção continua...</em> -<div class="subsection" id="floresta-habitat"> -<h2>Habitat</h2> -<p>Os elefantes da floresta não vivem em árvores mas sim entre elas. -<em>...esta subseção continua...</em> -</div> -</div> -</pre> - -<p>leva à seguinte estrutura (sem os marcadores 1. e 1.1 de nível) :</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat -</pre> - -<p>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,</p> - -<pre class="brush: html notranslate"><h1>Elefantes da floresta</h1> -<p>Nesta seção, discutiremos os pouco conhecidos elefantes da floresta. -<em>...esta seção continua...</em> -<h2>Habitat</h2> -<p>Os elefantes da floresta não vivem em árvores mas sim entre elas. -<em>...esta subseção continua...</em> -<h2>Dieta</h2> -<h1>Esquilo da mongólia</h1> -</pre> - -<p>leva à:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat - 1.2 Dieta -2. Esquilo da mongólia -</pre> - -<h2 id="Problemas_resolvidos_pelo_HTML5">Problemas resolvidos pelo HTML5</h2> - -<p>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:</p> - -<ol> - <li>O uso do {{HTMLElement("div")}} para definir seções semânticas, sem definir valores específicos para o atributo <strong>class</strong> 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 <a href="https://pt.wikipedia.org/wiki/Tecnologia_assistiva">tecnologias assistivas</a>, 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. </li> - <li>Mesclar diversos documentos é uma tarefa complicada: a inclusão de um subdocumento em um documento principal significa pequenas alterações nos <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/Heading_Elements">elementos de cabeçalho</a> 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.</li> - <li>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.</li> - <li>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.</li> -</ol> - -<h2 id="sect1"></h2> - -<p>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.</p> - -<h2 id="The_HTML5_Outline_Algorithm">The HTML5 Outline Algorithm</h2> - -<h3 id="Definindo_seções_em_HTML5">Definindo seções em HTML5</h3> - -<p>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. </p> - -<div class="note"><strong>Nota: </strong>Cada seção pode ter sua própria hierarquia de cabeçalho {{ HTMLElement("h1") }}. Veja <a href="/en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">D</a><a href="/en/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">efinindo cabeçalhos com HTML5</a>.</div> - -<p>Exemplo:</p> - -<pre class="brush: html notranslate"><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><span><span>Habitat</span><span></</span><span>h1</span><span>> - </span></span><span><span><</span><span>P</span><span>></span><span>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></span></span> -</pre> - -<p>Esse <a href="https://tableless.com.br/produtividade-editores-e-snippets/">snippet</a> HTML define duas seções de nível superior:</p> - -<pre class="brush: html notranslate"><span> <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></span></pre> - -<p>A primeira seção possui três subseções:</p> - -<pre class="brush: html notranslate"><span><section> - <h1>Forest elephants</h1> - </span><span> <section> - <h1>Introduction</h1> - <p>In this section, we discuss the lesser known forest elephants. - </section> - </span><span> <section> - <h1><span><span>Habitat</span><span></</span><span>h1</span><span>> - </span></span><span><span><</span><span>P</span><span>></span><span>Forest elephants do not live in trees but among them. - </section> - </span><span> <aside> - <p>advertising block - </aside> - </span><span></section> - <footer> - <p>(c) 2010 The Example company - </footer></span></span></span></pre> - -<p>Isso leva à seguinte estrutura:</p> - -<pre class="notranslate">1. Forest elephants - 1.1 Introduction - 1.2 Habitat - 1.3 Section (aside) -</pre> - -<h3 id="Definindo_cabeçalho_com_HTML5">Definindo cabeçalho com HTML5</h3> - -<p>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.</p> - -<p>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:</p> - -<pre class="brush: html notranslate"><section> - <h1>Forest elephants</h1> - <p>In this section, we discuss the lesser known forest elephants. -<span> </span><em>...this section continues...</em> - <section> - <h2>Habitat</h2> - <p>Forest elephants do not live in trees but among them. -<span> </span><em>...this subsection continues...</em> - </section> -</section> -<section> - <h3>Mongolian gerbils</h3> - <p>In this section, we discuss the famous mongolian gerbils. -<span> </span><em>...this section continues...</em> -</section> -</pre> - -<p>leva ao seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat -2. Gerbos da Mongólia</pre> - -<p>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.)</p> - -<h3 id="Seção_implícita">Seção implícita</h3> - -<p>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.</p> - -<p>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:</p> - -<pre class="brush: html notranslate"><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> -</pre> - -<p>levando ao seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Habitat (definido implicitamente pelo elemento h3) -</pre> - -<p>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:</p> - -<pre class="brush: html notranslate"><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> -</pre> - -<p>levando ao seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta -2. Gerbos da Mongólia (implicitamente definidos pelo elemento h1, que fechou a seção anterior ao mesmo tempo) -</pre> - -<p>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:</p> - -<pre class="brush: html notranslate"><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> -</pre> - -<p>levando ao seguinte esboço:</p> - -<pre class="notranslate">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) - -</pre> - -<p>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.</p> - -<p>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.</p> - -<h3 id="Sobrepondo_seções_implícitas">Sobrepondo seções implícitas</h3> - -<p> Às vezes, uma seção precisa ter vários títulos. Alguns casos comuns são:</p> - -<ul> - <li>uma seção sobre um livro ou filme que possui um título secundário: - <pre class="brush: html notranslate"><section> - <h1> Justine </h1> - <h2> Os Infortúnios da Virtude </h2> -</section></pre> - - <p>leva ao seguinte esboço:</p> - - <pre class="notranslate">1. Justine - 1.1 Os Infortúnios da Virtude -</pre> - </li> - <li>o cabeçalho secundário pode ser usado para uma lista de tags: - <pre class="brush: html notranslate"><section> - <h1> Seção e esboços de um documento </h1> - <h2> HTML, HTML5, seções, contornos </h2> -</section></pre> - - <p>levando ao seguinte esboço:</p> - - <pre class="notranslate">1. Seção e linhas gerais de um documento - 1.1 HTML, HTML5, Seções, Esboços</pre> - </li> -</ul> - -<p>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:</p> - -<pre class="brush: html notranslate"><section> - <hgroup> - <h1>Justine</h1> - <h2>Les Malheurs de la vertu</h2> - </hgroup> -</section> -</pre> - -<p>leads to the following outline:</p> - -<pre class="notranslate">1. Justine -</pre> - -<h3 id="Caminhos_de_seção"><a>Caminhos de seção</a></h3> - -<p> 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 ")}}.</p> - -<p>Exemplo:</p> - -<pre class="brush: html notranslate"><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> -</pre> - -<p>Este exemplo resulta no seguinte esboço:</p> - -<pre class="notranslate">1. Elefantes da floresta - 1.1 Introdução - 1.2 Habitat -</pre> - -<p>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.</p> - -<h3 id="Seções_de_fora_da_estrutura">Seções de fora da estrutura</h3> - -<p>O HTML5 apresenta quatro novos elementos que permitem definir seções que não pertencem ao esquema principal de um documento da web:</p> - -<ol> - <li>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.</li> - <li>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.</li> - <li>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.</li> - <li>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.</li> -</ol> - -<h2 id="Endereços_e_horário_de_publicação_nos_elementos_de_seção">Endereços e horário de publicação nos elementos de seção</h2> - -<p>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.</p> - -<p>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")}}.</p> - -<p>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")}}.</p> - -<h2 id="Usando_elementos_HTML5_em_navegadores_não-HTML5">Usando elementos HTML5 em navegadores não-HTML5</h2> - -<p>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 <a href="https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM">DOM (Document Object Model)</a> especial e precisam apenas de um estilo CSS específico, pois elementos desconhecidos são estilizados como display: inline por padrão:</p> - -<pre class="brush: css notranslate">section, article, aside, footer, header, nav, hgroup { - display:block; -} -</pre> - -<p>É 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.</p> - -<p>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:</p> - -<pre class="brush: html notranslate"><!--[if lt IE 9]> - <script> - <code class="js">document.createElement(<span class="js__string">"header"</span> ); - document.createElement(<span class="js__string">"footer" </span>); - document.createElement(<span class="js__string">"section"</span>); - document.createElement(<span class="js__string">"aside"</span> ); - document.createElement(<span class="js__string">"nav"</span> ); - document.createElement(<span class="js__string">"article"</span>); - document.createElement(<span class="js__string">"hgroup"</span> ); - document.createElement(<span class="js__string">"time"</span> ); - </script> -</code><code class="html"><span class="html__ie_style"><![endif]--></span></code> -</pre> - -<p>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:</p> - -<pre class="brush: html notranslate"><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> -</pre> - -<p>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 <strong>plano b</strong> adequado para o caso em que este último navegador está configurado para não usar scripts :</p> - -<pre class="brush: html notranslate"><!--[if lt IE 9]> - <script> - <code class="js">document.createElement(<span class="js__string">"header"</span> ); - document.createElement(<span class="js__string">"footer" </span>); - document.createElement(<span class="js__string">"section"</span>); - document.createElement(<span class="js__string">"aside"</span> ); - document.createElement(<span class="js__string">"nav"</span> ); - document.createElement(<span class="js__string">"article"</span>); - document.createElement(<span class="js__string">"hgroup"</span> ); - document.createElement(<span class="js__string">"time"</span> ); - </script></code> -<code class="html"><span class="html__ie_style"> <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></span></code> -<code class="html"><span class="html__ie_style"><![endif]-<span style="font-family: courier new,andale mono,monospace;">-<span style="font-family: monospace;">></span></span></span> </code> -</pre> - -<h2 id="Conclusão">Conclusão</h2> - -<p>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.</p> diff --git a/files/pt-br/orphaned/web/html/element/command/index.html b/files/pt-br/orphaned/web/html/element/command/index.html deleted file mode 100644 index 849232e71d..0000000000 --- a/files/pt-br/orphaned/web/html/element/command/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: command -slug: orphaned/Web/HTML/Element/command -translation_of: Web/HTML/Element/command -original_slug: Web/HTML/Element/command ---- -<h2 class="editable" id="Sumário">Sumário</h2> - -<p>O elemento <code>command </code>representa um comando que o usuário pode chamar.</p> - -<h2 id="Contexto_de_uso">Contexto de uso</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td>Categorias de conteúdo</td> - <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a></td> - </tr> - <tr> - <td>Elementos permitidos</td> - <td>Nenhum, é um elemento vazio.</td> - </tr> - <tr> - <td>Omissão de tag</td> - <td>Deve ter uma tag inicial, mas não deve ter uma tag final.</td> - </tr> - <tr> - <td>Elementos pais permitidos</td> - <td>Qualquer elemento que aceite <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <td>Documento normativo</td> - <td><a class="external" href="http://dev.w3.org/html5/spec/Overview.html#the-command" title="http://dev.w3.org/html5/spec/Overview.html#the-command">HTML5, section 4.11.3</a></td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Como todos ou outros elementos HTML, esse elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p> - -<dl> - <dt>{{ htmlattrdef("checked") }}</dt> - <dd>Indica se o comando está selecionado ou não. Deve ser omitido a não ser que o atributo <code>type</code> seja <code>checkbox </code>ou <code>radio</code>.</dd> - <dt>{{ htmlattrdef("disabled") }}</dt> - <dd>Indica que o elemento não está disponível.</dd> - <dt>{{ htmlattrdef("icon") }}</dt> - <dd>Atribui uma figura para representar o comando.</dd> - <dt>{{ htmlattrdef("label") }}</dt> - <dd>O nome do comando, como será mostrado para o usuário.</dd> - <dt>{{ htmlattrdef("radiogroup") }}</dt> - <dd>Esse atributo dá o nome de um grupo de comandos, com <code>type</code> sendo <code>radio</code>, que vai ser ativado quando o comando for ativado. Esse atributo deve ser omitido a não ser que o atributo <code>type</code> seja <code>radio</code>.</dd> - <dt>{{ htmlattrdef("type") }}</dt> - <dd>Esse atributo indica o tipo do comando. Pode ter somente os seguintes valores: - <ul> - <li> - <p><code>command</code> ou vazio que é o estado padrão e indica que é um comando normal.</p> - </li> - <li> - <p><code>checkbox</code> indica que o comando pode ser alternado utilizando uma caixa de seleção.</p> - </li> - <li> - <p><code>radio</code> indica que o comando pode ser alternado utilizando uma radiobutton.</p> - </li> - </ul> - </dd> -</dl> - -<h2 id="Interface_do_DOM">Interface do DOM</h2> - -<p>Esse elemetno implementa a interface <code><a href="/en/DOM/HTMLCommandElement" rel="internal">HTMLCommandElement</a></code>.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<p>{{ languages( { "zh-cn": "zh-cn/HTML/Element/command" } ) }}</p> diff --git a/files/pt-br/orphaned/web/html/favicon/index.html b/files/pt-br/orphaned/web/html/favicon/index.html deleted file mode 100644 index 019f336089..0000000000 --- a/files/pt-br/orphaned/web/html/favicon/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: favicon -slug: orphaned/Web/HTML/favicon -original_slug: Web/HTML/favicon ---- -<p> </p> - -<h3 id="sect1"> </h3> - -<h3 id="Comentário_da_revisão">Comentário da revisão <a class="revision-comment-link" href="https://developer.mozilla.org/pt-BR/docs/MDN/Contribute/Editor/Basics#The_revision_comment_box" title="Saiba como usar os comentários da revisão"> </a></h3> - -<section class="wiki-block" id="page-comment"> -<h3 id="sect2"> </h3> - -<p>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.</p> -<input></section> - -<div class="wiki-block"> -<h3 id="É_necessário_revisão">É necessário revisão?</h3> - -<ul id="id_review_tags"> - <li><label><input> Técnico - exemplos de código, APIs ou tecnologias</label></li> - <li><label><input> Editorial - prosa, gramática, ou conteúdo</label></li> -</ul> -</div> - -<section class="page-tags wiki-block" id="page-tags"> -<h3 id="sect3"> </h3> -</section> - -<h3 id="Tags">Tags</h3> - -<p> </p> diff --git a/files/pt-br/orphaned/web/html/preloading_content/index.html b/files/pt-br/orphaned/web/html/preloading_content/index.html deleted file mode 100644 index 3c9e184272..0000000000 --- a/files/pt-br/orphaned/web/html/preloading_content/index.html +++ /dev/null @@ -1,238 +0,0 @@ ---- -title: Preloading content with rel="preload" -slug: orphaned/Web/HTML/Preloading_content -translation_of: Web/HTML/Preloading_content -original_slug: Web/HTML/Preloading_content ---- -<p class="summary">O valor <code>preload</code> do atributo <code><a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link#attr-rel">rel</a></code> do elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link" title="O Elemento HTML <link> especifica as relações entre o documento atual e um recurso externo. Possíveis usos para este elemento incluem a definição de uma estrutura relacional para navegação. Este elemento é mais usado para vincular as folhas de estilo."><code><link></code></a> permite que você escreva solicitações de busca declarativas em seu elemento <a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/head" title="The HTML <head> elemento providencia informações gerais (metadados) sobre document, incluindo seu título e links para scripts e folhas de estilos."><code><head></code></a> do HTML, especificando recursos que suas páginas vão precisar logo após o carregamento. Você também pode querer que estes recursos sejam pré-carregados no início do ciclo de vida da página e depois que o mecanismo de renderização do navegador comece a agir. Isso garante que estarão disponíveis mais cedo e que seja menos provável que sua página seja bloqueada do processo de renderizar. Isso aumenta a performance da página. Este artigo oferece um guia básico de como <code>preload</code> funciona.</p> - -<h2 id="O_básico">O básico</h2> - -<p>Você comumente usa o elemento <code><link></code> quando carrega um arquivo de estilo CSS para sua pagina com:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" href="styles/main.css"></pre> - -<p>No entanto, aqui nós usamos <code>rel</code> com valor <code>preload</code>, que transforma o elemento <code><link></code> em um <em>preloader</em> para praticamente qualquer recurso que você precisar. Você também precisa especificar</p> - -<ul> - <li>o caminho para o recurso a ser pré-carregado, no atributo {{htmlattrxref("href", "link")}}</li> - <li>o tipo de recurso que vc esta pré-carregando, no atributo {{htmlattrxref("as", "link")}}.</li> -</ul> - -<p>Um exemplo simples pode se parecer com o seguinte (veja seus <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS and CSS example source</a>, e <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">also live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>JS and CSS preload example</title> - - <link rel="preload" href="style.css" as="style"> - <link rel="preload" href="main.js" as="script"> - - <link rel="stylesheet" href="style.css"> -</head> - -<body> - <h1>bouncing balls</h1> - <canvas></canvas> - - <script src="main.js"></script> -</body></pre> - -<p>Aqui estamos pré-carregando seus arquivos CSS e JavaScript de forma que estarão disponíveis assim que forem necessários mais tarde durante a renderização da página. Este exemplo é um pouco trivial, visto que o browser provavelmente descobre os elementos <code><link rel="stylesheet"></code> e <code><script></code> no mesmo pedaço de HTML que os preloads, mas o benefício pode ser visto mais claramente, quanto mais tarde os recursos são descobertos e quanto maiores forem eles. Por exemplo:</p> - -<ul> - <li>Os recursos apontados de dentro de um arquivo CSS, como fontes ou imagens;</li> - <li>Recursos que podem ser solicitados pelo JavaScript, como JSON, scripts importados ou web workers;</li> - <li>Imagens maiores e arquivos de vídeo.</li> -</ul> - -<p><code>preload</code> também possui outras vantagens. Usando o atributo <code>as</code> para especificar o tipo de conteúdo a ser pre-carregado permite que o browser:</p> - -<ul> - <li>Priorize o carregamento de recursos com maior precisão;</li> - <li id="tw-target-text">Corresponda solicitações futuras, reutilizando o mesmo recurso, se apropriado;</li> - <li>Aplique a <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a> adequada ao recurso;</li> - <li>Defina os cabeçalhos corretos de {{HTTPHeader("Accept")}}.</li> -</ul> - -<h3 id="Qual_tipo_de_conteúdo_pode_ser_pré-carregado">Qual tipo de conteúdo pode ser pré-carregado?</h3> - -<p>Muitos diferentes tipos de conteúdo podem ser pré-carregados. Os valores possíveis para o atributo <code>as</code> são os seguintes:</p> - -<ul> - <li><code>audio</code>: Arquivo de áudio, como usados geralmente em {{htmlelement("audio")}} .</li> - <li><code>document</code>: Um documento HTML destinado a ser incorporado dentro de um {{htmlelement("frame")}} ou {{htmlelement("iframe")}}.</li> - <li><code>embed</code>: Recurso destinado a ser incorporado dentro de um elemento {{htmlelement("embed")}}.</li> - <li><code>fetch</code>: Recurso a ser acessado por um fetch ou XHR request, como um ArrayBuffer ou arquivo JSON.</li> - <li><code>font</code>: Arquivo de fonte.</li> - <li><code>image</code>: Arquivo de imagem.</li> - <li><code>object</code>: Recurso a ser incorporado dentro de um elemento {{htmlelement("object")}}.</li> - <li><code>script</code>: Arquivo JavaScript.</li> - <li><code>style</code>: Estilo CSS.</li> - <li><code>track</code>: Arquivo webVTT.</li> - <li><code>worker</code>: Um web worker JavaScript ou shared worker.</li> - <li><code>video</code>: Arquivo de vídeo, usualmente usado em {{htmlelement("video")}} .</li> -</ul> - -<div class="note"> -<p><strong>Nota</strong>: Você pode ler um pouco mais sobre estes valores e os recursos da web que eles esperam consumir na especificação Preload — veja <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a>. Observe também que a lista completa de valores que o atributo <code>as</code> pode assumir é regida pelas definiçoes nas especificaçoes Fetch — veja <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a>.</p> -</div> - -<h2 id="Incluindo_um_tipo_MIME">Incluindo um tipo MIME</h2> - -<p><code><link></code> pode aceitar um atributo {{htmlattrxref("type", "link")}}, o qual contém o MIME type do recurso para o qual o elemento está apontando. Isto é especialmente útil quando pre-carregando recursos — o browser usará o valor do atributo <code>type</code> para trabalhar se ele suportar o recurso, e irá somente iniciar o carregamento se este for o caso, ignorando se não for.</p> - -<p>Você pode ver um exemplo disto no nosso exemplo de video (veja o <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">full source code</a>, e também <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">the live version</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Video preload example</title> - - <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"> -</head> -<body> - <video controls> - <source src="sintel-short.mp4" type="video/mp4"> - <source src="sintel-short.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p> - </video> -</body></pre> - -<p>Então neste caso, navegadores que suportem MP4s vão pré-carregar e usar MP4, fazendo o reprodutor de video esperançosamente mais suave/mais responsivo para os usuários. Browsers que não suportem MP4 podem continuar carregando versao WebM, mas não tem as vantagens do pré-carregamento. Isto mostra como conteudo pré-carregado pode ser combinado com a filosofia de aprimoramento progressivo.</p> - -<h2 id="Buscas_de_origem_cruzada">Buscas de origem cruzada</h2> - -<p>Se você tem no seu site as configurações de <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> funcionando corretamente, você pode pré-carregar com sucesso recursos de origem cruzada, desde que você defina um atributo {{htmlattrxref("crossorigin","link")}} no seu elemento <code><link></code>.</p> - -<p dir="ltr" id="tw-target-text">Um caso interessante em que isso se aplica mesmo se a busca não é de origem cruzada é arquivos de fonte. Por várias razões, elas precisam ser buscadas usando o modo anônimo CORS (veja <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a> se você esta interesado em todos os detalhes).</p> - -<p>Vamos usar este caso como um exemplo, em primeiro lugar porque o carregamento de fontes é realmente um bom caso de uso para pré-carregamento e, em segundo lugar, porque é mais fácil do que configurar um exemplo de solicitação de origem cruzada. Voce pode ver o exemplo completo no <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Web font example</title> - - <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - - <link href="style.css" rel="stylesheet" type="text/css"> -</head> -<body> - ... -</body></pre> - -<p>Você verá aqui que não apenas estamos fornecendo as dicas do tipo MIME nos atributos de tipo, mas também estamos fornecendo o atributo <code>crossorigin</code> para lidar com os problemas de CORS..</p> - -<h2 id="Adicionando_media">Adicionando media</h2> - -<p>Um bom recurso de alemento <code><link></code> é sua abilidade de aceitar atributos {{htmlattrxref("media", "link")}}. Estes podem aceitar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types">media types</a> ou full-blown <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, permitindo que você faça o pré-carregamento responsivo!</p> - -<p>Vamos ver um exemplo simples (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p> - -<pre class="brush: html notranslate"><head> - <meta charset="utf-8"> - <title>Responsive preload example</title> - - <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"> - <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> - - <link rel="stylesheet" href="main.css"> -</head> -<body> - <header> - <h1>My site</h1> - </header> - - <script> - var mediaQueryList = window.matchMedia("(max-width: 600px)"); - var header = document.querySelector('header'); - - if(mediaQueryList.matches) { - header.style.backgroundImage = 'url(bg-image-narrow.png)'; - } else { - header.style.backgroundImage = 'url(bg-image-wide.png)'; - } - </script> -</body></pre> - -<p>Você verá que estamos incluindo atributos de mídia em nossos <link> elementos, de modo que um estreita imagem é pre-carregada se o usuario estiver em um dispositivo de tela estreita, e uma imagem mais ampla é carregada se eles estiverem em um dispositivo de tela maior. Ainda precisamos anexar a imagem correta ao cabeçalho, dependendo do resultado — nos usamos {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} para fazer isso (veja <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries">Testing media queries</a> para mais informaçoes sobre isso).</p> - -<p>Isso torna muito mais provável que a fonte estará disponível no momento em que a renderização da página for concluída, reduzindo os problemas de FOUT (flash de texto sem estilo).</p> - -<p>Note que isso não precisa ser limitado a imagens, ou até mesmo arquivos do mesmo tipo - pense grande! Talvez você pré-carregue e exiba um diagrama SVG simples se o usuário estiver em uma tela estreita em que a largura de banda e CPU é potencialmente mais limitada ou pré-carregue um bloco complexo de JavaScript e use-o para renderizar um modelo 3D interativo se os recursos do usuário forem mais abundantes.</p> - -<h2 id="Scripting_and_preloads">Scripting and preloads</h2> - -<p>Outra coisa legal sobre preloads é que você pode executá-los completamente com script, se desejar. Por exemplo, aqui estamos criando uma instancia {{domxref("HTMLLinkElement")}}, em seguida anexando-o ao DOM:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span> -preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>Isso significa que o navegador pré-carregará o arquivo JavaScript, mas ainda não o utilizará.</p> - -<p>Para usalo, você poderia fazer isso quando desejado:</p> - -<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span> -document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span> -</code></pre> - -<p>Isso é útil quando você deseja pré-carregar um script, mas adia executá-lo até exatamente quando precisar.</p> - -<h2 id="Outros_mecanismos_de_pré-carregamento_de_recursos">Outros mecanismos de pré-carregamento de recursos</h2> - -<p dir="ltr" id="tw-target-text">Existem outros recursos de pré-carregamento, mas nenhum é tão adequado ao propósito <code><link rel="preload"></code>:</p> - -<ul> - <li><code><link rel="prefetch"></code><br> - tem sido suportado nos navegadores por um longo tempo, mas destina-se à pré-busca de recursos que serão usados na próxima navegação / carregamento da página (por exemplo, quando você vai para a próxima página). Isso é bom, mas não é útil para a página atual! Além disso, os navegadores darão aos recursos de pré-busca uma prioridade menor que os pré-carregados - a página atual é mais importante que a próxima. veja <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> para mais detalhes.</li> - <li><code><link rel="prerender"></code> - <p dir="ltr" id="tw-target-text">é usado para renderizar a página da Web especificada em segundo plano, acelerando o carregamento da página se o usuário navegar para ela. Devido ao potencial de desperdiçar largura de banda dos usuários, Chrome trata<code>prerender</code> como um <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a>.</p> - </li> - <li><code><link rel="subresource"></code> {{non-standard_inline}} - <p dir="ltr" id="tw-target-text">foi suportado no Chrome há algum tempo e tinha a intenção de lidar com recursos de pré-carregamento para o carregamento da página / navegação atual, mas tinha um problema - não havia como calcular uma prioridade para buscar os itens (como não existia naquela época ), então todos acabaram sendo buscados com pouca prioridade, o que não ajudou a situação.</p> - </li> - <li> - <p dir="ltr">Há vários carregadores de recursos baseados em script disponíveis, mas eles não têm nenhum poder sobre a fila de priorização de busca do navegador e estão sujeitos aos mesmos problemas de desempenho.</p> - </li> -</ul> - -<h2 id="Specifications" name="Specifications">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>mais detalhes sobre <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>definições de <code>rel=preload</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("html.elements.link.rel.preload")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li> -</ul> - -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</p> diff --git a/files/pt-br/orphaned/web/javascript/guide/coleções_chaveadas/index.html b/files/pt-br/orphaned/web/javascript/guide/coleções_chaveadas/index.html deleted file mode 100644 index 0328d76216..0000000000 --- a/files/pt-br/orphaned/web/javascript/guide/coleções_chaveadas/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Coleções chaveadas -slug: orphaned/Web/JavaScript/Guide/Coleções_chaveadas -tags: - - Coleções - - Guía - - JavaScript - - Mapas -original_slug: Web/JavaScript/Guide/Coleções_chaveadas ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</div> - -<p class="summary">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.</p> - -<h2 id="Maps">Maps</h2> - -<h3 id="Map_object"><code>Map</code> object</h3> - -<p>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</p> - -<p>The following code shows some basic operations with a <code>Map</code>. 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 <code>[key, value]</code> for each iteration.</p> - -<pre class="brush: js">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" -</pre> - -<h3 id="Object_and_Map_compared"><code>Object</code> and <code>Map</code> compared</h3> - -<p>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. <code>Map</code> objects, however, have a few more advantages that make them better maps.</p> - -<ul> - <li>The keys of an <code>Object</code> are {{jsxref("Global_Objects/String","Strings")}}, where they can be of any value for a <code>Map</code>.</li> - <li>You can get the size of a <code>Map</code> easily while you have to manually keep track of size for an <code>Object</code>.</li> - <li>The iteration of maps is in insertion order of the elements.</li> - <li>An <code>Object</code> has a prototype, so there are default keys in the map. (this can be bypassed using <code>map = Object.create(null)</code>).</li> -</ul> - -<p>These two tips can help you to decide whether to use a <code>Map</code> or an <code>Object</code>:</p> - -<ul> - <li>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.</li> - <li>Use objects when there is logic that operates on individual elements.</li> -</ul> - -<h3 id="WeakMap_object"><code>WeakMap</code> object</h3> - -<p>The {{jsxref("WeakMap")}} object is a collection of key/value pairs in which the <strong>keys are objects only</strong> and the values can be arbitrary values. The object references in the keys are held <em>weakly</em> meaning that they are target of garbage collection (GC) if there is no other reference to the object anymore. The <code>WeakMap</code> API is the same as the <code>Map</code> API.</p> - -<p>One difference to <code>Map</code> objects is that <code>WeakMap</code> 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.</p> - -<p>For more information and example code, see also "Why <em>Weak</em>Map?" on the {{jsxref("WeakMap")}} reference page.</p> - -<p>One use case of <code>WeakMap</code> objects is to store private data for an object or to hide implementation details. The following example is from Nick Fitzgerald blog post <a href="http://fitzgeraldnick.com/weblog/53/">"Hiding Implementation Details with ECMAScript 6 WeakMaps"</a>. The private data and methods belong inside the object and are stored in the <code>privates</code> WeakMap object. Everything exposed on the instance and prototype is public; everything else is inaccessible from the outside world because <code>privates</code> is not exported from the module</p> - -<pre class="brush: js">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; -</pre> - -<h2 id="Sets">Sets</h2> - -<h3 id="Set_object"><code>Set</code> object</h3> - -<p>{{jsxref("Set")}} objects are collections of values. You can iterate its elements in insertion order. A value in a <code>Set</code> may only occur once; it is unique in the <code>Set</code>'s collection.</p> - -<p>The following code shows some basic operations with a <code>Set</code>. See also the {{jsxref("Set")}} reference page for more examples and the complete API.</p> - -<pre class="brush: js">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" -</pre> - -<h3 id="Converting_between_Array_and_Set">Converting between Array and Set</h3> - -<p>You can create an {{jsxref("Array")}} from a Set using {{jsxref("Array.from")}} or the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a>. Also, the <code>Set</code> constructor accepts an <code>Array</code> to convert in the other direction. Note again that <code>Set</code> objects store unique values, so any duplicate elements from an Array are deleted when converting.</p> - -<pre class="brush: js">Array.from(mySet); -[...mySet2]; - -mySet2 = new Set([1,2,3,4]); -</pre> - -<h3 id="Array_and_Set_compared"><code>Array</code> and <code>Set</code> compared</h3> - -<p>Traditionally, a set of elements has been stored in arrays in JavaScript in a lot of situations. The new <code>Set</code> object, however, has some advantages:</p> - -<ul> - <li>Checking whether an element exists in an collection using {{jsxref("Array.indexOf", "indexOf")}} for arrays is slow.</li> - <li><code>Set</code> objects let you delete elements by their value. With an array you would have to splice based on a element's index.</li> - <li>The value {{jsxref("NaN")}} can not be found with <code>indexOf</code> in array.</li> - <li><code>Set</code> objects store unique values, you don't have to keep track of duplicates by yourself.</li> -</ul> - -<h3 id="WeakSet_object"><code>WeakSet</code> object</h3> - -<p>{{jsxref("WeakSet")}} objects are collections of objects. An object in the <code>WeakSet</code> may only occur once; it is unique in the <code>WeakSet</code>'s collection and objects are not enumerable.</p> - -<p>The main differences to the {{jsxref("Set")}} object are:</p> - -<ul> - <li>In contrast to <code>Sets</code>, <code>WeakSets</code> are <strong>collections of objects only</strong> and not of arbitrary values of any type.</li> - <li>The <code>WeakSet</code> is <em>weak</em>: References to objects in the collection are held weakly. If there is no other reference to an object stored in the <code>WeakSet</code>, they can be garbage collected. That also means that there is no list of current objects stored in the collection. <code>WeakSets</code> are not enumerable.</li> -</ul> - -<p>The use cases of <code>WeakSet</code> 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.</p> - -<h2 id="Key_and_value_equality_of_Map_and_Set">Key and value equality of <code>Map</code> and <code>Set</code></h2> - -<p>Both, the key equality of <code>Map</code> objects and the value equality of <code>Set</code> objects, are based on the "<a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-samevaluezero">same-value-zero algorithm</a>":</p> - -<ul> - <li>Equality works like the identity comparison operator <code>===</code>.</li> - <li><code>-0</code> and <code>+0</code> are considered equal.</li> - <li>{{jsxref("NaN")}} is considered equal to itself (contrary to <code>===</code>).</li> -</ul> - -<p>{{PreviousNext("Web/JavaScript/Guide/Indexed_Collections", "Web/JavaScript/Guide/Working_with_Objects")}}</p> 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 deleted file mode 100644 index 2bf5fe39b9..0000000000 --- a/files/pt-br/orphaned/web/javascript/guide/sintaxe_e_tipos/index.html +++ /dev/null @@ -1,584 +0,0 @@ ---- -title: Sintaxe e tipos -slug: orphaned/Web/JavaScript/Guide/Sintaxe_e_tipos -original_slug: Web/JavaScript/Guide/Sintaxe_e_tipos ---- -<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</div> - -<p class="summary">Este capítulo trata sobre a sintaxe básica do JavaScript, declarações de variáveis, tipos de dados e literais.</p> - -<h2 id="Basics" name="Basics">Sintaxe básica</h2> - -<p>JavaScript pega emprestado a maior parte de sua sintaxe do Java, mas também é influenciado por Awk, Perl e Python.</p> - -<p>JavaScript é <strong>case-sensitive</strong> e usa o conjunto de caracteres <strong>Unicode.</strong></p> - -<p>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 (<a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">ASI</a>) 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 <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar">gramática léxica</a> do JavaScript.</p> - -<h2 id="Comentários">Comentários</h2> - -<p>A sintaxe dos comentários em JavaScript é semelhante como em C++ e em muitas outras linguagens:</p> - -<pre class="brush: js">// comentário de uma linha - -/* isto é um comentário longo - de múltiplas linhas. - */ - -/* Você não pode, porém, /* aninhar comentários */ SyntaxError */</pre> - -<h2 id="Declarations" name="Declarations">Declarações</h2> - -<p>Existem três tipos de declarações em JavaScript.</p> - -<dl> - <dt>{{jsxref("Statements/var", "var")}}</dt> - <dd>Declara uma variável, opcionalmente, inicializando-a com um valor.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> - <dd>Declara uma variável local de escopo do bloco, opcionalmente, inicializando-a com um valor.</dd> - <dt>{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> - <dd>Declara uma constante apenas de leitura.</dd> -</dl> - -<h3 id="Variáveis">Variáveis</h3> - -<p>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.</p> - -<p>Um identificador JavaScript deve começar com uma letra, underline (<code>_</code>), ou cifrão (<code>$</code>); 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).</p> - -<p>Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">sequências de escape Unicode</a> como caracteres e identificadores.</p> - -<p>Alguns exemplos de nomes legais são <code>Numeros_visitas</code>, <code>temp99</code>, e<code> _nome</code>.</p> - -<h3 id="Declarando_variáveis">Declarando variáveis</h3> - -<p>Você pode declarar uma variável de três formas:</p> - -<ul> - <li>Com a palavra chave {{jsxref("Statements/var", "var")}}. Por exemplo, var <code>x = 42</code>. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis global.</li> - <li>Por simples adição de valor. Por exemplo, <code>x = 42</code>. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.</li> - <li>Com a palavra chave {{jsxref("Statements/let", "let")}}. Por exemplo, <code>let y = 13</code>. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Grammar_and_Types#Variable_scope">escopo de variável</a> abaixo.</li> -</ul> - -<h3 id="Classificando_variáveis">Classificando variáveis</h3> - -<p>Uma variável declarada usando a declaração <code>var</code> ou <code>let</code> sem especificar o valor inicial tem o valor {{jsxref("undefined")}}.</p> - -<p>Uma tentativa de acessar uma variável não declarada resultará no lançamento de uma exceção {{jsxref("ReferenceError")}}:</p> - -<pre class="brush: js">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 -</pre> - -<p>Você pode usar <code>undefined</code> 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 <code><a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> será avaliada como verdadeira (<code>true</code>).</p> - -<pre class="brush: js">var input; -if(input === undefined){ - facaIsto(); -} else { - facaAquilo(); -} -</pre> - -<p>O valor <code>undefined</code> se comporta como falso (<code>false</code>), quando usado em um contexto booleano. Por exemplo, o código a seguir executa a função <code>myFunction</code> devido o elemento <code>myArray</code> ser undefined:</p> - -<pre class="brush: js">var myArray = []; -if (!myArray[0]) myFunction(); -</pre> - -<p>O valor <code>undefined</code> converte-se para <code>NaN</code> quando usado no contexto numérico.</p> - -<pre class="brush: js">var a; -a + 2; // Avaliado como NaN -</pre> - -<p>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:</p> - -<pre class="brush: js">var n = null; -console.log(n * 32); // a saída para o console será 0. -</pre> - -<h3 id="Variable_scope" name="Variable_scope">Escopo de variável</h3> - -<p>Quando você declara uma váriavel fora de qualquer função, ela é chamada de variável <em>global</em>, 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 <em>local</em>, pois ela está disponível somente dentro dessa função.</p> - -<p>JavaScript antes do ECMAScript 6 não possuía escopo de <a href="/pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Block_statement">declaração de bloco</a>; pelo contrário, uma variável declarada dentro de um bloco de uma <em>função </em>é uma variável local (ou contexto <em>global</em>) do bloco que está inserido a função. Por exemplo o código a seguir exibirá 5, porque o escopo de <code>x</code> está na função (ou contexto global) no qual <code>x</code> é declarado, não o bloco, que neste caso é a declaração <code>if</code>. </p> - -<pre class="brush: js">if (true) { - var x = 5; -} -console.log(x); // 5 -</pre> - -<p>Esse comportamento é alterado, quando usado a declaração <code>let</code> introduzida pelo ECMAScript 6.</p> - -<pre class="brush: js">if (true) { - let y = 5; -} -console.log(y); // ReferenceError: y não está definido -</pre> - -<h3 id="Variable_hoisting" name="Variable_hoisting">Hoisting</h3> - -<p>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 <strong>hoisting</strong>; 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 <code>undefined</code>. Então, mesmo se você usar ou referir a variável e depois declará-la e inicializá-la, ela ainda retornará undefined.</p> - -<pre class="brush: js">/** - * 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"; -})(); -</pre> - -<p>Os exemplos acima serão interpretados como:</p> - -<pre class="brush: js">/** - * 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"; -})(); -</pre> - -<p>Devido o hoisting, todas as declarações <code>var</code> 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.</p> - -<h3 id="Variáveis_Globais">Variáveis Globais</h3> - -<p>Variáveis globais são propriedades do <em>objeto global</em>. Em páginas web o objeto global é a {{domxref("window")}}, assim você pode configurar e acessar variáveis globais utilizando a sintaxe <code>window.variavel.</code> </p> - -<p>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 <code>parent.phoneNumber</code>.</p> - -<h3 id="Constantes">Constantes</h3> - -<p>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.</p> - -<pre class="brush: js">const prefix = '212'; -</pre> - -<p>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.</p> - -<p>As regras de escopo para as constantes são as mesmas para as váriaveis <code>let</code> de escopo de bloco. Se a palavra-chave <code>const</code> for omitida, o identificado é adotado para representar uma variável.</p> - -<p>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: </p> - -<pre class="example-bad brush: js">// 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 -} -</pre> - -<h2 id="Data_structures_and_types" name="Data_structures_and_types">Estrutura de dados e tipos</h2> - -<h3 id="Tipos_de_dados">Tipos de dados</h3> - -<p>O mais recente padrão ECMAScript define sete tipos de dados:</p> - -<ul> - <li>Seis tipos de dados são os chamados {{Glossary("Primitive", "primitivos")}}: - <ul> - <li>{{Glossary("Boolean")}}. <code>true</code> e <code>false</code>.</li> - <li>{{Glossary("null")}}. Uma palavra-chave que indica valor nulo. Devido JavaScript ser case-sensitive, <code>null</code> não é o mesmo que <code>Null</code>, <code>NULL</code>, ou ainda outra variação.</li> - <li>{{Glossary("undefined")}}. Uma propriedade superior cujo valor é indefinido.</li> - <li>{{Glossary("Number")}}. <code>42</code> ou <code>3.14159</code>.</li> - <li>{{Glossary("String")}}. "Howdy"</li> - <li>{{Glossary("Symbol")}} (novo em ECMAScript 6). Um tipo de dado cuja as instâncias são únicas e imutáveis.</li> - </ul> - </li> - <li>e {{Glossary("Object")}}</li> -</ul> - -<p>Embora esses tipos de dados sejam uma quantidade relativamente pequena, eles permitem realizar funções úteis em suas aplicações. <span style="line-height: 1.5;">{{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.</span></p> - -<h3 id="Conversão_de_tipos_de_dados">Conversão de tipos de dados</h3> - -<p>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:</p> - -<pre class="brush: js">var answer = 42; -</pre> - -<p>E depois, você pode atribuir uma string para a mesma variável, por exemplo:</p> - -<pre class="brush: js">answer = "Obrigado pelos peixes..."; -</pre> - -<p>Devido JavaScript ser dinamicamente tipado, essa declaração não gera uma mensagem de erro.</p> - -<p>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:</p> - -<pre class="brush: js">x = "A resposta é " + 42 // "A resposta é 42" -y = 42 + " é a resposta" // "42 é a resposta" -</pre> - -<p>Nas declarações envolvendo outros operadores, JavaScript não converte valores numérico para strings. Por exemplo:</p> - -<pre class="brush: js">"37" - 7 // 30 -"37" + 7 // "377" -</pre> - -<h3 id="Convertendo_strings_para_números">Convertendo strings para números</h3> - -<p>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.</p> - -<ul> - <li id="parseInt()_and_parseFloat()">{{jsxref("parseInt", "parseInt()")}}</li> - <li>{{jsxref("parseFloat", "parseFloat()")}}</li> -</ul> - -<p>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.</p> - -<p><font face="Consolas, Liberation Mono, Courier, monospace">Uma método alternativo de conversão de um número em forma de string é com o operador <code>+</code> (operador soma):</font></p> - -<pre class="brush: js">"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.</pre> - -<h2 id="Literals" name="Literals">Literais</h2> - -<p>Você usa literais para representar valores em JavaScript. Estes são valores fixados, não variáveis, que você <code>literalmente</code> insere em seu script. Esta seção descreve os seguintes tipos literais:</p> - -<ul> - <li>{{anch("Array literal")}}</li> - <li>{{anch("Literais boolean")}}</li> - <li>{{anch("Literais de ponto flutuante")}}</li> - <li>{{anch("Inteiros")}}</li> - <li>{{anch("Objeto literal")}}</li> - <li>{{anch("String literal")}}</li> -</ul> - -<h3 id="Array_literal">Array literal</h3> - -<p>Um literal de array é uma lista de zero ou mais expressões, onde cada uma delas representam um elemento do array, inseridas entre colchetes (<code>[]</code>). 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.</p> - -<p>O exemplo a seguir cria um array <code>coffees</code> com três elementos e um comprimento de três:</p> - -<pre class="brush: js">var coffees = ["French Roast", "Colombian", "Kona"]; -</pre> - -<div class="note"> -<p><strong>Nota :</strong> Um array literal é um tipo de inicializador de objetos. Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects#Using_object_initializers" title="en-US/docs/JavaScript/Guide/Working with Objects#Using Object Initializers">Usando inicializadores de Objetos</a>.</p> -</div> - -<p>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.</p> - -<p>Array literal são também um array de objetos. Veja {{jsxref("Array")}} e <a href="/pt-BR/docs/Web/JavaScript/Guide/Indexed_collections">Coleções indexadas</a> para detalhes sobre array de objetos.</p> - -<h4 id="Vírgulas_extras_em_array_literal">Vírgulas extras em array literal</h4> - -<p>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 <code>undefined</code> para os elementos não especificados. O exemplo a seguir cria um array chamado <code>fish</code>:</p> - -<pre class="brush: js">var fish = ["Lion", , "Angel"]; -</pre> - -<p>Esse array tem dois elementos com valores e um elemento vazio (<code>fish[0]</code> é "Lion", <code>fish[1]</code> é <code>undefined</code>, e <code>fish[2]</code> é "Angel" ).</p> - -<p>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 <code>myList[3]</code>. Todas as outras vírgulas na lista indicam um novo elemento.</p> - -<div class="note"> -<p><strong>Nota :</strong> Vírgulas à direita podem criar erros em algumas versões de navegadores web antigos, é recomendável removê-las.</p> -</div> - -<pre class="brush: js">var myList = ['home', , 'school', ]; -</pre> - -<p>No exemplo a seguir, o comprimento do array é quatro, e <code>myList[0]</code> e <code>myList[2]</code> são <code>undefined</code>.</p> - -<pre class="brush: js">var myList = [ , 'home', , 'school']; -</pre> - -<p>No exemplo a seguir, o comprimento do array é quatro, e <code>myList[1]</code> e <code>myList[3]</code> são <code>undefined</code>. Apenas a última vírgula é ignorada.</p> - -<pre class="brush: js">var myList = ['home', , 'school', , ]; -</pre> - -<p>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 <code>undefined</code> vai aumentar a clareza do código, e consequentemente na sua manutenção.</p> - -<h3 id="Literais_Boolean">Literais Boolean</h3> - -<p>O tipo Boolean tem dois valores literal: <code>true</code> e <code>false</code>.</p> - -<p>Não confunda os valores primitivos Boolean <code>true</code> e <code>false</code> com os valores <code>true</code> e <code>false</code> do objeto Boolean. O objeto Boolean é um invólucro em torno do tipo de dado primitivo. Veja {{jsxref("Boolean")}} para mais informação.</p> - -<h3 id="Inteiros">Inteiros</h3> - -<p>Inteiros podem sem expressos em decimal (base 10), hexadecimal (base 16), octal (base 8) e binário (base 2).</p> - -<ul> - <li>Decimal inteiro literal consiste em uma sequência de dígitos sem um 0 (zero).</li> - <li>0 (zero) em um inteiro literal indica que ele está em octal. Octal pode incluir somente os dígitos 0-7.</li> - <li>0x (ou 0X) indica um hexadecimal. Inteiros hexadecimais podem incluir dígitos (0-9) e as letras a-f e A-F.</li> - <li>0b (ou 0B) indica um binário. Inteiros binário podem incluir apenas os dígitos 0 e 1.</li> -</ul> - -<p>Alguns exemplos de inteiros literal são:</p> - -<pre class="eval">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) -</pre> - -<p>Para maiores informações, veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_literals">Literais numérico na referência Léxica</a>.</p> - -<h3 id="Literais_de_ponto_flutuante">Literais de ponto flutuante</h3> - -<p>Um literal de ponto flutuante pode ter as seguintes partes:</p> - -<ul> - <li>Um inteiro decimal que pode ter sinal (precedido por "<code>+</code>" ou "<code>-</code>"),</li> - <li>Um ponto decimal ("<code>.</code>"),</li> - <li>Uma fração (outro número decimal),</li> - <li>Um expoente.</li> -</ul> - -<p>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").</p> - -<p>Mais sucintamente, a sintaxe é:</p> - -<pre class="eval">[(+|-)][digitos][.digitos][(E|e)[(+|-)]digitos] -</pre> - -<p>Por exemplo:</p> - -<pre class="eval">3.1415926 --.123456789 --3.1E+12 -.1e-23 -</pre> - -<h3 id="Objeto_literal">Objeto literal</h3> - -<p>Um objeto literal é uma lista de zero ou mais pares de nomes de propriedades e valores associados de de um objeto, colocado entre chaves (<code>{}</code>). 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 <code>{</code> será interpretado como início de um bloco.</p> - -<p>Segue um exemplo de um objeto literal. O primeiro elemento do objeto <code>car </code>define uma propriedade, <code>myCar</code>, e atribui para ele uma nova string, "Saturn"; o segundo elemento, a propriedade <code>getCar</code>, é imediatamente atribuído o resultado de chamar uma função (<code>carTypes("Honda")</code>); o terceiro elemento, a propriedade especial, usa uma variável existente (<code>sales)</code>.</p> - -<pre class="brush: js">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 -</pre> - -<p>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.</p> - -<pre class="brush: js">var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" }; - -console.log(car.manyCars.b); // Jeep -console.log(car[7]); // Mazda -</pre> - -<p>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 (<code>.</code>), mas podem ser acessadas e definidas com a notação do tipo array ("<code>[]</code>").</p> - -<pre class="brush: js">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!</pre> - -<p>Observe:</p> - -<pre class="brush: js">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 -</pre> - -<h3 id="String_Literal">String Literal</h3> - -<p>Uma string literal são zero ou mais caracteres dispostos em aspas duplas (<code>"</code>) ou aspas simples (<code>'</code>). 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.</p> - -<pre class="eval">"foo" -'bar' -"1234" -"um linha \n outra linha" -"John's cat" -</pre> - -<p>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 <code>String.length</code> com uma string literal:</p> - -<pre class="brush: js">console.log("John's cat".length) -// Irá exibir a quantidade de caracteres na string incluindo o espaço em branco. -// Nesse caso, 10 caracteres. -</pre> - -<p>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.</p> - -<h4 id="Uso_de_caracteres_especiais_em_string">Uso de caracteres especiais em string</h4> - -<p>Além dos caracteres comuns, você também pode incluir caracteres especiais em strings, como mostrado no exemplo a seguir.</p> - -<pre class="brush: js">"uma linha \n outra linha" -</pre> - -<p>A tabela a seguir lista os caracteres especiais que podem ser usados em strings no JavaScript.</p> - -<table class="standard-table"> - <caption>Tabela: Caracteres especiais no JavaScript</caption> - <thead> - <tr> - <th scope="col">Caracter</th> - <th scope="col">Descrição</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>\0</code></td> - <td>Byte nulo</td> - </tr> - <tr> - <td><code>\b</code></td> - <td>Backspace</td> - </tr> - <tr> - <td><code>\f</code></td> - <td>Alimentador de formulário</td> - </tr> - <tr> - <td><code>\n</code></td> - <td>Nova linha</td> - </tr> - <tr> - <td><code>\r</code></td> - <td>Retorno do carro</td> - </tr> - <tr> - <td><code>\t</code></td> - <td>Tabulação</td> - </tr> - <tr> - <td><code>\v</code></td> - <td>Tabulação vertical</td> - </tr> - <tr> - <td><code>\'</code></td> - <td>Apóstrofo ou aspas simples</td> - </tr> - <tr> - <td><code>\"</code></td> - <td>Aspas dupla</td> - </tr> - <tr> - <td><code>\\</code></td> - <td>Caractere de barra invertida</td> - </tr> - <tr> - <td><code>\<em>XXX</em></code></td> - <td> - <p>Caractere com a codificação Latin-1 especificada por três dígitos octal <em>XXX </em>entre 0 e 377. Por exemplo, \251 é sequência octal para o símbolo de direitos autorais.</p> - </td> - </tr> - <tr> - </tr> - <tr> - <td><code>\x<em>XX</em></code></td> - <td> - <p>Caractere com a codificação Latin-1 especificada por dois dígitos hexadecimal <em>XX</em> entre 00 e FF. Por exemplo, \xA9 é a sequência hexadecimal para o símbolo de direitos autorais.</p> - </td> - </tr> - <tr> - </tr> - <tr> - <td><code>\u<em>XXXX</em></code></td> - <td> - <p>Caractere Unicode especificado por quatro dígitos hexadecimal <em>XXXX</em>. Por exemplo, \u00A9 é a sequência Unicode para o símbolo de direitos autorais. Veja <a href="/pt-BR/docs/Web/JavaScript/Reference/Lexical_grammar#String_literals">sequências de escape Unicode</a>.</p> - </td> - </tr> - </tbody> -</table> - -<h4 id="Caracteres_de_escape">Caracteres de escape</h4> - -<p>Para caracteres não listados na tabela, se precedidos de barra invertida ela é ignorada, seu uso está absoleto e deve ser ignorado.</p> - -<p>Você pode inserir uma aspa dentro de uma string precendendo-a com uma barra invertida. Isso é conhecido como <em>escaping</em> das aspas. Por exemplo:</p> - -<pre class="brush: js">var quote = "Ele lê \"The Cremation of Sam McGee\" de R.W. Service."; -console.log(quote); -</pre> - -<p>O resultado disso seria:</p> - -<pre class="eval">Ele lê "The Cremation of Sam McGee" de R.W. Service. -</pre> - -<p>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 <code>c:\temp </code>para uma string, utilize o seguinte:</p> - -<pre class="brush: js">var home = "c:\\temp"; -</pre> - -<p>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.</p> - -<pre class="brush: js">var str = "esta string \ -está quebrada \ -em várias\ -linhas." -console.log(str); // esta string está quebrada em várias linhas. -</pre> - -<p>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:</p> - -<pre class="brush: js">var poem = -"Rosas são vermelhas,\n\ -Violetas são azul.\n\ -Eu sou esquizofrênico,\n\ -e é isso que sou." -</pre> - -<h2 id="Mais_informação">Mais informação</h2> - -<p>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:</p> - -<ul> - <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Controle de fluxo e manipulação de erro</a></li> - <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration">Laços e iteração</a></li> - <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Functions">Funções</a></li> - <li><a href="/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressões e operadores</a></li> -</ul> - -<p>No próximo capítulo, veremos a construção de controle de fluxos e manipulação de erro.</p> - -<p>{{PreviousNext("Web/JavaScript/Guide/Introduction", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}</p> 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 deleted file mode 100644 index e7084dd594..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/array/prototype/index.html +++ /dev/null @@ -1,207 +0,0 @@ ---- -title: Array.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype -tags: - - Array - - JavaScript - - Propriedade -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<h2 id="Description" name="Description">Descrição</h2> - -<p>Instâncias de {{jsxref("Global_Objects/Array", "Array")}} herdam de <code>Array.prototype</code>. 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")}}.</p> - -<p>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 <a href="https://developers.google.com/web/updates/2018/03/smooshgate">adição de novas funcionalidades ao JavaScript</a>.</p> - -<p>Um fato pouco conhecido: O próprio <code>Array.prototype </code>é um {{jsxref("Global_Objects/Array", "Array")}}</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true -</pre> - -<h2 id="Properties" name="Properties">Propriedades</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Especifica a função que cria um objeto do protótipo.<br> - </dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Reflete o número de elementos em um array.</dd> -</dl> - -<h2 id="Methods" name="Methods">Métodos</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Métodos modificadores</h3> - -<p>Esses métodos modificam o array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}} {{experimental_inline}}</dt> - <dd>Copia uma sequência de elementos do array dentro do array.</dd> - <dt>{{jsxref("Array.prototype.fill()")}} {{experimental_inline}}</dt> - <dd>Preenche todos os elementos de um array com um elemento estático, começando de um índice inicial até um índice final.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Remove e retorna o último elemento de um array.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Adiciona um ou mais elementos ao fim de um array e retorna o novo comprimeiro do array.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Reverte a ordem dos elementos de um array - o primeiro vira o último e o último vira o primeiro.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Remove o primeiro elemento de um array e o retorna.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Ordena os elementos do array em questão e retorna o array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Adiciona e/ou remove elementos de um array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Adiciona um ou mais elementos ao início de um array e retorna o novo comprimento do array.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Métodos de acesso</h3> - -<p>Esses métodos não modificam o array, mas sim retornam alguma representação dele.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Retorna um novo array formado por esse array concatenado com outro(s) array(s) e/ou valores.</dd> - <dt>{{jsxref("Array.prototype.contains()")}} {{experimental_inline}}</dt> - <dd>Verifica se o array possui cer, retornando<code>true</code> ou <code>false</code> apropriadamente.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Retorna uma string com todos os elementos do array</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Retorna um novo array com uma parte do array sobre o qual o método foi chamado</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>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()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Retonar uma string representando o array e seus elementos. Esse método sobrescreve o método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>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()")}}.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Representa o índice da primeira ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Representa o índice da última ocorrência de um valor especificado no array, ou -1 se o valor não estiver incluso no array</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteração</h3> - -<p>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 `<code>length` do array</code> é 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.</p> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Chama a função para cada elemento no array.</dd> - <dt>{{jsxref("Array.prototype.entries()")}} {{experimental_inline}}</dt> - <dd>Retorna um novo objeto <code>Array Iterator</code> que contem o par chave/valor para cada índice no array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Retorna true se todos elementos no array satisfizer a função de teste fornecida.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Retorna true se pelo menos um elemento no array satisfizer a função de teste fornecida.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Cria um novo array com todos os elementos do array para qual a função de filtragem fornecida retorne true.</dd> - <dt>{{jsxref("Array.prototype.find()")}} {{experimental_inline}}</dt> - <dd>Retorna o valor encontrado no array, se um elemento no array satisfizer a funçào de teste fornecida ou `<code>undefined` </code>se não for encontrado.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}} {{experimental_inline}}</dt> - <dd>Retorna o índice no array, se um elemento no array satisfizer a função de teste fornecida ou -1 se não for encontrado.</dd> - <dt>{{jsxref("Array.prototype.keys()")}} {{experimental_inline}}</dt> - <dd>Retorna um novo <code>Array Iterator</code> que contem a chave para cada índice no array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Cria um novo array com os resultados da função fornecida chamada em cada elemento na array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Aplica uma função contra um acumulador e cada valor do array (da esquerda para direita) para reduzi-los a um único valor.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Aplica uma função contra um acumulador e cada valor do array (da direita para esquerda) para reduzi-los a um único valor.</dd> - <dt>{{jsxref("Array.prototype.values()")}} {{experimental_inline}}</dt> - <dd>Retorna um novo objeto <code>Array Iterator</code> que contem os valores de cada índice no array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}} {{experimental_inline}}</dt> - <dd>Retorna um novo objeto <code>Array Iterator</code> que contem os valores de cada índice no array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos</h3> - -<p>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 <code>length</code> (comprimento), e que possa ser usado a partir de propriedades numéricas (como índices no formato <code>array[5]</code>). 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 <code>length </code>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.</p> - -<h2 id="Specifications" name="Specifications">Especifiações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Situação</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>ECMAScript 1st Edition.</td> - <td>Padrão</td> - <td>Definição inicial</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade com Navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also" name="See_also">Veja também</h2> - -<ul> - <li>{{jsxref("Global_Objects/Array", "Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> 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 deleted file mode 100644 index 7b5395be96..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: BigInt.prototype -slug: orphaned/Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Propriedade - - Prototipo - - Referencia -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -original_slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -<div>{{JSRef}}</div> - -<p>A propriedade <strong><code>BigInt.prototype</code></strong> representa o protótipo para o construtor {{JSxRef("BigInt")}} .</p> - -<p>{{JS_Property_Attributes(0, 0, 0)}}</p> - -<h2 id="Descrição">Descrição</h2> - -<p>Todas instância de {{JSxRef("BigInt")}} herdam de <code>BigInt.prototype</code>. O objeto protótipo do construtor {{JSxRef("BigInt")}} pode ser modificado para afetar todas instâncias de {{JSxRef( "BigInt")}} .</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>BigInt.prototype.constructor</code></dt> - <dd>Retorna a função que cria instâncias deste objeto. Por padrão é o objeto<br> - {{JSxRef("BigInt")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{JSxRef("BigInt.prototype.toLocaleString()")}}</dt> - <dd>Retorna uma string com uma representação sensível ao idioma para este número. Sobrescreve o método {{JSxRef("Object.prototype.toLocaleString()")}}<br> - </dd> - <dt>{{JSxRef("BigInt.prototype.toString()")}}</dt> - <dd>Retorna uma string respresentando o objeto específicado em um base específica. Sobrescreve o método {{JSxRef("Object.prototype.toString()")}} .</dd> - <dt>{{JSxRef("BigInt.prototype.valueOf()")}}</dt> - <dd>Retorna o valor primitivo de um objeto específicado. Sobrescreve o método {{JSxRef("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificações</th> - <th scope="col">Estado</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-bigint.prototype', 'BigInt.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("javascript.builtins.BigInt.prototype")}}</p> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html deleted file mode 100644 index 393ee10017..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/clear/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Map.prototype.clear() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/clear -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/clear -original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>clear()</strong></code> remove todos os elementos de um objeto <code>Map</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>meuMapa</em>.clear();</code></pre> - -<h3 id="Valor_retornado">Valor retornado</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_método_clear">Usando o método <code>clear</code></h3> - -<pre class="brush: js">var meuMapa = new Map(); -meuMapa.set('bar', 'baz'); -meuMapa.set(1, 'foo'); - -meuMapa.size; // 2 -meuMapa.has('bar'); // true - -meuMapa.clear(); - -meuMapa.size; // 0 -meuMapa.has('bar') // false -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.clear', 'Map.prototype.clear')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatGeckoDesktop("19.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html deleted file mode 100644 index 41631bb2cc..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/delete/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Map.prototype.delete() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/delete -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/delete -original_slug: Web/JavaScript/Reference/Global_Objects/Map/delete ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>delete()</strong></code> remove o elemento especificado de um objeto <code>Map</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="brush: js">meuMapa.delete(chave);</pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt>key</dt> - <dd>Obrigatório. A chave do elemento a ser removido do objeto <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_retornado">Valor retornado</h3> - -<p>Retorna <code>true</code> se um elemento existia no objeto <code>Map</code> e foi removido, ou <code>false</code> se o elemento não existia.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_método_delete">Usando o método <code>delete</code></h3> - -<pre class="brush: js">var meuMapa = new Map(); -meuMapa.set('bar', 'foo'); - -meuMapa.delete('bar'); // Retorna true. Removido com sucesso. -meuMapa.has('bar'); // Retorna false. O elemento com valor "bar" já não existe mais no mapa. -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html deleted file mode 100644 index 8ca232d906..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/entries/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Map.prototype.entries() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/entries -tags: - - ECMAScript 2015 - - Iterador - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/entries -original_slug: Web/JavaScript/Reference/Global_Objects/Map/entries ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>entries()</strong></code> retorna um novo objeto <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterador</a></strong> que contém os pares <code>[chave, valor]</code> para cada elemento no objeto <code>Map</code> pela ordem de inserção.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>meuMapa</em>.entries()</code></pre> - -<h3 id="Retorna_o_valor">Retorna o valor</h3> - -<p>Um novo objeto iterador de {{jsxref("Map")}}.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_entries()">Usando <code>entries()</code></h3> - -<pre class="brush:js">var meuMap = new Map(); -meuMap.set('0', 'foo'); -meuMap.set(1, 'bar'); -meuMap.set({}, 'baz'); - -var mapIter = myMap.entries(); - -console.log(mapIter.next().value); // ["0", "foo"] -console.log(mapIter.next().value); // [1, "bar"] -console.log(mapIter.next().value); // [Object, "baz"] -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("20") }}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("20")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map.prototype.keys()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html deleted file mode 100644 index c0387a1e74..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/foreach/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Map.prototype.forEach() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/forEach -tags: - - ECMAScript 2015 - - JavaScript - - Mapa - - Prototipo - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/forEach -original_slug: Web/JavaScript/Reference/Global_Objects/Map/forEach ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>forEach()</strong></code> executa uma função fornecida uma vez para cada par de chave/valor no objeto <code>Map</code>, pela ordem de inserção.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>meuMapa</em>.forEach(<em>callback</em>[, <em>thisArg</em>])</code></pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>callback</code></dt> - <dd>Função a ser executada para cada elemento.</dd> - <dt><code>thisArg</code></dt> - <dd>Valor a utilizar como o <code>this</code> quando estiver executando o <code>callback</code>.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="Descrição">Descrição</h2> - -<p>O método <code>forEach</code> executa o <code>callback</code> fornecido uma vez para cada chave existente no mapa. Ele não é invocado para as chaves que foram removidas. No entanto, ele é executado para ítens que estão presentes mesmo com o valor <code>undefined</code>.</p> - -<p><code>callback</code> é invocado com <strong>três argumentos</strong>:</p> - -<ul> - <li>o <strong>valor do elemento</strong></li> - <li>a <strong>chave do elemento</strong></li> - <li>o <strong><code>Objeto Map</code> que está sendo atravessado</strong></li> -</ul> - -<p>Se um parâmetro <code>thisArg</code> for fornecido ao <code>forEach</code>, ele será passado ao <code>callback</code> quando invocado, e será utilizado como o valor de seu <code>this</code>. De outra forma, o valor <code>undefined</code> será passado como o valor de seu <code>this</code>. O valor <code>this</code> observável em última instância por callback é determinado de acordo com <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">as regras comuns para determinar o <code>this</code> sendo visto por uma função</a>.</p> - -<p>Cada valor é visitado uma vez, exceto para o caso em que ele foi removido e re-adicionado antes do <code>forEach</code> ter acabado de ser executado. o <code>callback</code> não é invocado para valores removidos antes de serem visitados. Novos valores adicionados antes do <code>forEach</code> ter acabado serão visitados.</p> - -<p><code>forEach</code> executa a função de <code>callback</code> uma vez para cada elemento no objeto <code>Map</code>; ele não retorna um valor.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Imprimindo_o_conteúdo_de_um_objeto_Map">Imprimindo o conteúdo de um objeto <code>Map</code></h3> - -<p>O código a seguir registra uma linha de log para cada elemento no objeto <code>Map</code>:</p> - -<pre class="brush:js">function registrarElementosDoMapa(valor, chave, mapa) { - console.log(`m[${chave}] = ${valor}`); -} -new Map([['foo', 3], ['bar', {}], ['baz', undefined]]).forEach(registrarElementosDoMapa); -// logs: -// "m[foo] = 3" -// "m[bar] = [object Object]" -// "m[baz] = undefined" -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.foreach', 'Map.prototype.forEach')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatGeckoDesktop("25.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("25.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Array.prototype.forEach()")}}</li> - <li>{{jsxref("Set.prototype.forEach()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html deleted file mode 100644 index 9c8b66e302..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/get/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Map.prototype.get() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/get -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/get -original_slug: Web/JavaScript/Reference/Global_Objects/Map/get ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>get()</strong></code> retorna um elemento específico de um objeto de <code>Map</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.get(chave);</code></pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt>chave</dt> - <dd>Obrigatório. A chave do elemento para retornar do objeto de <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Retorna o elemento associado com a chave específica ou <code>undefined</code> se a chave não puder ser encontrada no objeto de <code>Map</code>.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_métodoget">Usando o método<code>get</code></h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', 'foo'); - -myMap.get('bar'); // Retorna "foo". -myMap.get('baz'); // Retorna undefined. -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.get', 'Map.prototype.get')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("javascript.builtins.Map.get")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html deleted file mode 100644 index c929b131d7..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/has/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Map.prototype.has() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/has -translation_of: Web/JavaScript/Reference/Global_Objects/Map/has -original_slug: Web/JavaScript/Reference/Global_Objects/Map/has ---- -<div>{{JSRef}}</div> - -<p>O método <strong><code>has()</code></strong> retorna um valor booleano indicando quando um elemento com a chave especificada existe ou não</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-has.html")}}</div> - - - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.has(key);</code></pre> - -<h3 id="Parametros">Parametros</h3> - -<dl> - <dt>key</dt> - <dd>Necessário. A chave para verificar a presença do elemento no objeto <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_retornado">Valor retornado</h3> - -<dl> - <dt>Booleano</dt> - <dd>Retorna <code>true</code> se um elemento com a chave especificada existe no objeto <code>Map</code>; caso contrário: <code>false</code>.</dd> -</dl> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_método_has">Usando o método <code>has</code></h3> - -<pre class="brush: js">var myMap = new Map(); -myMap.set('bar', "foo"); - -myMap.has('bar'); // retorna true -myMap.has('foo'); // retorna false -myMap.has('barz'); // retorna false -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{Compat("javascript.builtins.Map.has")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.set()")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html deleted file mode 100644 index cf8c3bfab2..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/index.html +++ /dev/null @@ -1,226 +0,0 @@ ---- -title: Map -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Mapa -translation_of: Web/JavaScript/Reference/Global_Objects/Map -original_slug: Web/JavaScript/Reference/Global_Objects/Map ---- -<div>{{JSRef}}</div> - -<p>O objeto <strong><code>Map</code></strong> é um mapa simples de chave/valor. Qualquer valor (objeto e {{Glossary("Primitive", "valores primitivos")}}) pode ser usado como uma chave ou um valor.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox notranslate"><code>new Map([iterable]) -</code></pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt><code>iterable</code></dt> - <dd> - <p><code>Iterable</code> é um Array ou outro objeto iterável cujos elementos são pares de chave-valor (2-element Arrays). Cada par de chave-valor é adicionado ao novo Map. <code>null</code> é tratado como <code>undefined</code>.</p> - </dd> -</dl> - -<h2 id="Descrição">Descrição</h2> - -<p>Um objeto Map itera seus elementos em ordem de inserção — um loop {{jsxref("Statements/for...of", "for...of")}} retorna um array de <code>[chave, valor]</code> para cada iteração.</p> - -<p>Deve-se notar que um Map que é um mapa de um objeto, especialmente, um dicionário de dicionários somente irá mapear apenas para a ordem de inserção -- que é aleatória e não ordenada.</p> - -<h3 id="Igualidade_de_valores">Igualidade de valores</h3> - -<p>A igualdade das chaves é baseada no algoritmo "SameValueZero" (mesmo valor): <code>NaN</code> é considerado igual à <code>NaN</code> (mesmo que <code>NaN !== NaN</code>) e todos os outros valores são considerados iguals de acordo com a semantica do operador ===. Em versões anteriores do rascunho ECMAScript 2015 draft <code>-0</code> and <code>+0</code> eram considerados diferentes (mesmo que <code>-0 === +0</code>), isto foi trocado em versões posteriores e foi aplicado no Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) e em uma<a href="https://code.google.com/p/v8/issues/detail?id=3069"> build recente nightly do Chrome</a>.</p> - -<h3 id="Objetos_e_mapas_comparados">Objetos e mapas comparados</h3> - -<p>{{jsxref("Object", "Objects")}} são similares a Maps onde ambos deixam adicionar chaves para valores, recuperar estes valores, apagar chaves, e detectar quando algo foi adicionado em uma chave. Por causa disso (e porque não existem alternativas pré-construidas), <code>Objects</code> historicamente foram usados como <code>Maps</code>; no entanto, existem diferenças importantes entre <code>Objects</code> e <code>Maps</code> que fazem o uso do Map melhor:</p> - -<ul> - <li>Um <code>Object</code> tem um prototype, então existem chaves padrão no mapa. Isto pode ser evitado usando um Map<code> = Object.create(null)</code> desde ES5, mas raramente é feito.</li> - <li>As chaves de um <code>Object</code> são {{jsxref("String", "Strings")}} e {{jsxref("Symbol", "Symbols")}}, porém elas podem ser qualquer valor em um <code>Map</code>.</li> - <li>Você pode obter o tamanho de um <code>Map</code> facilmente enquanto em um <code>Object </code>é necessário ter este controle manualmente.</li> -</ul> - -<p>Isto não significa que você deve usar <code>Map</code>s em todo lugar, objetos ainda serão usados na maioria dos casos. Instancias de <code>Map</code> são úteis somente para coleções, e você deve considerar adaptar seu codigo onde você usou objetos para isto anteriormente. Objects devem ser usados como registros, com campos e métodos.<br> - Se você não tem certeza qual usar, pergunte-se as seguintes questões:</p> - -<ul> - <li>As keys são desconhecidas até o tempo de execução, você precisa procurá-las dinamicamente?</li> - <li>Todos os valores sempre serão do mesmo tipo, e podem ser usados de forma intercambiável?</li> - <li>Você precisa de keys que não são strings?</li> - <li>Os pares key-value são adicionados ou removidos frequentemente?</li> - <li>Você tem uma quantidade de pares key-value arbitrária (de troca fácil) ?</li> - <li>A coleção é iterada?</li> -</ul> - -<p>Se você respondeu "sim" em qualquer uma dessas questões, é um sinal de que você quer utilizar um <code>Map</code>. Se ao invés disto você tem um numero fixo de keys, trabalhe eles individualmente, e faça diferenciação entre o uso deles, você quer um objeto.</p> - -<h2 id="Propriedades">Propriedades</h2> - -<dl> - <dt><code>Map.length</code></dt> - <dd>O tamanho do mapa é 0.</dd> - <dt>{{jsxref("Map.@@species", "get Map[@@species]")}}</dt> - <dd>A função construtora que é usada para criar objetos derivados.</dd> - <dt>{{jsxref("Map.prototype")}}</dt> - <dd>Representa o prototype para o construtor de <code>Map</code>. Permite a adição de propriedades para todos os objetos <code>Map</code>.</dd> -</dl> - -<h2 id="Instâncias_de_Map">Instâncias de <code>Map</code></h2> - -<p>Todas as instancias de <code>Map</code> herdam de {{jsxref("Map.prototype")}}.</p> - -<h3 id="Propriedades_2">Propriedades</h3> - -<p>{{page('pt-BR/Web/JavaScript/Reference/Global_Objects/Map/prototype','Properties')}}</p> - -<h3 id="Métodos">Métodos</h3> - -<p>{{page('pt-BR/Web/JavaScript/Reference/Global_Objects/Map/prototype','Methods')}}</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_objeto_Map">Usando o objeto <code>Map</code></h3> - -<pre class="brush: js notranslate">var myMap = new Map(); - -var keyString = "uma string", - keyObj = {}, - keyFunc = function () {}; - -// configurando os valores -myMap.set(keyString, "valor associado com 'uma string'"); -myMap.set(keyObj, "valor associado com keyObj"); -myMap.set(keyFunc, "valor associado com keyFunc"); - -myMap.size; // 3 - -// obtendo os valores -myMap.get(keyString); // "valor associado com 'uma string'" -myMap.get(keyObj); // "valor associado com keyObj" -myMap.get(keyFunc); // "valor associado com keyFunc" - -myMap.get("uma string"); // "valor associado com 'uma string'" - // pois keyString === 'uma string' -myMap.get({}); // undefined, pois keyObj !== {} -myMap.get(function() {}) // undefined, pois keyFunc !== function () {} -</pre> - -<h3 id="Usando_NaN_como_Map_keys">Usando <code>NaN</code> como <code>Map</code> keys</h3> - -<p><code>NaN</code> pode também ser usado como key. Mesmo que <code>NaN</code> não seja igual a ele mesmo (<code>NaN !== NaN</code>) é true, o seguinte exemplo funciona, porquê <code>NaN</code>s são indistinguíveis uma para o outro:</p> - -<pre class="brush: js notranslate">var myMap = new Map(); -myMap.set(NaN, "not a number"); - -myMap.get(NaN); // "not a number" - -var otherNaN = Number("foo"); -myMap.get(otherNaN); // "not a number" -</pre> - -<h3 id="Iterando_Maps_com_for..of">Iterando <code>Maps</code> com <code>for..of</code></h3> - -<p>Maps podem ser iterados usando um <code>for..of</code> :</p> - -<pre class="brush: js notranslate">var myMap = new Map(); -myMap.set(0, "zero"); -myMap.set(1, "um"); -for (var [key, value] of myMap) { - console.log(key + " = " + value); -} -// 0 = zero -// 1 = um - -for (var key of myMap.keys()) { - console.log(key); -} -// 0 -// 1 - -for (var value of myMap.values()) { - console.log(value); -} -// zero -// um - -for (var [key, value] of myMap.entries()) { - console.log(key + " = " + value); -} -// 0 = zero -// 1 = um -</pre> - -<h3 id="Iterando_Maps_com_forEach">Iterando <code>Maps</code> com <code>forEach()</code></h3> - -<p>Maps podem ser iterados usando um <code>forEach()</code>:</p> - -<pre class="brush: js notranslate">myMap.forEach(function(value, key) { - console.log(key + " = " + value); -}, myMap) -// Mostrará 2 logs; o primeiro com "0 = zero" e o segundo com "1 = um" -</pre> - -<h3 id="Relação_com_objetos_Array">Relação com objetos <code>Array</code></h3> - -<pre class="brush: js notranslate">var kvArray = [["key1", "value1"], ["key2", "value2"]]; - -// Utiliza o construtor padrão de Map para converter um Array de 2 dimensões de chave-valor Array em um mapa -var myMap = new Map(kvArray); - -myMap.get("key1"); // retorna "value1" - -// Utiliza Array.from para converter um mapa em um Array de 2 dimensões de chave-valor -console.log(Array.from(myMap)) // Mostrará exatamente o mesmo Array que kvArray - -// Uma forma mais sucinta de realizar a mesma conversão com o operador spread -console.log([...myMap]); - -// Ou usa o operador spread nas chaves ou valores para o iterador pegar -// um array com somente as chaves ou valores -console.log([...myMap.keys()]); // Mostrará ["key1", "key2"] -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map-objects', 'Map')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{Compat("javascript.builtins.Map")}}</p> - -<p>[1] Começando com Chrome 31, a feature ficou disponível sob modificação de configurações. Em <code>chrome://flags</code>, ative a entrada activate “Enable Experimental JavaScript”.</p> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=697479">Map and Set bug at Mozilla</a></li> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:simple_maps_and_sets">ECMAScript Harmony proposal</a></li> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html deleted file mode 100644 index 1a68389071..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/keys/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Map.prototype.keys() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/keys -translation_of: Web/JavaScript/Reference/Global_Objects/Map/keys -original_slug: Web/JavaScript/Reference/Global_Objects/Map/keys ---- -<div>{{JSRef}}</div> - -<div>O método <code><strong>keys()</strong></code> retorna um novo objeto do tipo <code><strong>Iterator</strong></code> que contem uma chave para cada elemento dentro do objeto <code>Map </code>na ordem que foram inseridos.</div> - -<p> </p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.keys()</code></pre> - -<h3 id="Tipo_de_Retorno">Tipo de Retorno</h3> - -<p>Um novo objeto {{jsxref("Map")}}.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_keys()">Usando <code>keys()</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("0", "foo"); -myMap.set(1, "bar"); -myMap.set({}, "baz"); - -var mapIter = myMap.keys(); - -console.log(mapIter.next().value); // "0" -console.log(mapIter.next().value); // 1 -console.log(mapIter.next().value); // Object -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definição inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatGeckoDesktop("20")}}</td> - <td>{{CompatNo}}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("20") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.values()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html deleted file mode 100644 index e381342aba..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/set/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: Map.prototype.set() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/set -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Prototype - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/set -original_slug: Web/JavaScript/Reference/Global_Objects/Map/set ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>set()</strong></code> adiciona ou atualiza um elemento com uma <code>chave</code> e <code>valor</code> específicos a um objeto de <code>Map.</code></p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>myMap</em>.set(chave, valor);</code></pre> - -<h3 id="Parâmetros">Parâmetros</h3> - -<dl> - <dt>chave</dt> - <dd>Obrigatório. A chave do elemento para adicionar ao objeto de <code>Map</code>.</dd> - <dt>valor</dt> - <dd>Obrigatório. O valor do elemento para adicionar ao objeto de <code>Map</code>.</dd> -</dl> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>O objeto de <code>Map</code>.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_método_set">Usando o método <code>set</code> </h3> - -<pre class="brush: js">var myMap = new Map(); - -// adiciona novos elementos ao map -myMap.set('bar', 'foo'); -myMap.set(1, 'foobar'); - -// Atualiza um elemento no map -myMap.set('bar', 'baz'); -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td><span class="hidden"> </span>Definição inicial.</td> - </tr> - <tr> - <td><span class="hidden"> </span>{{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("13.0")}}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("13.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Notas_sobre_compatibilidade">Notas sobre compatibilidade</h2> - -<ul> - <li>Antes do Firefox 33 {{geckoRelease("33")}}, <code>Map.prototype.set</code> retornava <code>undefined</code> e não era encadeável. Isso foi corrigido ({{bug(1031632)}}). O comportamento também pode ser encontrado no Chrome/v8 (<a href="https://code.google.com/p/v8/issues/detail?id=3410">issue</a>) e IE11.</li> -</ul> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Map.prototype.get()")}}</li> - <li>{{jsxref("Map.prototype.has()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html deleted file mode 100644 index f174ba9976..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/size/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Map.prototype.size -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/size -translation_of: Web/JavaScript/Reference/Global_Objects/Map/size -original_slug: Web/JavaScript/Reference/Global_Objects/Map/size ---- -<div>{{JSRef}}</div> - -<p>A propriedade de acesso <code><strong>size</strong></code> retorna o número de elementos em um objeto {{jsxref("Map")}}.</p> - -<h2 id="Descrição">Descrição</h2> - -<p>O valor de <code>size</code> é um integer representando quantas entradas o objeto <code>Map</code> tem. Uma function set de acesso ao size é <code>undefined</code>; você não pode trocar esta propriedade.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_size">Usando <code>size</code></h3> - -<pre class="brush:js">var myMap = new Map(); -myMap.set("a", "alpha"); -myMap.set("b", "beta"); -myMap.set("g", "gamma"); - -myMap.size // 3 -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definição Inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>38</td> - <td>{{ CompatGeckoDesktop("19") }}</td> - <td>{{ CompatIE("11") }}</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatGeckoMobile("19")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Gecko_-_Notas_específicas">Gecko - Notas específicas</h2> - -<ul> - <li>Do Gecko 13 {{geckoRelease("13")}} ao Gecko 18 {{geckoRelease("18")}} a propriedade size foi implementada como um metodo <strong><code>Map.prototype.size()</code></strong>, isto foi trocado para uma propriedade em versões posteriores conforme a especificação ECMAScript 6 ({{bug("807001")}}).</li> -</ul> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li>{{jsxref("Map")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html b/files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html deleted file mode 100644 index 67c68e2437..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/global_objects/map/values/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Map.prototype.values() -slug: orphaned/Web/JavaScript/Reference/Global_Objects/Map/values -tags: - - Iterador - - Mapa - - metodo -translation_of: Web/JavaScript/Reference/Global_Objects/Map/values -original_slug: Web/JavaScript/Reference/Global_Objects/Map/values ---- -<div>{{JSRef}}</div> - -<p>O método <code><strong>values()</strong></code> retorna um novo objeto <strong><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterator</a></strong> que contém os valores de cada elemento do objeto <code>Map</code> em ordem de inserção.</p> - -<div>{{EmbedInteractiveExample("pages/js/map-prototype-values.html")}}</div> - - - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox"><code><em>meuMap</em>.values()</code></pre> - -<h3 id="Valor_de_retorno">Valor de retorno</h3> - -<p>Um novo objeto iterador do {{jsxref("Map")}}.</p> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Usando_o_values()">Usando o <code>values()</code></h3> - -<pre class="brush:js">var meuMap = new Map(); -meuMap.set('0', 'foo'); -meuMap.set(1, 'bar'); -meuMap.set({}, 'baz'); - -var mapIter = myMap.values(); - -console.log(mapIter.next().value); // "foo" -console.log(mapIter.next().value); // "bar" -console.log(mapIter.next().value); // "baz"</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2> - - - -<p>{{Compat("javascript.builtins.Map.values")}}</p> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li>{{jsxref("Map.prototype.entries()")}}</li> - <li>{{jsxref("Map.prototype.keys()")}}</li> -</ul> diff --git a/files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html b/files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html deleted file mode 100644 index 84ea16c7bc..0000000000 --- a/files/pt-br/orphaned/web/javascript/reference/operators/pipeline_operator/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Operador Pipeline -slug: orphaned/Web/JavaScript/Reference/Operators/Pipeline_operator -translation_of: Web/JavaScript/Reference/Operators/Pipeline_operator -original_slug: Web/JavaScript/Reference/Operators/Pipeline_operator ---- -<div>{{jsSidebar("Operators")}} {{SeeCompatTable}}</div> - -<p>O operador experimental pipeline <code>|></code> (atualmente no estágio 1) permite a criação de chamadas de funções encadeadas de maneira legível. Basicamente, o operador de pipeline fornece açúcar sintático em uma chamada de função com um único argumento, permitindo que você escreva</p> - -<p><code>'%21' |> decodeURI</code> ao invés de <code>decodeURI('%21')</code>.</p> - -<h2 id="Sintaxe">Sintaxe</h2> - -<pre class="syntaxbox">expressão |> função</pre> - -<h2 id="Exemplos">Exemplos</h2> - -<h3 id="Chamadas_de_funções_encadeadas">Chamadas de funções encadeadas</h3> - -<p> </p> - -<p>O operador de pipeline pode melhorar a legibilidade ao encadear várias funções.</p> - -<pre class="brush: js">const double = (n) => n * 2; -const increment = (n) => n + 1; - -// sem o perador pipeline -double(increment(double(double(5)))); // 42 - -// com o operador pipeline -5 |> double |> double |> increment |> double; // 42 -</pre> - -<h2 id="Especificações">Especificações</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificação</th> - <th scope="col">Status</th> - <th scope="col">Comentário</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://tc39.github.io/proposal-pipeline-operator/#sec-intro">Pipeline operator draft</a></td> - <td>Estágio 1</td> - <td>Não faz parte da especificação ECMAScript ainda.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidade_com_os_navegadores">Compatibilidade com os navegadores</h2> - -<div> - - -<p>{{Compat("javascript.operators.pipeline")}}</p> -</div> - -<h2 id="Ver_também">Ver também</h2> - -<ul> - <li><a href="https://github.com/tc39/proposals">TC39 proposals</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/reference/api/index.html b/files/pt-br/orphaned/web/reference/api/index.html deleted file mode 100644 index c776c696d5..0000000000 --- a/files/pt-br/orphaned/web/reference/api/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Referências API Web -slug: orphaned/Web/Reference/API -translation_of: Web/Reference/API -original_slug: Web/Reference/API ---- -<p>A internet oferece uma vasta gama de APIs para facilitar a execução de várias tarefas úteis. Elas podem ser usadas através de códigos JavaScript e permitem que você execute pequenos ajustes no elemento {{domxref("window")}} ou {{domxref("element")}} até gerar efeitos de vídeo e áudio usando APIs como <a href="/pt-BR/docs/Web/API/WebGL_API">WebGL</a> e <a href="/pt-BR/docs/Web/API/API_Web_Audio">Web Audio</a>.</p> - -<p>Todas as interfaces disponíveis pelas APIs estão listadas individualmente na página <a href="/pt-BR/docs/Web/API">de início.</a></p> - -<p><br> - Existe também uma lista de com todos os eventos disponíveis na <a href="/en-US/docs/Web/Events">Referencia de Eventos</a>.</p> - -<div class="cleared topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/pt-br/docs/DOM">Document Object Model</a></dt> - <dd><span id="result_box" lang="pt"><span class="hps">O DOM é</span> <span class="hps">uma API que permite</span> <span class="hps">acessar e modificar o documento atual. Permite a manipulação dos elementos </span></span>{{domxref("Node")}} e {{domxref("Element")}}<span lang="pt"><span class="hps"> do documento</span></span>. HTML, XML e SVG estenderam o DOM para manipular<span class="st"> </span>seus elementos específicos.</dd> - <dt> </dt> - <dt>APIs para dispositivos</dt> - <dd><span id="result_box" lang="pt"><span class="hps">Estas </span><span class="hps">APIs</span> <span class="hps">permitem o acesso a</span> <span class="hps">vários recursos</span> <span class="hps">de hardware disponíveis</span> <span class="hps">para páginas</span> <span class="hps">Web e aplicações</span></span>, como por exemplo <a href="/pt-br/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a>, <a href="/pt-BR/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a>, <a href="/pt-BR/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a>, <a href="/pt-br/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a>, <a href="/pt-br/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a>, <a href="/pt-br/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a>, <a href="/pt-br/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a> e <a href="/pt-br/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a>.</dd> - <dt>APIs de comunicação</dt> - <dd>Estas APIs permitem a comunicação da página ou aplicativo web com outras páginas e dispositivos, como por exemplo <a href="/pt-BR/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a>, <a href="/en-US/docs/WebAPI/Using_Web_Notifications" title="/en-US/docs/WebAPI/Using_Web_Notifications">Web Notifications</a> e <a href="/en-US/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a>.</dd> - <dt id="Data_management_APIs">APIs de gestão de dados</dt> - <dd>Os dados de usuários podem ser manipulados e usados usando estas APIs, como por exemplo <a href="/en-US/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a> e <a href="/pt-BR/docs/IndexedDB" title="IndexedDB">IndexedDB</a>.</dd> -</dl> - -<p>Além das APIs citadas, que podem ser usadas para qualquer site ou aplicativo, um conjunto de APIs muito poderosas da Mozilla estão disponíveis para APIs privilegiadas e certificadas.</p> - -<dl> - <dt>APIs Privilegiadas</dt> - <dd>A aplicação privilegiada é um aplicativo instalado que tem seus direitos específicados pelo usuário. As APIs privilegiadas incluem <a href="/pt-BR/docs/WebAPI/TCP_Socket" title="WebAPI/TCP_Socket">TCP Socket API</a>, <a href="/en-US/docs/WebAPI/Contacts" title="WebAPI/Contacts">Contacts API</a>, <a href="/pt-BR/docs/WebAPI/Device_Storage" title="WebAPI/Device_Storage_API">Device Storage API</a>, <a href="/en-US/docs/DOM/Using_the_Browser_API" title="DOM/Using_the_Browser_API">Browser API</a> e <a href="/en-US/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a>.</dd> - <dt>APIs Certificadas</dt> - <dd>A aplicação certificada é uma aplicação de baixo nível para realizar operações críticas e vitais em um sistema operacional como o Firefox OS, permitindo a interação de aplicações menos privilegiadas com as certificadas utilizando <a href="/pt-BR/docs/WebAPI/Web_Activities">Web Activities</a>. As APIs Certificadas incluem<a href="/en-US/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth"> Bluetooth API</a>, <a href="/pt-BR/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a>, <a href="/pt-BR/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a>, <a href="/pt-BR/docs/Web/Guide/API/Telephony" title="WebAPI/WebTelephony">Telephony</a>, <a href="/pt-BR/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS</a>, <a href="/en-US/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a>, <a href="/en-US/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API</a>, <a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a>, <a href="/pt-BR/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a>, <a href="/en-US/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> e <a href="/en-US/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a>.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Community" id="Comunidade">Comunidade</h2> - -<p>Entre na comunidade Web API em nossas discussões ou grupos:</p> - -<ul> - <li><a class="external" href="https://lists.mozilla.org/listinfo/dev-webapi">Listas de discussões</a></li> - <li><a href="news://news.mozilla.org/mozilla.dev.webapi">Grupo de novidades</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi">Grupo da Google</a></li> - <li><a class="external" href="http://groups.google.com/group/mozilla.dev.webapi/feeds">Web feed</a></li> -</ul> - -<p>Alem disso você pode participar de discussões ao vivo no canal <a href="irc://irc.mozilla.org/webapi">#webapi</a> no <a class="external" href="https://wiki.mozilla.org/IRC">IRC</a>.</p> - -<h2 class="Related_Topics" id="Tópicos_relacionados">Tópicos relacionados</h2> - -<p>Estes tópicos podem ser interessantes para você:</p> - -<ul> - <li><a href="/pt-BR/docs/Web/API">Referência da API Web</a></li> -</ul> -</div> -</div> - -<p> </p> diff --git a/files/pt-br/orphaned/web/reference/index.html b/files/pt-br/orphaned/web/reference/index.html deleted file mode 100644 index 1206eceb45..0000000000 --- a/files/pt-br/orphaned/web/reference/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Referências de tecnologias Web -slug: orphaned/Web/Reference -tags: - - Landing - - Referências - - Tecnologias - - Web -translation_of: Web/Reference -original_slug: Web/Reference ---- -<p><span class="seoSummary">A web aberta é baseada em várias tecnologias que, juntas, podem ser usadas para criar tudo, desde sites simples até poderosas aplicações web. Abaixo, você encontrará uma seleção de links das principais documentações de cada um.</span></p> - -<div id="Web_technologies"> -<p>Se você é novo no desenvolvimento web, considere <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web">começar pela nossa área de aprendizado</a>, que é recheada com tutoriais, passo a passo, que vai te guiar de um total iniciante no desenvolvimento web a pelo menos um semi-profissional!</p> - -<dl> - <dt><a href="/pt-BR/docs/Glossario/HTML">HTML</a> — Estruturando a web</dt> - <dd>A <strong>Linguagem de Marcação de Hipertexto</strong> (em inglês: <em><span lang="en">HyperText Markup Language</span></em>) é usada para definir e descrever semanticamente o conteúdo (<a href="/pt-BR/docs/Glossario/marcação">marcação</a>) de uma página web em um formato estruturado. O HTML fornece um meio de criar documentos compostos por blocos chamados de <a href="/pt-BR/docs/Web/HTML/Element">elementos HTML</a> que são marcados por <em><a href="/pt-BR/docs/Glossario/Tag">tags</a></em>, usando parênteses angulares <code>< ></code>. Alguns introduzem o conteúdo diretamente na página, outros fornecem informações sobre o texto do documento e podem incluir outras tags como subelementos. Obviamente, os navegadores não os exibem, pois são usados para interpretar o conteúdo da página.<br> - <br> - <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a> | <a href="/pt-BR/docs/Aprender/HTML">Aprenda HTML</a> | <a href="/pt-BR/docs/Web/HTML/HTML5">HTML5</a> | <a href="/pt-BR/docs/Aprender/HTML">Guia para desenvolvedores</a> | <a href="/pt-BR/docs/Web/HTML/Element">Referência de elementos</a> | <a href="/pt-BR/docs/Web/HTML/ReferenciaHTML">Referência</a></dd> - <dt><a href="/pt-BR/docs/Glossario/CSS">CSS</a> — Estilizando a web</dt> - <dd>As <strong>Folhas de Estilo em Cascata</strong> (em inglês: <em><span lang="en">Cascading Style Sheets</span></em>) são usadas para descrever a aparência dos conteúdos web<br> - <br> - <a href="/pt-BR/docs/Learn/CSS/First_steps">Introdução ao CSS</a> | <a href="/pt-BR/docs/Learn/CSS/First_steps">Começando com o CSS</a> | <a href="/pt-BR/docs/Aprender/CSS">Aprenda CSS</a> | <a href="/pt-BR/docs/Learn/CSS/Howto/CSS_Perguntas_Frequentes">Questões comuns sobre o CSS</a> | <a href="/pt-BR/docs/Web/CSS/CSS_Reference">Referência</a></dd> - <dt><a href="/pt-BR/docs/Glossario/JavaScript">JavaScript</a> — <span lang="en">Scripts</span> dinâmicos no lado do cliente</dt> - <dd>O <strong>JavaScript</strong> é uma linguagem de programação usada para adicionar interatividade e outros recursos dinâmicos nos sites.</dd> - <dd><a href="/pt-BR/docs/Aprender/JavaScript">Aprenda JavaScript</a> | <a href="/pt-BR/docs/Web/JavaScript/Guide">Guia para desenvolvedores</a> | <a href="/pt-BR/docs/Web/JavaScript/Reference">Referência</a></dd> -</dl> -</div> 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 deleted file mode 100644 index 99607e0201..0000000000 --- a/files/pt-br/orphaned/web/security/information_security_basics/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Básico de Segurança da Informação -slug: orphaned/Web/Security/Information_Security_Basics -tags: - - Iniciante - - Segurança -translation_of: Web/Security/Information_Security_Basics -original_slug: Web/Security/Básico_de_Segurança_da_Informação ---- -<p>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<span id="result_box" lang="pt"><span>. </span></span><span id="result_box" lang="pt"><span>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.</span></span></p> - -<p><a href="/en-US/Learn/Confidentiality,_Integrity,_and_Availability">Confidencialidade, Integridade e Disponibilidade</a></p> - -<dl> - <dd>Descreve os objetivos de segurança primários, que são absolutamente fundamentais para o entendimento de segurança</dd> - <dt><a href="/en-US/Learn/Vulnerabilities">Vulnerabilidades</a></dt> - <dd>Define as principais categorias de vulnerabilidades e discute a presença de vulnerabilidades em todo software</dd> - <dt><a href="/en-US/Learn/Threats">Ameaças</a></dt> - <dd>Introduz brevemente os principais conceitos de ameaças</dd> - <dt><a href="/en-US/Learn/Security_Controls">Controles de Segurança</a></dt> - <dd>Define as principais categorias de controle de segurança e discute suas potenciais desvantagens</dd> - <dt><a href="/en-US/Learn/TCP_IP_Security">Segurança TCP/IP</a></dt> - <dd>Uma visão geral do modelo TCP/IP, com um foco em considerações de segurança para SSL</dd> -</dl> - -<h2 id="Veja_também">Veja também</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla/Security">Segurança no Browser</a></li> - <li><a href="/en-US/docs/Web/Security">Segurança na Web</a></li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Protegendo seu site</a></li> - <li><a href="/en-US/docs/Security/Firefox_Security_Basics_For_Developers">Básico de Segurança no Firefox para Desenvolvedores</a></li> -</ul> diff --git a/files/pt-br/orphaned/web/svg/element/color-profile/index.html b/files/pt-br/orphaned/web/svg/element/color-profile/index.html deleted file mode 100644 index 31261469be..0000000000 --- a/files/pt-br/orphaned/web/svg/element/color-profile/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: color-profile -slug: orphaned/Web/SVG/Element/color-profile -tags: - - Elemento - - Perfil de Cor - - Referencia - - SVG -translation_of: Web/SVG/Element/color-profile -original_slug: Web/SVG/Element/color-profile ---- -<div>{{SVGRef}}</div> - -<p>O elemento permite descrever o perfil de cor utilizado para a imagem.</p> - -<h2 id="Contexto_de_uso">Contexto de uso</h2> - -<p>{{svginfo}}</p> - -<h2 id="Exemplo">Exemplo</h2> - -<h2 id="Atributos">Atributos</h2> - -<h3 id="Atributos_globais">Atributos globais</h3> - -<ul> - <li><a href="/pt-BR/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Atributos principais</a> »</li> - <li><a href="/pt-BR/docs/SVG/Attribute#XLink" title="en/SVG/Attribute#XLink">Atributos XLink</a> »</li> -</ul> - -<h3 id="Atributos_específicos">Atributos específicos</h3> - -<ul> - <li>{{ SVGAttr("local") }}</li> - <li>{{ SVGAttr("name") }}</li> - <li>{{ SVGAttr("rendering-intent") }}</li> - <li>{{ SVGAttr("xlink:href") }}</li> -</ul> - -<h2 id="Interface_DOM">Interface DOM</h2> - -<p>Este elemento implementa a interface do <code><a href="/pt-BR/docs/DOM/SVGColorProfileElement" title="en/DOM/SVGColorProfileElement">SVGColorProfileElement</a></code>.</p> - -<h2 id="Compatibilidade_dos_navegadores">Compatibilidade dos navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Recurso</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Suporte básico</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>A tabela é baseada <a href="/pt-BR/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">nessas fontes</a>.</p> |