From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/web/accesibilidad/comunidad/index.html | 44 - files/es/web/accesibilidad/index.html | 93 - .../etiquetas_de_texto_y_nombres/index.html | 266 -- .../accesibilidad/understanding_wcag/index.html | 56 - .../perceivable/color_contraste/index.html | 162 - .../understanding_wcag/perceivable/index.html | 336 -- .../understanding_wcag/teclado/index.html | 92 - .../usando_el_atributo_aria-required/index.html | 76 - .../usando_el_rol_alertdialog/index.html | 89 - .../using_the_alertdialog_role/index.html | 89 + .../using_the_aria-required_attribute/index.html | 76 + .../accessibility/aria/forms/alertas/index.html | 147 - .../web/accessibility/aria/forms/alerts/index.html | 147 + .../aria/forms/basic_form_hints/index.html | 115 + .../consejos_basicos_para_formularios/index.html | 115 - .../aria/forms/etiquetas_complejas/index.html | 47 - .../aria/forms/multipart_labels/index.html | 47 + files/es/web/accessibility/community/index.html | 44 + files/es/web/accessibility/index.html | 93 + .../accessibility/understanding_wcag/index.html | 56 + .../understanding_wcag/keyboard/index.html | 92 + .../perceivable/color_contrast/index.html | 162 + .../understanding_wcag/perceivable/index.html | 336 ++ .../text_labels_and_names/index.html | 266 ++ .../web/api/animation/animaci\303\263n/index.html" | 106 - files/es/web/api/animation/animation/index.html | 106 + files/es/web/api/animation/currenttime/index.html | 114 + files/es/web/api/animation/finished/index.html | 120 + files/es/web/api/animation/terminado/index.html | 120 - files/es/web/api/animation/tiempoactual/index.html | 114 - .../web/api/api_de_almacenamiento_web/index.html | 146 - .../usando_la_api_de_almacenamiento_web/index.html | 272 -- files/es/web/api/api_del_portapapeles/index.html | 76 - files/es/web/api/battery_status_api/index.html | 39 + .../api/canvas_api/a_basic_ray-caster/index.html | 59 + files/es/web/api/canvas_api/index.html | 170 ++ .../manipulating_video_using_canvas/index.html | 126 + .../tutorial/advanced_animations/index.html | 380 +++ .../tutorial/applying_styles_and_colors/index.html | 726 +++++ .../tutorial/basic_animations/index.html | 333 ++ .../api/canvas_api/tutorial/basic_usage/index.html | 146 + .../tutorial/compositing/ejemplo/index.html | 295 -- .../tutorial/compositing/example/index.html | 295 ++ .../canvas_api/tutorial/drawing_shapes/index.html | 513 ++++ .../canvas_api/tutorial/drawing_text/index.html | 67 + .../hit_regions_and_accessibility/index.html | 99 + files/es/web/api/canvas_api/tutorial/index.html | 61 + .../tutorial/optimizing_canvas/index.html | 19 + .../pixel_manipulation_with_canvas/index.html | 301 ++ files/es/web/api/clipboard_api/index.html | 76 + files/es/web/api/console/tabla/index.html | 212 -- files/es/web/api/console/table/index.html | 212 ++ files/es/web/api/crypto/getrandomvalues/index.html | 75 + files/es/web/api/document/abrir/index.html | 109 - files/es/web/api/document/async/index.html | 33 - files/es/web/api/document/cookie/index.html | 119 + files/es/web/api/document/crearatributo/index.html | 91 - .../es/web/api/document/createattribute/index.html | 91 + files/es/web/api/document/createevent/index.html | 35 + files/es/web/api/document/getselection/index.html | 13 - files/es/web/api/document/open/index.html | 109 + .../document/pointerlockchange_event/index.html | 80 + .../web/api/document/pointerlockelement/index.html | 105 - files/es/web/api/document/stylesheets/index.html | 22 - .../api/document_object_model/events/index.html | 72 + .../api/document_object_model/examples/index.html | 367 +++ .../how_to_create_a_dom_tree/index.html | 130 + files/es/web/api/document_object_model/index.html | 91 + .../document_object_model/introduction/index.html | 248 ++ .../index.html | 50 + .../index.html | 337 ++ .../using_the_w3c_dom_level_1_core/index.html | 93 + .../document_object_model/whitespace/index.html | 476 +++ .../documentorshadowroot/getselection/index.html | 13 + .../pointerlockelement/index.html | 105 + .../documentorshadowroot/stylesheets/index.html | 22 + files/es/web/api/domstring/binary/index.html | 31 + .../web/api/domstring/cadenas_binarias/index.html | 31 - files/es/web/api/element/accesskey/index.html | 23 - files/es/web/api/element/blur_event/index.html | 156 + files/es/web/api/element/name/index.html | 80 - .../web/api/element/ongotpointercapture/index.html | 134 - .../api/element/onlostpointercapture/index.html | 133 - files/es/web/api/element/onwheel/index.html | 31 - .../web/api/elementcssinlinestyle/style/index.html | 52 + files/es/web/api/elementoshtmlparavideo/index.html | 202 -- files/es/web/api/event/createevent/index.html | 35 - .../es/web/api/fetch_api/basic_concepts/index.html | 73 + .../web/api/fetch_api/conceptos_basicos/index.html | 73 - files/es/web/api/fetch_api/using_fetch/index.html | 377 +++ .../web/api/fetch_api/utilizando_fetch/index.html | 377 --- files/es/web/api/formdata/index.html | 84 + .../api/formdata/using_formdata_objects/index.html | 137 + files/es/web/api/geolocation_api/index.html | 232 ++ .../ongotpointercapture/index.html | 134 + .../onlostpointercapture/index.html | 133 + .../api/globaleventhandlers/onunload/index.html | 45 - .../web/api/globaleventhandlers/onwheel/index.html | 31 + files/es/web/api/history_api/example/index.html | 415 +++ files/es/web/api/history_api/index.html | 228 ++ .../file_drag_and_drop/index.html | 117 + files/es/web/api/html_drag_and_drop_api/index.html | 57 + .../recommended_drag_types/index.html | 144 + files/es/web/api/htmlelement/accesskey/index.html | 23 + .../api/htmlelement/animationend_event/index.html | 81 + files/es/web/api/htmlelement/dataset/index.html | 132 - files/es/web/api/htmlelement/focus/index.html | 164 - files/es/web/api/htmlelement/style/index.html | 52 - .../htmlelement/transitioncancel_event/index.html | 163 + .../api/htmlelement/transitionend_event/index.html | 183 ++ .../api/htmlmediaelement/abort_event/index.html | 68 + .../api/htmlorforeignelement/dataset/index.html | 132 + .../web/api/htmlorforeignelement/focus/index.html | 164 + files/es/web/api/htmlvideoelement/index.html | 202 ++ .../basic_concepts_behind_indexeddb/index.html | 216 ++ .../index.html | 216 -- .../api/indexeddb_api/usando_indexeddb/index.html | 1308 -------- .../api/indexeddb_api/using_indexeddb/index.html | 1308 ++++++++ files/es/web/api/media_streams_api/index.html | 445 +++ files/es/web/api/navigator/geolocation/index.html | 106 + .../navigatorgeolocation/geolocation/index.html | 106 - files/es/web/api/navigatorgeolocation/index.html | 107 - .../eventos_online_y_offline/index.html | 91 - .../online_and_offline_events/index.html | 91 + files/es/web/api/node/elementopadre/index.html | 46 - files/es/web/api/node/insertarantes/index.html | 172 -- files/es/web/api/node/insertbefore/index.html | 172 ++ files/es/web/api/node/nodoprincipal/index.html | 34 - files/es/web/api/node/parentelement/index.html | 46 + .../usando_la_api_de_notificaciones/index.html | 294 -- .../using_the_notifications_api/index.html | 294 ++ files/es/web/api/pointer_lock_api/index.html | 284 ++ .../web/api/push_api/using_the_push_api/index.html | 433 --- files/es/web/api/randomsource/index.html | 111 - .../obtenervaloresaleatorios/index.html | 75 - files/es/web/api/server-sent_events/index.html | 99 + .../using_server-sent_events/index.html | 231 ++ files/es/web/api/storage/localstorage/index.html | 136 - files/es/web/api/subtlecrypto/encrypt/index.html | 142 - files/es/web/api/touch_events/index.html | 292 ++ files/es/web/api/vibration_api/index.html | 155 + files/es/web/api/web_audio_api/index.html | 510 ++++ .../checking_authenticity_with_password/index.html | 30 - .../using_the_web_speech_api/index.html | 301 ++ .../uso_de_la_web_speech_api/index.html | 301 -- files/es/web/api/web_storage_api/index.html | 146 + .../using_the_web_storage_api/index.html | 272 ++ .../web_workers_api/using_web_workers/index.html | 633 ++++ .../creating_3d_objects_using_webgl/index.html | 133 + .../objetos_3d_utilizando_webgl/index.html | 133 - .../tutorial/using_textures_in_webgl/index.html | 209 ++ .../wtilizando_texturas_en_webgl/index.html | 209 -- .../web/api/webrtc_api/session_lifetime/index.html | 21 + .../api/webrtc_api/taking_still_photos/index.html | 159 + .../escribiendo_servidor_websocket/index.html | 244 -- .../index.html | 246 -- .../writing_websocket_server/index.html | 244 ++ .../writing_websocket_servers/index.html | 246 ++ .../web/api/window/beforeunload_event/index.html | 215 ++ .../api/window/domcontentloaded_event/index.html | 148 + files/es/web/api/window/load_event/index.html | 125 + files/es/web/api/window/url/index.html | 102 - files/es/web/api/windowbase64/atob/index.html | 111 - .../base64_codificando_y_decodificando/index.html | 345 --- files/es/web/api/windowbase64/index.html | 109 - .../api/windoweventhandlers/onunload/index.html | 45 + .../api/windoworworkerglobalscope/atob/index.html | 111 + .../clearinterval/index.html | 43 + .../cleartimeout/index.html | 63 + .../setinterval/index.html | 692 +++++ .../settimeout/index.html | 340 +++ .../web/api/windowtimers/clearinterval/index.html | 43 - .../web/api/windowtimers/cleartimeout/index.html | 63 - files/es/web/api/windowtimers/index.html | 119 - .../es/web/api/windowtimers/setinterval/index.html | 692 ----- .../es/web/api/windowtimers/settimeout/index.html | 340 --- files/es/web/api/xmldocument/async/index.html | 33 + .../es/web/api/xmlhttprequest/formdata/index.html | 84 - .../api/xmlhttprequest/loadend_event/index.html | 91 + files/es/web/css/-moz-box-flex/index.html | 155 - files/es/web/css/-moz-box-ordinal-group/index.html | 67 - files/es/web/css/-moz-box-pack/index.html | 184 -- files/es/web/css/-moz-cell/index.html | 11 - .../web/css/-moz-font-language-override/index.html | 7 - files/es/web/css/-moz-user-modify/index.html | 132 - files/es/web/css/-webkit-mask-clip/index.html | 102 - files/es/web/css/-webkit-mask-image/index.html | 157 - files/es/web/css/-webkit-mask-origin/index.html | 101 - files/es/web/css/-webkit-mask-position/index.html | 119 - files/es/web/css/-webkit-mask-repeat/index.html | 133 - files/es/web/css/-webkit-mask/index.html | 125 - files/es/web/css/@media/altura/index.html | 82 - files/es/web/css/@media/height/index.html | 82 + .../web/css/@media/resoluci\303\263n/index.html" | 88 - files/es/web/css/@media/resolution/index.html | 88 + files/es/web/css/@viewport/height/index.html | 126 - files/es/web/css/@viewport/width/index.html | 123 - .../es/web/css/_colon_-moz-placeholder/index.html | 123 - files/es/web/css/_colon_-moz-ui-invalid/index.html | 94 - .../css/_colon_-ms-input-placeholder/index.html | 112 - .../es/web/css/_colon_-webkit-autofill/index.html | 80 - files/es/web/css/_colon_any/index.html | 187 -- files/es/web/css/_colon_autofill/index.html | 80 + files/es/web/css/_colon_is/index.html | 187 ++ files/es/web/css/_colon_not()/index.html | 112 - files/es/web/css/_colon_not/index.html | 112 + files/es/web/css/_colon_user-invalid/index.html | 94 + .../css/_doublecolon_-moz-placeholder/index.html | 109 - .../index.html | 100 - .../index.html | 86 - .../_doublecolon_file-selector-button/index.html | 100 + .../web/css/adjacent_sibling_combinator/index.html | 135 + files/es/web/css/attribute_selectors/index.html | 241 ++ files/es/web/css/auto/index.html | 50 - files/es/web/css/box-flex/index.html | 155 + files/es/web/css/box-ordinal-group/index.html | 67 + files/es/web/css/box-pack/index.html | 184 ++ files/es/web/css/column-gap/index.html | 158 + files/es/web/css/columnas_css/index.html | 112 - files/es/web/css/comentarios/index.html | 49 - .../web/css/comenzando_(tutorial_css)/index.html | 40 - files/es/web/css/comments/index.html | 49 + files/es/web/css/como_iniciar/index.html | 5 - .../css/como_iniciar/por_que_usar_css/index.html | 107 - .../es/web/css/como_iniciar/que_es_css/index.html | 146 - files/es/web/css/computed_value/index.html | 30 + .../index.html" | 91 - .../detecting_css_animation_support/index.html | 91 + .../usando_animaciones_css/index.html | 351 --- .../css_animations/using_css_animations/index.html | 351 +++ .../border-image_generador/index.html | 2615 ---------------- .../border-image_generator/index.html | 2615 ++++++++++++++++ .../web/css/css_background_and_borders/index.html | 155 - .../using_css_multiple_backgrounds/index.html | 57 - .../web/css/css_backgrounds_and_borders/index.html | 155 + .../using_multiple_backgrounds/index.html | 57 + .../index.html | 39 + files/es/web/css/css_box_model/index.html | 165 + .../introduction_to_the_css_box_model/index.html | 66 + .../mastering_margin_collapsing/index.html | 96 + files/es/web/css/css_color/index.html | 120 + .../css/css_colors/color_picker_tool/index.html | 3220 ++++++++++++++++++++ .../herramienta_para_seleccionar_color/index.html | 3220 -------------------- files/es/web/css/css_colors/index.html | 120 - files/es/web/css/css_columns/index.html | 112 + .../using_multi-column_layouts/index.html | 68 + files/es/web/css/css_conditional_rules/index.html | 99 + .../basic_concepts_of_flexbox/index.html | 227 ++ .../casos_de_uso_tipicos_de_flexbox/index.html | 133 - .../conceptos_basicos_de_flexbox/index.html | 227 -- .../typical_use_cases_of_flexbox/index.html | 133 + .../index.html | 191 -- .../usando_las_cajas_flexibles_css/index.html | 376 --- .../basic_concepts_of_grid_layout/index.html | 722 +++++ .../index.html" | 722 ----- .../relacion_de_grid_layout/index.html | 642 ---- .../relationship_of_grid_layout/index.html | 642 ++++ .../css/css_images/using_css_gradients/index.html | 386 +++ .../dimensionamiento/index.html | 89 - .../css/css_logical_properties/sizing/index.html | 89 + files/es/web/css/css_modelo_caja/index.html | 165 - .../index.html" | 66 - .../mastering_margin_collapsing/index.html | 96 - .../agregando_z-index/index.html | 179 -- .../apilamiento_y_float/index.html | 144 - .../index.html | 132 - .../index.html | 137 - .../index.html | 183 -- .../el_contexto_de_apilamiento/index.html | 231 -- .../css_positioning/entendiendo_z_index/index.html | 47 - .../stacking_without_z-index/index.html | 141 - .../adding_z-index/index.html | 179 ++ .../understanding_z_index/index.html | 47 + .../stacking_and_float/index.html | 144 + .../stacking_context_example_1/index.html | 132 + .../stacking_context_example_2/index.html | 137 + .../stacking_context_example_3/index.html | 183 ++ .../stacking_without_z-index/index.html | 141 + .../the_stacking_context/index.html | 231 ++ .../es/web/css/css_reglas_condicionales/index.html | 99 - files/es/web/css/css_selectors/index.html | 164 + .../index.html | 67 + files/es/web/css/css_text/index.html | 123 + .../using_css_transitions/index.html | 700 +++++ .../index.html | 39 - files/es/web/css/elemento_reemplazo/index.html | 19 - files/es/web/css/especificidad/index.html | 239 -- files/es/web/css/filter-function/url/index.html | 33 - files/es/web/css/font-language-override/index.html | 7 + files/es/web/css/gap/index.html | 252 ++ .../web/css/general_sibling_combinator/index.html | 117 + files/es/web/css/gradient/index.html | 100 + files/es/web/css/gradiente/index.html | 100 - files/es/web/css/grid-column-gap/index.html | 158 - files/es/web/css/grid-gap/index.html | 252 -- .../herramientas/cubic_bezier_generator/index.html | 320 -- files/es/web/css/herramientas/index.html | 28 - files/es/web/css/initial_value/index.html | 26 + .../web/css/introducci\303\263n/boxes/index.html" | 335 -- .../cascading_and_inheritance/index.html" | 125 - .../web/css/introducci\303\263n/color/index.html" | 364 --- .../introducci\303\263n/how_css_works/index.html" | 128 - "files/es/web/css/introducci\303\263n/index.html" | 94 - .../web/css/introducci\303\263n/layout/index.html" | 384 --- .../los_colon_estilos_de_texto/index.html" | 156 - .../web/css/introducci\303\263n/media/index.html" | 394 --- .../css/introducci\303\263n/selectors/index.html" | 416 --- files/es/web/css/mask-clip/index.html | 102 + files/es/web/css/mask-image/index.html | 157 + files/es/web/css/mask-origin/index.html | 101 + files/es/web/css/mask-position/index.html | 119 + files/es/web/css/mask-repeat/index.html | 133 + files/es/web/css/mask/index.html | 125 + .../media_queries/testing_media_queries/index.html | 93 + .../media_queries/using_media_queries/index.html | 828 +++++ files/es/web/css/mix-blend-mode/index.html | 611 ++++ files/es/web/css/normal/index.html | 11 - files/es/web/css/percentage/index.html | 126 + files/es/web/css/porcentaje/index.html | 126 - .../css/preguntas_frecuentes_sobre_css/index.html | 118 - files/es/web/css/primeros_pasos/index.html | 39 - files/es/web/css/pseudo-elements/index.html | 86 + files/es/web/css/pseudoelementos/index.html | 86 - files/es/web/css/reference/index.html | 246 ++ files/es/web/css/referencia_css/index.html | 246 -- .../css/referencia_css/mix-blend-mode/index.html | 611 ---- files/es/web/css/replaced_element/index.html | 19 + "files/es/web/css/resoluci\303\263n/index.html" | 151 - files/es/web/css/resolution/index.html | 151 + files/es/web/css/rtl/index.html | 22 - files/es/web/css/selectores_atributo/index.html | 241 -- files/es/web/css/selectores_css/index.html | 164 - .../index.html | 67 - .../css/selectores_hermanos_adyacentes/index.html | 135 - .../css/selectores_hermanos_generales/index.html | 117 - .../index.html" | 402 --- files/es/web/css/specificity/index.html | 239 ++ files/es/web/css/texto_css/index.html | 123 - .../css/tools/cubic_bezier_generator/index.html | 320 ++ files/es/web/css/tools/index.html | 28 + files/es/web/css/transiciones_de_css/index.html | 700 ----- files/es/web/css/url()/index.html | 33 + files/es/web/css/user-modify/index.html | 132 + files/es/web/css/valor_calculado/index.html | 30 - files/es/web/css/valor_inicial/index.html | 26 - .../es/web/css/value_definition_syntax/index.html | 402 +++ files/es/web/events/abort/index.html | 68 - files/es/web/events/animationend/index.html | 81 - files/es/web/events/beforeunload/index.html | 215 -- files/es/web/events/blur/index.html | 156 - files/es/web/events/domcontentloaded/index.html | 148 - files/es/web/events/load/index.html | 125 - files/es/web/events/loadend/index.html | 91 - files/es/web/events/pointerlockchange/index.html | 80 - files/es/web/events/transitioncancel/index.html | 163 - files/es/web/events/transitionend/index.html | 183 -- files/es/web/guide/ajax/community/index.html | 44 + files/es/web/guide/ajax/comunidad/index.html | 44 - files/es/web/guide/ajax/getting_started/index.html | 231 ++ files/es/web/guide/ajax/primeros_pasos/index.html | 231 -- .../index.html | 48 - files/es/web/guide/api/vibration/index.html | 155 - .../index.html | 99 + .../guide/css/probando_media_queries/index.html | 93 - .../index.html" | 144 - .../dom/events/eventos_controlador/index.html | 132 - files/es/web/guide/dom/events/index.html | 16 - files/es/web/guide/dom/index.html | 22 - .../creating_and_triggering_events/index.html | 144 + .../es/web/guide/events/event_handlers/index.html | 132 + files/es/web/guide/events/index.html | 16 + .../index.html | 48 + .../canvas_tutorial/advanced_animations/index.html | 380 --- .../applying_styles_and_colors/index.html | 726 ----- .../canvas_tutorial/basic_animations/index.html | 333 -- .../html/canvas_tutorial/basic_usage/index.html | 146 - .../canvas_tutorial/dibujando_formas/index.html | 513 ---- .../hit_regions_and_accessibility/index.html | 99 - files/es/web/guide/html/canvas_tutorial/index.html | 61 - .../canvas_tutorial/optimizing_canvas/index.html | 19 - .../pixel_manipulation_with_canvas/index.html | 301 -- .../guide/html/categorias_de_contenido/index.html | 175 -- .../web/guide/html/content_categories/index.html | 175 ++ .../html/html5/constraint_validation/index.html | 345 +++ .../web/guide/html/html5/html5_parser/index.html | 64 + files/es/web/guide/html/html5/index.html | 199 ++ .../html/html5/introduction_to_html5/index.html | 16 + .../html/introduction_alhtml_clone/index.html | 172 -- .../using_html_sections_and_outlines/index.html | 411 +++ files/es/web/guide/mobile/index.html | 75 + files/es/web/guide/movil/index.html | 75 - .../performance/usando_web_workers/index.html | 633 ---- .../web/guide/usando_objetos_formdata/index.html | 137 - .../anipular_video_por_medio_de_canvas/index.html | 126 - files/es/web/html/atributos/accept/index.html | 169 - .../es/web/html/atributos/autocomplete/index.html | 180 -- files/es/web/html/atributos/index.html | 677 ---- files/es/web/html/atributos/min/index.html | 162 - files/es/web/html/atributos/minlength/index.html | 71 - files/es/web/html/atributos/multiple/index.html | 182 -- .../atributos_de_configuracion_cors/index.html | 123 - .../html/atributos_globales/accesskey/index.html | 143 - .../atributos_globales/autocapitalize/index.html | 50 - .../web/html/atributos_globales/class/index.html | 105 - .../atributos_globales/contenteditable/index.html | 107 - .../html/atributos_globales/contextmenu/index.html | 139 - .../html/atributos_globales/data-_star_/index.html | 108 - .../es/web/html/atributos_globales/dir/index.html | 122 - .../html/atributos_globales/draggable/index.html | 108 - .../html/atributos_globales/dropzone/index.html | 99 - .../web/html/atributos_globales/hidden/index.html | 107 - files/es/web/html/atributos_globales/id/index.html | 113 - files/es/web/html/atributos_globales/index.html | 199 -- files/es/web/html/atributos_globales/is/index.html | 67 - .../web/html/atributos_globales/itemid/index.html | 78 - .../html/atributos_globales/itemprop/index.html | 22 - .../web/html/atributos_globales/itemref/index.html | 106 - .../html/atributos_globales/itemscope/index.html | 284 -- .../es/web/html/atributos_globales/lang/index.html | 108 - .../es/web/html/atributos_globales/slot/index.html | 46 - .../html/atributos_globales/spellcheck/index.html | 218 -- .../web/html/atributos_globales/style/index.html | 111 - .../html/atributos_globales/tabindex/index.html | 118 - .../web/html/atributos_globales/title/index.html | 138 - .../html/atributos_globales/translate/index.html | 103 - .../x-ms-acceleratorkey/index.html | 32 - files/es/web/html/attributes/accept/index.html | 169 + .../es/web/html/attributes/autocomplete/index.html | 180 ++ .../es/web/html/attributes/crossorigin/index.html | 123 + files/es/web/html/attributes/index.html | 677 ++++ files/es/web/html/attributes/min/index.html | 162 + files/es/web/html/attributes/minlength/index.html | 71 + files/es/web/html/attributes/multiple/index.html | 182 ++ .../web/html/canvas/a_basic_ray-caster/index.html | 59 - .../canvas/drawing_graphics_with_canvas/index.html | 162 - files/es/web/html/canvas/index.html | 170 -- .../index.html" | 53 - files/es/web/html/cors_enabled_image/index.html | 115 + files/es/web/html/element/a/index.html | 321 ++ files/es/web/html/element/abbr/index.html | 147 + files/es/web/html/element/acronym/index.html | 160 + files/es/web/html/element/address/index.html | 163 + files/es/web/html/element/applet/index.html | 236 ++ files/es/web/html/element/area/index.html | 212 ++ files/es/web/html/element/article/index.html | 60 + files/es/web/html/element/aside/index.html | 68 + files/es/web/html/element/audio/index.html | 105 + files/es/web/html/element/b/index.html | 168 + files/es/web/html/element/base/index.html | 158 + files/es/web/html/element/basefont/index.html | 124 + files/es/web/html/element/bdi/index.html | 140 + files/es/web/html/element/bdo/index.html | 144 + files/es/web/html/element/bgsound/index.html | 106 + files/es/web/html/element/big/index.html | 191 ++ files/es/web/html/element/blink/index.html | 100 + files/es/web/html/element/blockquote/index.html | 153 + files/es/web/html/element/body/index.html | 170 ++ files/es/web/html/element/br/index.html | 157 + files/es/web/html/element/button/index.html | 198 ++ files/es/web/html/element/canvas/index.html | 88 + files/es/web/html/element/caption/index.html | 167 + files/es/web/html/element/center/index.html | 116 + files/es/web/html/element/cite/index.html | 147 + files/es/web/html/element/code/index.html | 110 + files/es/web/html/element/col/index.html | 177 ++ files/es/web/html/element/colgroup/index.html | 163 + files/es/web/html/element/content/index.html | 167 + files/es/web/html/element/data/index.html | 141 + files/es/web/html/element/datalist/index.html | 106 + files/es/web/html/element/dd/index.html | 111 + files/es/web/html/element/del/index.html | 155 + files/es/web/html/element/details/index.html | 152 + files/es/web/html/element/dfn/index.html | 112 + files/es/web/html/element/dialog/index.html | 152 + files/es/web/html/element/dir/index.html | 121 + files/es/web/html/element/div/index.html | 152 + files/es/web/html/element/dl/index.html | 219 ++ files/es/web/html/element/dt/index.html | 103 + files/es/web/html/element/em/index.html | 60 + files/es/web/html/element/embed/index.html | 69 + files/es/web/html/element/fieldset/index.html | 124 + files/es/web/html/element/figcaption/index.html | 90 + files/es/web/html/element/figure/index.html | 60 + files/es/web/html/element/font/index.html | 152 + files/es/web/html/element/footer/index.html | 71 + files/es/web/html/element/form/index.html | 198 ++ files/es/web/html/element/frame/index.html | 167 + files/es/web/html/element/frameset/index.html | 157 + files/es/web/html/element/head/index.html | 147 + files/es/web/html/element/header/index.html | 74 + .../web/html/element/heading_elements/index.html | 240 ++ files/es/web/html/element/hgroup/index.html | 120 + files/es/web/html/element/hr/index.html | 156 + files/es/web/html/element/html/index.html | 176 ++ files/es/web/html/element/i/index.html | 112 + files/es/web/html/element/iframe/index.html | 304 ++ files/es/web/html/element/image/index.html | 18 + files/es/web/html/element/img/index.html | 339 +++ files/es/web/html/element/index.html | 106 + files/es/web/html/element/input/button/index.html | 254 ++ .../es/web/html/element/input/checkbox/index.html | 130 + files/es/web/html/element/input/color/index.html | 308 ++ files/es/web/html/element/input/date/index.html | 567 ++++ .../es/web/html/element/input/datetime/index.html | 147 + files/es/web/html/element/input/email/index.html | 423 +++ files/es/web/html/element/input/hidden/index.html | 201 ++ files/es/web/html/element/input/index.html | 1529 ++++++++++ files/es/web/html/element/input/number/index.html | 450 +++ .../es/web/html/element/input/password/index.html | 132 + files/es/web/html/element/input/range/index.html | 416 +++ files/es/web/html/element/input/text/index.html | 472 +++ files/es/web/html/element/ins/index.html | 137 + files/es/web/html/element/isindex/index.html | 44 + files/es/web/html/element/kbd/index.html | 120 + files/es/web/html/element/keygen/index.html | 128 + files/es/web/html/element/label/index.html | 138 + files/es/web/html/element/legend/index.html | 125 + files/es/web/html/element/li/index.html | 123 + files/es/web/html/element/link/index.html | 425 +++ files/es/web/html/element/main/index.html | 151 + files/es/web/html/element/map/index.html | 133 + files/es/web/html/element/mark/index.html | 142 + files/es/web/html/element/marquee/index.html | 207 ++ files/es/web/html/element/menu/index.html | 130 + files/es/web/html/element/meta/index.html | 134 + files/es/web/html/element/multicol/index.html | 20 + files/es/web/html/element/nav/index.html | 108 + files/es/web/html/element/nobr/index.html | 29 + files/es/web/html/element/noframes/index.html | 143 + files/es/web/html/element/noscript/index.html | 138 + files/es/web/html/element/object/index.html | 144 + files/es/web/html/element/ol/index.html | 132 + files/es/web/html/element/option/index.html | 150 + files/es/web/html/element/p/index.html | 131 + files/es/web/html/element/param/index.html | 131 + files/es/web/html/element/picture/index.html | 161 + files/es/web/html/element/pre/index.html | 128 + files/es/web/html/element/progress/index.html | 97 + files/es/web/html/element/q/index.html | 121 + files/es/web/html/element/s/index.html | 114 + files/es/web/html/element/samp/index.html | 63 + files/es/web/html/element/section/index.html | 143 + files/es/web/html/element/select/index.html | 198 ++ files/es/web/html/element/shadow/index.html | 152 + files/es/web/html/element/slot/index.html | 126 + files/es/web/html/element/small/index.html | 20 + files/es/web/html/element/source/index.html | 129 + files/es/web/html/element/span/index.html | 166 + files/es/web/html/element/strike/index.html | 60 + files/es/web/html/element/strong/index.html | 58 + files/es/web/html/element/style/index.html | 122 + files/es/web/html/element/sub/index.html | 101 + files/es/web/html/element/sup/index.html | 110 + files/es/web/html/element/table/index.html | 525 ++++ files/es/web/html/element/td/index.html | 310 ++ files/es/web/html/element/template/index.html | 155 + files/es/web/html/element/textarea/index.html | 181 ++ files/es/web/html/element/th/index.html | 328 ++ files/es/web/html/element/time/index.html | 170 ++ files/es/web/html/element/title/index.html | 54 + files/es/web/html/element/tr/index.html | 232 ++ files/es/web/html/element/track/index.html | 179 ++ files/es/web/html/element/tt/index.html | 58 + files/es/web/html/element/u/index.html | 79 + files/es/web/html/element/ul/index.html | 151 + files/es/web/html/element/var/index.html | 54 + files/es/web/html/element/video/index.html | 128 + files/es/web/html/element/wbr/index.html | 115 + files/es/web/html/element/xmp/index.html | 47 + files/es/web/html/elemento/a/index.html | 321 -- files/es/web/html/elemento/abbr/index.html | 147 - files/es/web/html/elemento/acronym/index.html | 160 - files/es/web/html/elemento/address/index.html | 163 - files/es/web/html/elemento/applet/index.html | 236 -- files/es/web/html/elemento/area/index.html | 212 -- files/es/web/html/elemento/article/index.html | 60 - files/es/web/html/elemento/aside/index.html | 68 - files/es/web/html/elemento/audio/index.html | 105 - files/es/web/html/elemento/b/index.html | 168 - files/es/web/html/elemento/base/index.html | 158 - files/es/web/html/elemento/basefont/index.html | 124 - files/es/web/html/elemento/bdi/index.html | 140 - files/es/web/html/elemento/bdo/index.html | 144 - files/es/web/html/elemento/bgsound/index.html | 106 - files/es/web/html/elemento/big/index.html | 191 -- files/es/web/html/elemento/blink/index.html | 100 - files/es/web/html/elemento/blockquote/index.html | 153 - files/es/web/html/elemento/body/index.html | 170 -- files/es/web/html/elemento/br/index.html | 157 - files/es/web/html/elemento/button/index.html | 198 -- files/es/web/html/elemento/canvas/index.html | 88 - files/es/web/html/elemento/caption/index.html | 167 - files/es/web/html/elemento/center/index.html | 116 - files/es/web/html/elemento/cite/index.html | 147 - files/es/web/html/elemento/code/index.html | 110 - files/es/web/html/elemento/col/index.html | 177 -- files/es/web/html/elemento/colgroup/index.html | 163 - files/es/web/html/elemento/command/index.html | 152 - files/es/web/html/elemento/content/index.html | 167 - files/es/web/html/elemento/data/index.html | 141 - files/es/web/html/elemento/datalist/index.html | 106 - files/es/web/html/elemento/dd/index.html | 111 - files/es/web/html/elemento/del/index.html | 155 - files/es/web/html/elemento/details/index.html | 152 - files/es/web/html/elemento/dfn/index.html | 112 - files/es/web/html/elemento/dialog/index.html | 152 - files/es/web/html/elemento/dir/index.html | 121 - files/es/web/html/elemento/div/index.html | 152 - files/es/web/html/elemento/dl/index.html | 219 -- files/es/web/html/elemento/dt/index.html | 103 - files/es/web/html/elemento/element/index.html | 110 - .../elemento/elementos_t\303\255tulos/index.html" | 240 -- files/es/web/html/elemento/em/index.html | 60 - files/es/web/html/elemento/embed/index.html | 69 - .../etiqueta_personalizada_html5/index.html | 46 - files/es/web/html/elemento/fieldset/index.html | 124 - files/es/web/html/elemento/figcaption/index.html | 90 - files/es/web/html/elemento/figure/index.html | 60 - files/es/web/html/elemento/font/index.html | 152 - files/es/web/html/elemento/footer/index.html | 71 - files/es/web/html/elemento/form/index.html | 198 -- files/es/web/html/elemento/frame/index.html | 167 - files/es/web/html/elemento/frameset/index.html | 157 - files/es/web/html/elemento/head/index.html | 147 - files/es/web/html/elemento/header/index.html | 74 - files/es/web/html/elemento/hgroup/index.html | 120 - files/es/web/html/elemento/hr/index.html | 156 - files/es/web/html/elemento/html/index.html | 176 -- files/es/web/html/elemento/i/index.html | 112 - files/es/web/html/elemento/iframe/index.html | 304 -- files/es/web/html/elemento/image/index.html | 18 - files/es/web/html/elemento/img/index.html | 339 --- files/es/web/html/elemento/index.html | 106 - .../html/elemento/input/bot\303\263n/index.html" | 254 -- .../es/web/html/elemento/input/checkbox/index.html | 130 - files/es/web/html/elemento/input/color/index.html | 308 -- files/es/web/html/elemento/input/date/index.html | 567 ---- .../es/web/html/elemento/input/datetime/index.html | 147 - files/es/web/html/elemento/input/email/index.html | 423 --- files/es/web/html/elemento/input/hidden/index.html | 201 -- files/es/web/html/elemento/input/index.html | 1529 ---------- files/es/web/html/elemento/input/number/index.html | 450 --- .../es/web/html/elemento/input/password/index.html | 132 - files/es/web/html/elemento/input/range/index.html | 416 --- files/es/web/html/elemento/input/text/index.html | 472 --- files/es/web/html/elemento/ins/index.html | 137 - files/es/web/html/elemento/isindex/index.html | 44 - files/es/web/html/elemento/kbd/index.html | 120 - files/es/web/html/elemento/keygen/index.html | 128 - files/es/web/html/elemento/label/index.html | 138 - files/es/web/html/elemento/legend/index.html | 125 - files/es/web/html/elemento/li/index.html | 123 - files/es/web/html/elemento/link/index.html | 425 --- files/es/web/html/elemento/main/index.html | 151 - files/es/web/html/elemento/map/index.html | 133 - files/es/web/html/elemento/mark/index.html | 142 - files/es/web/html/elemento/marquee/index.html | 207 -- files/es/web/html/elemento/menu/index.html | 130 - files/es/web/html/elemento/meta/index.html | 134 - files/es/web/html/elemento/multicol/index.html | 20 - files/es/web/html/elemento/nav/index.html | 108 - files/es/web/html/elemento/nobr/index.html | 29 - files/es/web/html/elemento/noframes/index.html | 143 - files/es/web/html/elemento/noscript/index.html | 138 - files/es/web/html/elemento/object/index.html | 144 - files/es/web/html/elemento/ol/index.html | 132 - files/es/web/html/elemento/option/index.html | 150 - files/es/web/html/elemento/p/index.html | 131 - files/es/web/html/elemento/param/index.html | 131 - files/es/web/html/elemento/picture/index.html | 161 - files/es/web/html/elemento/pre/index.html | 128 - files/es/web/html/elemento/progress/index.html | 97 - files/es/web/html/elemento/q/index.html | 121 - files/es/web/html/elemento/s/index.html | 114 - files/es/web/html/elemento/samp/index.html | 63 - files/es/web/html/elemento/script/index.html | 255 -- files/es/web/html/elemento/section/index.html | 143 - files/es/web/html/elemento/select/index.html | 198 -- files/es/web/html/elemento/shadow/index.html | 152 - files/es/web/html/elemento/slot/index.html | 126 - files/es/web/html/elemento/small/index.html | 20 - files/es/web/html/elemento/source/index.html | 129 - files/es/web/html/elemento/span/index.html | 166 - files/es/web/html/elemento/strike/index.html | 60 - files/es/web/html/elemento/strong/index.html | 58 - files/es/web/html/elemento/style/index.html | 122 - files/es/web/html/elemento/sub/index.html | 101 - files/es/web/html/elemento/sup/index.html | 110 - files/es/web/html/elemento/table/index.html | 525 ---- files/es/web/html/elemento/td/index.html | 310 -- files/es/web/html/elemento/template/index.html | 155 - files/es/web/html/elemento/textarea/index.html | 181 -- files/es/web/html/elemento/th/index.html | 328 -- files/es/web/html/elemento/time/index.html | 170 -- .../html/elemento/tipos_de_elementos/index.html | 119 - files/es/web/html/elemento/title/index.html | 54 - files/es/web/html/elemento/tr/index.html | 232 -- files/es/web/html/elemento/track/index.html | 179 -- files/es/web/html/elemento/tt/index.html | 58 - files/es/web/html/elemento/u/index.html | 79 - files/es/web/html/elemento/ul/index.html | 151 - files/es/web/html/elemento/var/index.html | 54 - files/es/web/html/elemento/video/index.html | 128 - files/es/web/html/elemento/wbr/index.html | 115 - files/es/web/html/elemento/xmp/index.html | 47 - .../web/html/elementos_en_l\303\255nea/index.html" | 52 - .../index.html | 281 -- .../html/global_attributes/accesskey/index.html | 143 + .../global_attributes/autocapitalize/index.html | 50 + .../es/web/html/global_attributes/class/index.html | 105 + .../global_attributes/contenteditable/index.html | 107 + .../html/global_attributes/contextmenu/index.html | 139 + .../html/global_attributes/data-_star_/index.html | 108 + files/es/web/html/global_attributes/dir/index.html | 122 + .../html/global_attributes/draggable/index.html | 108 + .../web/html/global_attributes/hidden/index.html | 107 + files/es/web/html/global_attributes/id/index.html | 113 + files/es/web/html/global_attributes/index.html | 199 ++ files/es/web/html/global_attributes/is/index.html | 67 + .../web/html/global_attributes/itemid/index.html | 78 + .../web/html/global_attributes/itemprop/index.html | 22 + .../web/html/global_attributes/itemref/index.html | 106 + .../html/global_attributes/itemscope/index.html | 284 ++ .../es/web/html/global_attributes/lang/index.html | 108 + .../es/web/html/global_attributes/slot/index.html | 46 + .../html/global_attributes/spellcheck/index.html | 218 ++ .../es/web/html/global_attributes/style/index.html | 111 + .../web/html/global_attributes/tabindex/index.html | 118 + .../es/web/html/global_attributes/title/index.html | 138 + .../html/global_attributes/translate/index.html | 103 + .../x-ms-acceleratorkey/index.html | 32 + .../web/html/imagen_con_cors_habilitado/index.html | 115 - files/es/web/html/index/index.html | 8 + files/es/web/html/inline_elements/index.html | 52 + .../index.html | 66 - files/es/web/html/link_types/index.html | 381 +++ files/es/web/html/microdata/index.html | 207 ++ files/es/web/html/microdatos/index.html | 207 -- files/es/web/html/microformatos/index.html | 29 - files/es/web/html/microformats/index.html | 29 + .../index.html | 34 - .../html/recursos_offline_en_firefox/index.html | 382 --- files/es/web/html/reference/index.html | 26 + files/es/web/html/referencia/index.html | 26 - files/es/web/html/tipos_de_enlaces/index.html | 381 --- .../web/html/transision_adaptativa_dash/index.html | 77 - .../html/usando_audio_y_video_con_html5/index.html | 287 -- .../html/using_the_application_cache/index.html | 382 +++ "files/es/web/html/\303\255ndice/index.html" | 8 - files/es/web/http/access_control_cors/index.html | 491 --- .../web/http/basics_of_http/data_uris/index.html | 168 + .../web/http/basics_of_http/datos_uris/index.html | 168 - .../index.html" | 169 - .../identifying_resources_on_the_web/index.html | 169 + files/es/web/http/conditional_requests/index.html | 148 + .../connection_management_in_http_1.x/index.html | 86 + files/es/web/http/cors/index.html | 491 +++ .../gestion_de_la_conexion_en_http_1.x/index.html | 86 - files/es/web/http/headers/digest/index.html | 142 + .../web/http/headers/user-agent/firefox/index.html | 55 + .../mecanismo_actualizacion_protocolo/index.html | 246 -- .../web/http/peticiones_condicionales/index.html | 148 - .../web/http/protocol_upgrade_mechanism/index.html | 246 ++ .../http/recursos_y_especificaciones/index.html | 262 -- .../http/resources_and_specifications/index.html | 262 ++ "files/es/web/http/sesi\303\263n/index.html" | 158 - files/es/web/http/session/index.html | 158 + files/es/web/http/status/413/index.html | 34 + files/es/web/http/status/8080/index.html | 34 - .../a_re-introduction_to_javascript/index.html | 960 ++++++ .../es/web/javascript/about_javascript/index.html | 59 + .../web/javascript/acerca_de_javascript/index.html | 59 - .../index.html" | 87 - .../index.html | 333 ++ .../index.html | 333 -- .../web/javascript/gestion_de_memoria/index.html | 204 -- .../guide/bucles_e_iteraci\303\263n/index.html" | 334 -- .../guide/colecciones_indexadas/index.html | 603 ---- .../index.html | 456 --- .../control_flow_and_error_handling/index.html | 456 +++ files/es/web/javascript/guide/funciones/index.html | 706 ----- files/es/web/javascript/guide/functions/index.html | 706 +++++ .../guide/indexed_collections/index.html | 603 ++++ .../guide/introducci\303\263n/index.html" | 161 - .../web/javascript/guide/introduction/index.html | 161 + .../guide/loops_and_iteration/index.html | 334 ++ files/es/web/javascript/guide/modules/index.html | 458 +++ .../javascript/guide/m\303\263dulos/index.html" | 458 --- .../regular_expressions/aserciones/index.html | 247 -- .../regular_expressions/assertions/index.html | 247 ++ .../character_classes/index.html | 220 ++ .../regular_expressions/cheatsheet/index.html | 451 +++ .../clases_de_caracteres/index.html | 220 -- .../regular_expressions/cuantificadores/index.html | 182 -- .../escapes_de_propiedades_unicode/index.html | 177 -- .../groups_and_ranges/index.html | 176 ++ .../regular_expressions/grupos_y_rangos/index.html | 176 -- .../hoja_de_referencia/index.html | 451 --- .../regular_expressions/quantifiers/index.html | 182 ++ .../unicode_property_escapes/index.html | 177 ++ .../guide/trabajando_con_objectos/index.html | 493 --- .../web/javascript/guide/usar_promesas/index.html | 344 --- .../web/javascript/guide/using_promises/index.html | 344 +++ .../guide/working_with_objects/index.html | 493 +++ .../herencia_y_la_cadena_de_protipos/index.html | 410 --- .../inheritance_and_the_prototype_chain/index.html | 410 +++ .../index.html" | 385 --- .../index.html | 416 --- .../javascript_technologies_overview/index.html | 87 + .../es/web/javascript/memory_management/index.html | 204 ++ files/es/web/javascript/reference/about/index.html | 158 + .../reference/classes/constructor/index.html | 102 + .../reference/classes/extends/index.html | 167 + .../es/web/javascript/reference/classes/index.html | 372 +++ .../classes/private_class_fields/index.html | 201 ++ .../classes/public_class_fields/index.html | 386 +++ .../javascript/reference/classes/static/index.html | 118 + .../deprecated_and_obsolete_features/index.html | 292 ++ .../the_legacy_iterator_protocol/index.html | 72 + .../reference/errors/bad_regexp_flag/index.html | 113 + .../reference/errors/caracter_ilegal/index.html | 83 - .../index.html | 72 - .../reference/errors/illegal_character/index.html | 83 + .../errors/indicador_regexp_no-val/index.html | 113 - .../missing_semicolon_before_statement/index.html | 72 + .../errors/strict_non_simple_params/index.html | 117 + .../index.html" | 117 - .../functions/arguments/callee/index.html | 48 + .../reference/functions/arguments/index.html | 229 ++ .../functions/arguments/length/index.html | 131 + .../reference/functions/arrow_functions/index.html | 530 ++++ .../functions/default_parameters/index.html | 234 ++ .../javascript/reference/functions/get/index.html | 134 + .../web/javascript/reference/functions/index.html | 661 ++++ .../functions/method_definitions/index.html | 226 ++ .../reference/functions/rest_parameters/index.html | 266 ++ .../javascript/reference/functions/set/index.html | 217 ++ .../global_objects/aggregateerror/index.html | 87 + .../global_objects/array/@@iterator/index.html | 89 + .../global_objects/array/@@species/index.html | 76 + .../global_objects/array/@@unscopables/index.html | 78 + .../global_objects/array/concat/index.html | 140 + .../global_objects/array/copywithin/index.html | 165 + .../global_objects/array/entries/index.html | 86 + .../global_objects/array/every/index.html | 195 ++ .../reference/global_objects/array/fill/index.html | 145 + .../global_objects/array/filter/index.html | 231 ++ .../reference/global_objects/array/find/index.html | 233 ++ .../global_objects/array/findindex/index.html | 187 ++ .../reference/global_objects/array/flat/index.html | 174 ++ .../global_objects/array/flatmap/index.html | 128 + .../global_objects/array/foreach/index.html | 257 ++ .../reference/global_objects/array/from/index.html | 242 ++ .../global_objects/array/includes/index.html | 181 ++ .../reference/global_objects/array/index.html | 449 +++ .../global_objects/array/indexof/index.html | 248 ++ .../global_objects/array/isarray/index.html | 128 + .../reference/global_objects/array/join/index.html | 110 + .../reference/global_objects/array/keys/index.html | 84 + .../global_objects/array/lastindexof/index.html | 164 + .../global_objects/array/length/index.html | 143 + .../reference/global_objects/array/map/index.html | 360 +++ .../reference/global_objects/array/of/index.html | 97 + .../reference/global_objects/array/pop/index.html | 94 + .../reference/global_objects/array/push/index.html | 140 + .../global_objects/array/reduce/index.html | 215 ++ .../global_objects/array/reduceright/index.html | 166 + .../global_objects/array/reverse/index.html | 88 + .../global_objects/array/shift/index.html | 124 + .../global_objects/array/slice/index.html | 287 ++ .../reference/global_objects/array/some/index.html | 204 ++ .../reference/global_objects/array/sort/index.html | 301 ++ .../global_objects/array/splice/index.html | 148 + .../global_objects/array/tolocalestring/index.html | 177 ++ .../global_objects/array/tosource/index.html | 112 + .../global_objects/array/tostring/index.html | 78 + .../global_objects/array/unshift/index.html | 100 + .../global_objects/array/values/index.html | 82 + .../arraybuffer/@@species/index.html | 72 + .../arraybuffer/bytelength/index.html | 70 + .../global_objects/arraybuffer/index.html | 139 + .../global_objects/asyncfunction/index.html | 122 + .../global_objects/boolean/boolean/index.html | 75 + .../reference/global_objects/boolean/index.html | 126 + .../global_objects/boolean/tosource/index.html | 36 + .../global_objects/date/getdate/index.html | 119 + .../global_objects/date/getday/index.html | 124 + .../global_objects/date/getfullyear/index.html | 67 + .../global_objects/date/gethours/index.html | 119 + .../global_objects/date/getmilliseconds/index.html | 121 + .../global_objects/date/getminutes/index.html | 118 + .../global_objects/date/getmonth/index.html | 125 + .../global_objects/date/getseconds/index.html | 83 + .../global_objects/date/gettime/index.html | 140 + .../global_objects/date/getutcfullyear/index.html | 121 + .../global_objects/date/getutchours/index.html | 117 + .../reference/global_objects/date/index.html | 132 + .../reference/global_objects/date/now/index.html | 30 + .../reference/global_objects/date/parse/index.html | 35 + .../global_objects/date/setfullyear/index.html | 133 + .../global_objects/date/setmonth/index.html | 78 + .../global_objects/date/todatestring/index.html | 88 + .../global_objects/date/toisostring/index.html | 144 + .../global_objects/date/tojson/index.html | 61 + .../date/tolocaledatestring/index.html | 159 + .../global_objects/date/tolocalestring/index.html | 163 + .../date/tolocaletimestring/index.html | 152 + .../global_objects/date/toutcstring/index.html | 105 + .../reference/global_objects/date/utc/index.html | 78 + .../reference/global_objects/decodeuri/index.html | 38 + .../global_objects/decodeuricomponent/index.html | 42 + .../reference/global_objects/encodeuri/index.html | 61 + .../global_objects/encodeuricomponent/index.html | 161 + .../global_objects/error/error/index.html | 69 + .../global_objects/error/filename/index.html | 48 + .../reference/global_objects/error/index.html | 219 ++ .../global_objects/error/linenumber/index.html | 101 + .../global_objects/error/message/index.html | 114 + .../reference/global_objects/error/name/index.html | 58 + .../global_objects/error/tosource/index.html | 60 + .../global_objects/error/tostring/index.html | 98 + .../reference/global_objects/escape/index.html | 91 + .../reference/global_objects/eval/index.html | 309 ++ .../reference/global_objects/evalerror/index.html | 163 + .../global_objects/function/apply/index.html | 233 ++ .../global_objects/function/arguments/index.html | 44 + .../global_objects/function/bind/index.html | 293 ++ .../global_objects/function/call/index.html | 113 + .../global_objects/function/caller/index.html | 128 + .../global_objects/function/displayname/index.html | 77 + .../global_objects/function/function/index.html | 92 + .../reference/global_objects/function/index.html | 118 + .../global_objects/function/length/index.html | 151 + .../global_objects/function/name/index.html | 223 ++ .../global_objects/function/tosource/index.html | 97 + .../global_objects/function/tostring/index.html | 130 + .../reference/global_objects/generator/index.html | 228 ++ .../global_objects/generator/next/index.html | 109 + .../global_objects/generator/return/index.html | 102 + .../global_objects/generator/throw/index.html | 94 + .../javascript/reference/global_objects/index.html | 203 ++ .../reference/global_objects/infinity/index.html | 96 + .../global_objects/internalerror/index.html | 98 + .../internalerror/internalerror/index.html | 55 + .../reference/global_objects/intl/index.html | 126 + .../intl/numberformat/format/index.html | 92 + .../global_objects/intl/numberformat/index.html | 188 ++ .../intl/relativetimeformat/index.html | 106 + .../reference/global_objects/isfinite/index.html | 114 + .../reference/global_objects/isnan/index.html | 88 + .../reference/global_objects/json/index.html | 231 ++ .../reference/global_objects/json/parse/index.html | 178 ++ .../global_objects/json/stringify/index.html | 265 ++ .../reference/global_objects/map/clear/index.html | 109 + .../reference/global_objects/map/delete/index.html | 114 + .../global_objects/map/entries/index.html | 109 + .../global_objects/map/foreach/index.html | 94 + .../reference/global_objects/map/get/index.html | 77 + .../reference/global_objects/map/has/index.html | 65 + .../reference/global_objects/map/index.html | 213 ++ .../reference/global_objects/map/keys/index.html | 109 + .../reference/global_objects/map/set/index.html | 133 + .../reference/global_objects/map/size/index.html | 110 + .../reference/global_objects/map/values/index.html | 77 + .../reference/global_objects/math/abs/index.html | 149 + .../reference/global_objects/math/acos/index.html | 99 + .../reference/global_objects/math/acosh/index.html | 94 + .../reference/global_objects/math/asin/index.html | 144 + .../reference/global_objects/math/asinh/index.html | 90 + .../reference/global_objects/math/atan/index.html | 107 + .../reference/global_objects/math/atan2/index.html | 141 + .../reference/global_objects/math/atanh/index.html | 87 + .../reference/global_objects/math/cbrt/index.html | 96 + .../reference/global_objects/math/ceil/index.html | 166 + .../reference/global_objects/math/cos/index.html | 74 + .../reference/global_objects/math/e/index.html | 83 + .../reference/global_objects/math/exp/index.html | 136 + .../reference/global_objects/math/expm1/index.html | 89 + .../reference/global_objects/math/floor/index.html | 124 + .../global_objects/math/fround/index.html | 199 ++ .../reference/global_objects/math/hypot/index.html | 124 + .../reference/global_objects/math/index.html | 196 ++ .../reference/global_objects/math/ln10/index.html | 84 + .../reference/global_objects/math/ln2/index.html | 83 + .../reference/global_objects/math/log/index.html | 112 + .../reference/global_objects/math/log10/index.html | 137 + .../global_objects/math/log10e/index.html | 130 + .../reference/global_objects/math/log2/index.html | 96 + .../reference/global_objects/math/log2e/index.html | 27 + .../reference/global_objects/math/max/index.html | 145 + .../reference/global_objects/math/min/index.html | 150 + .../reference/global_objects/math/pi/index.html | 126 + .../reference/global_objects/math/pow/index.html | 140 + .../global_objects/math/random/index.html | 132 + .../reference/global_objects/math/round/index.html | 218 ++ .../reference/global_objects/math/sign/index.html | 151 + .../reference/global_objects/math/sin/index.html | 126 + .../reference/global_objects/math/sqrt/index.html | 134 + .../global_objects/math/sqrt1_2/index.html | 123 + .../reference/global_objects/math/sqrt2/index.html | 124 + .../reference/global_objects/math/tan/index.html | 82 + .../reference/global_objects/math/tanh/index.html | 95 + .../reference/global_objects/math/trunc/index.html | 144 + .../reference/global_objects/nan/index.html | 46 + .../reference/global_objects/null/index.html | 129 + .../reference/global_objects/number/index.html | 181 ++ .../global_objects/number/isfinite/index.html | 88 + .../global_objects/number/isinteger/index.html | 94 + .../global_objects/number/isnan/index.html | 140 + .../global_objects/number/issafeinteger/index.html | 99 + .../number/max_safe_integer/index.html | 68 + .../global_objects/number/max_value/index.html | 131 + .../global_objects/number/min_value/index.html | 121 + .../reference/global_objects/number/nan/index.html | 59 + .../number/negative_infinity/index.html | 117 + .../global_objects/number/parsefloat/index.html | 76 + .../global_objects/number/parseint/index.html | 80 + .../number/positive_infinity/index.html | 115 + .../global_objects/number/tofixed/index.html | 147 + .../number/tolocalestring/index.html | 155 + .../global_objects/number/toprecision/index.html | 102 + .../global_objects/number/tostring/index.html | 63 + .../global_objects/number/valueof/index.html | 81 + .../object/__definegetter__/index.html | 144 + .../object/__lookupgetter__/index.html | 84 + .../global_objects/object/assign/index.html | 274 ++ .../global_objects/object/constructor/index.html | 161 + .../global_objects/object/create/index.html | 377 +++ .../object/defineproperties/index.html | 194 ++ .../object/defineproperty/index.html | 419 +++ .../global_objects/object/entries/index.html | 161 + .../global_objects/object/freeze/index.html | 174 ++ .../global_objects/object/fromentries/index.html | 106 + .../object/getownpropertydescriptor/index.html | 161 + .../object/getownpropertydescriptors/index.html | 117 + .../object/getownpropertynames/index.html | 163 + .../object/getownpropertysymbols/index.html | 123 + .../object/getprototypeof/index.html | 137 + .../object/hasownproperty/index.html | 186 ++ .../reference/global_objects/object/index.html | 187 ++ .../reference/global_objects/object/is/index.html | 172 ++ .../global_objects/object/isextensible/index.html | 144 + .../global_objects/object/isfrozen/index.html | 190 ++ .../global_objects/object/isprototypeof/index.html | 158 + .../global_objects/object/issealed/index.html | 140 + .../global_objects/object/keys/index.html | 156 + .../object/preventextensions/index.html | 176 ++ .../object/propertyisenumerable/index.html | 185 ++ .../global_objects/object/proto/index.html | 128 + .../global_objects/object/seal/index.html | 167 + .../object/setprototypeof/index.html | 237 ++ .../object/tolocalestring/index.html | 106 + .../global_objects/object/tosource/index.html | 126 + .../global_objects/object/tostring/index.html | 70 + .../global_objects/object/valueof/index.html | 157 + .../global_objects/object/values/index.html | 97 + .../reference/global_objects/parsefloat/index.html | 58 + .../reference/global_objects/parseint/index.html | 89 + .../global_objects/promise/all/index.html | 123 + .../global_objects/promise/catch/index.html | 183 ++ .../global_objects/promise/finally/index.html | 95 + .../reference/global_objects/promise/index.html | 222 ++ .../global_objects/promise/race/index.html | 112 + .../global_objects/promise/reject/index.html | 80 + .../global_objects/promise/resolve/index.html | 150 + .../global_objects/promise/then/index.html | 302 ++ .../handler/getownpropertydescriptor/index.html | 129 - .../global_objects/proxy/handler/index.html | 84 - .../global_objects/proxy/handler/set/index.html | 122 - .../reference/global_objects/proxy/index.html | 439 +++ .../proxy/getownpropertydescriptor/index.html | 129 + .../global_objects/proxy/proxy/index.html | 84 + .../global_objects/proxy/proxy/set/index.html | 122 + .../global_objects/rangeerror/prototype/index.html | 131 - .../global_objects/referenceerror/index.html | 99 + .../global_objects/regexp/compile/index.html | 93 + .../global_objects/regexp/exec/index.html | 238 ++ .../global_objects/regexp/ignorecase/index.html | 142 + .../reference/global_objects/regexp/index.html | 264 ++ .../global_objects/regexp/regexp/index.html | 114 + .../global_objects/regexp/rightcontext/index.html | 54 + .../global_objects/regexp/test/index.html | 152 + .../global_objects/regexp/tostring/index.html | 171 ++ .../global_objects/set/@@iterator/index.html | 86 + .../reference/global_objects/set/add/index.html | 124 + .../reference/global_objects/set/clear/index.html | 119 + .../reference/global_objects/set/delete/index.html | 117 + .../global_objects/set/entries/index.html | 71 + .../reference/global_objects/set/has/index.html | 124 + .../reference/global_objects/set/index.html | 230 ++ .../reference/global_objects/set/size/index.html | 106 + .../reference/global_objects/set/values/index.html | 72 + .../global_objects/string/anchor/index.html | 56 + .../reference/global_objects/string/big/index.html | 54 + .../global_objects/string/blink/index.html | 42 + .../global_objects/string/bold/index.html | 43 + .../global_objects/string/charat/index.html | 143 + .../global_objects/string/charcodeat/index.html | 65 + .../global_objects/string/codepointat/index.html | 127 + .../global_objects/string/concat/index.html | 90 + .../global_objects/string/endswith/index.html | 88 + .../global_objects/string/fixed/index.html | 35 + .../global_objects/string/fontcolor/index.html | 122 + .../global_objects/string/fontsize/index.html | 123 + .../global_objects/string/fromcharcode/index.html | 130 + .../global_objects/string/fromcodepoint/index.html | 204 ++ .../global_objects/string/includes/index.html | 108 + .../reference/global_objects/string/index.html | 385 +++ .../global_objects/string/indexof/index.html | 104 + .../global_objects/string/italics/index.html | 49 + .../global_objects/string/lastindexof/index.html | 79 + .../global_objects/string/length/index.html | 94 + .../global_objects/string/link/index.html | 56 + .../global_objects/string/localecompare/index.html | 159 + .../global_objects/string/match/index.html | 78 + .../global_objects/string/matchall/index.html | 134 + .../global_objects/string/normalize/index.html | 126 + .../global_objects/string/padstart/index.html | 100 + .../reference/global_objects/string/raw/index.html | 112 + .../global_objects/string/repeat/index.html | 128 + .../global_objects/string/replace/index.html | 202 ++ .../global_objects/string/search/index.html | 153 + .../global_objects/string/slice/index.html | 161 + .../global_objects/string/small/index.html | 38 + .../global_objects/string/split/index.html | 240 ++ .../global_objects/string/startswith/index.html | 97 + .../global_objects/string/strike/index.html | 42 + .../reference/global_objects/string/sub/index.html | 35 + .../global_objects/string/substr/index.html | 83 + .../global_objects/string/substring/index.html | 92 + .../reference/global_objects/string/sup/index.html | 35 + .../string/tolocalelowercase/index.html | 113 + .../string/tolocaleuppercase/index.html | 100 + .../global_objects/string/tolowercase/index.html | 40 + .../global_objects/string/tosource/index.html | 56 + .../global_objects/string/tostring/index.html | 28 + .../global_objects/string/touppercase/index.html | 39 + .../global_objects/string/trim/index.html | 133 + .../global_objects/string/trimend/index.html | 82 + .../global_objects/string/valueof/index.html | 28 + .../reference/global_objects/symbol/for/index.html | 153 + .../global_objects/symbol/hasinstance/index.html | 105 + .../reference/global_objects/symbol/index.html | 364 +++ .../global_objects/symbol/iterator/index.html | 98 + .../global_objects/syntaxerror/index.html | 176 ++ .../global_objects/typedarray/buffer/index.html | 110 + .../reference/global_objects/typedarray/index.html | 317 ++ .../reference/global_objects/uint8array/index.html | 260 ++ .../reference/global_objects/undefined/index.html | 183 ++ .../reference/global_objects/unescape/index.html | 123 + .../reference/global_objects/urierror/index.html | 136 + .../global_objects/weakmap/clear/index.html | 52 + .../global_objects/weakmap/delete/index.html | 124 + .../global_objects/weakmap/get/index.html | 80 + .../global_objects/weakmap/has/index.html | 83 + .../reference/global_objects/weakmap/index.html | 278 ++ .../global_objects/weakmap/set/index.html | 91 + .../reference/global_objects/weakset/index.html | 227 ++ .../global_objects/webassembly/index.html | 120 + files/es/web/javascript/reference/index.html | 31 + .../reference/iteration_protocols/index.html | 320 ++ .../reference/lexical_grammar/index.html | 661 ++++ .../reference/operators/addition/index.html | 77 + .../reference/operators/assignment/index.html | 62 + .../reference/operators/async_function/index.html | 102 + .../reference/operators/await/index.html | 102 + .../reference/operators/class/index.html | 157 + .../reference/operators/comma_operator/index.html | 132 + .../operators/conditional_operator/index.html | 171 ++ .../reference/operators/decrement/index.html | 83 + .../reference/operators/delete/index.html | 242 ++ .../operators/destructuring_assignment/index.html | 442 +++ .../reference/operators/division/index.html | 77 + .../reference/operators/equality/index.html | 129 + .../reference/operators/function/index.html | 73 + .../reference/operators/function_star_/index.html | 91 + .../reference/operators/grouping/index.html | 128 + .../javascript/reference/operators/in/index.html | 139 + .../web/javascript/reference/operators/index.html | 280 ++ .../reference/operators/instanceof/index.html | 88 + .../reference/operators/new.target/index.html | 139 + .../javascript/reference/operators/new/index.html | 179 ++ .../operators/operator_precedence/index.html | 297 ++ .../operators/optional_chaining/index.html | 187 ++ .../operators/pipeline_operator/index.html | 78 + .../operators/property_accessors/index.html | 85 + .../reference/operators/remainder/index.html | 82 + .../reference/operators/spread_syntax/index.html | 242 ++ .../reference/operators/strict_equality/index.html | 101 + .../reference/operators/subtraction/index.html | 65 + .../reference/operators/super/index.html | 178 ++ .../javascript/reference/operators/this/index.html | 239 ++ .../reference/operators/typeof/index.html | 76 + .../javascript/reference/operators/void/index.html | 36 + .../reference/operators/yield/index.html | 130 + .../reference/operators/yield_star_/index.html | 199 ++ .../reference/statements/async_function/index.html | 173 ++ .../reference/statements/block/index.html | 89 + .../reference/statements/break/index.html | 41 + .../reference/statements/class/index.html | 148 + .../reference/statements/const/index.html | 127 + .../reference/statements/continue/index.html | 66 + .../reference/statements/debugger/index.html | 125 + .../reference/statements/do...while/index.html | 49 + .../reference/statements/empty/index.html | 141 + .../reference/statements/export/index.html | 175 ++ .../reference/statements/for-await...of/index.html | 144 + .../reference/statements/for...in/index.html | 150 + .../reference/statements/for...of/index.html | 319 ++ .../javascript/reference/statements/for/index.html | 57 + .../reference/statements/function/index.html | 52 + .../reference/statements/function_star_/index.html | 224 ++ .../reference/statements/if...else/index.html | 109 + .../reference/statements/import.meta/index.html | 93 + .../reference/statements/import/index.html | 177 ++ .../web/javascript/reference/statements/index.html | 141 + .../reference/statements/label/index.html | 35 + .../javascript/reference/statements/let/index.html | 393 +++ .../reference/statements/return/index.html | 73 + .../reference/statements/switch/index.html | 245 ++ .../reference/statements/throw/index.html | 153 + .../reference/statements/try...catch/index.html | 254 ++ .../javascript/reference/statements/var/index.html | 163 + .../reference/statements/while/index.html | 58 + .../reference/statements/with/index.html | 166 + .../javascript/reference/strict_mode/index.html | 368 +++ .../reference/template_literals/index.html | 314 ++ .../web/javascript/referencia/acerca_de/index.html | 158 - .../index.html" | 292 -- .../the_legacy_iterator_protocol/index.html" | 72 - .../referencia/classes/class_fields/index.html | 386 --- .../referencia/classes/constructor/index.html | 102 - .../referencia/classes/extends/index.html | 167 - .../web/javascript/referencia/classes/index.html | 372 --- .../classes/private_class_fields/index.html | 201 -- .../referencia/classes/static/index.html | 118 - .../funciones/arguments/callee/index.html | 48 - .../referencia/funciones/arguments/index.html | 229 -- .../funciones/arguments/length/index.html | 131 - .../funciones/arrow_functions/index.html | 530 ---- .../javascript/referencia/funciones/get/index.html | 134 - .../web/javascript/referencia/funciones/index.html | 661 ---- .../funciones/method_definitions/index.html | 226 -- .../funciones/parametros_por_defecto/index.html | 234 -- .../funciones/parametros_rest/index.html | 266 -- .../javascript/referencia/funciones/set/index.html | 217 -- .../referencia/gramatica_lexica/index.html | 661 ---- files/es/web/javascript/referencia/index.html | 31 - .../referencia/iteration_protocols/index.html | 320 -- .../javascript/referencia/modo_estricto/index.html | 368 --- .../objetos_globales/aggregateerror/index.html | 87 - .../objetos_globales/array/@@iterator/index.html | 89 - .../objetos_globales/array/@@species/index.html | 76 - .../array/@@unscopables/index.html | 78 - .../objetos_globales/array/concat/index.html | 140 - .../objetos_globales/array/copywithin/index.html | 165 - .../objetos_globales/array/entries/index.html | 86 - .../objetos_globales/array/every/index.html | 195 -- .../objetos_globales/array/fill/index.html | 145 - .../objetos_globales/array/filter/index.html | 231 -- .../objetos_globales/array/find/index.html | 233 -- .../objetos_globales/array/findindex/index.html | 187 -- .../objetos_globales/array/flat/index.html | 174 -- .../objetos_globales/array/flatmap/index.html | 128 - .../objetos_globales/array/foreach/index.html | 257 -- .../objetos_globales/array/from/index.html | 242 -- .../objetos_globales/array/includes/index.html | 181 -- .../referencia/objetos_globales/array/index.html | 449 --- .../objetos_globales/array/indexof/index.html | 248 -- .../objetos_globales/array/isarray/index.html | 128 - .../objetos_globales/array/join/index.html | 110 - .../objetos_globales/array/keys/index.html | 84 - .../objetos_globales/array/lastindexof/index.html | 164 - .../objetos_globales/array/length/index.html | 143 - .../objetos_globales/array/map/index.html | 360 --- .../objetos_globales/array/of/index.html | 97 - .../objetos_globales/array/pop/index.html | 94 - .../objetos_globales/array/prototype/index.html | 188 -- .../objetos_globales/array/push/index.html | 140 - .../objetos_globales/array/reduce/index.html | 215 -- .../objetos_globales/array/reduceright/index.html | 166 - .../objetos_globales/array/reverse/index.html | 88 - .../objetos_globales/array/shift/index.html | 124 - .../objetos_globales/array/slice/index.html | 287 -- .../objetos_globales/array/some/index.html | 204 -- .../objetos_globales/array/sort/index.html | 301 -- .../objetos_globales/array/splice/index.html | 148 - .../array/tolocalestring/index.html | 177 -- .../objetos_globales/array/tosource/index.html | 112 - .../objetos_globales/array/tostring/index.html | 78 - .../objetos_globales/array/unshift/index.html | 100 - .../objetos_globales/array/values/index.html | 82 - .../arraybuffer/@@species/index.html | 72 - .../arraybuffer/bytelength/index.html | 70 - .../objetos_globales/arraybuffer/index.html | 139 - .../arraybuffer/prototype/index.html | 69 - .../objetos_globales/boolean/boolean/index.html | 75 - .../referencia/objetos_globales/boolean/index.html | 126 - .../objetos_globales/boolean/tosource/index.html | 36 - .../objetos_globales/date/getdate/index.html | 119 - .../objetos_globales/date/getday/index.html | 124 - .../objetos_globales/date/getfullyear/index.html | 67 - .../objetos_globales/date/gethours/index.html | 119 - .../date/getmilliseconds/index.html | 121 - .../objetos_globales/date/getminutes/index.html | 118 - .../objetos_globales/date/getmonth/index.html | 125 - .../objetos_globales/date/getseconds/index.html | 83 - .../objetos_globales/date/gettime/index.html | 140 - .../date/getutcfullyear/index.html | 121 - .../objetos_globales/date/getutchours/index.html | 117 - .../referencia/objetos_globales/date/index.html | 132 - .../objetos_globales/date/now/index.html | 30 - .../objetos_globales/date/parse/index.html | 35 - .../objetos_globales/date/prototype/index.html | 201 -- .../objetos_globales/date/setfullyear/index.html | 133 - .../objetos_globales/date/setmonth/index.html | 78 - .../objetos_globales/date/todatestring/index.html | 88 - .../objetos_globales/date/toisostring/index.html | 144 - .../objetos_globales/date/tojson/index.html | 61 - .../date/tolocaledatestring/index.html | 159 - .../date/tolocalestring/index.html | 163 - .../date/tolocaletimestring/index.html | 152 - .../objetos_globales/date/toutcstring/index.html | 105 - .../objetos_globales/date/utc/index.html | 78 - .../objetos_globales/decodeuri/index.html | 38 - .../objetos_globales/decodeuricomponent/index.html | 42 - .../objetos_globales/encodeuri/index.html | 61 - .../objetos_globales/encodeuricomponent/index.html | 161 - .../error/constructor_error/index.html | 69 - .../objetos_globales/error/filename/index.html | 48 - .../referencia/objetos_globales/error/index.html | 219 -- .../objetos_globales/error/linenumber/index.html | 101 - .../objetos_globales/error/message/index.html | 114 - .../objetos_globales/error/name/index.html | 58 - .../objetos_globales/error/prototype/index.html | 154 - .../objetos_globales/error/tosource/index.html | 60 - .../objetos_globales/error/tostring/index.html | 98 - .../referencia/objetos_globales/escape/index.html | 91 - .../referencia/objetos_globales/eval/index.html | 309 -- .../objetos_globales/evalerror/index.html | 163 - .../funcionesas\303\255ncronas/index.html" | 122 - .../objetos_globales/function/apply/index.html | 233 -- .../objetos_globales/function/arguments/index.html | 44 - .../objetos_globales/function/bind/index.html | 293 -- .../objetos_globales/function/call/index.html | 113 - .../objetos_globales/function/caller/index.html | 128 - .../function/displayname/index.html | 77 - .../function/funci\303\263n/index.html" | 92 - .../objetos_globales/function/index.html | 118 - .../objetos_globales/function/length/index.html | 151 - .../objetos_globales/function/name/index.html | 223 -- .../objetos_globales/function/prototype/index.html | 65 - .../objetos_globales/function/tosource/index.html | 97 - .../objetos_globales/function/tostring/index.html | 130 - .../objetos_globales/generador/index.html | 228 -- .../objetos_globales/generador/next/index.html | 109 - .../objetos_globales/generador/return/index.html | 102 - .../objetos_globales/generador/throw/index.html | 94 - .../referencia/objetos_globales/index.html | 203 -- .../objetos_globales/infinity/index.html | 96 - .../constructor_internalerror/index.html | 55 - .../objetos_globales/internalerror/index.html | 98 - .../referencia/objetos_globales/intl/index.html | 126 - .../intl/numberformat/format/index.html | 92 - .../objetos_globales/intl/numberformat/index.html | 188 -- .../intl/relativetimeformat/index.html | 106 - .../objetos_globales/isfinite/index.html | 114 - .../referencia/objetos_globales/isnan/index.html | 88 - .../referencia/objetos_globales/json/index.html | 231 -- .../objetos_globales/json/parse/index.html | 178 -- .../objetos_globales/json/stringify/index.html | 265 -- .../objetos_globales/map/clear/index.html | 109 - .../objetos_globales/map/delete/index.html | 114 - .../objetos_globales/map/entries/index.html | 109 - .../objetos_globales/map/foreach/index.html | 94 - .../referencia/objetos_globales/map/get/index.html | 77 - .../referencia/objetos_globales/map/has/index.html | 65 - .../referencia/objetos_globales/map/index.html | 213 -- .../objetos_globales/map/keys/index.html | 109 - .../objetos_globales/map/prototype/index.html | 135 - .../referencia/objetos_globales/map/set/index.html | 133 - .../objetos_globales/map/size/index.html | 110 - .../objetos_globales/map/values/index.html | 77 - .../objetos_globales/math/abs/index.html | 149 - .../objetos_globales/math/acos/index.html | 99 - .../objetos_globales/math/acosh/index.html | 94 - .../objetos_globales/math/asin/index.html | 144 - .../objetos_globales/math/asinh/index.html | 90 - .../objetos_globales/math/atan/index.html | 107 - .../objetos_globales/math/atan2/index.html | 141 - .../objetos_globales/math/atanh/index.html | 87 - .../objetos_globales/math/cbrt/index.html | 96 - .../objetos_globales/math/ceil/index.html | 166 - .../objetos_globales/math/cos/index.html | 74 - .../referencia/objetos_globales/math/e/index.html | 83 - .../objetos_globales/math/exp/index.html | 136 - .../objetos_globales/math/expm1/index.html | 89 - .../objetos_globales/math/floor/index.html | 124 - .../objetos_globales/math/fround/index.html | 199 -- .../objetos_globales/math/hypot/index.html | 124 - .../referencia/objetos_globales/math/index.html | 196 -- .../objetos_globales/math/ln10/index.html | 84 - .../objetos_globales/math/ln2/index.html | 83 - .../objetos_globales/math/log/index.html | 112 - .../objetos_globales/math/log10/index.html | 137 - .../objetos_globales/math/log10e/index.html | 130 - .../objetos_globales/math/log2/index.html | 96 - .../objetos_globales/math/log2e/index.html | 27 - .../objetos_globales/math/max/index.html | 145 - .../objetos_globales/math/min/index.html | 150 - .../referencia/objetos_globales/math/pi/index.html | 126 - .../objetos_globales/math/pow/index.html | 140 - .../objetos_globales/math/random/index.html | 132 - .../objetos_globales/math/round/index.html | 218 -- .../objetos_globales/math/seno/index.html | 126 - .../objetos_globales/math/sign/index.html | 151 - .../objetos_globales/math/sqrt/index.html | 134 - .../objetos_globales/math/sqrt1_2/index.html | 123 - .../objetos_globales/math/sqrt2/index.html | 124 - .../objetos_globales/math/tan/index.html | 82 - .../objetos_globales/math/tanh/index.html | 95 - .../objetos_globales/math/trunc/index.html | 144 - .../referencia/objetos_globales/nan/index.html | 46 - .../referencia/objetos_globales/null/index.html | 129 - .../referencia/objetos_globales/number/index.html | 181 -- .../objetos_globales/number/isfinite/index.html | 88 - .../objetos_globales/number/isinteger/index.html | 94 - .../objetos_globales/number/isnan/index.html | 140 - .../number/issafeinteger/index.html | 99 - .../number/max_safe_integer/index.html | 68 - .../objetos_globales/number/max_value/index.html | 131 - .../objetos_globales/number/min_value/index.html | 121 - .../objetos_globales/number/nan/index.html | 59 - .../number/negative_infinity/index.html | 117 - .../objetos_globales/number/parsefloat/index.html | 76 - .../objetos_globales/number/parseint/index.html | 80 - .../number/positive_infinity/index.html | 115 - .../objetos_globales/number/prototype/index.html | 16 - .../objetos_globales/number/tofixed/index.html | 147 - .../number/tolocalestring/index.html | 155 - .../objetos_globales/number/toprecision/index.html | 102 - .../objetos_globales/number/tostring/index.html | 63 - .../objetos_globales/number/valueof/index.html | 81 - .../object/__definegetter__/index.html | 144 - .../object/__lookupgetter__/index.html | 84 - .../objetos_globales/object/assign/index.html | 274 -- .../objetos_globales/object/constructor/index.html | 161 - .../objetos_globales/object/create/index.html | 377 --- .../object/defineproperties/index.html | 194 -- .../object/defineproperty/index.html | 419 --- .../objetos_globales/object/entries/index.html | 161 - .../objetos_globales/object/freeze/index.html | 174 -- .../objetos_globales/object/fromentries/index.html | 106 - .../object/getownpropertydescriptor/index.html | 161 - .../object/getownpropertydescriptors/index.html | 117 - .../object/getownpropertynames/index.html | 163 - .../object/getownpropertysymbols/index.html | 123 - .../object/getprototypeof/index.html | 137 - .../object/hasownproperty/index.html | 186 -- .../referencia/objetos_globales/object/index.html | 187 -- .../objetos_globales/object/is/index.html | 172 -- .../object/isextensible/index.html | 144 - .../objetos_globales/object/isfrozen/index.html | 190 -- .../object/isprototypeof/index.html | 158 - .../objetos_globales/object/issealed/index.html | 140 - .../objetos_globales/object/keys/index.html | 156 - .../object/preventextensions/index.html | 176 -- .../object/propertyisenumerable/index.html | 185 -- .../objetos_globales/object/proto/index.html | 128 - .../objetos_globales/object/prototype/index.html | 195 -- .../objetos_globales/object/seal/index.html | 167 - .../object/setprototypeof/index.html | 237 -- .../object/tolocalestring/index.html | 106 - .../objetos_globales/object/tosource/index.html | 126 - .../objetos_globales/object/tostring/index.html | 70 - .../objetos_globales/object/valueof/index.html | 157 - .../objetos_globales/object/values/index.html | 97 - .../objetos_globales/parsefloat/index.html | 58 - .../objetos_globales/parseint/index.html | 89 - .../objetos_globales/promise/all/index.html | 123 - .../objetos_globales/promise/catch/index.html | 183 -- .../objetos_globales/promise/finally/index.html | 95 - .../referencia/objetos_globales/promise/index.html | 222 -- .../objetos_globales/promise/prototype/index.html | 69 - .../objetos_globales/promise/race/index.html | 112 - .../objetos_globales/promise/reject/index.html | 80 - .../objetos_globales/promise/resolve/index.html | 150 - .../objetos_globales/promise/then/index.html | 302 -- .../referencia/objetos_globales/proxy/index.html | 439 --- .../objetos_globales/referenceerror/index.html | 99 - .../objetos_globales/regexp/compile/index.html | 93 - .../objetos_globales/regexp/exec/index.html | 238 -- .../objetos_globales/regexp/ignorecase/index.html | 142 - .../referencia/objetos_globales/regexp/index.html | 264 -- .../objetos_globales/regexp/regexp/index.html | 114 - .../regexp/rightcontext/index.html | 54 - .../objetos_globales/regexp/test/index.html | 152 - .../objetos_globales/regexp/tostring/index.html | 171 -- .../objetos_globales/set/@@iterator/index.html | 86 - .../referencia/objetos_globales/set/add/index.html | 124 - .../objetos_globales/set/clear/index.html | 119 - .../objetos_globales/set/delete/index.html | 117 - .../objetos_globales/set/entries/index.html | 71 - .../referencia/objetos_globales/set/has/index.html | 124 - .../referencia/objetos_globales/set/index.html | 230 -- .../objetos_globales/set/size/index.html | 106 - .../objetos_globales/set/values/index.html | 72 - .../objetos_globales/string/anchor/index.html | 56 - .../objetos_globales/string/big/index.html | 54 - .../objetos_globales/string/blink/index.html | 42 - .../objetos_globales/string/bold/index.html | 43 - .../objetos_globales/string/charat/index.html | 143 - .../objetos_globales/string/charcodeat/index.html | 65 - .../objetos_globales/string/codepointat/index.html | 127 - .../objetos_globales/string/concat/index.html | 90 - .../objetos_globales/string/endswith/index.html | 88 - .../objetos_globales/string/fixed/index.html | 35 - .../objetos_globales/string/fontcolor/index.html | 122 - .../objetos_globales/string/fontsize/index.html | 123 - .../string/fromcharcode/index.html | 130 - .../string/fromcodepoint/index.html | 204 -- .../objetos_globales/string/includes/index.html | 108 - .../referencia/objetos_globales/string/index.html | 385 --- .../objetos_globales/string/indexof/index.html | 104 - .../objetos_globales/string/italics/index.html | 49 - .../objetos_globales/string/lastindexof/index.html | 79 - .../objetos_globales/string/length/index.html | 94 - .../objetos_globales/string/link/index.html | 56 - .../string/localecompare/index.html | 159 - .../objetos_globales/string/match/index.html | 78 - .../objetos_globales/string/matchall/index.html | 134 - .../objetos_globales/string/normalize/index.html | 126 - .../objetos_globales/string/padstart/index.html | 100 - .../objetos_globales/string/prototype/index.html | 118 - .../objetos_globales/string/raw/index.html | 112 - .../objetos_globales/string/repeat/index.html | 128 - .../objetos_globales/string/replace/index.html | 202 -- .../objetos_globales/string/search/index.html | 153 - .../objetos_globales/string/slice/index.html | 161 - .../objetos_globales/string/small/index.html | 38 - .../objetos_globales/string/split/index.html | 240 -- .../objetos_globales/string/startswith/index.html | 97 - .../objetos_globales/string/strike/index.html | 42 - .../objetos_globales/string/sub/index.html | 35 - .../objetos_globales/string/substr/index.html | 83 - .../objetos_globales/string/substring/index.html | 92 - .../objetos_globales/string/sup/index.html | 35 - .../string/tolocalelowercase/index.html | 113 - .../string/tolocaleuppercase/index.html | 100 - .../objetos_globales/string/tolowercase/index.html | 40 - .../objetos_globales/string/tosource/index.html | 56 - .../objetos_globales/string/tostring/index.html | 28 - .../objetos_globales/string/touppercase/index.html | 39 - .../objetos_globales/string/trim/index.html | 133 - .../objetos_globales/string/trimend/index.html | 82 - .../objetos_globales/string/valueof/index.html | 28 - .../objetos_globales/symbol/for/index.html | 153 - .../objetos_globales/symbol/hasinstance/index.html | 105 - .../referencia/objetos_globales/symbol/index.html | 364 --- .../objetos_globales/symbol/iterator/index.html | 98 - .../objetos_globales/syntaxerror/index.html | 176 -- .../syntaxerror/prototype/index.html | 133 - .../objetos_globales/typedarray/buffer/index.html | 110 - .../objetos_globales/typedarray/index.html | 317 -- .../objetos_globales/uint8array/index.html | 260 -- .../objetos_globales/undefined/index.html | 183 -- .../objetos_globales/unescape/index.html | 123 - .../objetos_globales/urierror/index.html | 136 - .../objetos_globales/weakmap/clear/index.html | 52 - .../objetos_globales/weakmap/delete/index.html | 124 - .../objetos_globales/weakmap/get/index.html | 80 - .../objetos_globales/weakmap/has/index.html | 83 - .../referencia/objetos_globales/weakmap/index.html | 278 -- .../objetos_globales/weakmap/prototype/index.html | 143 - .../objetos_globales/weakmap/set/index.html | 91 - .../referencia/objetos_globales/weakset/index.html | 227 -- .../objetos_globales/webassembly/index.html | 120 - .../operadores/adici\303\263n/index.html" | 77 - .../operadores/aritm\303\251ticos/index.html" | 315 -- .../referencia/operadores/asignacion/index.html | 62 - .../operadores/assignment_operators/index.html | 462 --- .../operadores/async_function/index.html | 102 - .../referencia/operadores/await/index.html | 102 - .../operadores/bitwise_operators/index.html | 722 ----- .../referencia/operadores/class/index.html | 157 - .../referencia/operadores/comparacion/index.html | 129 - .../operadores/comparison_operators/index.html | 262 -- .../operadores/conditional_operator/index.html | 171 -- .../referencia/operadores/decremento/index.html | 83 - .../referencia/operadores/delete/index.html | 242 -- .../operadores/destructuring_assignment/index.html | 442 --- .../referencia/operadores/division/index.html | 77 - .../operadores/encadenamiento_opcional/index.html | 187 -- .../referencia/operadores/function/index.html | 73 - .../operadores/function_star_/index.html | 91 - .../referencia/operadores/grouping/index.html | 128 - .../javascript/referencia/operadores/in/index.html | 139 - .../javascript/referencia/operadores/index.html | 280 -- .../referencia/operadores/instanceof/index.html | 88 - .../referencia/operadores/miembros/index.html | 85 - .../referencia/operadores/new.target/index.html | 139 - .../referencia/operadores/new/index.html | 179 -- .../referencia/operadores/operador_coma/index.html | 132 - .../operadores_l\303\263gicos/index.html" | 296 -- .../operadores/operator_precedence/index.html | 297 -- .../operadores/pipeline_operator/index.html | 78 - .../referencia/operadores/resto/index.html | 82 - .../operadores/sintaxis_spread/index.html | 242 -- .../operadores/spread_operator/index.html | 220 -- .../operadores/strict_equality/index.html | 101 - .../referencia/operadores/super/index.html | 178 -- .../operadores/sustracci\303\263n/index.html" | 65 - .../referencia/operadores/this/index.html | 239 -- .../referencia/operadores/typeof/index.html | 76 - .../referencia/operadores/void/index.html | 36 - .../referencia/operadores/yield/index.html | 130 - .../referencia/operadores/yield_star_/index.html | 199 -- .../referencia/palabras_reservadas/index.html | 99 - .../referencia/sentencias/block/index.html | 89 - .../referencia/sentencias/break/index.html | 41 - .../referencia/sentencias/class/index.html | 148 - .../referencia/sentencias/const/index.html | 127 - .../referencia/sentencias/continue/index.html | 66 - .../referencia/sentencias/debugger/index.html | 125 - .../referencia/sentencias/default/index.html | 121 - .../referencia/sentencias/do...while/index.html | 49 - .../referencia/sentencias/empty/index.html | 141 - .../referencia/sentencias/export/index.html | 175 -- .../sentencias/for-await...of/index.html | 144 - .../referencia/sentencias/for...in/index.html | 150 - .../referencia/sentencias/for...of/index.html | 319 -- .../referencia/sentencias/for/index.html | 57 - .../sentencias/funcion_asincrona/index.html | 173 -- .../referencia/sentencias/function/index.html | 52 - .../sentencias/function_star_/index.html | 224 -- .../referencia/sentencias/if...else/index.html | 109 - .../referencia/sentencias/import.meta/index.html | 93 - .../referencia/sentencias/import/index.html | 177 -- .../javascript/referencia/sentencias/index.html | 141 - .../referencia/sentencias/label/index.html | 35 - .../referencia/sentencias/let/index.html | 393 --- .../referencia/sentencias/return/index.html | 73 - .../referencia/sentencias/switch/index.html | 245 -- .../referencia/sentencias/throw/index.html | 153 - .../referencia/sentencias/try...catch/index.html | 254 -- .../referencia/sentencias/var/index.html | 163 - .../referencia/sentencias/while/index.html | 58 - .../referencia/sentencias/with/index.html | 166 - .../referencia/template_strings/index.html | 314 -- files/es/web/javascript/typed_arrays/index.html | 272 ++ .../index.html" | 960 ------ .../es/web/javascript/vectores_tipados/index.html | 272 -- files/es/web/mathml/element/index.html | 97 + files/es/web/mathml/element/math/index.html | 162 + files/es/web/mathml/elemento/index.html | 97 - files/es/web/mathml/elemento/math/index.html | 162 - .../index.html | 77 + files/es/web/opensearch/index.html | 154 + .../mejorando_rendimienot_inicial/index.html | 95 - .../optimizing_startup_performance/index.html | 95 + .../developer_guide/instalar/index.html | 96 - .../developer_guide/installing/index.html | 96 + .../responsive/media_types/index.html | 394 +++ .../web/progressive_web_apps/ventajas/index.html | 63 - .../security/csp/csp_policy_directives/index.html | 709 ----- files/es/web/security/csp/index.html | 39 - .../introducing_content_security_policy/index.html | 57 - .../es/web/security/same-origin_policy/index.html | 269 ++ .../web/security/same-origin_politica/index.html | 269 -- .../index.html | 77 - .../turning_off_form_autocompletion/index.html | 77 + .../index.html | 102 + files/es/web/svg/element/glifo/index.html | 114 - files/es/web/svg/element/glyph/index.html | 114 + files/es/web/svg/element/script/index.html | 255 ++ .../web/svg/svg_1.1_support_in_firefox/index.html | 847 +++++ files/es/web/svg/svg_en_firefox_1.5/index.html | 60 - .../svg/tutorial/introducci\303\263n/index.html" | 45 - files/es/web/svg/tutorial/introduction/index.html | 45 + files/es/web/tutoriales/index.html | 206 -- files/es/web/tutorials/index.html | 206 ++ .../web/web_components/custom_elements/index.html | 182 -- .../web/xml/introducci\303\263n_a_xml/index.html" | 125 - files/es/web/xml/xml_introduction/index.html | 125 + .../es/web/xpath/axes/ancestor-or-self/index.html | 8 + files/es/web/xpath/axes/ancestor/index.html | 8 + files/es/web/xpath/axes/attribute/index.html | 8 + files/es/web/xpath/axes/child/index.html | 8 + .../web/xpath/axes/descendant-or-self/index.html | 8 + files/es/web/xpath/axes/descendant/index.html | 8 + .../es/web/xpath/axes/following-sibling/index.html | 8 + files/es/web/xpath/axes/following/index.html | 8 + files/es/web/xpath/axes/index.html | 47 + files/es/web/xpath/axes/namespace/index.html | 9 + files/es/web/xpath/axes/parent/index.html | 8 + .../es/web/xpath/axes/preceding-sibling/index.html | 8 + files/es/web/xpath/axes/preceding/index.html | 8 + .../es/web/xpath/ejes/ancestor-or-self/index.html | 8 - files/es/web/xpath/ejes/ancestor/index.html | 8 - files/es/web/xpath/ejes/attribute/index.html | 8 - files/es/web/xpath/ejes/child/index.html | 8 - .../web/xpath/ejes/descendant-or-self/index.html | 8 - files/es/web/xpath/ejes/descendant/index.html | 8 - .../es/web/xpath/ejes/following-sibling/index.html | 8 - files/es/web/xpath/ejes/following/index.html | 8 - files/es/web/xpath/ejes/index.html | 47 - files/es/web/xpath/ejes/namespace/index.html | 9 - files/es/web/xpath/ejes/parent/index.html | 8 - .../es/web/xpath/ejes/preceding-sibling/index.html | 8 - files/es/web/xpath/ejes/preceding/index.html | 8 - files/es/web/xpath/funciones/contains/index.html | 32 - files/es/web/xpath/funciones/index.html | 54 - files/es/web/xpath/funciones/substring/index.html | 37 - files/es/web/xpath/funciones/true/index.html | 29 - files/es/web/xpath/functions/contains/index.html | 32 + files/es/web/xpath/functions/index.html | 54 + files/es/web/xpath/functions/substring/index.html | 37 + files/es/web/xpath/functions/true/index.html | 29 + .../index.html | 416 +++ files/es/web/xslt/apply-imports/index.html | 36 - files/es/web/xslt/apply-templates/index.html | 43 - files/es/web/xslt/attribute-set/index.html | 43 - files/es/web/xslt/attribute/index.html | 43 - files/es/web/xslt/call-template/index.html | 40 - files/es/web/xslt/choose/index.html | 37 - files/es/web/xslt/comment/index.html | 37 - files/es/web/xslt/copy-of/index.html | 38 - files/es/web/xslt/copy/index.html | 40 - files/es/web/xslt/decimal-format/index.html | 99 - files/es/web/xslt/element/apply-imports/index.html | 36 + .../es/web/xslt/element/apply-templates/index.html | 43 + files/es/web/xslt/element/attribute-set/index.html | 43 + files/es/web/xslt/element/attribute/index.html | 43 + files/es/web/xslt/element/call-template/index.html | 40 + files/es/web/xslt/element/choose/index.html | 37 + files/es/web/xslt/element/comment/index.html | 37 + files/es/web/xslt/element/copy-of/index.html | 38 + files/es/web/xslt/element/copy/index.html | 40 + .../es/web/xslt/element/decimal-format/index.html | 99 + files/es/web/xslt/element/fallback/index.html | 38 + files/es/web/xslt/element/for-each/index.html | 42 + files/es/web/xslt/element/if/index.html | 39 + files/es/web/xslt/element/import/index.html | 39 + files/es/web/xslt/element/include/index.html | 39 + files/es/web/xslt/element/key/index.html | 44 + files/es/web/xslt/element/message/index.html | 40 + .../es/web/xslt/element/namespace-alias/index.html | 42 + files/es/web/xslt/element/number/index.html | 169 + files/es/web/xslt/element/otherwise/index.html | 37 + files/es/web/xslt/element/when/index.html | 40 + files/es/web/xslt/element/with-param/index.html | 43 + files/es/web/xslt/fallback/index.html | 38 - files/es/web/xslt/for-each/index.html | 42 - files/es/web/xslt/if/index.html | 39 - files/es/web/xslt/import/index.html | 39 - files/es/web/xslt/include/index.html | 39 - files/es/web/xslt/key/index.html | 44 - files/es/web/xslt/message/index.html | 40 - files/es/web/xslt/namespace-alias/index.html | 42 - files/es/web/xslt/number/index.html | 169 - files/es/web/xslt/otherwise/index.html | 37 - .../web/xslt/transformando_xml_con_xslt/index.html | 112 - .../web/xslt/transforming_xml_with_xslt/index.html | 112 + files/es/web/xslt/when/index.html | 40 - files/es/web/xslt/with-param/index.html | 43 - 1765 files changed, 139262 insertions(+), 142980 deletions(-) delete mode 100644 files/es/web/accesibilidad/comunidad/index.html delete mode 100644 files/es/web/accesibilidad/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/perceivable/index.html delete mode 100644 files/es/web/accesibilidad/understanding_wcag/teclado/index.html delete mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html delete mode 100644 files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html create mode 100644 files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html delete mode 100644 files/es/web/accessibility/aria/forms/alertas/index.html create mode 100644 files/es/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/es/web/accessibility/aria/forms/basic_form_hints/index.html delete mode 100644 files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html delete mode 100644 files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html create mode 100644 files/es/web/accessibility/aria/forms/multipart_labels/index.html create mode 100644 files/es/web/accessibility/community/index.html create mode 100644 files/es/web/accessibility/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/keyboard/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/perceivable/index.html create mode 100644 files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html delete mode 100644 "files/es/web/api/animation/animaci\303\263n/index.html" create mode 100644 files/es/web/api/animation/animation/index.html create mode 100644 files/es/web/api/animation/currenttime/index.html create mode 100644 files/es/web/api/animation/finished/index.html delete mode 100644 files/es/web/api/animation/terminado/index.html delete mode 100644 files/es/web/api/animation/tiempoactual/index.html delete mode 100644 files/es/web/api/api_de_almacenamiento_web/index.html delete mode 100644 files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html delete mode 100644 files/es/web/api/api_del_portapapeles/index.html create mode 100644 files/es/web/api/battery_status_api/index.html create mode 100644 files/es/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/es/web/api/canvas_api/index.html create mode 100644 files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/basic_usage/index.html delete mode 100644 files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html create mode 100644 files/es/web/api/clipboard_api/index.html delete mode 100644 files/es/web/api/console/tabla/index.html create mode 100644 files/es/web/api/console/table/index.html create mode 100644 files/es/web/api/crypto/getrandomvalues/index.html delete mode 100644 files/es/web/api/document/abrir/index.html delete mode 100644 files/es/web/api/document/async/index.html create mode 100644 files/es/web/api/document/cookie/index.html delete mode 100644 files/es/web/api/document/crearatributo/index.html create mode 100644 files/es/web/api/document/createattribute/index.html create mode 100644 files/es/web/api/document/createevent/index.html delete mode 100644 files/es/web/api/document/getselection/index.html create mode 100644 files/es/web/api/document/open/index.html create mode 100644 files/es/web/api/document/pointerlockchange_event/index.html delete mode 100644 files/es/web/api/document/pointerlockelement/index.html delete mode 100644 files/es/web/api/document/stylesheets/index.html create mode 100644 files/es/web/api/document_object_model/events/index.html create mode 100644 files/es/web/api/document_object_model/examples/index.html create mode 100644 files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html create mode 100644 files/es/web/api/document_object_model/index.html create mode 100644 files/es/web/api/document_object_model/introduction/index.html create mode 100644 files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html create mode 100644 files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html create mode 100644 files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html create mode 100644 files/es/web/api/document_object_model/whitespace/index.html create mode 100644 files/es/web/api/documentorshadowroot/getselection/index.html create mode 100644 files/es/web/api/documentorshadowroot/pointerlockelement/index.html create mode 100644 files/es/web/api/documentorshadowroot/stylesheets/index.html create mode 100644 files/es/web/api/domstring/binary/index.html delete mode 100644 files/es/web/api/domstring/cadenas_binarias/index.html delete mode 100644 files/es/web/api/element/accesskey/index.html create mode 100644 files/es/web/api/element/blur_event/index.html delete mode 100644 files/es/web/api/element/name/index.html delete mode 100644 files/es/web/api/element/ongotpointercapture/index.html delete mode 100644 files/es/web/api/element/onlostpointercapture/index.html delete mode 100644 files/es/web/api/element/onwheel/index.html create mode 100644 files/es/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/es/web/api/elementoshtmlparavideo/index.html delete mode 100644 files/es/web/api/event/createevent/index.html create mode 100644 files/es/web/api/fetch_api/basic_concepts/index.html delete mode 100644 files/es/web/api/fetch_api/conceptos_basicos/index.html create mode 100644 files/es/web/api/fetch_api/using_fetch/index.html delete mode 100644 files/es/web/api/fetch_api/utilizando_fetch/index.html create mode 100644 files/es/web/api/formdata/index.html create mode 100644 files/es/web/api/formdata/using_formdata_objects/index.html create mode 100644 files/es/web/api/geolocation_api/index.html create mode 100644 files/es/web/api/globaleventhandlers/ongotpointercapture/index.html create mode 100644 files/es/web/api/globaleventhandlers/onlostpointercapture/index.html delete mode 100644 files/es/web/api/globaleventhandlers/onunload/index.html create mode 100644 files/es/web/api/globaleventhandlers/onwheel/index.html create mode 100644 files/es/web/api/history_api/example/index.html create mode 100644 files/es/web/api/history_api/index.html create mode 100644 files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html create mode 100644 files/es/web/api/html_drag_and_drop_api/index.html create mode 100644 files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html create mode 100644 files/es/web/api/htmlelement/accesskey/index.html create mode 100644 files/es/web/api/htmlelement/animationend_event/index.html delete mode 100644 files/es/web/api/htmlelement/dataset/index.html delete mode 100644 files/es/web/api/htmlelement/focus/index.html delete mode 100644 files/es/web/api/htmlelement/style/index.html create mode 100644 files/es/web/api/htmlelement/transitioncancel_event/index.html create mode 100644 files/es/web/api/htmlelement/transitionend_event/index.html create mode 100644 files/es/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/es/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/es/web/api/htmlorforeignelement/focus/index.html create mode 100644 files/es/web/api/htmlvideoelement/index.html create mode 100644 files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html delete mode 100644 files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html delete mode 100644 files/es/web/api/indexeddb_api/usando_indexeddb/index.html create mode 100644 files/es/web/api/indexeddb_api/using_indexeddb/index.html create mode 100644 files/es/web/api/media_streams_api/index.html create mode 100644 files/es/web/api/navigator/geolocation/index.html delete mode 100644 files/es/web/api/navigatorgeolocation/geolocation/index.html delete mode 100644 files/es/web/api/navigatorgeolocation/index.html delete mode 100644 files/es/web/api/navigatoronline/eventos_online_y_offline/index.html create mode 100644 files/es/web/api/navigatoronline/online_and_offline_events/index.html delete mode 100644 files/es/web/api/node/elementopadre/index.html delete mode 100644 files/es/web/api/node/insertarantes/index.html create mode 100644 files/es/web/api/node/insertbefore/index.html delete mode 100644 files/es/web/api/node/nodoprincipal/index.html create mode 100644 files/es/web/api/node/parentelement/index.html delete mode 100644 files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html create mode 100644 files/es/web/api/notifications_api/using_the_notifications_api/index.html create mode 100644 files/es/web/api/pointer_lock_api/index.html delete mode 100644 files/es/web/api/push_api/using_the_push_api/index.html delete mode 100644 files/es/web/api/randomsource/index.html delete mode 100644 files/es/web/api/randomsource/obtenervaloresaleatorios/index.html create mode 100644 files/es/web/api/server-sent_events/index.html create mode 100644 files/es/web/api/server-sent_events/using_server-sent_events/index.html delete mode 100644 files/es/web/api/storage/localstorage/index.html delete mode 100644 files/es/web/api/subtlecrypto/encrypt/index.html create mode 100644 files/es/web/api/touch_events/index.html create mode 100644 files/es/web/api/vibration_api/index.html create mode 100644 files/es/web/api/web_audio_api/index.html delete mode 100644 files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html create mode 100644 files/es/web/api/web_speech_api/using_the_web_speech_api/index.html delete mode 100644 files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html create mode 100644 files/es/web/api/web_storage_api/index.html create mode 100644 files/es/web/api/web_storage_api/using_the_web_storage_api/index.html create mode 100644 files/es/web/api/web_workers_api/using_web_workers/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html delete mode 100644 files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html create mode 100644 files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html delete mode 100644 files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html create mode 100644 files/es/web/api/webrtc_api/session_lifetime/index.html create mode 100644 files/es/web/api/webrtc_api/taking_still_photos/index.html delete mode 100644 files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html delete mode 100644 files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html create mode 100644 files/es/web/api/websockets_api/writing_websocket_server/index.html create mode 100644 files/es/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/es/web/api/window/beforeunload_event/index.html create mode 100644 files/es/web/api/window/domcontentloaded_event/index.html create mode 100644 files/es/web/api/window/load_event/index.html delete mode 100644 files/es/web/api/window/url/index.html delete mode 100644 files/es/web/api/windowbase64/atob/index.html delete mode 100644 files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html delete mode 100644 files/es/web/api/windowbase64/index.html create mode 100644 files/es/web/api/windoweventhandlers/onunload/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/atob/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/clearinterval/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/setinterval/index.html create mode 100644 files/es/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/es/web/api/windowtimers/clearinterval/index.html delete mode 100644 files/es/web/api/windowtimers/cleartimeout/index.html delete mode 100644 files/es/web/api/windowtimers/index.html delete mode 100644 files/es/web/api/windowtimers/setinterval/index.html delete mode 100644 files/es/web/api/windowtimers/settimeout/index.html create mode 100644 files/es/web/api/xmldocument/async/index.html delete mode 100644 files/es/web/api/xmlhttprequest/formdata/index.html create mode 100644 files/es/web/api/xmlhttprequest/loadend_event/index.html delete mode 100644 files/es/web/css/-moz-box-flex/index.html delete mode 100644 files/es/web/css/-moz-box-ordinal-group/index.html delete mode 100644 files/es/web/css/-moz-box-pack/index.html delete mode 100644 files/es/web/css/-moz-cell/index.html delete mode 100644 files/es/web/css/-moz-font-language-override/index.html delete mode 100644 files/es/web/css/-moz-user-modify/index.html delete mode 100644 files/es/web/css/-webkit-mask-clip/index.html delete mode 100644 files/es/web/css/-webkit-mask-image/index.html delete mode 100644 files/es/web/css/-webkit-mask-origin/index.html delete mode 100644 files/es/web/css/-webkit-mask-position/index.html delete mode 100644 files/es/web/css/-webkit-mask-repeat/index.html delete mode 100644 files/es/web/css/-webkit-mask/index.html delete mode 100644 files/es/web/css/@media/altura/index.html create mode 100644 files/es/web/css/@media/height/index.html delete mode 100644 "files/es/web/css/@media/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/@media/resolution/index.html delete mode 100644 files/es/web/css/@viewport/height/index.html delete mode 100644 files/es/web/css/@viewport/width/index.html delete mode 100644 files/es/web/css/_colon_-moz-placeholder/index.html delete mode 100644 files/es/web/css/_colon_-moz-ui-invalid/index.html delete mode 100644 files/es/web/css/_colon_-ms-input-placeholder/index.html delete mode 100644 files/es/web/css/_colon_-webkit-autofill/index.html delete mode 100644 files/es/web/css/_colon_any/index.html create mode 100644 files/es/web/css/_colon_autofill/index.html create mode 100644 files/es/web/css/_colon_is/index.html delete mode 100644 files/es/web/css/_colon_not()/index.html create mode 100644 files/es/web/css/_colon_not/index.html create mode 100644 files/es/web/css/_colon_user-invalid/index.html delete mode 100644 files/es/web/css/_doublecolon_-moz-placeholder/index.html delete mode 100644 files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html delete mode 100644 files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html create mode 100644 files/es/web/css/_doublecolon_file-selector-button/index.html create mode 100644 files/es/web/css/adjacent_sibling_combinator/index.html create mode 100644 files/es/web/css/attribute_selectors/index.html delete mode 100644 files/es/web/css/auto/index.html create mode 100644 files/es/web/css/box-flex/index.html create mode 100644 files/es/web/css/box-ordinal-group/index.html create mode 100644 files/es/web/css/box-pack/index.html create mode 100644 files/es/web/css/column-gap/index.html delete mode 100644 files/es/web/css/columnas_css/index.html delete mode 100644 files/es/web/css/comentarios/index.html delete mode 100644 files/es/web/css/comenzando_(tutorial_css)/index.html create mode 100644 files/es/web/css/comments/index.html delete mode 100644 files/es/web/css/como_iniciar/index.html delete mode 100644 files/es/web/css/como_iniciar/por_que_usar_css/index.html delete mode 100644 files/es/web/css/como_iniciar/que_es_css/index.html create mode 100644 files/es/web/css/computed_value/index.html delete mode 100644 "files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" create mode 100644 files/es/web/css/css_animations/detecting_css_animation_support/index.html delete mode 100644 files/es/web/css/css_animations/usando_animaciones_css/index.html create mode 100644 files/es/web/css/css_animations/using_css_animations/index.html delete mode 100644 files/es/web/css/css_background_and_borders/border-image_generador/index.html create mode 100644 files/es/web/css/css_background_and_borders/border-image_generator/index.html delete mode 100644 files/es/web/css/css_background_and_borders/index.html delete mode 100644 files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/es/web/css/css_backgrounds_and_borders/index.html create mode 100644 files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/es/web/css/css_box_model/index.html create mode 100644 files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/es/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/es/web/css/css_color/index.html create mode 100644 files/es/web/css/css_colors/color_picker_tool/index.html delete mode 100644 files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html delete mode 100644 files/es/web/css/css_colors/index.html create mode 100644 files/es/web/css/css_columns/index.html create mode 100644 files/es/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/es/web/css/css_conditional_rules/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html create mode 100644 files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html delete mode 100644 files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html create mode 100644 files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html delete mode 100644 "files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" delete mode 100644 files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html create mode 100644 files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/es/web/css/css_images/using_css_gradients/index.html delete mode 100644 files/es/web/css/css_logical_properties/dimensionamiento/index.html create mode 100644 files/es/web/css/css_logical_properties/sizing/index.html delete mode 100644 files/es/web/css/css_modelo_caja/index.html delete mode 100644 "files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" delete mode 100644 files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/index.html delete mode 100644 files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html delete mode 100644 files/es/web/css/css_reglas_condicionales/index.html create mode 100644 files/es/web/css/css_selectors/index.html create mode 100644 files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html create mode 100644 files/es/web/css/css_text/index.html create mode 100644 files/es/web/css/css_transitions/using_css_transitions/index.html delete mode 100644 files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html delete mode 100644 files/es/web/css/elemento_reemplazo/index.html delete mode 100644 files/es/web/css/especificidad/index.html delete mode 100644 files/es/web/css/filter-function/url/index.html create mode 100644 files/es/web/css/font-language-override/index.html create mode 100644 files/es/web/css/gap/index.html create mode 100644 files/es/web/css/general_sibling_combinator/index.html create mode 100644 files/es/web/css/gradient/index.html delete mode 100644 files/es/web/css/gradiente/index.html delete mode 100644 files/es/web/css/grid-column-gap/index.html delete mode 100644 files/es/web/css/grid-gap/index.html delete mode 100644 files/es/web/css/herramientas/cubic_bezier_generator/index.html delete mode 100644 files/es/web/css/herramientas/index.html create mode 100644 files/es/web/css/initial_value/index.html delete mode 100644 "files/es/web/css/introducci\303\263n/boxes/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/color/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/how_css_works/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/layout/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/media/index.html" delete mode 100644 "files/es/web/css/introducci\303\263n/selectors/index.html" create mode 100644 files/es/web/css/mask-clip/index.html create mode 100644 files/es/web/css/mask-image/index.html create mode 100644 files/es/web/css/mask-origin/index.html create mode 100644 files/es/web/css/mask-position/index.html create mode 100644 files/es/web/css/mask-repeat/index.html create mode 100644 files/es/web/css/mask/index.html create mode 100644 files/es/web/css/media_queries/testing_media_queries/index.html create mode 100644 files/es/web/css/media_queries/using_media_queries/index.html create mode 100644 files/es/web/css/mix-blend-mode/index.html delete mode 100644 files/es/web/css/normal/index.html create mode 100644 files/es/web/css/percentage/index.html delete mode 100644 files/es/web/css/porcentaje/index.html delete mode 100644 files/es/web/css/preguntas_frecuentes_sobre_css/index.html delete mode 100644 files/es/web/css/primeros_pasos/index.html create mode 100644 files/es/web/css/pseudo-elements/index.html delete mode 100644 files/es/web/css/pseudoelementos/index.html create mode 100644 files/es/web/css/reference/index.html delete mode 100644 files/es/web/css/referencia_css/index.html delete mode 100644 files/es/web/css/referencia_css/mix-blend-mode/index.html create mode 100644 files/es/web/css/replaced_element/index.html delete mode 100644 "files/es/web/css/resoluci\303\263n/index.html" create mode 100644 files/es/web/css/resolution/index.html delete mode 100644 files/es/web/css/rtl/index.html delete mode 100644 files/es/web/css/selectores_atributo/index.html delete mode 100644 files/es/web/css/selectores_css/index.html delete mode 100644 files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html delete mode 100644 files/es/web/css/selectores_hermanos_adyacentes/index.html delete mode 100644 files/es/web/css/selectores_hermanos_generales/index.html delete mode 100644 "files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" create mode 100644 files/es/web/css/specificity/index.html delete mode 100644 files/es/web/css/texto_css/index.html create mode 100644 files/es/web/css/tools/cubic_bezier_generator/index.html create mode 100644 files/es/web/css/tools/index.html delete mode 100644 files/es/web/css/transiciones_de_css/index.html create mode 100644 files/es/web/css/url()/index.html create mode 100644 files/es/web/css/user-modify/index.html delete mode 100644 files/es/web/css/valor_calculado/index.html delete mode 100644 files/es/web/css/valor_inicial/index.html create mode 100644 files/es/web/css/value_definition_syntax/index.html delete mode 100644 files/es/web/events/abort/index.html delete mode 100644 files/es/web/events/animationend/index.html delete mode 100644 files/es/web/events/beforeunload/index.html delete mode 100644 files/es/web/events/blur/index.html delete mode 100644 files/es/web/events/domcontentloaded/index.html delete mode 100644 files/es/web/events/load/index.html delete mode 100644 files/es/web/events/loadend/index.html delete mode 100644 files/es/web/events/pointerlockchange/index.html delete mode 100644 files/es/web/events/transitioncancel/index.html delete mode 100644 files/es/web/events/transitionend/index.html create mode 100644 files/es/web/guide/ajax/community/index.html delete mode 100644 files/es/web/guide/ajax/comunidad/index.html create mode 100644 files/es/web/guide/ajax/getting_started/index.html delete mode 100644 files/es/web/guide/ajax/primeros_pasos/index.html delete mode 100644 files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html delete mode 100644 files/es/web/guide/api/vibration/index.html create mode 100644 files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html delete mode 100644 files/es/web/guide/css/probando_media_queries/index.html delete mode 100644 "files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" delete mode 100644 files/es/web/guide/dom/events/eventos_controlador/index.html delete mode 100644 files/es/web/guide/dom/events/index.html delete mode 100644 files/es/web/guide/dom/index.html create mode 100644 files/es/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/es/web/guide/events/event_handlers/index.html create mode 100644 files/es/web/guide/events/index.html create mode 100644 files/es/web/guide/events/orientation_and_motion_data_explained/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/basic_usage/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html delete mode 100644 files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html delete mode 100644 files/es/web/guide/html/categorias_de_contenido/index.html create mode 100644 files/es/web/guide/html/content_categories/index.html create mode 100644 files/es/web/guide/html/html5/constraint_validation/index.html create mode 100644 files/es/web/guide/html/html5/html5_parser/index.html create mode 100644 files/es/web/guide/html/html5/index.html create mode 100644 files/es/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 files/es/web/guide/html/introduction_alhtml_clone/index.html create mode 100644 files/es/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/es/web/guide/mobile/index.html delete mode 100644 files/es/web/guide/movil/index.html delete mode 100644 files/es/web/guide/performance/usando_web_workers/index.html delete mode 100644 files/es/web/guide/usando_objetos_formdata/index.html delete mode 100644 files/es/web/html/anipular_video_por_medio_de_canvas/index.html delete mode 100644 files/es/web/html/atributos/accept/index.html delete mode 100644 files/es/web/html/atributos/autocomplete/index.html delete mode 100644 files/es/web/html/atributos/index.html delete mode 100644 files/es/web/html/atributos/min/index.html delete mode 100644 files/es/web/html/atributos/minlength/index.html delete mode 100644 files/es/web/html/atributos/multiple/index.html delete mode 100644 files/es/web/html/atributos_de_configuracion_cors/index.html delete mode 100644 files/es/web/html/atributos_globales/accesskey/index.html delete mode 100644 files/es/web/html/atributos_globales/autocapitalize/index.html delete mode 100644 files/es/web/html/atributos_globales/class/index.html delete mode 100644 files/es/web/html/atributos_globales/contenteditable/index.html delete mode 100644 files/es/web/html/atributos_globales/contextmenu/index.html delete mode 100644 files/es/web/html/atributos_globales/data-_star_/index.html delete mode 100644 files/es/web/html/atributos_globales/dir/index.html delete mode 100644 files/es/web/html/atributos_globales/draggable/index.html delete mode 100644 files/es/web/html/atributos_globales/dropzone/index.html delete mode 100644 files/es/web/html/atributos_globales/hidden/index.html delete mode 100644 files/es/web/html/atributos_globales/id/index.html delete mode 100644 files/es/web/html/atributos_globales/index.html delete mode 100644 files/es/web/html/atributos_globales/is/index.html delete mode 100644 files/es/web/html/atributos_globales/itemid/index.html delete mode 100644 files/es/web/html/atributos_globales/itemprop/index.html delete mode 100644 files/es/web/html/atributos_globales/itemref/index.html delete mode 100644 files/es/web/html/atributos_globales/itemscope/index.html delete mode 100644 files/es/web/html/atributos_globales/lang/index.html delete mode 100644 files/es/web/html/atributos_globales/slot/index.html delete mode 100644 files/es/web/html/atributos_globales/spellcheck/index.html delete mode 100644 files/es/web/html/atributos_globales/style/index.html delete mode 100644 files/es/web/html/atributos_globales/tabindex/index.html delete mode 100644 files/es/web/html/atributos_globales/title/index.html delete mode 100644 files/es/web/html/atributos_globales/translate/index.html delete mode 100644 files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html create mode 100644 files/es/web/html/attributes/accept/index.html create mode 100644 files/es/web/html/attributes/autocomplete/index.html create mode 100644 files/es/web/html/attributes/crossorigin/index.html create mode 100644 files/es/web/html/attributes/index.html create mode 100644 files/es/web/html/attributes/min/index.html create mode 100644 files/es/web/html/attributes/minlength/index.html create mode 100644 files/es/web/html/attributes/multiple/index.html delete mode 100644 files/es/web/html/canvas/a_basic_ray-caster/index.html delete mode 100644 files/es/web/html/canvas/drawing_graphics_with_canvas/index.html delete mode 100644 files/es/web/html/canvas/index.html delete mode 100644 "files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" create mode 100644 files/es/web/html/cors_enabled_image/index.html create mode 100644 files/es/web/html/element/a/index.html create mode 100644 files/es/web/html/element/abbr/index.html create mode 100644 files/es/web/html/element/acronym/index.html create mode 100644 files/es/web/html/element/address/index.html create mode 100644 files/es/web/html/element/applet/index.html create mode 100644 files/es/web/html/element/area/index.html create mode 100644 files/es/web/html/element/article/index.html create mode 100644 files/es/web/html/element/aside/index.html create mode 100644 files/es/web/html/element/audio/index.html create mode 100644 files/es/web/html/element/b/index.html create mode 100644 files/es/web/html/element/base/index.html create mode 100644 files/es/web/html/element/basefont/index.html create mode 100644 files/es/web/html/element/bdi/index.html create mode 100644 files/es/web/html/element/bdo/index.html create mode 100644 files/es/web/html/element/bgsound/index.html create mode 100644 files/es/web/html/element/big/index.html create mode 100644 files/es/web/html/element/blink/index.html create mode 100644 files/es/web/html/element/blockquote/index.html create mode 100644 files/es/web/html/element/body/index.html create mode 100644 files/es/web/html/element/br/index.html create mode 100644 files/es/web/html/element/button/index.html create mode 100644 files/es/web/html/element/canvas/index.html create mode 100644 files/es/web/html/element/caption/index.html create mode 100644 files/es/web/html/element/center/index.html create mode 100644 files/es/web/html/element/cite/index.html create mode 100644 files/es/web/html/element/code/index.html create mode 100644 files/es/web/html/element/col/index.html create mode 100644 files/es/web/html/element/colgroup/index.html create mode 100644 files/es/web/html/element/content/index.html create mode 100644 files/es/web/html/element/data/index.html create mode 100644 files/es/web/html/element/datalist/index.html create mode 100644 files/es/web/html/element/dd/index.html create mode 100644 files/es/web/html/element/del/index.html create mode 100644 files/es/web/html/element/details/index.html create mode 100644 files/es/web/html/element/dfn/index.html create mode 100644 files/es/web/html/element/dialog/index.html create mode 100644 files/es/web/html/element/dir/index.html create mode 100644 files/es/web/html/element/div/index.html create mode 100644 files/es/web/html/element/dl/index.html create mode 100644 files/es/web/html/element/dt/index.html create mode 100644 files/es/web/html/element/em/index.html create mode 100644 files/es/web/html/element/embed/index.html create mode 100644 files/es/web/html/element/fieldset/index.html create mode 100644 files/es/web/html/element/figcaption/index.html create mode 100644 files/es/web/html/element/figure/index.html create mode 100644 files/es/web/html/element/font/index.html create mode 100644 files/es/web/html/element/footer/index.html create mode 100644 files/es/web/html/element/form/index.html create mode 100644 files/es/web/html/element/frame/index.html create mode 100644 files/es/web/html/element/frameset/index.html create mode 100644 files/es/web/html/element/head/index.html create mode 100644 files/es/web/html/element/header/index.html create mode 100644 files/es/web/html/element/heading_elements/index.html create mode 100644 files/es/web/html/element/hgroup/index.html create mode 100644 files/es/web/html/element/hr/index.html create mode 100644 files/es/web/html/element/html/index.html create mode 100644 files/es/web/html/element/i/index.html create mode 100644 files/es/web/html/element/iframe/index.html create mode 100644 files/es/web/html/element/image/index.html create mode 100644 files/es/web/html/element/img/index.html create mode 100644 files/es/web/html/element/index.html create mode 100644 files/es/web/html/element/input/button/index.html create mode 100644 files/es/web/html/element/input/checkbox/index.html create mode 100644 files/es/web/html/element/input/color/index.html create mode 100644 files/es/web/html/element/input/date/index.html create mode 100644 files/es/web/html/element/input/datetime/index.html create mode 100644 files/es/web/html/element/input/email/index.html create mode 100644 files/es/web/html/element/input/hidden/index.html create mode 100644 files/es/web/html/element/input/index.html create mode 100644 files/es/web/html/element/input/number/index.html create mode 100644 files/es/web/html/element/input/password/index.html create mode 100644 files/es/web/html/element/input/range/index.html create mode 100644 files/es/web/html/element/input/text/index.html create mode 100644 files/es/web/html/element/ins/index.html create mode 100644 files/es/web/html/element/isindex/index.html create mode 100644 files/es/web/html/element/kbd/index.html create mode 100644 files/es/web/html/element/keygen/index.html create mode 100644 files/es/web/html/element/label/index.html create mode 100644 files/es/web/html/element/legend/index.html create mode 100644 files/es/web/html/element/li/index.html create mode 100644 files/es/web/html/element/link/index.html create mode 100644 files/es/web/html/element/main/index.html create mode 100644 files/es/web/html/element/map/index.html create mode 100644 files/es/web/html/element/mark/index.html create mode 100644 files/es/web/html/element/marquee/index.html create mode 100644 files/es/web/html/element/menu/index.html create mode 100644 files/es/web/html/element/meta/index.html create mode 100644 files/es/web/html/element/multicol/index.html create mode 100644 files/es/web/html/element/nav/index.html create mode 100644 files/es/web/html/element/nobr/index.html create mode 100644 files/es/web/html/element/noframes/index.html create mode 100644 files/es/web/html/element/noscript/index.html create mode 100644 files/es/web/html/element/object/index.html create mode 100644 files/es/web/html/element/ol/index.html create mode 100644 files/es/web/html/element/option/index.html create mode 100644 files/es/web/html/element/p/index.html create mode 100644 files/es/web/html/element/param/index.html create mode 100644 files/es/web/html/element/picture/index.html create mode 100644 files/es/web/html/element/pre/index.html create mode 100644 files/es/web/html/element/progress/index.html create mode 100644 files/es/web/html/element/q/index.html create mode 100644 files/es/web/html/element/s/index.html create mode 100644 files/es/web/html/element/samp/index.html create mode 100644 files/es/web/html/element/section/index.html create mode 100644 files/es/web/html/element/select/index.html create mode 100644 files/es/web/html/element/shadow/index.html create mode 100644 files/es/web/html/element/slot/index.html create mode 100644 files/es/web/html/element/small/index.html create mode 100644 files/es/web/html/element/source/index.html create mode 100644 files/es/web/html/element/span/index.html create mode 100644 files/es/web/html/element/strike/index.html create mode 100644 files/es/web/html/element/strong/index.html create mode 100644 files/es/web/html/element/style/index.html create mode 100644 files/es/web/html/element/sub/index.html create mode 100644 files/es/web/html/element/sup/index.html create mode 100644 files/es/web/html/element/table/index.html create mode 100644 files/es/web/html/element/td/index.html create mode 100644 files/es/web/html/element/template/index.html create mode 100644 files/es/web/html/element/textarea/index.html create mode 100644 files/es/web/html/element/th/index.html create mode 100644 files/es/web/html/element/time/index.html create mode 100644 files/es/web/html/element/title/index.html create mode 100644 files/es/web/html/element/tr/index.html create mode 100644 files/es/web/html/element/track/index.html create mode 100644 files/es/web/html/element/tt/index.html create mode 100644 files/es/web/html/element/u/index.html create mode 100644 files/es/web/html/element/ul/index.html create mode 100644 files/es/web/html/element/var/index.html create mode 100644 files/es/web/html/element/video/index.html create mode 100644 files/es/web/html/element/wbr/index.html create mode 100644 files/es/web/html/element/xmp/index.html delete mode 100644 files/es/web/html/elemento/a/index.html delete mode 100644 files/es/web/html/elemento/abbr/index.html delete mode 100644 files/es/web/html/elemento/acronym/index.html delete mode 100644 files/es/web/html/elemento/address/index.html delete mode 100644 files/es/web/html/elemento/applet/index.html delete mode 100644 files/es/web/html/elemento/area/index.html delete mode 100644 files/es/web/html/elemento/article/index.html delete mode 100644 files/es/web/html/elemento/aside/index.html delete mode 100644 files/es/web/html/elemento/audio/index.html delete mode 100644 files/es/web/html/elemento/b/index.html delete mode 100644 files/es/web/html/elemento/base/index.html delete mode 100644 files/es/web/html/elemento/basefont/index.html delete mode 100644 files/es/web/html/elemento/bdi/index.html delete mode 100644 files/es/web/html/elemento/bdo/index.html delete mode 100644 files/es/web/html/elemento/bgsound/index.html delete mode 100644 files/es/web/html/elemento/big/index.html delete mode 100644 files/es/web/html/elemento/blink/index.html delete mode 100644 files/es/web/html/elemento/blockquote/index.html delete mode 100644 files/es/web/html/elemento/body/index.html delete mode 100644 files/es/web/html/elemento/br/index.html delete mode 100644 files/es/web/html/elemento/button/index.html delete mode 100644 files/es/web/html/elemento/canvas/index.html delete mode 100644 files/es/web/html/elemento/caption/index.html delete mode 100644 files/es/web/html/elemento/center/index.html delete mode 100644 files/es/web/html/elemento/cite/index.html delete mode 100644 files/es/web/html/elemento/code/index.html delete mode 100644 files/es/web/html/elemento/col/index.html delete mode 100644 files/es/web/html/elemento/colgroup/index.html delete mode 100644 files/es/web/html/elemento/command/index.html delete mode 100644 files/es/web/html/elemento/content/index.html delete mode 100644 files/es/web/html/elemento/data/index.html delete mode 100644 files/es/web/html/elemento/datalist/index.html delete mode 100644 files/es/web/html/elemento/dd/index.html delete mode 100644 files/es/web/html/elemento/del/index.html delete mode 100644 files/es/web/html/elemento/details/index.html delete mode 100644 files/es/web/html/elemento/dfn/index.html delete mode 100644 files/es/web/html/elemento/dialog/index.html delete mode 100644 files/es/web/html/elemento/dir/index.html delete mode 100644 files/es/web/html/elemento/div/index.html delete mode 100644 files/es/web/html/elemento/dl/index.html delete mode 100644 files/es/web/html/elemento/dt/index.html delete mode 100644 files/es/web/html/elemento/element/index.html delete mode 100644 "files/es/web/html/elemento/elementos_t\303\255tulos/index.html" delete mode 100644 files/es/web/html/elemento/em/index.html delete mode 100644 files/es/web/html/elemento/embed/index.html delete mode 100644 files/es/web/html/elemento/etiqueta_personalizada_html5/index.html delete mode 100644 files/es/web/html/elemento/fieldset/index.html delete mode 100644 files/es/web/html/elemento/figcaption/index.html delete mode 100644 files/es/web/html/elemento/figure/index.html delete mode 100644 files/es/web/html/elemento/font/index.html delete mode 100644 files/es/web/html/elemento/footer/index.html delete mode 100644 files/es/web/html/elemento/form/index.html delete mode 100644 files/es/web/html/elemento/frame/index.html delete mode 100644 files/es/web/html/elemento/frameset/index.html delete mode 100644 files/es/web/html/elemento/head/index.html delete mode 100644 files/es/web/html/elemento/header/index.html delete mode 100644 files/es/web/html/elemento/hgroup/index.html delete mode 100644 files/es/web/html/elemento/hr/index.html delete mode 100644 files/es/web/html/elemento/html/index.html delete mode 100644 files/es/web/html/elemento/i/index.html delete mode 100644 files/es/web/html/elemento/iframe/index.html delete mode 100644 files/es/web/html/elemento/image/index.html delete mode 100644 files/es/web/html/elemento/img/index.html delete mode 100644 files/es/web/html/elemento/index.html delete mode 100644 "files/es/web/html/elemento/input/bot\303\263n/index.html" delete mode 100644 files/es/web/html/elemento/input/checkbox/index.html delete mode 100644 files/es/web/html/elemento/input/color/index.html delete mode 100644 files/es/web/html/elemento/input/date/index.html delete mode 100644 files/es/web/html/elemento/input/datetime/index.html delete mode 100644 files/es/web/html/elemento/input/email/index.html delete mode 100644 files/es/web/html/elemento/input/hidden/index.html delete mode 100644 files/es/web/html/elemento/input/index.html delete mode 100644 files/es/web/html/elemento/input/number/index.html delete mode 100644 files/es/web/html/elemento/input/password/index.html delete mode 100644 files/es/web/html/elemento/input/range/index.html delete mode 100644 files/es/web/html/elemento/input/text/index.html delete mode 100644 files/es/web/html/elemento/ins/index.html delete mode 100644 files/es/web/html/elemento/isindex/index.html delete mode 100644 files/es/web/html/elemento/kbd/index.html delete mode 100644 files/es/web/html/elemento/keygen/index.html delete mode 100644 files/es/web/html/elemento/label/index.html delete mode 100644 files/es/web/html/elemento/legend/index.html delete mode 100644 files/es/web/html/elemento/li/index.html delete mode 100644 files/es/web/html/elemento/link/index.html delete mode 100644 files/es/web/html/elemento/main/index.html delete mode 100644 files/es/web/html/elemento/map/index.html delete mode 100644 files/es/web/html/elemento/mark/index.html delete mode 100644 files/es/web/html/elemento/marquee/index.html delete mode 100644 files/es/web/html/elemento/menu/index.html delete mode 100644 files/es/web/html/elemento/meta/index.html delete mode 100644 files/es/web/html/elemento/multicol/index.html delete mode 100644 files/es/web/html/elemento/nav/index.html delete mode 100644 files/es/web/html/elemento/nobr/index.html delete mode 100644 files/es/web/html/elemento/noframes/index.html delete mode 100644 files/es/web/html/elemento/noscript/index.html delete mode 100644 files/es/web/html/elemento/object/index.html delete mode 100644 files/es/web/html/elemento/ol/index.html delete mode 100644 files/es/web/html/elemento/option/index.html delete mode 100644 files/es/web/html/elemento/p/index.html delete mode 100644 files/es/web/html/elemento/param/index.html delete mode 100644 files/es/web/html/elemento/picture/index.html delete mode 100644 files/es/web/html/elemento/pre/index.html delete mode 100644 files/es/web/html/elemento/progress/index.html delete mode 100644 files/es/web/html/elemento/q/index.html delete mode 100644 files/es/web/html/elemento/s/index.html delete mode 100644 files/es/web/html/elemento/samp/index.html delete mode 100644 files/es/web/html/elemento/script/index.html delete mode 100644 files/es/web/html/elemento/section/index.html delete mode 100644 files/es/web/html/elemento/select/index.html delete mode 100644 files/es/web/html/elemento/shadow/index.html delete mode 100644 files/es/web/html/elemento/slot/index.html delete mode 100644 files/es/web/html/elemento/small/index.html delete mode 100644 files/es/web/html/elemento/source/index.html delete mode 100644 files/es/web/html/elemento/span/index.html delete mode 100644 files/es/web/html/elemento/strike/index.html delete mode 100644 files/es/web/html/elemento/strong/index.html delete mode 100644 files/es/web/html/elemento/style/index.html delete mode 100644 files/es/web/html/elemento/sub/index.html delete mode 100644 files/es/web/html/elemento/sup/index.html delete mode 100644 files/es/web/html/elemento/table/index.html delete mode 100644 files/es/web/html/elemento/td/index.html delete mode 100644 files/es/web/html/elemento/template/index.html delete mode 100644 files/es/web/html/elemento/textarea/index.html delete mode 100644 files/es/web/html/elemento/th/index.html delete mode 100644 files/es/web/html/elemento/time/index.html delete mode 100644 files/es/web/html/elemento/tipos_de_elementos/index.html delete mode 100644 files/es/web/html/elemento/title/index.html delete mode 100644 files/es/web/html/elemento/tr/index.html delete mode 100644 files/es/web/html/elemento/track/index.html delete mode 100644 files/es/web/html/elemento/tt/index.html delete mode 100644 files/es/web/html/elemento/u/index.html delete mode 100644 files/es/web/html/elemento/ul/index.html delete mode 100644 files/es/web/html/elemento/var/index.html delete mode 100644 files/es/web/html/elemento/video/index.html delete mode 100644 files/es/web/html/elemento/wbr/index.html delete mode 100644 files/es/web/html/elemento/xmp/index.html delete mode 100644 "files/es/web/html/elementos_en_l\303\255nea/index.html" delete mode 100644 files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html create mode 100644 files/es/web/html/global_attributes/accesskey/index.html create mode 100644 files/es/web/html/global_attributes/autocapitalize/index.html create mode 100644 files/es/web/html/global_attributes/class/index.html create mode 100644 files/es/web/html/global_attributes/contenteditable/index.html create mode 100644 files/es/web/html/global_attributes/contextmenu/index.html create mode 100644 files/es/web/html/global_attributes/data-_star_/index.html create mode 100644 files/es/web/html/global_attributes/dir/index.html create mode 100644 files/es/web/html/global_attributes/draggable/index.html create mode 100644 files/es/web/html/global_attributes/hidden/index.html create mode 100644 files/es/web/html/global_attributes/id/index.html create mode 100644 files/es/web/html/global_attributes/index.html create mode 100644 files/es/web/html/global_attributes/is/index.html create mode 100644 files/es/web/html/global_attributes/itemid/index.html create mode 100644 files/es/web/html/global_attributes/itemprop/index.html create mode 100644 files/es/web/html/global_attributes/itemref/index.html create mode 100644 files/es/web/html/global_attributes/itemscope/index.html create mode 100644 files/es/web/html/global_attributes/lang/index.html create mode 100644 files/es/web/html/global_attributes/slot/index.html create mode 100644 files/es/web/html/global_attributes/spellcheck/index.html create mode 100644 files/es/web/html/global_attributes/style/index.html create mode 100644 files/es/web/html/global_attributes/tabindex/index.html create mode 100644 files/es/web/html/global_attributes/title/index.html create mode 100644 files/es/web/html/global_attributes/translate/index.html create mode 100644 files/es/web/html/global_attributes/x-ms-acceleratorkey/index.html delete mode 100644 files/es/web/html/imagen_con_cors_habilitado/index.html create mode 100644 files/es/web/html/index/index.html create mode 100644 files/es/web/html/inline_elements/index.html delete mode 100644 files/es/web/html/la_importancia_de_comentar_correctamente/index.html create mode 100644 files/es/web/html/link_types/index.html create mode 100644 files/es/web/html/microdata/index.html delete mode 100644 files/es/web/html/microdatos/index.html delete mode 100644 files/es/web/html/microformatos/index.html create mode 100644 files/es/web/html/microformats/index.html delete mode 100644 files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html delete mode 100644 files/es/web/html/recursos_offline_en_firefox/index.html create mode 100644 files/es/web/html/reference/index.html delete mode 100644 files/es/web/html/referencia/index.html delete mode 100644 files/es/web/html/tipos_de_enlaces/index.html delete mode 100644 files/es/web/html/transision_adaptativa_dash/index.html delete mode 100644 files/es/web/html/usando_audio_y_video_con_html5/index.html create mode 100644 files/es/web/html/using_the_application_cache/index.html delete mode 100644 "files/es/web/html/\303\255ndice/index.html" delete mode 100644 files/es/web/http/access_control_cors/index.html create mode 100644 files/es/web/http/basics_of_http/data_uris/index.html delete mode 100644 files/es/web/http/basics_of_http/datos_uris/index.html delete mode 100644 "files/es/web/http/basics_of_http/identificaci\303\263n_recursos_en_la_web/index.html" create mode 100644 files/es/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/es/web/http/conditional_requests/index.html create mode 100644 files/es/web/http/connection_management_in_http_1.x/index.html create mode 100644 files/es/web/http/cors/index.html delete mode 100644 files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html create mode 100644 files/es/web/http/headers/digest/index.html create mode 100644 files/es/web/http/headers/user-agent/firefox/index.html delete mode 100644 files/es/web/http/mecanismo_actualizacion_protocolo/index.html delete mode 100644 files/es/web/http/peticiones_condicionales/index.html create mode 100644 files/es/web/http/protocol_upgrade_mechanism/index.html delete mode 100644 files/es/web/http/recursos_y_especificaciones/index.html create mode 100644 files/es/web/http/resources_and_specifications/index.html delete mode 100644 "files/es/web/http/sesi\303\263n/index.html" create mode 100644 files/es/web/http/session/index.html create mode 100644 files/es/web/http/status/413/index.html delete mode 100644 files/es/web/http/status/8080/index.html create mode 100644 files/es/web/javascript/a_re-introduction_to_javascript/index.html create mode 100644 files/es/web/javascript/about_javascript/index.html delete mode 100644 files/es/web/javascript/acerca_de_javascript/index.html delete mode 100644 "files/es/web/javascript/descripci\303\263n_de_las_tecnolog\303\255as_javascript/index.html" create mode 100644 files/es/web/javascript/enumerability_and_ownership_of_properties/index.html delete mode 100644 files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html delete mode 100644 files/es/web/javascript/gestion_de_memoria/index.html delete mode 100644 "files/es/web/javascript/guide/bucles_e_iteraci\303\263n/index.html" delete mode 100644 files/es/web/javascript/guide/colecciones_indexadas/index.html delete mode 100644 files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html create mode 100644 files/es/web/javascript/guide/control_flow_and_error_handling/index.html delete mode 100644 files/es/web/javascript/guide/funciones/index.html create mode 100644 files/es/web/javascript/guide/functions/index.html create mode 100644 files/es/web/javascript/guide/indexed_collections/index.html delete mode 100644 "files/es/web/javascript/guide/introducci\303\263n/index.html" create mode 100644 files/es/web/javascript/guide/introduction/index.html create mode 100644 files/es/web/javascript/guide/loops_and_iteration/index.html create mode 100644 files/es/web/javascript/guide/modules/index.html delete mode 100644 "files/es/web/javascript/guide/m\303\263dulos/index.html" delete mode 100644 files/es/web/javascript/guide/regular_expressions/aserciones/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/assertions/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/character_classes/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/cheatsheet/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/groups_and_ranges/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html delete mode 100644 files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/quantifiers/index.html create mode 100644 files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html delete mode 100644 files/es/web/javascript/guide/trabajando_con_objectos/index.html delete mode 100644 files/es/web/javascript/guide/usar_promesas/index.html create mode 100644 files/es/web/javascript/guide/using_promises/index.html create mode 100644 files/es/web/javascript/guide/working_with_objects/index.html delete mode 100644 files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html create mode 100644 files/es/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 "files/es/web/javascript/introducci\303\263n_a_javascript_orientado_a_objetos/index.html" delete mode 100644 files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html create mode 100644 files/es/web/javascript/javascript_technologies_overview/index.html create mode 100644 files/es/web/javascript/memory_management/index.html create mode 100644 files/es/web/javascript/reference/about/index.html create mode 100644 files/es/web/javascript/reference/classes/constructor/index.html create mode 100644 files/es/web/javascript/reference/classes/extends/index.html create mode 100644 files/es/web/javascript/reference/classes/index.html create mode 100644 files/es/web/javascript/reference/classes/private_class_fields/index.html create mode 100644 files/es/web/javascript/reference/classes/public_class_fields/index.html create mode 100644 files/es/web/javascript/reference/classes/static/index.html create mode 100644 files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html create mode 100644 files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html create mode 100644 files/es/web/javascript/reference/errors/bad_regexp_flag/index.html delete mode 100644 files/es/web/javascript/reference/errors/caracter_ilegal/index.html delete mode 100644 files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html create mode 100644 files/es/web/javascript/reference/errors/illegal_character/index.html delete mode 100644 files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html create mode 100644 files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html create mode 100644 files/es/web/javascript/reference/errors/strict_non_simple_params/index.html delete mode 100644 "files/es/web/javascript/reference/errors/strict_y_par\303\241metros_complejos/index.html" create mode 100644 files/es/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/es/web/javascript/reference/functions/arguments/index.html create mode 100644 files/es/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/es/web/javascript/reference/functions/arrow_functions/index.html create mode 100644 files/es/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/es/web/javascript/reference/functions/get/index.html create mode 100644 files/es/web/javascript/reference/functions/index.html create mode 100644 files/es/web/javascript/reference/functions/method_definitions/index.html create mode 100644 files/es/web/javascript/reference/functions/rest_parameters/index.html create mode 100644 files/es/web/javascript/reference/functions/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/aggregateerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/es/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html create mode 100644 files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html create mode 100644 files/es/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/es/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/es/web/javascript/reference/global_objects/boolean/boolean/index.html create mode 100644 files/es/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/es/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getdate/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/es/web/javascript/reference/global_objects/decodeuri/index.html create mode 100644 files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/es/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/error/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/es/web/javascript/reference/global_objects/eval/index.html create mode 100644 files/es/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/function/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/es/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/es/web/javascript/reference/global_objects/index.html create mode 100644 files/es/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/es/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/es/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/json/index.html create mode 100644 files/es/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/es/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/es/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/abs/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/atanh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/random/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/es/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/es/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/null/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/defineproperties/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/fromentries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/issealed/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/preventextensions/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/seal/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/catch/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/resolve/index.html create mode 100644 files/es/web/javascript/reference/global_objects/promise/then/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/proxy/index.html create mode 100644 files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html delete mode 100644 files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/es/web/javascript/reference/global_objects/referenceerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/compile/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/exec/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/regexp/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/es/web/javascript/reference/global_objects/regexp/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/@@iterator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/clear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/entries/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/size/index.html create mode 100644 files/es/web/javascript/reference/global_objects/set/values/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/anchor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/big/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/blink/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/bold/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/charcodeat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/codepointat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fixed/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fontcolor/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fontsize/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/italics/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/link/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/localecompare/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/matchall/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/normalize/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/padstart/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/search/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/small/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/strike/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/sub/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/sup/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tosource/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/tostring/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/trimend/index.html create mode 100644 files/es/web/javascript/reference/global_objects/string/valueof/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/for/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/index.html create mode 100644 files/es/web/javascript/reference/global_objects/symbol/iterator/index.html create mode 100644 files/es/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html create mode 100644 files/es/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/es/web/javascript/reference/global_objects/uint8array/index.html create mode 100644 files/es/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/es/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/es/web/javascript/reference/global_objects/urierror/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/clear/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/delete/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/get/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/has/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakmap/set/index.html create mode 100644 files/es/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/es/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/es/web/javascript/reference/index.html create mode 100644 files/es/web/javascript/reference/iteration_protocols/index.html create mode 100644 files/es/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/es/web/javascript/reference/operators/addition/index.html create mode 100644 files/es/web/javascript/reference/operators/assignment/index.html create mode 100644 files/es/web/javascript/reference/operators/async_function/index.html create mode 100644 files/es/web/javascript/reference/operators/await/index.html create mode 100644 files/es/web/javascript/reference/operators/class/index.html create mode 100644 files/es/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/es/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/es/web/javascript/reference/operators/decrement/index.html create mode 100644 files/es/web/javascript/reference/operators/delete/index.html create mode 100644 files/es/web/javascript/reference/operators/destructuring_assignment/index.html create mode 100644 files/es/web/javascript/reference/operators/division/index.html create mode 100644 files/es/web/javascript/reference/operators/equality/index.html create mode 100644 files/es/web/javascript/reference/operators/function/index.html create mode 100644 files/es/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/es/web/javascript/reference/operators/grouping/index.html create mode 100644 files/es/web/javascript/reference/operators/in/index.html create mode 100644 files/es/web/javascript/reference/operators/index.html create mode 100644 files/es/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/es/web/javascript/reference/operators/new.target/index.html create mode 100644 files/es/web/javascript/reference/operators/new/index.html create mode 100644 files/es/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/es/web/javascript/reference/operators/optional_chaining/index.html create mode 100644 files/es/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/es/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/es/web/javascript/reference/operators/remainder/index.html create mode 100644 files/es/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/es/web/javascript/reference/operators/strict_equality/index.html create mode 100644 files/es/web/javascript/reference/operators/subtraction/index.html create mode 100644 files/es/web/javascript/reference/operators/super/index.html create mode 100644 files/es/web/javascript/reference/operators/this/index.html create mode 100644 files/es/web/javascript/reference/operators/typeof/index.html create mode 100644 files/es/web/javascript/reference/operators/void/index.html create mode 100644 files/es/web/javascript/reference/operators/yield/index.html create mode 100644 files/es/web/javascript/reference/operators/yield_star_/index.html create mode 100644 files/es/web/javascript/reference/statements/async_function/index.html create mode 100644 files/es/web/javascript/reference/statements/block/index.html create mode 100644 files/es/web/javascript/reference/statements/break/index.html create mode 100644 files/es/web/javascript/reference/statements/class/index.html create mode 100644 files/es/web/javascript/reference/statements/const/index.html create mode 100644 files/es/web/javascript/reference/statements/continue/index.html create mode 100644 files/es/web/javascript/reference/statements/debugger/index.html create mode 100644 files/es/web/javascript/reference/statements/do...while/index.html create mode 100644 files/es/web/javascript/reference/statements/empty/index.html create mode 100644 files/es/web/javascript/reference/statements/export/index.html create mode 100644 files/es/web/javascript/reference/statements/for-await...of/index.html create mode 100644 files/es/web/javascript/reference/statements/for...in/index.html create mode 100644 files/es/web/javascript/reference/statements/for...of/index.html create mode 100644 files/es/web/javascript/reference/statements/for/index.html create mode 100644 files/es/web/javascript/reference/statements/function/index.html create mode 100644 files/es/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/es/web/javascript/reference/statements/if...else/index.html create mode 100644 files/es/web/javascript/reference/statements/import.meta/index.html create mode 100644 files/es/web/javascript/reference/statements/import/index.html create mode 100644 files/es/web/javascript/reference/statements/index.html create mode 100644 files/es/web/javascript/reference/statements/label/index.html create mode 100644 files/es/web/javascript/reference/statements/let/index.html create mode 100644 files/es/web/javascript/reference/statements/return/index.html create mode 100644 files/es/web/javascript/reference/statements/switch/index.html create mode 100644 files/es/web/javascript/reference/statements/throw/index.html create mode 100644 files/es/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/es/web/javascript/reference/statements/var/index.html create mode 100644 files/es/web/javascript/reference/statements/while/index.html create mode 100644 files/es/web/javascript/reference/statements/with/index.html create mode 100644 files/es/web/javascript/reference/strict_mode/index.html create mode 100644 files/es/web/javascript/reference/template_literals/index.html delete mode 100644 files/es/web/javascript/referencia/acerca_de/index.html delete mode 100644 "files/es/web/javascript/referencia/caracter\303\255sticas_desaprobadas/index.html" delete mode 100644 "files/es/web/javascript/referencia/caracter\303\255sticas_desaprobadas/the_legacy_iterator_protocol/index.html" delete mode 100644 files/es/web/javascript/referencia/classes/class_fields/index.html delete mode 100644 files/es/web/javascript/referencia/classes/constructor/index.html delete mode 100644 files/es/web/javascript/referencia/classes/extends/index.html delete mode 100644 files/es/web/javascript/referencia/classes/index.html delete mode 100644 files/es/web/javascript/referencia/classes/private_class_fields/index.html delete mode 100644 files/es/web/javascript/referencia/classes/static/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arguments/callee/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arguments/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arguments/length/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/arrow_functions/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/get/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/method_definitions/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/parametros_rest/index.html delete mode 100644 files/es/web/javascript/referencia/funciones/set/index.html delete mode 100644 files/es/web/javascript/referencia/gramatica_lexica/index.html delete mode 100644 files/es/web/javascript/referencia/index.html delete mode 100644 files/es/web/javascript/referencia/iteration_protocols/index.html delete mode 100644 files/es/web/javascript/referencia/modo_estricto/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/concat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/every/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/fill/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/filter/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/find/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/flat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/from/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/includes/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/join/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/keys/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/length/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/map/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/of/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/pop/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/push/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/shift/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/slice/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/some/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/sort/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/splice/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/array/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getday/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/now/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/parse/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/date/utc/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/filename/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/message/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/name/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/escape/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/eval/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/evalerror/index.html delete mode 100644 "files/es/web/javascript/referencia/objetos_globales/funcionesas\303\255ncronas/index.html" delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/apply/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/bind/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/call/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/caller/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html delete mode 100644 "files/es/web/javascript/referencia/objetos_globales/function/funci\303\263n/index.html" delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/length/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/name/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/next/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/return/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/infinity/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/internalerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/isfinite/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/isnan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/json/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/json/parse/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/clear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/delete/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/get/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/has/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/keys/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/set/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/size/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/map/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/abs/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/acos/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/asin/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/cos/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/e/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/exp/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/floor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/fround/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log10/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/max/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/min/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/pi/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/pow/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/random/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/round/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/seno/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sign/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/tan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/nan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/null/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/nan/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/assign/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/create/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/is/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/keys/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/proto/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/seal/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/object/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/parseint/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/all/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/race/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/promise/then/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/proxy/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/add/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/clear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/delete/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/entries/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/has/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/size/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/set/values/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/big/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/blink/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/bold/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/charat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/concat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/includes/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/italics/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/length/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/link/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/match/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/raw/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/replace/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/search/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/slice/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/small/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/split/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/strike/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/sub/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/substr/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/substring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/sup/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/trim/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/typedarray/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/uint8array/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/undefined/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/unescape/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/urierror/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/weakset/index.html delete mode 100644 files/es/web/javascript/referencia/objetos_globales/webassembly/index.html delete mode 100644 "files/es/web/javascript/referencia/operadores/adici\303\263n/index.html" delete mode 100644 "files/es/web/javascript/referencia/operadores/aritm\303\251ticos/index.html" delete mode 100644 files/es/web/javascript/referencia/operadores/asignacion/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/assignment_operators/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/async_function/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/await/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/bitwise_operators/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/class/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/comparacion/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/comparison_operators/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/conditional_operator/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/decremento/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/delete/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/division/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/function/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/function_star_/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/grouping/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/in/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/instanceof/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/miembros/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/new.target/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/new/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/operador_coma/index.html delete mode 100644 "files/es/web/javascript/referencia/operadores/operadores_l\303\263gicos/index.html" delete mode 100644 files/es/web/javascript/referencia/operadores/operator_precedence/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/pipeline_operator/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/resto/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/spread_operator/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/strict_equality/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/super/index.html delete mode 100644 "files/es/web/javascript/referencia/operadores/sustracci\303\263n/index.html" delete mode 100644 files/es/web/javascript/referencia/operadores/this/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/typeof/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/void/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/yield/index.html delete mode 100644 files/es/web/javascript/referencia/operadores/yield_star_/index.html delete mode 100644 files/es/web/javascript/referencia/palabras_reservadas/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/block/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/break/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/class/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/const/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/continue/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/debugger/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/default/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/do...while/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/empty/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/export/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for-await...of/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for...in/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for...of/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/for/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/function/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/function_star_/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/if...else/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/import.meta/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/import/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/label/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/let/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/return/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/switch/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/throw/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/try...catch/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/var/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/while/index.html delete mode 100644 files/es/web/javascript/referencia/sentencias/with/index.html delete mode 100644 files/es/web/javascript/referencia/template_strings/index.html create mode 100644 files/es/web/javascript/typed_arrays/index.html delete mode 100644 "files/es/web/javascript/una_re-introducci\303\263n_a_javascript/index.html" delete mode 100644 files/es/web/javascript/vectores_tipados/index.html create mode 100644 files/es/web/mathml/element/index.html create mode 100644 files/es/web/mathml/element/math/index.html delete mode 100644 files/es/web/mathml/elemento/index.html delete mode 100644 files/es/web/mathml/elemento/math/index.html create mode 100644 files/es/web/media/dash_adaptive_streaming_for_html_5_video/index.html create mode 100644 files/es/web/opensearch/index.html delete mode 100644 files/es/web/performance/mejorando_rendimienot_inicial/index.html create mode 100644 files/es/web/performance/optimizing_startup_performance/index.html delete mode 100644 files/es/web/progressive_web_apps/developer_guide/instalar/index.html create mode 100644 files/es/web/progressive_web_apps/developer_guide/installing/index.html create mode 100644 files/es/web/progressive_web_apps/responsive/media_types/index.html delete mode 100644 files/es/web/progressive_web_apps/ventajas/index.html delete mode 100644 files/es/web/security/csp/csp_policy_directives/index.html delete mode 100644 files/es/web/security/csp/index.html delete mode 100644 files/es/web/security/csp/introducing_content_security_policy/index.html create mode 100644 files/es/web/security/same-origin_policy/index.html delete mode 100644 files/es/web/security/same-origin_politica/index.html delete mode 100644 files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html create mode 100644 files/es/web/security/securing_your_site/turning_off_form_autocompletion/index.html create mode 100644 files/es/web/svg/applying_svg_effects_to_html_content/index.html delete mode 100644 files/es/web/svg/element/glifo/index.html create mode 100644 files/es/web/svg/element/glyph/index.html create mode 100644 files/es/web/svg/element/script/index.html create mode 100644 files/es/web/svg/svg_1.1_support_in_firefox/index.html delete mode 100644 files/es/web/svg/svg_en_firefox_1.5/index.html delete mode 100644 "files/es/web/svg/tutorial/introducci\303\263n/index.html" create mode 100644 files/es/web/svg/tutorial/introduction/index.html delete mode 100644 files/es/web/tutoriales/index.html create mode 100644 files/es/web/tutorials/index.html delete mode 100644 files/es/web/web_components/custom_elements/index.html delete mode 100644 "files/es/web/xml/introducci\303\263n_a_xml/index.html" create mode 100644 files/es/web/xml/xml_introduction/index.html create mode 100644 files/es/web/xpath/axes/ancestor-or-self/index.html create mode 100644 files/es/web/xpath/axes/ancestor/index.html create mode 100644 files/es/web/xpath/axes/attribute/index.html create mode 100644 files/es/web/xpath/axes/child/index.html create mode 100644 files/es/web/xpath/axes/descendant-or-self/index.html create mode 100644 files/es/web/xpath/axes/descendant/index.html create mode 100644 files/es/web/xpath/axes/following-sibling/index.html create mode 100644 files/es/web/xpath/axes/following/index.html create mode 100644 files/es/web/xpath/axes/index.html create mode 100644 files/es/web/xpath/axes/namespace/index.html create mode 100644 files/es/web/xpath/axes/parent/index.html create mode 100644 files/es/web/xpath/axes/preceding-sibling/index.html create mode 100644 files/es/web/xpath/axes/preceding/index.html delete mode 100644 files/es/web/xpath/ejes/ancestor-or-self/index.html delete mode 100644 files/es/web/xpath/ejes/ancestor/index.html delete mode 100644 files/es/web/xpath/ejes/attribute/index.html delete mode 100644 files/es/web/xpath/ejes/child/index.html delete mode 100644 files/es/web/xpath/ejes/descendant-or-self/index.html delete mode 100644 files/es/web/xpath/ejes/descendant/index.html delete mode 100644 files/es/web/xpath/ejes/following-sibling/index.html delete mode 100644 files/es/web/xpath/ejes/following/index.html delete mode 100644 files/es/web/xpath/ejes/index.html delete mode 100644 files/es/web/xpath/ejes/namespace/index.html delete mode 100644 files/es/web/xpath/ejes/parent/index.html delete mode 100644 files/es/web/xpath/ejes/preceding-sibling/index.html delete mode 100644 files/es/web/xpath/ejes/preceding/index.html delete mode 100644 files/es/web/xpath/funciones/contains/index.html delete mode 100644 files/es/web/xpath/funciones/index.html delete mode 100644 files/es/web/xpath/funciones/substring/index.html delete mode 100644 files/es/web/xpath/funciones/true/index.html create mode 100644 files/es/web/xpath/functions/contains/index.html create mode 100644 files/es/web/xpath/functions/index.html create mode 100644 files/es/web/xpath/functions/substring/index.html create mode 100644 files/es/web/xpath/functions/true/index.html create mode 100644 files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/es/web/xslt/apply-imports/index.html delete mode 100644 files/es/web/xslt/apply-templates/index.html delete mode 100644 files/es/web/xslt/attribute-set/index.html delete mode 100644 files/es/web/xslt/attribute/index.html delete mode 100644 files/es/web/xslt/call-template/index.html delete mode 100644 files/es/web/xslt/choose/index.html delete mode 100644 files/es/web/xslt/comment/index.html delete mode 100644 files/es/web/xslt/copy-of/index.html delete mode 100644 files/es/web/xslt/copy/index.html delete mode 100644 files/es/web/xslt/decimal-format/index.html create mode 100644 files/es/web/xslt/element/apply-imports/index.html create mode 100644 files/es/web/xslt/element/apply-templates/index.html create mode 100644 files/es/web/xslt/element/attribute-set/index.html create mode 100644 files/es/web/xslt/element/attribute/index.html create mode 100644 files/es/web/xslt/element/call-template/index.html create mode 100644 files/es/web/xslt/element/choose/index.html create mode 100644 files/es/web/xslt/element/comment/index.html create mode 100644 files/es/web/xslt/element/copy-of/index.html create mode 100644 files/es/web/xslt/element/copy/index.html create mode 100644 files/es/web/xslt/element/decimal-format/index.html create mode 100644 files/es/web/xslt/element/fallback/index.html create mode 100644 files/es/web/xslt/element/for-each/index.html create mode 100644 files/es/web/xslt/element/if/index.html create mode 100644 files/es/web/xslt/element/import/index.html create mode 100644 files/es/web/xslt/element/include/index.html create mode 100644 files/es/web/xslt/element/key/index.html create mode 100644 files/es/web/xslt/element/message/index.html create mode 100644 files/es/web/xslt/element/namespace-alias/index.html create mode 100644 files/es/web/xslt/element/number/index.html create mode 100644 files/es/web/xslt/element/otherwise/index.html create mode 100644 files/es/web/xslt/element/when/index.html create mode 100644 files/es/web/xslt/element/with-param/index.html delete mode 100644 files/es/web/xslt/fallback/index.html delete mode 100644 files/es/web/xslt/for-each/index.html delete mode 100644 files/es/web/xslt/if/index.html delete mode 100644 files/es/web/xslt/import/index.html delete mode 100644 files/es/web/xslt/include/index.html delete mode 100644 files/es/web/xslt/key/index.html delete mode 100644 files/es/web/xslt/message/index.html delete mode 100644 files/es/web/xslt/namespace-alias/index.html delete mode 100644 files/es/web/xslt/number/index.html delete mode 100644 files/es/web/xslt/otherwise/index.html delete mode 100644 files/es/web/xslt/transformando_xml_con_xslt/index.html create mode 100644 files/es/web/xslt/transforming_xml_with_xslt/index.html delete mode 100644 files/es/web/xslt/when/index.html delete mode 100644 files/es/web/xslt/with-param/index.html (limited to 'files/es/web') diff --git a/files/es/web/accesibilidad/comunidad/index.html b/files/es/web/accesibilidad/comunidad/index.html deleted file mode 100644 index 34acce8e6e..0000000000 --- a/files/es/web/accesibilidad/comunidad/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Comunidad -slug: Web/Accesibilidad/Comunidad -tags: - - Accesibilidad - - Todas_las_Categorías -translation_of: Web/Accessibility/Community ---- -

 

-

Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la - - accesibilidad - que pueda ser de interés. Por favor, pon aquí un enlace.

-

Mozilla

- -

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

-

Listas de correo

- -

Foros

- -

 

-

Bitácoras

- -

Wikis

- -

 

-

Otros Sitios

- -

categorías

diff --git a/files/es/web/accesibilidad/index.html b/files/es/web/accesibilidad/index.html deleted file mode 100644 index ea30623a6d..0000000000 --- a/files/es/web/accesibilidad/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Accesibilidad -slug: Web/Accesibilidad -tags: - - Accesibilidad - - Todas_las_Categorías -translation_of: Web/Accessibility ---- -
Guía Breve de Accesibilidad Web
-Las cuatro cosas básicas y un montón de buenos enlaces.
- -

La accesibilidad web (a menudo abreviada como A11y) se refiere a la posibilidad de acceso a los diferentes sitios web y a todo su contenido por todas las personas, independientemente de sus limitaciones fìsicas (discapacidad) o las derivadas del contexto de uso (tecnológicas o ambientales).{{ Ref(1) }}

- -

Para muchas personas, la tecnología facilita las cosas. Para las personas con algun tipo de discapacidad, la tecnología hace las cosas posibles. Accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo acceda a la web.

- -

" La Web está diseñada fundamentalmente para que funcione para todas las personas , independientemente de su hardware, software, idioma, cultura, ubicación, capacidad física o mental.

- -

El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el W3C, en especial su grupo de trabajo WAI.

- - - - - - - - -
-

Documentación

- -
-
Introducción a la Accesibilidad Web (externo)
-
WAI: estrategias, pautas, recursos para hacer la Web accesible a personas con discapacidad.
-
- -
-
Pautas de Accesibilidad al Contenido en la Web 1.0 (externo)
-
"Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad."
-
- -
-
Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0
-
Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0"
-
- -
-
FAQ sobre las "Pautas de Accesibilidad al Contenido en la Web 1.0"
-
Esta página de preguntas frecuentes proporciona información sobre la recomendación W3C WACG 1.0. Es una traducción de Fact Sheet for "Web Content Accessibility Guidelines 1.0"
-
- -
-
-
When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.
-
- -

Ver más...

- 		-

Comunidad

- -
    -
  • En la comunidad Mozilla... en inglés
    • -
- -

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

- -

Ver más...

- -

Herramientas

- - - -

Ver más...

- -

Temas relacionados

- -
-
· Desarrollo Web · Desarrollando Mozilla ·
-
-
- -
-

{{ Note(1) }} Definición de la Wikipedia

- -

Categorias

- -

Interwiki Language Links

- -

{{ languages( { "en": "en/Accessibility", "fr": "fr/Accessibilit\u00e9", "ja": "ja/Accessibility", "pl": "pl/Dost\u0119pno\u015b\u0107" } ) }}

diff --git a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html b/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html deleted file mode 100644 index ffaade2cb1..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Etiquetas de texto y nombres -slug: Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres -tags: - - Accesibilidad - - Etiquetas de texto - - WCAG -translation_of: Web/Accessibility/Understanding_WCAG/Text_labels_and_names ---- -

Hay muchas situaciones en las cuales un control, dialogo o cualquier otra característica de un sitio web deberían recibir un nombre o etiqueta descriptiva para permitir a los usuarios de técnologías asistivas entender cual es su propósito y ser capaz de entenderlo y operarlo correctamente. Hay un número de diferentes tipos de problemas en esta categoría, dependientes del contexto, y cada uno tiene su propia solución. Los diferentes problemas y soluciones son discutidas en las secciones posteriores.

- -

Utilizar el atributo alt para etiquetar elementos que ocupen un área que tiene el atributo href

- -

En mapas de imágenes, cada elemento {{htmlelement("area")}} con un atributo alt definiendo un nombre que describa el recurso al que enlaza el area. Fallar al hacer eso provoca que un mapa de imagen sea difícil de usar para usuarios que usen tecnología asistiva — ellos necesitan texto alternativo para ser capaces de entender el propósito de una imagen.

- -

Ejemplos

- -

El siguiente ejemplo muestra un simple mapa de imagen (tomada de H24: Providing text alternatives for the area elements of image maps):

- -
<img src="welcome.gif" usemap="#map1"
-    alt="Areas in the library. Select an area for
-more information on that area." />
-<map id="map1" name="map1">
-  <area shape="rect" coords="0,0,30,30"
-    href="reference.html" alt="Reference" />
-  <area shape="rect" coords="34,34,100,100"
-    href="media.html" alt="Audio visual lab" />
-</map>
- -

Ver la página de referencia del elemento <area> para unu ejemplo interactivo.

- -

Ver también

- - - -

Los diálogos deberían ser etiquetados

- -

Para cualquier contenedor cuyo contenido actue como una caja de diálogo (por ejemplo, un modal preguntando al usuario realizar una elección o responder a una acción siendo tomada), debe tener una etiqueta descriptiva o nombre, para que la tecnología asistiva le permita al usuario descrubir fácilmente cual es su propósito.

- -

Una caja de diálogo es generalmente denominada con un ARIA role="dialog" o role="alertdialog"; se puede usar tanto el atributo aria-label o aria-labelledby para proporcionar una etiqueta.

- -

Ejemplos

- -

El siguiente ejemplo muestra una caja de dialogo sencilla, definida como role="dialog" y etiquetada con aria-labelledby.

- -
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
-  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
-  <button>Close</button>
-</div>
- -

Si la caja de diálogo no tiene un encabezado, se puede usar aria-label para contener la etiqueta de texto:

- -
<div role="dialog" aria-label="Personal details updated confirmation">
-  <p>Your personal details were successfully updated. You can
-    change your details at any time in the user account section.</p>
-  <button>Close</button>
-</div>
- -

Ver también

- - - -

Los documentos deben tener un título

- -

Es importante que cada documento HTML, incluya un elemento {{htmlelement("title")}} que describa el propósito de la página. Una técnica común de navegación para usuarios que usan tecnologías asistivas es inferir el contenido de la página leyendo su título. Si no hay título disponible, tienen que navegar por la página para determinar su contenido, lo cual puede ser un proceso largo y confuso.

- -

Ejemplos

- -

El título para el artículo de refencia sobre el elemento {{htmlelement("title")}} es como sigue:

- -
<title>&lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language | MDN</title>
- -

Otro ejemplo podría ser:

- -
<title>Fill in your details to register — myGov services</title>
- -

Para ayudar al usuario, se puede actualizar el titulo de la página para reflejar cambios significativos al estado de la página (como problemas en la validación de un formulario):

- -
<title>2 errors — Fill in your details to register — myGov services</title>
- -

Ver también

- - - -

Contenido incrustado debe ser etiquetado

- -

Asegurarse que elementos que incrusten contenido tengan un atributo título que describa el contenido incrustado. Esto incluye al elemento {{htmlelement("embed")}} y al elemento {{htmlelement("object")}}. Estos elementos son usualmente definidos por un contenido gráfico, similar a un elemento {{HTMLelement("img")}}. Un título descriptivo ayuda a los usuarios de tecnologías asistivas entender que muestra el elemento.

- -

Figuras con leyendas opcionales deberían ser etiquetadas

- -

Para una mejor accesibilidad, incluir un {{HTMLElement("figcaption")}} dentro de un elemento {{HTMLElement("figure")}}, incluso si hacerlo es opcional técnicamente. La leyenda es adicional a cualquier texto alternativo en las imágenes dentro de la figura. La leyenda describe el proósito de una figura en el documento, que puede ser diferente de una descripción sencilla de un elemento visual, tal como lo proporciona el texto alternativo.

- -

Ejemplo

- -

El siguiente ejemplo muestra código para una figura con un pie de página. El atributo alt del elemento {{htmlelement("img")}} describe la apariencia de la imagen; el elemento {{htmlelement("figcaption")}} lo describe desde una perspectiva funcional (en este caso, el nombre en latín de la flor de la imagen).

- -
<figure>
-  <img src="milkweed.jpg"
-      alt="Black and white close-up photo of milkweed flowers">
- <figcaption>Asclepias verticillata</figcaption>
-</figure>
-
- -

Los elementos de un conjuto campos deben ser etiquetados

- -

Los elementos de un conjunto de campos (fieldset) deben tener un texto descriptivo, similar a otros elementos del formulario. Utilice el elemento {{htmlelement("legend")}} para describir el propósito de un conjunto de campos (fieldset).

- -

Utilizar una leyenda para etiquetar un conjunto de campos

- -

Al agrupar un conjunto de elementos de un formulario con un elemento {{htmlelement("fieldset")}}, se debería incluir un elemento {{htmlelement("legend")}} anidado dento de éste, conteninedo una clara descripción del grupo.

- -

Usuarios de tecnologías asistivas encuentras esta descripción útil cuando tratan de entender el propósito del grupo. Sin la leyenda, tienen que navegar individualmente por todos los controles del formulario en el grupo para inferir una idea del propósito general, lo que puede resultar confuso.

- -

Ejemplo

- -
<form>
-  <fieldset>
-    <legend>Choose your favorite monster</legend>
-
-    <input type="radio" id="kraken" name="monster">
-    <label for="kraken">Kraken</label><br/>
-
-    <input type="radio" id="sasquatch" name="monster">
-    <label for="sasquatch">Sasquatch</label><br/>
-
-    <input type="radio" id="mothman" name="monster">
-    <label for="mothman">Mothman</label>
-  </fieldset>
-</form>
- -

Puede ver un ejemplo interactivo en la página de referencia de <fieldset>.

- -

Ver también

- - - -

Los elementos de un formulario deben estar etiquetados

- -

Todos los elementos dentro de un formulario deben tener un elemento {{htmlelement("label")}} que identifique su propósito. Esto aplica a todos los tipos de elementos {{htmlelement("input")}}, como también para elementos {{htmlelement("button")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}}, {{htmlelement("progress")}} y {{htmlelement("meter")}}, como para cualquier elemento con el ARIA role switch.

- -

El elemento del formulario puede ser puesto dentro de un elemento {{htmlelement("label")}}, en cuyo caso la asociación entre el elemento del formulario y la etiqueta es obvia por la estructura. O, se puede crear una asociación entre un {{htmlelement("label")}} y el elemento del formulario al especificar el valor id del elemento del formulario y el valor del atributo for de la etiqueta.

- -

Ejemplos

- -
<label>I agree to the terms and conditions.
-  <input type="checkbox" id="terms">
-</label>
-
-<input type="checkbox" id="emailoptin">
-<label for="emailoptin">Yes, please send me news about this product.</label>
-
- -

Los elementos de un formulario deberían tener una etiqueta de texto visible

- -

En adición a tener un elemento {{htmlelement("label")}} para cada elemento del formulario, estas etiquetas deberían ser visibles, no ocultarse. Las etiquetas visbles ayudan a todos los usuarios entender el propósito de un elemento de formulario. No dependa de un texto temporal porque éste desaparece tan pronto como el usuario empieza a escribir.

- -

Los elementos marco ('frame') deben estar etiquetados

- -

Los elementos marco ('frame'), tanto {{htmlelement("iframe")}} como el obsoleto y antiguo {{htmlelement("frame")}}, deben tener un título para describir el contenido del marco. Utilice el atributo title para etiquetar un elemento 'frame'. Sin un título, los usuarios que usen una tecnología asistiva tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

- -

El elemento <frame> ya no forma parte de la especificación HTML en la versión HTML5. El soporte podría ser abandonado por los navegadores en el futuro. Además, es difícil para los lectores de pantalla el navegar páginas con elementos <frame>. Para una mejor accesibilidad y mantenimiento futuro, se debe rediseñar cualquier página que use marcos y reemplazarlos con el uso de CSS para lograr un diseño similar.

- -

Como una mejor práctica, también proporcionar un {{htmlelement("title")}} para el documento que esta encapsulado en el marco, con un contenido identico al atributo title del marco. (Esto asumiendo que el documento encapsulado esta en control de uno, si no, tratar de coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y más accesible el proporcionar el mismo título en ambos lugares.

- -

Ejemplos

- -
<iframe
-    title="MDN Web docs"
-    width="300"
-    height="200"
-    src="https://developer.mozilla.org">
-</iframe>
-
-
- -

Usar el atributo alt para etiquetar elementos mglyph

- -

Al escribir ecuaciones con MathML, a cada elemento {{mathmlelement("mglyph")}} se le debe asignar el atributo alt conteniendo un nombre que describa el símbolo. Puesto que los elementos mglyph son usados para símbolos no estándar sin definiciones Unicode, los lectores de pantalla no serán capaces de automáticamente nombrarlos. El texto alternativo ayuda a los usuarios de lectores de pantalla entender el símbolo.

- -

Los encabezados deben ser etiquetados

- -

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none o aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento.

- -

Además, es importante usar los elementos de encabezado sólo para los encabezados de sección reales, y no como una forma rápida de hacer que el texto se destaque. Los lectores de pantalla suelen "hojear" los encabezados de una página, de manera muy parecida a los usuarios con visión, el texto que no sea encabezado que se marca con elementos de encabezamiento puede causar confusión.

- -

Los encabezados deberían tener contenido de texto visible

- -

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none or aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento. No use encabezados para marcar imágenes u otro contenido gráfico.

- -

Utilizar el atributo title para describir el contenido de un <iframe>

- -

Asegurarse que los elementos {{htmlelement("iframe")}} tienen un atributo title para describir el contenido de un marco. Sin un título, los usuarios de tecnologías asistivas tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

- -

Una mejor práctica consiste en proveer un {{htmlelement("title")}} al documento encapsulado por el marco, con un contenido identico al atributo title del marco. (Asumiendo que el documento encapsulado es propio, si no, tratar de hacer coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y accesible definir el mismo título en ambos lugares.

- -

Contenido con imágenes deben ser etiquetados

- -

Proporcionar un texto descriptivo para todas las imágenes y elementos parecidos a imágenes que tengan contenido (es decir que no sean decorativos. Esto incluye imágenes SVG, elementos {{htmlelement("img")}}, {{htmlelement("canvas")}}, {{htmlelement("map")}}, y {{htmlelement("area")}}, así como elementos {{htmlelement("input")}} donde este definido type=image y elementos {{htmlelement("object")}} donde el type empiece con image/. La forma típica de hacer esto es con el atributo alt. Asegurarse de que la descripción trasmite lo que muestra la imagen

- -

Ejemplo

- -
<img src="milkweed.jgp"
-     alt="Black and white close-up photo of milkweed flowers">
- -

Elementos interactivos deben ser etiquetados

- -

Si un elemento esta destinado para que los usuarios interactúen con él, debe estar etiquetado. Los elementos interactivos incluyen enlaces ({{htmlelement("a")}}), elementos de un formulario, botones, y cualquier elemento que tenga manejadores de eventos para ratón o teclado. La forma para etiquetar un elemento depende de su tipo: para elementos de un formulario, utilizar un {{htmlelement("label")}}; para enlaces, botones y elementos sobre los que se puede hacere click, el contenido del texto del elemento suele proporcionar la etiqueta. Si no existe otra opción para etiquetar un elemento, utilizar el atributo aria-label.

- -

Usar el atributo label en elementos optgroup

- -

En un elemento {{htmlelement("optgroup")}}, utilizar el atributo label para describir el gupo para que tecnologías asistivas puedan acceder a dicha descripción para sus usuarios.

- -

Ejemplo

- -

En este ejemplo, el atributo label en los elementos <optgroup> da un nombre de categoría para el grupo de opciones.

- -
<label for="dino-select">Choose a dinosaur:</label>
-<select id="dino-select">
-    <optgroup label="Theropods">
-        <option>Tyrannosaurus</option>
-        <option>Velociraptor</option>
-        <option>Deinonychus</option>
-    </optgroup>
-    <optgroup label="Sauropods">
-        <option>Diplodocus</option>
-        <option>Saltasaurus</option>
-        <option>Apatosaurus</option>
-    </optgroup>
-</select>
- -

Las barras de herramientas deben ser etiquetadas cuando haya más de una barra

- -

Si se define más una barra de herramientas en una aplicación web utilizando el rol ARIA toolbar, se debe usar el atributo aria-label para etiquetar cada una de ellas de manera que pueda ser descrita por la tecnología de asistencia. Es una buena práctica etiquetar una barra de herramientas aún cuando solo haya una en la página

- -

Ver también

- - - -

Criterios de aprobación relacionados a WCAG

- -
-
1.1.1 Contenido no textual (A)
-
Todo contenido no textual que es presentado al usuario tiene un texto alternativo que sirve un propósito similar, excepto para las situaciones listadas en el enlace anterior.
-
2.4.4 Propósito del enlace (en contexto) (A)
-
El propósito de cada enlace puede determinarse a partir del texto del enlace o del texto del enlace en conjunto con contexto determinado programáticamente, salvo cuando el propósito del enlace sea ambiguo para los usuarios en general.
-
2.4.9 Propósito del enlace (sólo el enlace) (AAA)
-
Se dispone de un mecanismo que permite identificar el propósito de cada enlace a partir del texto del enlace solamente, excepto cuando el propósito del enlace es ambiguo para los usuarios en general.
-
diff --git a/files/es/web/accesibilidad/understanding_wcag/index.html b/files/es/web/accesibilidad/understanding_wcag/index.html deleted file mode 100644 index f58fae9c48..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accesibilidad/Understanding_WCAG -translation_of: Web/Accessibility/Understanding_WCAG ---- -

Esto es parte de un grupo de artículos que explican rápidamente los pasos necesario para cumplir con la normativa de W3C Web Content Accessibility Guides 2.0 o 2.1 (también conocida como WCAG).

- -

La norma WCAG 2.0 y 2.1 provee unas guías detalladas para lograr que el contenido de nuestro sitio sea accesible para personas con distintos tipos de discapacidades. Es exhaustivo y muy detallado, por lo que cuesta comprenderlo rápidamente. Por esta razón, hemos resumido los pasos a seguir para que puedas cumplir con las diferentes recomendaciones e incluimos links al pie para más detalles en los lugares necesarios.

- -

Los cuatro principios

- -

La normativa WCAG tiene cuatro secciones, cuatro categorías en las cuales el contenido debe ser accesible (para más información puedes referirte a Understanding the Four Principles of Accessibility (inglés)).

- -

Cada uno de los siguientes enlaces te llevarán a páginas en las que podrás expandir tu conocimiento en cada una de las áreas de WCAG 2.0 y 2.1.

- - - -

Debo usar WCAG 2.0 o 2.1?

- -

WCAG 2.1 es el estándar más reciente y relevante. Utilízalo para mejorar la calidad de navegación de los usuarios con discapacidades y para reducir las posibles acciones legales a los dueños del sitio web.

- -

Al momento de asignar recursos, ten como objetivo WCAG 2.0, luego sube a 2.1.

- -

¿Qué es WCAG 2.1?

- -

WCAG 2.1 fue publicado el 5 de junio de 2018 como recomendación oficial. La Unión Europea (EU) lo adoptó como estándar en septiembre de ese mismo año. La W3C publicó un anuncio de prensa al respecto.

- -

WCAG 2.1 incluye:

- - - - - -

Esta guía tiene como objetivo proveer información para que puedas construir mejores sitios, más accesibles. Sin embargo, no somos abogados y nada de esto es un asesoramiento legal. Si estás preocupado/a por las implicaciones legales de la accesibilidad web recomendamos que investigues la legislación de tu país o que consultes a un abogado calificado.

- -

¿Qué es la accesibilidad? y guías de accesibilidad y sobre la ley proveen más información al respecto (en inglés).

diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html deleted file mode 100644 index 2db0f4e251..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Contraste del color -slug: Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste -tags: - - Accesibilidad - - Perceptible - - contraste -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast ---- -

El contraste del color entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.

- -

Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Tipo de contenidoRelación mínima (nivel AA)Relación mejorada (nivel AAA)
Cuerpo de texto4.5 : 17 : 1
Texto a gran escala (120-150% mayor que el cuerpo de texto)3 : 14.5 : 1
Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos3 : 1No definido
- -

Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.

- -

Consulta la sección {{anch("Solución")}} a continuación para obtener más información.

- -

Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las áreas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles.  

- -

Es bueno tener un diseño atractivo en tu sitio web, pero el diseño es inútil si tus usuarios no pueden leer el contenido.

- -

Ejemplos

- -

Veamos algunos ejemplos simples con código HTML y CSS:

- -
<div class="good">Buen contraste</div>
-<div class="bad">Mal contraste</div>
- -
div {
-  /* General div styles here */
-}
-
-.good {
-  background-color: #fae6fa;
-}
-
-.bad {
-  background-color: #400064;
-}
- -

Ambos fragmentos de texto tienen color negro por defecto. El <div> "good" tiene un color de fondo púrpura claro, lo que hace que el texto sea fácil de leer:

- - - -

{{EmbedLiveSample('example1', '100%', '100')}}

- -

El <div> "bad", por otro lado, tiene un color de fondo púrpura muy oscuro, lo que hace que el texto sea mucho más difícil de leer:

- - - -

{{EmbedLiveSample('example2', '100%', '100')}}

- -
-
- -

Solución

- -

Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu diseño — preferiblemente elige el nivel AAA (ver 1.4.6 más abajo), pero al menos cumple con el nivel AA (ver 1.4.3 más abajo).

- -

Si incluyes contenido no textual, como vídeo o animación, debes seguir 1.4.11 (nuevamente, ver más abajo).

- -

Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como Color Contrast Checker de WebAIM.

- -

También puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox— ver nuestra guía Accessibility inspector, y en particular la sección Check for accessibility issues. Prueba a usarlo en los ejemplos en vivo en la sección de descripción.

- -

Criterios de conformidad relacionados con WCAG

- -
-
1.4.3 Contraste mínimo (AA)
-
El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel mínimo para garantizar la legibilidad: -
    -
  • El texto y el fondo deben tener una relación de contraste de al menos 4.5:1.
    • -
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 3:1. El texto más grande se define como de al menos 18pt, o 14pt en negrita.
    • -
-
-
1.4.6 Contraste mejorado (AAA)
-
Esto sigue y se basa en el criterio 1.4.3. -
    -
  • El texto y el fondo deben tener una relación de contraste de al menos 7:1.
    • -
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 4.5:1.
    • -
-
-
1.4.11 Contraste no textual (AA) (añadido en 2.1)
-
Debe haber una relación mínima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gráficos.
-
- -

Ver también

- - diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html b/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html deleted file mode 100644 index 6bf99039f8..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html +++ /dev/null @@ -1,336 +0,0 @@ ---- -title: Perceivable -slug: Web/Accesibilidad/Understanding_WCAG/Perceivable -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable ---- -

Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de Percepción de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.

- -
-

Nota: Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

-
- -

Pauta 1.1 — Dar alternativas de texto para contenido no textual.

- -

La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterio de éxitoCómo cumplirRecursos prácticos
1.1.1 Alternativas textuales  (A)Toda imagen que sea útil para el usuario debe tener un texto alternativo.Texto alternativo.
-

Las imágenes complejas o gráficos deben tener una alternativa accesible, ya sea en al misma página o en una externa. Utiliza un elemento de link en vez del atributo longdesc.

- 		-

Una alternativa textual o una tabla puede resolverlo (ver HTML table advanced features and accessibility y Other text alternative mechanisms para leer sobre el argumento en contra de longdesc.

-
El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo menos una descripción accesible disponible (captions o similar). -

Ver alternativas de texto para opciones de captions, y Audio transcripts, Video text tracks o Other multimedia content para otras alternativas.

-
Los elementos de interfaz como botones o elementos de formulario deberán tener labels que describan su propósito.Deberás asegurarte de que los botones describan su función (por ejemplo, <button>Subir imagen</button>). Para más información ver UI controls.
-

Implementa elementos decorativos (imágenes o vídeos) de manera que sea invisibles para lectores de pantalla, de esta forma evitarás confundir a estos usuarios.

- 		-

Las imágenes decorativas deben ser implementadas utilizando la propiedad background-image. Si debes incluir una imagen con la etiqueta {{htmlelement("img")}} deberás agregarle un atributo alt vacío, de otra manera los lectores de pantalla podrían leerlo.

- -

Si incluyes un vídeo o audio en tu sitio que se reproduce automáticamente intenta de que sea lo menos molesto posible. No hagas que se vea ni actúe como contenido y provee una forma de apagarlo.

-
- -
-

Nota: Ver también WCAG description for Guideline 1.1: Text alternatives.

-
- -

Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes.

- -

Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterio de éxitoCómo cumplirRecursos prácticos
1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A)A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provee captions para los vídeos (A)You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
-

1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A)

- 		You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provee captions para audio en vivo (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provee un vídeo extendido con descripciones de audio (AAA)Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 
1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA)For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
1.2.9 Provee una transcripción para el audio en vivo (AAA)For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
- -
-

Nota: Ver también la descripción de WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

-
- -

Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas

- -

Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterios de éxitoCómo cumplirRecursos prácticos
1.3.1 Info and relationships (A) -

Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:

- -
    -
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • -
  • Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. alt text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.
    • -
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • -
- 		The whole of -

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

-
1.3.2 Meaningful content sequence (A)A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) -

Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:

- -
    -
  • "Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.
    • -
  • "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.
    • -
  • "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
    • -
- -
-

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

-
- 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. -

Understanding Orientation 

-
1.3.5 Identify Input Purpose (AA) added in 2.1 -

 

- -

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

- 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
- -
-

Nota: Ver también la descripción de WCAG: Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

-
- -

Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo

- -

Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Criterios de éxitoCómo cumplirRecursos prácticos
1.4.1 Use of color (A) -

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

- 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) -

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

- -
    -
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • -
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • -
- 		See Color and color contrast.
1.4.4 Resize text (AA)The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible. 
1.4.5 Images of text (AA)Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images. 
1.4.6 Enhanced contrast (AAA) -

This follows, and builds on, criterion 1.4.3.

- -
    -
  • Text and its background should have a contrast ratio of at least 7.1.
    • -
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • -
- 		 
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) -

For text content presentation, the following should be true:

- -
    -
  • Foreground and background colors should be user-selectable.
    • -
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • -
  • Text should not be fully justified (e.g. text-align: justify;)
    • -
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • -
  • When the text size is doubled, the content should not need to be scrolled.
    • -
- 		 
1.4.9 Images of text (No Exception) (AAA)Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way. 
1.4.10 Reflow (AA) added in 2.1 -
    -
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • -
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • -
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • -
- 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 -

No loss of content or functionality occurs when the following styles are applied: 

- -
    -
  • Line height (line spacing) to at least 1.5 times the font size;
    • -
  • Spacing following paragraphs to at least 2 times the font size;
    • -
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • -
  • Word spacing to at least 0.16 times the font size.
    • -
- 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 -

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

- -
    -
  • dismissable (can be closed/removed)
    • -
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • -
  • persistent (the additional content does not disappear without user action)
    • -
- 		Understanding Content on Hover or Focus
- -
-

Nota: Ver también la descripción de WCAG: Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

-
diff --git a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html b/files/es/web/accesibilidad/understanding_wcag/teclado/index.html deleted file mode 100644 index 239dd6727b..0000000000 --- a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Teclado (Keyboard) -slug: Web/Accesibilidad/Understanding_WCAG/Teclado -tags: - - Accesibilidad - - teclado -translation_of: Web/Accessibility/Understanding_WCAG/Keyboard ---- -
Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.
- -

Los elementos enfocables deben tener una semántica interactiva

- -

Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).

- -
-

Nota: Una excepción importante a esta regla es si el elemento tiene aplicado role="document", dentro un contexto interactivo (como un role="application"). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").

-
- -

La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo tabindex=0. Sin embargo, sólo se debería añadir tabindex si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.

- -

Ver también

- - - -

Evitar usar el atributo tabindex con un valor mayor a cero

- -

El atributo tabindex indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de tabindex (1, luego 2, después 3, etc.).

- -

Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de tabindex.

- -

Ver también

- - - -

Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas

- -

Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.

- -

A un elemento se le puede hacer click si tiene in manejador de evento onclick definido. Se puede hacer enfocable al añadir un atributo-valor tabindex=0. Se puede hacer que se opere con un teclado al definir un manejador de evento onkeydown; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos

- -

Ver también

- - - -

Los elementos interactivos deben ser capaz de ser activos utilizando un teclado

- -

Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.

- -

Ver también

- - - -

Los elementos interactivos deben ser enfocables

- -

Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor tabindex=0. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla Tab, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.

- -

Ver también

- - - -

Elementos enfocables deben tener un estilo al estar enfocados

- -

Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS :focus.

- -

Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.

- -

Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.

- -

If you create your own focusable components, be sure that you also define focus styling for them.

- -

Ver también

- - diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html deleted file mode 100644 index 6d744bb956..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Usando el atributo aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required -tags: - - Accesibilidad -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -

Descripción

- -

El atributo aria-required es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un role ARIA asignado.

- -

{{ HTMLVersionInline("5") }} ahora tiene el atributo required, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.

- -

Value

- -

true o false (Default: false)

- -

Posibles efectos en agentes de usuario y tecnología asistente.

- -

Los lectores de pantalla deben anunciar el campo como requerido.

- -

Nota que este atributo no cambiará automáticamente la presentación del campo.

- -
Nota: Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplo 1: Un formulario sencillo

- -
 <form action="post">
-     <label for="firstName">First name:</label>
-     <input id="firstName" type="text" aria-required="true" />
-     <br/>
-     <label for="lastName">Last name:</label>
-     <input id="lastName" type="text" aria-required="true" />
-     <br/>
-     <label for="streetAddress">Street address:</label>
-     <input id="streetAddress" type="text" />
- </form>
-
- -

Ejemplos en acción:

- -

Ejemplo de un Tooltip (incluye el uso del atributo aria-required)

- -

Notas 

- -

Usan ARIA roles

- - - -

Técnicas relacionadas con ARIA

- - - -

Compatibilidad

- -

Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.

- -

Recursos adicionales

- - diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html b/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html deleted file mode 100644 index fad923dd3a..0000000000 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Usando el rol alertdialog -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog -tags: - - ARIA - - Accesibilidad - - Alertas - - Desarrollo web - - HTML - - agente - - alertdialog - - modal -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role ---- -

Descripción

- -
-

Esta técnica demuestra como usar el rol alertdialog.

-
- -

El rol alertdialog es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, alertdialog es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''usando el rol dialog' son aplicables al rol alertdialog también: 

- - - -

La diferencia con díalogos normales es que el rol de alertdialog debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinción.

- -

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

- -
Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).
- -

Posibles efectos de agentes de usuario y tecnología de asistencia

- -

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

- - - -

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

- -

Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. 

- -
Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
- -

Ejemplos

- -

Ejemplos 1: Un díalogo de alerta básico

- -

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

- -
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
-  <div role="document" tabindex="0">
-    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
-    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
-    <button>OK</button>
-  </div>
-</div>
- -

Ejemplos en funcionamiento:

- -

Pendiente

- -

Notas 

- -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidad

- -

Pendiente: Add support information for common UA and AT product combinations

- -

Recursos adicionales

diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html new file mode 100644 index 0000000000..fad923dd3a --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html @@ -0,0 +1,89 @@ +--- +title: Usando el rol alertdialog +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_rol_alertdialog +tags: + - ARIA + - Accesibilidad + - Alertas + - Desarrollo web + - HTML + - agente + - alertdialog + - modal +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +--- +

Descripción

+ +
+

Esta técnica demuestra como usar el rol alertdialog.

+
+ +

El rol alertdialog es utilizado para notificar al usuario información urgenete que demanden la atención inmediata del usuario. Como el nombre implica, alertdialog es un tipo de díalogo. Esto significa que la mayoría de las instrucciones proveidas en la técnica de ''usando el rol dialog' son aplicables al rol alertdialog también: 

+ + + +

La diferencia con díalogos normales es que el rol de alertdialog debe ser utilizado únicamente cuando una alerta, error, o advertencia ocurre. En otras palabras, cuando la información o controles de un díalogo requieren la inmediata atención del usuario debe usarse alertdialog en lugar de dialog. Sin embargo, depende del desarrollador hacer esta distinción.

+ +

Debido a su carácter urgente los díalogos de alerta deben ser siempre modales.

+ +
Nota: Este rol solo debe ser usado para mensajes de alerta que tienen controles interactivos asociado. Si un díalogo de alerta solo contiene contenido estático y no tiene controles interactivos, alertdialog es probablemente el rol incorrecto para ser utilizado.. El rol alert debe ser usado en su lugar en éste caso (como se describe en la técnica de Utilizando el rol alert).
+ +

Posibles efectos de agentes de usuario y tecnología de asistencia

+ +

Cuando un rol alertdialog es utilizado, el agente de usuario debería hacer lo siguiente:

+ + + +

Cuando la aleta de díalogo aparece, los lectores de pantalla deberían anunciar la alerta.

+ +

Cuando el díalogo de alerta es etiquetado correctamente y el foco es movido de un control a el interior del díalogo, los lectores de pantalla deberían anunciar el rol accesible del díalogo así como su nombre y su descriipción antes de anunciar el elemento enfocado. 

+ +
Nota: Opiniones pueden diferir en como tecnología de asistencia debe manejar esta técnica. La información proveída arriba es una de éstas opiniones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplos 1: Un díalogo de alerta básico

+ +

El fragmento de código siguiente muestra como marcar un díalogo de alerta que solo provee un mensaje y un botón de OK.

+ +
<div role="alertdialog" aria-labelledby="tituloDialogo1" aria-describedby="descrDialogo1">
+  <div role="document" tabindex="0">
+    <h2 id="tituloDialogo1">Tu sesión esta apunto de expirar</h2>
+    <p id="descrDialogo1">Para extender tu sesión de clic en el botón OK</p>
+    <button>OK</button>
+  </div>
+</div>
+ +

Ejemplos en funcionamiento:

+ +

Pendiente

+ +

Notas 

+ +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidad

+ +

Pendiente: Add support information for common UA and AT product combinations

+ +

Recursos adicionales

diff --git a/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..6d744bb956 --- /dev/null +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,76 @@ +--- +title: Usando el atributo aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_el_atributo_aria-required +tags: + - Accesibilidad +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +

Descripción

+ +

El atributo aria-required es usado para indicar al usuario que un input es requerido en un elemento antes de que un form pueda ser enviado. Este atributo puede ser usado en un form con cualquier elemento HTML típico; no se limita a elementosque tengan un role ARIA asignado.

+ +

{{ HTMLVersionInline("5") }} ahora tiene el atributo required, pero aria-required todavía es útil para un agente de usuario que no soporta HTML5.

+ +

Value

+ +

true o false (Default: false)

+ +

Posibles efectos en agentes de usuario y tecnología asistente.

+ +

Los lectores de pantalla deben anunciar el campo como requerido.

+ +

Nota que este atributo no cambiará automáticamente la presentación del campo.

+ +
Nota: Las opiniones pueden diferir en cuanto a cómo esta técnica debería ser manejada por la tecnología asistente.  La información prevista arribaes una de esas opciones y por lo tanto no es normativa.
+ +

Ejemplos

+ +

Ejemplo 1: Un formulario sencillo

+ +
 <form action="post">
+     <label for="firstName">First name:</label>
+     <input id="firstName" type="text" aria-required="true" />
+     <br/>
+     <label for="lastName">Last name:</label>
+     <input id="lastName" type="text" aria-required="true" />
+     <br/>
+     <label for="streetAddress">Street address:</label>
+     <input id="streetAddress" type="text" />
+ </form>
+
+ +

Ejemplos en acción:

+ +

Ejemplo de un Tooltip (incluye el uso del atributo aria-required)

+ +

Notas 

+ +

Usan ARIA roles

+ + + +

Técnicas relacionadas con ARIA

+ + + +

Compatibilidad

+ +

Por determinar: Agregar información de soporte para combinaciones comunes de productos UA y AT.

+ +

Recursos adicionales

+ + diff --git a/files/es/web/accessibility/aria/forms/alertas/index.html b/files/es/web/accessibility/aria/forms/alertas/index.html deleted file mode 100644 index 65cc3d3d09..0000000000 --- a/files/es/web/accessibility/aria/forms/alertas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Alertas -slug: Web/Accessibility/ARIA/forms/alertas -tags: - - ARIA - - Accesibilidad - - Forms - - Web - - formulários -translation_of: Web/Accessibility/ARIA/forms/alerts ---- -

El problema

- -

Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.

- -

El formulario

- -

Primero, lee acerca de la técnica requerida por aria si no lo has hecho, ya que esta técnica amplía a esa.

- -

Aquí hay un sencillo formulario:

- -
 <form method="post" action="post.php">
-   <fieldset>
-     <legend>Introduce tus datos de contacto</legend>
-     <label for="name">Tu nombre (obligatorio):</label>
-     <input name="name" id="name" aria-required="true"/>
-     <br />
-     <label for="email">Dirección de correo electrónico (obligatorio):</label>
-     <input name="email" id="email" aria-required="true"/>
-     <br />
-     <label for="website">Sitio web (opcional):</label>
-     <input name="website" id="website"/>
-   </fieldset>
-   <label for="message">Por favor ingresa tu mensaje (requerido):</label>
-   <br />
-   <textarea name="message" id="message" rows="5" cols="80"
-             aria-required="true"></textarea>
-   <br />
-   <input type="submit" name="submit" value="Enviar mensaje"/>
-   <input type="reset" name="reset" value="Restablecer formulario"/>
- </form>
-
- -

Verificación de validez y notificación al usuario

- -

La validación de formularios consta de varios pasos:

- -
    -
  1. Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.
    2. -
  2. Si no se cumplen los criterios anteriores, el atributo aria-invalid del campo recibirá un valor de "true".
    3. -
  3. Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "alert" de JavaScript, usaremos un widget WAI-ARIA simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "onblur" en la función "alert" predeterminada de JavaScript).
    4. -
- -

A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "head":

- -
 <script type="application/javascript">
- function removeOldAlert()
- {
-   var oldAlert = document.getElementById("alert");
-   if (oldAlert){
-     document.body.removeChild(oldAlert);
-   }
- }
-
- function addAlert(aMsg)
- {
-   removeOldAlert();
-   var newAlert = document.createElement("div");
-   newAlert.setAttribute("role", "alert");
-   newAlert.setAttribute("id", "alert");
-   var msg = document.createTextNode(aMsg);
-   newAlert.appendChild(msg);
-   document.body.appendChild(newAlert);
- }
-
- function checkValidity(aID, aSearchTerm, aMsg)
- {
-   var elem = document.getElementById(aID);
-   var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-   if (invalid) {
-     elem.setAttribute("aria-invalid", "true");
-     addAlert(aMsg);
-   } else {
-     elem.setAttribute("aria-invalid", "false");
-     removeOldAlert();
-   }
- }
- </script>
-
- -

La función checkValidity

- -

El método principal en JavaScript utilizado para la validación de formularios es la función checkValidity. Este método toma tres parámetros: el ID de el input que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.

- -

Para ver si es válido, la función comprueba si el valor indexOf del input es algo mayor que -1. Se devuelve un valor de -1 o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.

- -

Si no es válido, la función hace dos cosas:

- -
    -
  1. Establece el atributo aria-invalid del elemento en "true", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.
    2. -
  2. Llamará a la función addAlert para agregar la alerta con el mensaje de error proporcionado.
    3. -
- -

Si se encuentra el término de búsqueda, el atributo aria-invalid se restablece a “false”. Además, se eliminan las alertas sobrantes.

- -

La función addAlert

- -

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "alert" y, si lo encuentra, lo elimina del modelo de objetos del documento.

- -

A continuación, la función crea un elemento div para contener el texto de alerta. Obtiene un ID de "alert". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el Módulo de atributos de rol XHTML que simplemente se transfirió a HTML para simplificar.

- -

El texto se agrega al elemento div y el elemento div se agrega al documento.

- -

En el momento en que esto suceda, Firefox lanzará un evento "alert" a las tecnologías de asistencia cuando aparezca este div. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.

- -

Modificar el evento "onblur"

- -

Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:

- -
 <input name="name" id="name" aria-required="true"
-        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/>
- <br />
- <input name="email" id="email" aria-required="true"
-        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/>
-
- -

Probar el ejemplo

- -

Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:

- -
    -
  1. Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con Mayús-Tab y corregir el error.
    2. -
  2. Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.
    3. -
- -

En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.

- -

Algunas preguntas que podrías tener

- -
-
P. ¿Por qué pusiste “(obligatorio)” en el texto de la etiqueta y el atributo aria-required en algunas de las entradas?
-
R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.
-
P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
-
R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. 
-
- -
Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/web/accessibility/aria/forms/alerts/index.html b/files/es/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..65cc3d3d09 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,147 @@ +--- +title: Alertas +slug: Web/Accessibility/ARIA/forms/alertas +tags: + - ARIA + - Accesibilidad + - Forms + - Web + - formulários +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +

El problema

+ +

Tienes un formulario — un formulario de contacto — por ejemplo, en el que deseas poner algún control de error accesible. Ejemplos de problemas comunes incluyen direcciones de correo electrónico que no son válidas o un campo de nombre que no contiene al menos un nombre o apellido.

+ +

El formulario

+ +

Primero, lee acerca de la técnica requerida por aria si no lo has hecho, ya que esta técnica amplía a esa.

+ +

Aquí hay un sencillo formulario:

+ +
 <form method="post" action="post.php">
+   <fieldset>
+     <legend>Introduce tus datos de contacto</legend>
+     <label for="name">Tu nombre (obligatorio):</label>
+     <input name="name" id="name" aria-required="true"/>
+     <br />
+     <label for="email">Dirección de correo electrónico (obligatorio):</label>
+     <input name="email" id="email" aria-required="true"/>
+     <br />
+     <label for="website">Sitio web (opcional):</label>
+     <input name="website" id="website"/>
+   </fieldset>
+   <label for="message">Por favor ingresa tu mensaje (requerido):</label>
+   <br />
+   <textarea name="message" id="message" rows="5" cols="80"
+             aria-required="true"></textarea>
+   <br />
+   <input type="submit" name="submit" value="Enviar mensaje"/>
+   <input type="reset" name="reset" value="Restablecer formulario"/>
+ </form>
+
+ +

Verificación de validez y notificación al usuario

+ +

La validación de formularios consta de varios pasos:

+ +
    +
  1. Verificando si la dirección de correo electrónico o el nombre ingresado son válidos. Cada campo tiene un conjunto de criterios que se deben cumplir para aprobar la validación. Para simplificar este ejemplo, verificaremos si la dirección de correo electrónico contiene el símbolo "@" y si la entrada del nombre contiene al menos 1 carácter.
    2. +
  2. Si no se cumplen los criterios anteriores, el atributo aria-invalid del campo recibirá un valor de "true".
    3. +
  3. Si no se cumplieron los criterios, se notificará al usuario mediante una alerta. En lugar de usar la función "alert" de JavaScript, usaremos un widget WAI-ARIA simple para la notificación. Esto notifica al usuario del error, pero le permite continuar modificando el formulario sin perder el foco (causado por el controlador "onblur" en la función "alert" predeterminada de JavaScript).
    4. +
+ +

A continuación se muestra un código JavaScript de ejemplo que se podría insertar encima de la etiqueta de cierre "head":

+ +
 <script type="application/javascript">
+ function removeOldAlert()
+ {
+   var oldAlert = document.getElementById("alert");
+   if (oldAlert){
+     document.body.removeChild(oldAlert);
+   }
+ }
+
+ function addAlert(aMsg)
+ {
+   removeOldAlert();
+   var newAlert = document.createElement("div");
+   newAlert.setAttribute("role", "alert");
+   newAlert.setAttribute("id", "alert");
+   var msg = document.createTextNode(aMsg);
+   newAlert.appendChild(msg);
+   document.body.appendChild(newAlert);
+ }
+
+ function checkValidity(aID, aSearchTerm, aMsg)
+ {
+   var elem = document.getElementById(aID);
+   var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+   if (invalid) {
+     elem.setAttribute("aria-invalid", "true");
+     addAlert(aMsg);
+   } else {
+     elem.setAttribute("aria-invalid", "false");
+     removeOldAlert();
+   }
+ }
+ </script>
+
+ +

La función checkValidity

+ +

El método principal en JavaScript utilizado para la validación de formularios es la función checkValidity. Este método toma tres parámetros: el ID de el input que se va a validar, el término que se busca para asegurar la validez y el mensaje de error que se inserta en la alerta.

+ +

Para ver si es válido, la función comprueba si el valor indexOf del input es algo mayor que -1. Se devuelve un valor de -1 o menos si el índice del término de búsqueda no se pudo encontrar dentro del valor.

+ +

Si no es válido, la función hace dos cosas:

+ +
    +
  1. Establece el atributo aria-invalid del elemento en "true", lo que indicará a los lectores de pantalla que hay contenido no válido aquí.
    2. +
  2. Llamará a la función addAlert para agregar la alerta con el mensaje de error proporcionado.
    3. +
+ +

Si se encuentra el término de búsqueda, el atributo aria-invalid se restablece a “false”. Además, se eliminan las alertas sobrantes.

+ +

La función addAlert

+ +

Esta función primero elimina las alertas antiguas. La función es simple: busca un elemento con id "alert" y, si lo encuentra, lo elimina del modelo de objetos del documento.

+ +

A continuación, la función crea un elemento div para contener el texto de alerta. Obtiene un ID de "alert". Y obtiene un conjunto de roles de "alert". En realidad, está inspirado en ARIA, aunque no dice "aria" en el nombre del atributo. Esto se debe a que ese rol se basa en el Módulo de atributos de rol XHTML que simplemente se transfirió a HTML para simplificar.

+ +

El texto se agrega al elemento div y el elemento div se agrega al documento.

+ +

En el momento en que esto suceda, Firefox lanzará un evento "alert" a las tecnologías de asistencia cuando aparezca este div. La mayoría de los lectores de pantalla la recogerán automáticamente y la pregonarán. Esto es similar a la barra de notificaciones en Firefox que te pregunta si deseas guardar una contraseña. La alerta que acabamos de crear no tiene ningún botón para presionar, solo nos dice lo que está mal.

+ +

Modificar el evento "onblur"

+ +

Todo lo que queda ahora es agregar el controlador de eventos. Necesitamos cambiar las dos entradas para el correo electrónico y el nombre para esto:

+ +
 <input name="name" id="name" aria-required="true"
+        onblur="checkValidity('name', '', '¡Se ingresó un nombre no válido!');"/>
+ <br />
+ <input name="email" id="email" aria-required="true"
+        onblur="checkValidity('email', '@', 'Dirección de correo electrónico no válida');"/>
+
+ +

Probar el ejemplo

+ +

Si usas Firefox 3 y un lector de pantalla compatible actualmente, intenta lo siguiente:

+ +
    +
  1. Ingresa solo tu primer nombre como nombre. Al pulsar la tecla de tabulación, escucharás una alerta que te indicará que ingresaste un nombre no válido. Luego puedes volver atrás con Mayús-Tab y corregir el error.
    2. +
  2. Ingresa una dirección de correo electrónico sin el símbolo “@”. Cuando salgas de este campo, deberías escuchar una advertencia que dice que no ingresaste una dirección de correo electrónico válida.
    3. +
+ +

En ambos casos, al volver a enfocar el campo en cuestión, tu lector de pantalla debería decirte que este campo no es válido. JAWS 9 admite esto, pero JAWS 8 no, por lo que es posible que esto no funcione en todas las versiones de los lectores de pantalla compatibles.

+ +

Algunas preguntas que podrías tener

+ +
+
P. ¿Por qué pusiste “(obligatorio)” en el texto de la etiqueta y el atributo aria-required en algunas de las entradas?
+
R. Si se tratara de un formulario real en vivo y el sitio estuviera siendo visitado por un navegador que aún no es compatible con ARIA, aún quisiéramos dar una indicación de que este es un campo obligatorio.
+
P. ¿Por qué no vuelve a enfocarse en el campo no válido automáticamente?
+
R. Porque esto no está permitido por las especificaciones de la API de Windows y posiblemente otras. Además, dejar que el enfoque salte sin interacción real del usuario con demasiada frecuencia no es algo agradable en general. 
+
+ +
Aún no definido: reconsideremos esto ─ personalmente, creo que establecer el enfoque podría ser bueno si se hace sin causar una trampa en el teclado.
diff --git a/files/es/web/accessibility/aria/forms/basic_form_hints/index.html b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..48f2dba3e3 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,115 @@ +--- +title: Consejos básicos para formularios +slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios +tags: + - ARIA + - Accesibilidad + - formulários +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +

Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control. Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.

+ +

El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un id, y cada elemento {{ HTMLElement("label") }} tiene un atributo for, indicando el id asociado al {{ HTMLElement("input") }}.

+ +
<form>
+  <ul>
+    <li>
+      <input id="vino-1" type="checkbox" value="riesling"/>
+      <label for="vino-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="vino-2" type="checkbox" value="pinot-blanc"/>
+      <label for="vino-2">Pinot Blanc</label>
+    </li>
+    <li>
+      <input id="vino-3" type="checkbox" value="pinot-grigio"/>
+      <label for="vino-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="vino-4" type="checkbox" value="gewurztraminer"/>
+      <label for="vino-4">Gewürztraminer</label>
+    </li>
+  </ul>
+</form>
+
+ +

Etiquetando con ARIA

+ +

El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. WAI-ARIA, la especificación Accessible Rich Internet Applications de W3C's Web Accessibility Initiative, provee el atributo aria-labelledby para estos casos.

+ +

El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo aria-labelledby a etiqueta_rg1, el id de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.

+ +
<h3 id="etiqueta_rg1">Opciones para el almuerzo</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thai
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Radio Maria
+  </li>
+</ul>
+
+ +

Describiendo con ARIA

+ +

Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo aria-describedby  para directamente asociar la descripción con el control.

+ +

El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo aria-describedby en el {{ HTMLElement("button") }} referencia al id del {{ HTMLElement("div") }}.

+ +
<button aria-describedby="descriptionRevert">Revertir</button>
+<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
+ +
+

Nota: El atributo aria-describedby es utilizado para otros própositos además de los controles de formularios.

+
+ +

Campos requeridos e inválidos

+ +
+

Nota: Ahora que required esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo required y aria-required.

+
+ +

Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:

+ + + +

El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos aria-required son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo aria-invalid del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).

+ +
<form>
+  <div>
+    <label for="nombre">* Nombre:</label>
+    <input type="text" value="nombre" id="nombre" aria-required="true"/>
+  </div>
+  <div>
+    <label for="telefono">Phone:</label>
+    <input type="text" value="telefono" id="telefono" aria-required="false"/>
+  </div>
+  <div>
+    <label for="email">* E-mail:</label>
+    <input type="text" value="email" id="email" aria-required="true"/>
+  </div>
+</form>
+ +

The script that validates the form entry would look something like this:

+ +
var validar = function () {
+  var elementoEmail = document.getElementById(emailFieldId);
+  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
+
+  elementoEmail.setAttribute("aria-invalid", !esValido);
+  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
+};
+
+ +

Ofreciendo Mensajes de Error Útiles

+ +

Lea como usar alertas ARIA para mejorar formularios.

+ +

Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices).

diff --git a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html b/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html deleted file mode 100644 index 48f2dba3e3..0000000000 --- a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Consejos básicos para formularios -slug: Web/Accessibility/ARIA/forms/consejos_basicos_para_formularios -tags: - - ARIA - - Accesibilidad - - formulários -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -

Cuando se implementan formularios utilizando elementos relacionados con los formularios HTML tradicionales, es importante proveer etiquetas para los controles y explicitamente asociar una etiqueta con su control. Cuando un usuario de lector de pantalla navega una página, el lector de pantalla describirá los controles del formulario. Sin una asociación directa entre el control y su etiqueta, el lector de pantalla no tiene forma de saber que etiqueta es la correcta para el control.

- -

El ejemplo siguiente muestra un formulario sencillo con etiquetas. Note que cada elemento {{ HTMLElement("input") }} tiene un id, y cada elemento {{ HTMLElement("label") }} tiene un atributo for, indicando el id asociado al {{ HTMLElement("input") }}.

- -
<form>
-  <ul>
-    <li>
-      <input id="vino-1" type="checkbox" value="riesling"/>
-      <label for="vino-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="vino-2" type="checkbox" value="pinot-blanc"/>
-      <label for="vino-2">Pinot Blanc</label>
-    </li>
-    <li>
-      <input id="vino-3" type="checkbox" value="pinot-grigio"/>
-      <label for="vino-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="vino-4" type="checkbox" value="gewurztraminer"/>
-      <label for="vino-4">Gewürztraminer</label>
-    </li>
-  </ul>
-</form>
-
- -

Etiquetando con ARIA

- -

El elemento HTML {{ HTMLElement("label") }} es apropiado para elementos relacionados a formularios, pero muchos controles de formulario son implementados como un widget dinámico de JavaScript, utilizando {{ HTMLElement("div") }}s o {{ HTMLElement("span") }}s. WAI-ARIA, la especificación Accessible Rich Internet Applications de W3C's Web Accessibility Initiative, provee el atributo aria-labelledby para estos casos.

- -

El siguiente ejemplo muestra un grupo de radio buttons implementado usando una lista no ordenada. Note que en la línea 3, el elemento {{ HTMLElement("ul") }} define el atributo aria-labelledby a etiqueta_rg1, el id de elemento {{ HTMLElement("h3") }} en la línea 1, que es la etiqueta para el grupo de controles radio.

- -
<h3 id="etiqueta_rg1">Opciones para el almuerzo</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="etiqueta_rg1">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thai
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Radio Maria
-  </li>
-</ul>
-
- -

Describiendo con ARIA

- -

Los controles de formulario en ocasiones tienen una descripción asociada con ellos, además de la descripción de la etiqueta. ARIA provee el atributo aria-describedby  para directamente asociar la descripción con el control.

- -

El ejemplo siguiente muestra un elemento {{ HTMLElement("button") }} que es descrito por una oración de un diferento elemento {{ HTMLElement("div") }}. El atributo aria-describedby en el {{ HTMLElement("button") }} referencia al id del {{ HTMLElement("div") }}.

- -
<button aria-describedby="descriptionRevert">Revertir</button>
-<div id="descriptionRevert">Revertir deshará cualquier cambio que se haya hecho desde la última que se guardo.</div>
- -
-

Nota: El atributo aria-describedby es utilizado para otros própositos además de los controles de formularios.

-
- -

Campos requeridos e inválidos

- -
-

Nota: Ahora que required esta disponible para más del 97% de usuarios globalmente, no se recomienda que se use al mismo tiempo required y aria-required.

-
- -

Los desarrolladores Web típicamente usan estrategias de presentación para inidicar campos requeridos o inválidos. Tecnologías asistivas (Assistive technologies - ATs) no necesariamente pueden inferir de la presentación. ARIA provee atributos para indicar que controles de formulario son requeridos o inválidos:

- - - -

El siguiente ejemplo muestra un formulario sencillo con tres campos. En las líneas 4 y 12, los atributos aria-required son establecidos a true (en adición a los asteriscos junto a las etiquetas), indicando que los campos de nombre y email son requeridos. La segunda parte del ejemplo, es un fragmento de código de JavaScript que valida el formato del email, y establece el atributo aria-invalid del campo email (línea 12 del HTML) de acuerdo al resultado (adicionalmente de cambiar la presentación del elemento).

- -
<form>
-  <div>
-    <label for="nombre">* Nombre:</label>
-    <input type="text" value="nombre" id="nombre" aria-required="true"/>
-  </div>
-  <div>
-    <label for="telefono">Phone:</label>
-    <input type="text" value="telefono" id="telefono" aria-required="false"/>
-  </div>
-  <div>
-    <label for="email">* E-mail:</label>
-    <input type="text" value="email" id="email" aria-required="true"/>
-  </div>
-</form>
- -

The script that validates the form entry would look something like this:

- -
var validar = function () {
-  var elementoEmail = document.getElementById(emailFieldId);
-  var esValido = emailValid(formData.email); // regresa verdadero si es válido, de otro modo devuelve falso.
-
-  elementoEmail.setAttribute("aria-invalid", !esValido);
-  setElementBorderColour(elementoEmail, esValido); // establece el borde de color rojo si el segundo argumento es falso
-};
-
- -

Ofreciendo Mensajes de Error Útiles

- -

Lea como usar alertas ARIA para mejorar formularios.

- -

Para mayor orientación en el uso de ARIA para la accesibilidad de los formularios, vea el documento Prácticas de Autoria WAI-ARIA (WAI-ARIA Authoring Practices).

diff --git a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html b/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html deleted file mode 100644 index 4bc8cafa67..0000000000 --- a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: >- - Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos - dentro de ellos -slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas -tags: - - ARIA - - Accesibilidad - - Firefox - - Guía - - HTML - - NeedsContent - - aria-labelledby - - etiqueta - - label -translation_of: Web/Accessibility/ARIA/forms/Multipart_labels ---- -
-

Problema

- -

Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.

- -

Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.

- -

La solución esta en un atributo ARIA llamado aria-labelledby. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.

- -

Tanto aria-labelledby y aria-describedby se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un <input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por aria-labelledby. Si en una página se provee aria-labelledby, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.

- -

Ejemplo:

- apagar computadora después de  minutos - -
<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
-<span id="etiquetaApagado">Apagar computadora después de </span>
-<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
-<span id="unidadApagado"> minutos</span>
-
- -

Nota para usuarios de JAWS 8

- -

JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.

- -
TBD (pendiente): añadir más información sobre compatiblidad
- -

¿Puede hacerse sin ARIA?

- -

 Community member Ben Millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using aria-labelledby is still the best approach.

-
diff --git a/files/es/web/accessibility/aria/forms/multipart_labels/index.html b/files/es/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..4bc8cafa67 --- /dev/null +++ b/files/es/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,47 @@ +--- +title: >- + Etiquetas complejas: Utilizando ARIA para etiquetas con campos embebidos + dentro de ellos +slug: Web/Accessibility/ARIA/forms/Etiquetas_complejas +tags: + - ARIA + - Accesibilidad + - Firefox + - Guía + - HTML + - NeedsContent + - aria-labelledby + - etiqueta + - label +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +
+

Problema

+ +

Tiene un formulario donde le pregunta a su usuario una pregunta, pero la respuesta es mencionada en la misma pregunta. Un ejemplo clásico que todos conocemos de las configuraciones de nuestro navegador es la opción "Eliminar el historial despues de x días". "Eliminar  el historial despues" está a la izquierda de la caja de texto, x es el número, por ejemplo 21, y la palabra "días" sigue a la caja de texto, formando una oración que es fácil de comprender.

+ +

Si se esta usando un lector de pantalla, quizá ha notado que, cuando se van a las configuraciónes de Firefox, el lector dice: ¿"Eliminar el historial después de 21 días"?, seguidamente anuncia que está en una caja de texto y que contiene el número 21. ¿No es super? No necesita navegar alrededor para darse cuenta de la unidad. "Días" podría ser fácilmente "meses" o "años", y en muchos dialogos ordinarios no hay forma de descubrirlo más que navegando utilizando los comandos de revisión del lector de pantalla.

+ +

La solución esta en un atributo ARIA llamado aria-labelledby. Su parámetro es una cadena de texto que consiste de los IDs de los elementos HTML que se deseen concatenar dentro de un solo nombre accesible.

+ +

Tanto aria-labelledby y aria-describedby se especifican en el elemento de formulario   que debe etiquetarse, por ejemplo un <input>. En ambos casos, la etiqueta for/label para ligar a los controles que puedan existir son anuladas por aria-labelledby. Si en una página se provee aria-labelledby, se debería colocar también una etiqueta para también soportar navegadores antiguos que no tengan aún soperte ARIA. Con Firefox 3, los usuarios ciegos tendrán automáticamente mejor accesibilidad con el nuevo atributo, pero los usuarios de navadores antiguos de esta forma no son dejados en la oscuridad.

+ +

Ejemplo:

+ apagar computadora después de  minutos + +
<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" type="checkbox" />
+<span id="etiquetaApagado">Apagar computadora después de </span>
+<input aria-labelledby="etiquetaApagado tiempoApagado unidadApagado" id="tiempoApagado" type="text" value="10" />
+<span id="unidadApagado"> minutos</span>
+
+ +

Nota para usuarios de JAWS 8

+ +

JAWS 8.0 tiene su propia lógica para encontrar etiquetas, causando que siempre sobreescriba el nombre accesible que obtiene la caja de texto de un documento HTML. Con JAWS 8, no se ha encontrado una manera de hacer que acepte la etiqueta del ejemplo anterior. Pero NVDA y  Window-Eyes funcionan correctamente, Orca on Linux tampoco tiene problemas.

+ +
TBD (pendiente): añadir más información sobre compatiblidad
+ +

¿Puede hacerse sin ARIA?

+ +

 Community member Ben Millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using HTML 4, simply by embedding the input into the label. Thanks for that info, Ben! It is very useful and shows that some techniques that have been available for years escape even the gurus sometimes. This technique works in Firefox; however, it doesn't currently work in many other browsers, including IE. For labels with embedded form controls, using aria-labelledby is still the best approach.

+
diff --git a/files/es/web/accessibility/community/index.html b/files/es/web/accessibility/community/index.html new file mode 100644 index 0000000000..34acce8e6e --- /dev/null +++ b/files/es/web/accessibility/community/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Accesibilidad/Comunidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility/Community +--- +

 

+

Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con la + + accesibilidad + que pueda ser de interés. Por favor, pon aquí un enlace.

+

Mozilla

+ +

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

+

Listas de correo

+ +

Foros

+ +

 

+

Bitácoras

+ +

Wikis

+ +

 

+

Otros Sitios

+ +

categorías

diff --git a/files/es/web/accessibility/index.html b/files/es/web/accessibility/index.html new file mode 100644 index 0000000000..ea30623a6d --- /dev/null +++ b/files/es/web/accessibility/index.html @@ -0,0 +1,93 @@ +--- +title: Accesibilidad +slug: Web/Accesibilidad +tags: + - Accesibilidad + - Todas_las_Categorías +translation_of: Web/Accessibility +--- +
Guía Breve de Accesibilidad Web
+Las cuatro cosas básicas y un montón de buenos enlaces.
+ +

La accesibilidad web (a menudo abreviada como A11y) se refiere a la posibilidad de acceso a los diferentes sitios web y a todo su contenido por todas las personas, independientemente de sus limitaciones fìsicas (discapacidad) o las derivadas del contexto de uso (tecnológicas o ambientales).{{ Ref(1) }}

+ +

Para muchas personas, la tecnología facilita las cosas. Para las personas con algun tipo de discapacidad, la tecnología hace las cosas posibles. Accesibilidad significa desarrollar contenido para que sea lo más accesible posible sin importar las habilidades físicas y cognitivas de un individuo y sin importar cómo acceda a la web.

+ +

" La Web está diseñada fundamentalmente para que funcione para todas las personas , independientemente de su hardware, software, idioma, cultura, ubicación, capacidad física o mental.

+ +

El máximo organismo dentro de la jerarquía de Internet que se encarga de promover la accesibilidad es el W3C, en especial su grupo de trabajo WAI.

+ + + + + + + + +
+

Documentación

+ +
+
Introducción a la Accesibilidad Web (externo)
+
WAI: estrategias, pautas, recursos para hacer la Web accesible a personas con discapacidad.
+
+ +
+
Pautas de Accesibilidad al Contenido en la Web 1.0 (externo)
+
"Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con discapacidad."
+
+ +
+
Técnicas para las Pautas de Accesibilidad al Contenido en la Web 1.0
+
Este documento es el punto de acceso a una serie de documentos relacionados que describen técnicas para satisfacer los requisitos definidos en las "Pautas de Accesibilidad al Contenido en la Web 1.0"
+
+ +
+
FAQ sobre las "Pautas de Accesibilidad al Contenido en la Web 1.0"
+
Esta página de preguntas frecuentes proporciona información sobre la recomendación W3C WACG 1.0. Es una traducción de Fact Sheet for "Web Content Accessibility Guidelines 1.0"
+
+ +
+
+
When authored according to these guidelines, XUL is capable of generating accessible user interfaces. Coders, reviewers, designers and QA engineers should be familiar with these guidelines.
+
+ +

Ver más...

+ 		+

Comunidad

+ +
    +
  • En la comunidad Mozilla... en inglés
    • +
+ +

{{ DiscussionList("support-accessibility", "mozilla.support.accessibility") }}

+ +

Ver más...

+ +

Herramientas

+ + + +

Ver más...

+ +

Temas relacionados

+ +
+
· Desarrollo Web · Desarrollando Mozilla ·
+
+
+ +
+

{{ Note(1) }} Definición de la Wikipedia

+ +

Categorias

+ +

Interwiki Language Links

+ +

{{ languages( { "en": "en/Accessibility", "fr": "fr/Accessibilit\u00e9", "ja": "ja/Accessibility", "pl": "pl/Dost\u0119pno\u015b\u0107" } ) }}

diff --git a/files/es/web/accessibility/understanding_wcag/index.html b/files/es/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..f58fae9c48 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,56 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accesibilidad/Understanding_WCAG +translation_of: Web/Accessibility/Understanding_WCAG +--- +

Esto es parte de un grupo de artículos que explican rápidamente los pasos necesario para cumplir con la normativa de W3C Web Content Accessibility Guides 2.0 o 2.1 (también conocida como WCAG).

+ +

La norma WCAG 2.0 y 2.1 provee unas guías detalladas para lograr que el contenido de nuestro sitio sea accesible para personas con distintos tipos de discapacidades. Es exhaustivo y muy detallado, por lo que cuesta comprenderlo rápidamente. Por esta razón, hemos resumido los pasos a seguir para que puedas cumplir con las diferentes recomendaciones e incluimos links al pie para más detalles en los lugares necesarios.

+ +

Los cuatro principios

+ +

La normativa WCAG tiene cuatro secciones, cuatro categorías en las cuales el contenido debe ser accesible (para más información puedes referirte a Understanding the Four Principles of Accessibility (inglés)).

+ +

Cada uno de los siguientes enlaces te llevarán a páginas en las que podrás expandir tu conocimiento en cada una de las áreas de WCAG 2.0 y 2.1.

+ + + +

Debo usar WCAG 2.0 o 2.1?

+ +

WCAG 2.1 es el estándar más reciente y relevante. Utilízalo para mejorar la calidad de navegación de los usuarios con discapacidades y para reducir las posibles acciones legales a los dueños del sitio web.

+ +

Al momento de asignar recursos, ten como objetivo WCAG 2.0, luego sube a 2.1.

+ +

¿Qué es WCAG 2.1?

+ +

WCAG 2.1 fue publicado el 5 de junio de 2018 como recomendación oficial. La Unión Europea (EU) lo adoptó como estándar en septiembre de ese mismo año. La W3C publicó un anuncio de prensa al respecto.

+ +

WCAG 2.1 incluye:

+ + + + + +

Esta guía tiene como objetivo proveer información para que puedas construir mejores sitios, más accesibles. Sin embargo, no somos abogados y nada de esto es un asesoramiento legal. Si estás preocupado/a por las implicaciones legales de la accesibilidad web recomendamos que investigues la legislación de tu país o que consultes a un abogado calificado.

+ +

¿Qué es la accesibilidad? y guías de accesibilidad y sobre la ley proveen más información al respecto (en inglés).

diff --git a/files/es/web/accessibility/understanding_wcag/keyboard/index.html b/files/es/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..239dd6727b --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,92 @@ +--- +title: Teclado (Keyboard) +slug: Web/Accesibilidad/Understanding_WCAG/Teclado +tags: + - Accesibilidad + - teclado +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +
Para ser completamente accesible, una página web debe ser operable por alguién utilizando únicamente un teclado para acceder y controlarla. Esto incluye usuarios de lectores de pantalla, pero también puede incluir a quienes tienen dificultades utilizando un dispositivo apuntador como un ratón o una bola de rastreo, o aquellos cuyo ratón no esta funcionando temporalmente, o la gente que simplemente prefiere usar un teclado como entrada siempre que les sea posible.
+ +

Los elementos enfocables deben tener una semántica interactiva

+ +

Si un elemento puede ser enfocado utilizando un teclado, entonces debería ser interactivo, es decir, el usuario debería ser capaz de hacer algo y producir un cambio de algún tipo (por ejemplo, activar un enlace o cambiar una opción).

+ +
+

Nota: Una excepción importante a esta regla es si el elemento tiene aplicado role="document", dentro un contexto interactivo (como un role="application"). En tal caso, enfocar el documento anidado es la única forma de devolver la tecnología de asistencia a un estado de no interactividad (comúnmente llamado "modo navegador").

+
+ +

La mayoría de los elementos son enfocables por defecto, y se puede hacer que un elemento sea enfocable al añadir el atributo tabindex=0. Sin embargo, sólo se debería añadir tabindex si el elemento también se hace interactivo, por ejemplo, definiendo los eventos de teclado apropiados para los manejadores de eventos.

+ +

Ver también

+ + + +

Evitar usar el atributo tabindex con un valor mayor a cero

+ +

El atributo tabindex indica que un elemento es enfocable utilizando el teclado. Un valor de cero indica que el elemento es parte del orden de enfoque normal, que está basado en el orden de los elementos en el documento HTML. Un valor positivo pone al elemento adelante de aquellos con el orden normal; elementos con valores positivos son enfocados en el orden del valor de tabindex (1, luego 2, después 3, etc.).

+ +

Esto genera una confusión para usuarios que solo usen el teclado cuando el orden del enfoque difiera al orden lógico de la página. Una mejor estrategia es estructurar el documento HTML para que los elementos enfocables estén es un orden lógico, sin la necesidad de reordenarlos con un valor positivo de tabindex.

+ +

Ver también

+ + + +

Los elementos a los que se les puede hacer click deben ser enfocables y deberían tener semánticas interactivas

+ +

Si a un elemento se le puede hacer click con un dispositivo apuntador, como un ratón, entonces también debería enfocable utilizando el teclado, y el usuario debería ser capaz de hacer algo al interactuar con este.

+ +

A un elemento se le puede hacer click si tiene in manejador de evento onclick definido. Se puede hacer enfocable al añadir un atributo-valor tabindex=0. Se puede hacer que se opere con un teclado al definir un manejador de evento onkeydown; en la mayoría de los casos, la acción tomada por el manejador de eventos debería ser la misma para los dos tipos de eventos

+ +

Ver también

+ + + +

Los elementos interactivos deben ser capaz de ser activos utilizando un teclado

+ +

Si el usuario puede interactuar con un elemento utilizando el tacto o un dispositivo apuntador, entonces el elemento debería ser también capaz de interactuar con el teclado, Es decir, si hay manejadores de evento definidos para los eventos al tacto y al hacer click, también debería haber manejadores de eventos para el teclado. Los manejadores de eventos para el teclado deberían realizar la misma interacción que sus contrapartes con el tacto y al hacer click.

+ +

Ver también

+ + + +

Los elementos interactivos deben ser enfocables

+ +

Si el usuario puede interactuar con un elemento (por ejemplo, usando el tacto o con un dispositivo apuntador) entonces debería ser enfocable utilizando el teclado. Puede hacerse enfocable al añadirle el atributo-valor tabindex=0. Eso añadirá el elemento a la lista de elementos que pueden ser enfocados al presionar la tecla Tab, en la secuencia en que dichos elementos se encuentran definidos en el documento HTML.

+ +

Ver también

+ + + +

Elementos enfocables deben tener un estilo al estar enfocados

+ +

Cualquier elemento que pueda recibir el enfoque desde el teclado, debería tener un estilo visible que indique cuando el elemento esta enfocado. Se puede hacer esto con la pseudo-clase de CSS :focus.

+ +

Elementos enfocables estándar como enlaces y los campos de entrada reciben un estilo especial por parte del navegador de forma predeterminada, por lo que podría no ser necesario especificar un estilo de enfoque para éstos, a menos que se quiera que el estilo de enfoque sea más distintivo.

+ +

Si se crean componentes enfocables, se debe estar seguro de que también se defina el estilo de enfoque para éstos.

+ +

If you create your own focusable components, be sure that you also define focus styling for them.

+ +

Ver también

+ + diff --git a/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html new file mode 100644 index 0000000000..2db0f4e251 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html @@ -0,0 +1,162 @@ +--- +title: Contraste del color +slug: Web/Accesibilidad/Understanding_WCAG/Perceivable/Color_contraste +tags: + - Accesibilidad + - Perceptible + - contraste +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +--- +

El contraste del color entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.

+ +

Al diseñar interfaces legibles para diferentes capacidades de visión, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipo de contenidoRelación mínima (nivel AA)Relación mejorada (nivel AAA)
Cuerpo de texto4.5 : 17 : 1
Texto a gran escala (120-150% mayor que el cuerpo de texto)3 : 14.5 : 1
Componentes activos de la interfaz de usuario y objetos gráficos como iconos y gráficos3 : 1No definido
+ +

Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.

+ +

Consulta la sección {{anch("Solución")}} a continuación para obtener más información.

+ +

Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las áreas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles.  

+ +

Es bueno tener un diseño atractivo en tu sitio web, pero el diseño es inútil si tus usuarios no pueden leer el contenido.

+ +

Ejemplos

+ +

Veamos algunos ejemplos simples con código HTML y CSS:

+ +
<div class="good">Buen contraste</div>
+<div class="bad">Mal contraste</div>
+ +
div {
+  /* General div styles here */
+}
+
+.good {
+  background-color: #fae6fa;
+}
+
+.bad {
+  background-color: #400064;
+}
+ +

Ambos fragmentos de texto tienen color negro por defecto. El <div> "good" tiene un color de fondo púrpura claro, lo que hace que el texto sea fácil de leer:

+ + + +

{{EmbedLiveSample('example1', '100%', '100')}}

+ +

El <div> "bad", por otro lado, tiene un color de fondo púrpura muy oscuro, lo que hace que el texto sea mucho más difícil de leer:

+ + + +

{{EmbedLiveSample('example2', '100%', '100')}}

+ +
+
+ +

Solución

+ +

Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu diseño — preferiblemente elige el nivel AAA (ver 1.4.6 más abajo), pero al menos cumple con el nivel AA (ver 1.4.3 más abajo).

+ +

Si incluyes contenido no textual, como vídeo o animación, debes seguir 1.4.11 (nuevamente, ver más abajo).

+ +

Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como Color Contrast Checker de WebAIM.

+ +

También puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox— ver nuestra guía Accessibility inspector, y en particular la sección Check for accessibility issues. Prueba a usarlo en los ejemplos en vivo en la sección de descripción.

+ +

Criterios de conformidad relacionados con WCAG

+ +
+
1.4.3 Contraste mínimo (AA)
+
El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel mínimo para garantizar la legibilidad: +
    +
  • El texto y el fondo deben tener una relación de contraste de al menos 4.5:1.
    • +
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 3:1. El texto más grande se define como de al menos 18pt, o 14pt en negrita.
    • +
+
+
1.4.6 Contraste mejorado (AAA)
+
Esto sigue y se basa en el criterio 1.4.3. +
    +
  • El texto y el fondo deben tener una relación de contraste de al menos 7:1.
    • +
  • Los encabezados (o simplemente el texto más grande) deben tener una relación de contraste de al menos 4.5:1.
    • +
+
+
1.4.11 Contraste no textual (AA) (añadido en 2.1)
+
Debe haber una relación mínima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gráficos.
+
+ +

Ver también

+ + diff --git a/files/es/web/accessibility/understanding_wcag/perceivable/index.html b/files/es/web/accessibility/understanding_wcag/perceivable/index.html new file mode 100644 index 0000000000..6bf99039f8 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/perceivable/index.html @@ -0,0 +1,336 @@ +--- +title: Perceivable +slug: Web/Accesibilidad/Understanding_WCAG/Perceivable +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +

Este artículo ofrece consejos prácticos sobre cómo hacer que tu sitio web cumpla con los criterios de Percepción de WCAG 2.0 y 2.1. Los estados perceptivos que los usuarios deben poder reconocer utilizando alguno de sus sentidos.

+ +
+

Nota: Para leer las definiciones de la W3C sobre Percepción y las guías para cumplir con los criterios dirígete a Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

+
+ +

Pauta 1.1 — Dar alternativas de texto para contenido no textual.

+ +

La clave aquí es convertir el texto a otros formatos que puedan ser entendidos por personas con otras capacidades; ya sea si utilizan un screen-reader, zoom o un lector de braille. El contenido no textual se refiere a elementos multimedia como imágenes, audio y vídeo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterio de éxitoCómo cumplirRecursos prácticos
1.1.1 Alternativas textuales  (A)Toda imagen que sea útil para el usuario debe tener un texto alternativo.Texto alternativo.
+

Las imágenes complejas o gráficos deben tener una alternativa accesible, ya sea en al misma página o en una externa. Utiliza un elemento de link en vez del atributo longdesc.

+ 		+

Una alternativa textual o una tabla puede resolverlo (ver HTML table advanced features and accessibility y Other text alternative mechanisms para leer sobre el argumento en contra de longdesc.

+
El contenido multimedia (por ejemlo, audio o vídeo) debería tener por lo menos una descripción accesible disponible (captions o similar). +

Ver alternativas de texto para opciones de captions, y Audio transcripts, Video text tracks o Other multimedia content para otras alternativas.

+
Los elementos de interfaz como botones o elementos de formulario deberán tener labels que describan su propósito.Deberás asegurarte de que los botones describan su función (por ejemplo, <button>Subir imagen</button>). Para más información ver UI controls.
+

Implementa elementos decorativos (imágenes o vídeos) de manera que sea invisibles para lectores de pantalla, de esta forma evitarás confundir a estos usuarios.

+ 		+

Las imágenes decorativas deben ser implementadas utilizando la propiedad background-image. Si debes incluir una imagen con la etiqueta {{htmlelement("img")}} deberás agregarle un atributo alt vacío, de otra manera los lectores de pantalla podrían leerlo.

+ +

Si incluyes un vídeo o audio en tu sitio que se reproduce automáticamente intenta de que sea lo menos molesto posible. No hagas que se vea ni actúe como contenido y provee una forma de apagarlo.

+
+ +
+

Nota: Ver también WCAG description for Guideline 1.1: Text alternatives.

+
+ +

Pauta 1.2 — Proporcionar alternativas para los medios tempo-dependientes.

+ +

Los medios tempo-dependientes se refieren a multimedia con una duración (audio y vídeo, por ejemplo). Ten en cuenta que si este contenido multimedia funciona como una alternativa a un contenido textual no necesitas proveer otra alternavtiva.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterio de éxitoCómo cumplirRecursos prácticos
1.2.1 Provee alternativas para multimedia de solo audio o solo vídeo (A)A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provee captions para los vídeos (A)You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
+

1.2.3 Provee texto alternativo o una descripción para el audio del vídeo (A)

+ 		You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provee captions para audio en vivo (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provee descripciones de adio para vídeo pre-grabado (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provee lenguaje de signos equivalente a el audio pre-grabado (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provee un vídeo extendido con descripciones de audio (AAA)Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions). 
1.2.8 Provee una alternativa para los elementos multimedia pre-grabados (AAA)For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
1.2.9 Provee una transcripción para el audio en vivo (AAA)For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.See Audio transcripts for transcript information.
+ +
+

Nota: Ver también la descripción de WCAG Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

+
+ +

Pauta 1.3 — Crear contenido que pueda presentarse de diferentes formas

+ +

Esta pauta hace referencia a la posibilidad de que todo contenido pueda ser consumido de distintas formas, adaptándose a las necesidades del usuario.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterios de éxitoCómo cumplirRecursos prácticos
1.3.1 Info and relationships (A) +

Any content structure — or visual relationship made between content —  can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:

+ +
    +
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • +
  • Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. alt text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.
    • +
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • +
+ 		The whole of +

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

+
1.3.2 Meaningful content sequence (A)A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) +

Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:

+ +
    +
  • "Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.
    • +
  • "Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.
    • +
  • "Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.
    • +
+ +
+

Note: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

+
+ 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. +

Understanding Orientation 

+
1.3.5 Identify Input Purpose (AA) added in 2.1 +

 

+ +

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

+ 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
+ +
+

Nota: Ver también la descripción de WCAG: Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.

+
+ +

Pauta 1.4: Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo

+ +

Esta pauta tiene como objetivo la creación de contenido que sea fácil de diferenciar del fondo y otras decoraciones. El ejemplo clásico es sobre color (tanto en relación al contraste como utilizarlo para transmitir información), pero aplica también en otras situaciones.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Criterios de éxitoCómo cumplirRecursos prácticos
1.4.1 Use of color (A) +

Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.

+ 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) +

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

+ +
    +
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		See Color and color contrast.
1.4.4 Resize text (AA)The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible. 
1.4.5 Images of text (AA)Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images. 
1.4.6 Enhanced contrast (AAA) +

This follows, and builds on, criterion 1.4.3.

+ +
    +
  • Text and its background should have a contrast ratio of at least 7.1.
    • +
  • Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.
    • +
+ 		 
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) +

For text content presentation, the following should be true:

+ +
    +
  • Foreground and background colors should be user-selectable.
    • +
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • +
  • Text should not be fully justified (e.g. text-align: justify;)
    • +
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • +
  • When the text size is doubled, the content should not need to be scrolled.
    • +
+ 		 
1.4.9 Images of text (No Exception) (AAA)Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way. 
1.4.10 Reflow (AA) added in 2.1 +
    +
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • +
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • +
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • +
+ 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 +

No loss of content or functionality occurs when the following styles are applied: 

+ +
    +
  • Line height (line spacing) to at least 1.5 times the font size;
    • +
  • Spacing following paragraphs to at least 2 times the font size;
    • +
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • +
  • Word spacing to at least 0.16 times the font size.
    • +
+ 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 +

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +
    +
  • dismissable (can be closed/removed)
    • +
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • +
  • persistent (the additional content does not disappear without user action)
    • +
+ 		Understanding Content on Hover or Focus
+ +
+

Nota: Ver también la descripción de WCAG: Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background..

+
diff --git a/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html b/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html new file mode 100644 index 0000000000..ffaade2cb1 --- /dev/null +++ b/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html @@ -0,0 +1,266 @@ +--- +title: Etiquetas de texto y nombres +slug: Web/Accesibilidad/Understanding_WCAG/Etiquetas_de_texto_y_nombres +tags: + - Accesibilidad + - Etiquetas de texto + - WCAG +translation_of: Web/Accessibility/Understanding_WCAG/Text_labels_and_names +--- +

Hay muchas situaciones en las cuales un control, dialogo o cualquier otra característica de un sitio web deberían recibir un nombre o etiqueta descriptiva para permitir a los usuarios de técnologías asistivas entender cual es su propósito y ser capaz de entenderlo y operarlo correctamente. Hay un número de diferentes tipos de problemas en esta categoría, dependientes del contexto, y cada uno tiene su propia solución. Los diferentes problemas y soluciones son discutidas en las secciones posteriores.

+ +

Utilizar el atributo alt para etiquetar elementos que ocupen un área que tiene el atributo href

+ +

En mapas de imágenes, cada elemento {{htmlelement("area")}} con un atributo alt definiendo un nombre que describa el recurso al que enlaza el area. Fallar al hacer eso provoca que un mapa de imagen sea difícil de usar para usuarios que usen tecnología asistiva — ellos necesitan texto alternativo para ser capaces de entender el propósito de una imagen.

+ +

Ejemplos

+ +

El siguiente ejemplo muestra un simple mapa de imagen (tomada de H24: Providing text alternatives for the area elements of image maps):

+ +
<img src="welcome.gif" usemap="#map1"
+    alt="Areas in the library. Select an area for
+more information on that area." />
+<map id="map1" name="map1">
+  <area shape="rect" coords="0,0,30,30"
+    href="reference.html" alt="Reference" />
+  <area shape="rect" coords="34,34,100,100"
+    href="media.html" alt="Audio visual lab" />
+</map>
+ +

Ver la página de referencia del elemento <area> para unu ejemplo interactivo.

+ +

Ver también

+ + + +

Los diálogos deberían ser etiquetados

+ +

Para cualquier contenedor cuyo contenido actue como una caja de diálogo (por ejemplo, un modal preguntando al usuario realizar una elección o responder a una acción siendo tomada), debe tener una etiqueta descriptiva o nombre, para que la tecnología asistiva le permita al usuario descrubir fácilmente cual es su propósito.

+ +

Una caja de diálogo es generalmente denominada con un ARIA role="dialog" o role="alertdialog"; se puede usar tanto el atributo aria-label o aria-labelledby para proporcionar una etiqueta.

+ +

Ejemplos

+ +

El siguiente ejemplo muestra una caja de dialogo sencilla, definida como role="dialog" y etiquetada con aria-labelledby.

+ +
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
+  <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
+  <button>Close</button>
+</div>
+ +

Si la caja de diálogo no tiene un encabezado, se puede usar aria-label para contener la etiqueta de texto:

+ +
<div role="dialog" aria-label="Personal details updated confirmation">
+  <p>Your personal details were successfully updated. You can
+    change your details at any time in the user account section.</p>
+  <button>Close</button>
+</div>
+ +

Ver también

+ + + +

Los documentos deben tener un título

+ +

Es importante que cada documento HTML, incluya un elemento {{htmlelement("title")}} que describa el propósito de la página. Una técnica común de navegación para usuarios que usan tecnologías asistivas es inferir el contenido de la página leyendo su título. Si no hay título disponible, tienen que navegar por la página para determinar su contenido, lo cual puede ser un proceso largo y confuso.

+ +

Ejemplos

+ +

El título para el artículo de refencia sobre el elemento {{htmlelement("title")}} es como sigue:

+ +
<title>&lt;title&gt;: The Document Title element - HTML: Hypertext Markup Language | MDN</title>
+ +

Otro ejemplo podría ser:

+ +
<title>Fill in your details to register — myGov services</title>
+ +

Para ayudar al usuario, se puede actualizar el titulo de la página para reflejar cambios significativos al estado de la página (como problemas en la validación de un formulario):

+ +
<title>2 errors — Fill in your details to register — myGov services</title>
+ +

Ver también

+ + + +

Contenido incrustado debe ser etiquetado

+ +

Asegurarse que elementos que incrusten contenido tengan un atributo título que describa el contenido incrustado. Esto incluye al elemento {{htmlelement("embed")}} y al elemento {{htmlelement("object")}}. Estos elementos son usualmente definidos por un contenido gráfico, similar a un elemento {{HTMLelement("img")}}. Un título descriptivo ayuda a los usuarios de tecnologías asistivas entender que muestra el elemento.

+ +

Figuras con leyendas opcionales deberían ser etiquetadas

+ +

Para una mejor accesibilidad, incluir un {{HTMLElement("figcaption")}} dentro de un elemento {{HTMLElement("figure")}}, incluso si hacerlo es opcional técnicamente. La leyenda es adicional a cualquier texto alternativo en las imágenes dentro de la figura. La leyenda describe el proósito de una figura en el documento, que puede ser diferente de una descripción sencilla de un elemento visual, tal como lo proporciona el texto alternativo.

+ +

Ejemplo

+ +

El siguiente ejemplo muestra código para una figura con un pie de página. El atributo alt del elemento {{htmlelement("img")}} describe la apariencia de la imagen; el elemento {{htmlelement("figcaption")}} lo describe desde una perspectiva funcional (en este caso, el nombre en latín de la flor de la imagen).

+ +
<figure>
+  <img src="milkweed.jpg"
+      alt="Black and white close-up photo of milkweed flowers">
+ <figcaption>Asclepias verticillata</figcaption>
+</figure>
+
+ +

Los elementos de un conjuto campos deben ser etiquetados

+ +

Los elementos de un conjunto de campos (fieldset) deben tener un texto descriptivo, similar a otros elementos del formulario. Utilice el elemento {{htmlelement("legend")}} para describir el propósito de un conjunto de campos (fieldset).

+ +

Utilizar una leyenda para etiquetar un conjunto de campos

+ +

Al agrupar un conjunto de elementos de un formulario con un elemento {{htmlelement("fieldset")}}, se debería incluir un elemento {{htmlelement("legend")}} anidado dento de éste, conteninedo una clara descripción del grupo.

+ +

Usuarios de tecnologías asistivas encuentras esta descripción útil cuando tratan de entender el propósito del grupo. Sin la leyenda, tienen que navegar individualmente por todos los controles del formulario en el grupo para inferir una idea del propósito general, lo que puede resultar confuso.

+ +

Ejemplo

+ +
<form>
+  <fieldset>
+    <legend>Choose your favorite monster</legend>
+
+    <input type="radio" id="kraken" name="monster">
+    <label for="kraken">Kraken</label><br/>
+
+    <input type="radio" id="sasquatch" name="monster">
+    <label for="sasquatch">Sasquatch</label><br/>
+
+    <input type="radio" id="mothman" name="monster">
+    <label for="mothman">Mothman</label>
+  </fieldset>
+</form>
+ +

Puede ver un ejemplo interactivo en la página de referencia de <fieldset>.

+ +

Ver también

+ + + +

Los elementos de un formulario deben estar etiquetados

+ +

Todos los elementos dentro de un formulario deben tener un elemento {{htmlelement("label")}} que identifique su propósito. Esto aplica a todos los tipos de elementos {{htmlelement("input")}}, como también para elementos {{htmlelement("button")}}, {{htmlelement("output")}}, {{htmlelement("select")}}, {{htmlelement("textarea")}}, {{htmlelement("progress")}} y {{htmlelement("meter")}}, como para cualquier elemento con el ARIA role switch.

+ +

El elemento del formulario puede ser puesto dentro de un elemento {{htmlelement("label")}}, en cuyo caso la asociación entre el elemento del formulario y la etiqueta es obvia por la estructura. O, se puede crear una asociación entre un {{htmlelement("label")}} y el elemento del formulario al especificar el valor id del elemento del formulario y el valor del atributo for de la etiqueta.

+ +

Ejemplos

+ +
<label>I agree to the terms and conditions.
+  <input type="checkbox" id="terms">
+</label>
+
+<input type="checkbox" id="emailoptin">
+<label for="emailoptin">Yes, please send me news about this product.</label>
+
+ +

Los elementos de un formulario deberían tener una etiqueta de texto visible

+ +

En adición a tener un elemento {{htmlelement("label")}} para cada elemento del formulario, estas etiquetas deberían ser visibles, no ocultarse. Las etiquetas visbles ayudan a todos los usuarios entender el propósito de un elemento de formulario. No dependa de un texto temporal porque éste desaparece tan pronto como el usuario empieza a escribir.

+ +

Los elementos marco ('frame') deben estar etiquetados

+ +

Los elementos marco ('frame'), tanto {{htmlelement("iframe")}} como el obsoleto y antiguo {{htmlelement("frame")}}, deben tener un título para describir el contenido del marco. Utilice el atributo title para etiquetar un elemento 'frame'. Sin un título, los usuarios que usen una tecnología asistiva tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

+ +

El elemento <frame> ya no forma parte de la especificación HTML en la versión HTML5. El soporte podría ser abandonado por los navegadores en el futuro. Además, es difícil para los lectores de pantalla el navegar páginas con elementos <frame>. Para una mejor accesibilidad y mantenimiento futuro, se debe rediseñar cualquier página que use marcos y reemplazarlos con el uso de CSS para lograr un diseño similar.

+ +

Como una mejor práctica, también proporcionar un {{htmlelement("title")}} para el documento que esta encapsulado en el marco, con un contenido identico al atributo title del marco. (Esto asumiendo que el documento encapsulado esta en control de uno, si no, tratar de coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y más accesible el proporcionar el mismo título en ambos lugares.

+ +

Ejemplos

+ +
<iframe
+    title="MDN Web docs"
+    width="300"
+    height="200"
+    src="https://developer.mozilla.org">
+</iframe>
+
+
+ +

Usar el atributo alt para etiquetar elementos mglyph

+ +

Al escribir ecuaciones con MathML, a cada elemento {{mathmlelement("mglyph")}} se le debe asignar el atributo alt conteniendo un nombre que describa el símbolo. Puesto que los elementos mglyph son usados para símbolos no estándar sin definiciones Unicode, los lectores de pantalla no serán capaces de automáticamente nombrarlos. El texto alternativo ayuda a los usuarios de lectores de pantalla entender el símbolo.

+ +

Los encabezados deben ser etiquetados

+ +

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none o aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento.

+ +

Además, es importante usar los elementos de encabezado sólo para los encabezados de sección reales, y no como una forma rápida de hacer que el texto se destaque. Los lectores de pantalla suelen "hojear" los encabezados de una página, de manera muy parecida a los usuarios con visión, el texto que no sea encabezado que se marca con elementos de encabezamiento puede causar confusión.

+ +

Los encabezados deberían tener contenido de texto visible

+ +

Asegurarse que los encabezados tengan un contenido no vacío y no estén ocultos como con el CSS display:none or aria-hidden=true. Los usuarios de lectores de pantalla confían en los encabezados para entender la estructura y el contenido de un documento. No use encabezados para marcar imágenes u otro contenido gráfico.

+ +

Utilizar el atributo title para describir el contenido de un <iframe>

+ +

Asegurarse que los elementos {{htmlelement("iframe")}} tienen un atributo title para describir el contenido de un marco. Sin un título, los usuarios de tecnologías asistivas tienen que navegar dentro del marco para entender que contiene, lo que puede ser difícil y confuso. 

+ +

Una mejor práctica consiste en proveer un {{htmlelement("title")}} al documento encapsulado por el marco, con un contenido identico al atributo title del marco. (Asumiendo que el documento encapsulado es propio, si no, tratar de hacer coincidir el atributo title del marco con el título del documento.) Algunos lectores de pantalla reemplazan el contenido del atributo title con el contenido del {{htmlelement("title")}} del documento encapsulado. Es más seguro y accesible definir el mismo título en ambos lugares.

+ +

Contenido con imágenes deben ser etiquetados

+ +

Proporcionar un texto descriptivo para todas las imágenes y elementos parecidos a imágenes que tengan contenido (es decir que no sean decorativos. Esto incluye imágenes SVG, elementos {{htmlelement("img")}}, {{htmlelement("canvas")}}, {{htmlelement("map")}}, y {{htmlelement("area")}}, así como elementos {{htmlelement("input")}} donde este definido type=image y elementos {{htmlelement("object")}} donde el type empiece con image/. La forma típica de hacer esto es con el atributo alt. Asegurarse de que la descripción trasmite lo que muestra la imagen

+ +

Ejemplo

+ +
<img src="milkweed.jgp"
+     alt="Black and white close-up photo of milkweed flowers">
+ +

Elementos interactivos deben ser etiquetados

+ +

Si un elemento esta destinado para que los usuarios interactúen con él, debe estar etiquetado. Los elementos interactivos incluyen enlaces ({{htmlelement("a")}}), elementos de un formulario, botones, y cualquier elemento que tenga manejadores de eventos para ratón o teclado. La forma para etiquetar un elemento depende de su tipo: para elementos de un formulario, utilizar un {{htmlelement("label")}}; para enlaces, botones y elementos sobre los que se puede hacere click, el contenido del texto del elemento suele proporcionar la etiqueta. Si no existe otra opción para etiquetar un elemento, utilizar el atributo aria-label.

+ +

Usar el atributo label en elementos optgroup

+ +

En un elemento {{htmlelement("optgroup")}}, utilizar el atributo label para describir el gupo para que tecnologías asistivas puedan acceder a dicha descripción para sus usuarios.

+ +

Ejemplo

+ +

En este ejemplo, el atributo label en los elementos <optgroup> da un nombre de categoría para el grupo de opciones.

+ +
<label for="dino-select">Choose a dinosaur:</label>
+<select id="dino-select">
+    <optgroup label="Theropods">
+        <option>Tyrannosaurus</option>
+        <option>Velociraptor</option>
+        <option>Deinonychus</option>
+    </optgroup>
+    <optgroup label="Sauropods">
+        <option>Diplodocus</option>
+        <option>Saltasaurus</option>
+        <option>Apatosaurus</option>
+    </optgroup>
+</select>
+ +

Las barras de herramientas deben ser etiquetadas cuando haya más de una barra

+ +

Si se define más una barra de herramientas en una aplicación web utilizando el rol ARIA toolbar, se debe usar el atributo aria-label para etiquetar cada una de ellas de manera que pueda ser descrita por la tecnología de asistencia. Es una buena práctica etiquetar una barra de herramientas aún cuando solo haya una en la página

+ +

Ver también

+ + + +

Criterios de aprobación relacionados a WCAG

+ +
+
1.1.1 Contenido no textual (A)
+
Todo contenido no textual que es presentado al usuario tiene un texto alternativo que sirve un propósito similar, excepto para las situaciones listadas en el enlace anterior.
+
2.4.4 Propósito del enlace (en contexto) (A)
+
El propósito de cada enlace puede determinarse a partir del texto del enlace o del texto del enlace en conjunto con contexto determinado programáticamente, salvo cuando el propósito del enlace sea ambiguo para los usuarios en general.
+
2.4.9 Propósito del enlace (sólo el enlace) (AAA)
+
Se dispone de un mecanismo que permite identificar el propósito de cada enlace a partir del texto del enlace solamente, excepto cuando el propósito del enlace es ambiguo para los usuarios en general.
+
diff --git "a/files/es/web/api/animation/animaci\303\263n/index.html" "b/files/es/web/api/animation/animaci\303\263n/index.html" deleted file mode 100644 index 770036b76d..0000000000 --- "a/files/es/web/api/animation/animaci\303\263n/index.html" +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Animation() -slug: Web/API/Animation/Animación -tags: - - Animacion -translation_of: Web/API/Animation/Animation ---- -

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

- -

El constructor Animation() de Web Animations API devuelve una instancia del objeto Animation.

- -

Sintaxis

- -
var animation = new Animation([effect][, timeline]);
- -

Parámetros

- -
-
effect {{optional_inline}}
-
El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como SequenceEffect o GroupEffect, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser null (valor por defecto) para indicar que no debe aplicarse ningún efecto.
-
timeline {{optional_inline}}
-
Especifica el  timeline con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en null.
-
- -

Ejemplos

- -

En el ejemplo Follow the White Rabbit , el constructor Animation() es usado para crear una Animation para el rabbitDownKeyframes utilizando el timeline del documento:

- -
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
-
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

Compatibilidad del navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de dom.animations-api.core.enabled en true, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en false.

- -

Ver también

- - diff --git a/files/es/web/api/animation/animation/index.html b/files/es/web/api/animation/animation/index.html new file mode 100644 index 0000000000..770036b76d --- /dev/null +++ b/files/es/web/api/animation/animation/index.html @@ -0,0 +1,106 @@ +--- +title: Animation() +slug: Web/API/Animation/Animación +tags: + - Animacion +translation_of: Web/API/Animation/Animation +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations API") }}

+ +

El constructor Animation() de Web Animations API devuelve una instancia del objeto Animation.

+ +

Sintaxis

+ +
var animation = new Animation([effect][, timeline]);
+ +

Parámetros

+ +
+
effect {{optional_inline}}
+
El efecto objetivo, es un objeto de la interfaz {{domxref("AnimationEffectReadOnly")}} ,para asignarlo a la animación. Aunque en el futuro podrían ser asignados otros efectos como SequenceEffect o GroupEffect, el único efecto disponible actualmente es {{domxref("KeyframeEffect")}}. Este puede ser null (valor por defecto) para indicar que no debe aplicarse ningún efecto.
+
timeline {{optional_inline}}
+
Especifica el  timeline con el que asociar la animación, como un objeto de tipo basado en la interfaz {{domxref("AnimationTimeline")}} . Actualmente el único tipo de línea de tiempo disponible es {{domxref("DocumentTimeline")}}, pero en el futuro habrá lineas de tiempo asociadas , por ejemplo, con gestos o desplazamiento. El valor por defecto es {{domxref("Document.timeline")}}, pero puede ser establecido en null.
+
+ +

Ejemplos

+ +

En el ejemplo Follow the White Rabbit , el constructor Animation() es usado para crear una Animation para el rabbitDownKeyframes utilizando el timeline del documento:

+ +
var rabbitDownAnimation = new Animation(rabbitDownKeyframes, document.timeline);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-animation', 'Animation()' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile(48)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada de manera predeterminada en Firefox Developer Edition y Nightly builds. Puedes habilitarla en compilaciones de lanzamiento estableciendo la preferencia de dom.animations-api.core.enabled en true, y puede desactivarse en cualquier versión de Firefox estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/currenttime/index.html b/files/es/web/api/animation/currenttime/index.html new file mode 100644 index 0000000000..acd56f9170 --- /dev/null +++ b/files/es/web/api/animation/currenttime/index.html @@ -0,0 +1,114 @@ +--- +title: Animation.currentTime +slug: Web/API/Animation/tiempoActual +tags: + - Animacion +translation_of: Web/API/Animation/currentTime +--- +

{{APIRef("Web Animations")}}{{SeeCompatTable}}

+ +

La propiedad Animation.currentTime de la Web Animations API devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

+ +

Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por currentTime es null.

+ +

Sintaxis

+ +
var currentTime = Animation.currentTime;
+Animation.currentTime = newTime;
+ +

Valor

+ +

Un número que representa el tiempo actual en milisegundos, o null para desactivar la animación.

+ +

Ejemplos

+ +

En el juego Drink Me/Eat Me , la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el currentTime (tiempoActual) a la mitad de la duración total delKeyframeEffect:

+ +
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
+ +

Un modo más genérico para encontrar la marca del 50% en una animación sería :

+ +
animation.currentTime =
+  animation.effect.getComputedTiming().delay +
+  animation.effect.getComputedTiming().activeDuration / 2;
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia dom.animations-api.core.enabled en true, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/finished/index.html b/files/es/web/api/animation/finished/index.html new file mode 100644 index 0000000000..5d321ba012 --- /dev/null +++ b/files/es/web/api/animation/finished/index.html @@ -0,0 +1,120 @@ +--- +title: Animation.finished +slug: Web/API/Animation/terminado +tags: + - API + - Animacion + - Animaciones Web + - Experimental + - Reference +translation_of: Web/API/Animation/finished +--- +

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

+ +

La propiedad de solo-lectura de Animation.finished de la  Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.

+ +
+

Una vez que la reproducción de la animación abandona el estado  finished  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo Promise es creado para esta propiedad. El nuevo Promise será resuelto cuando se haya completado la actual secuencia de la animación.

+
+ +

Sintaxis

+ +
var animationsPromise = Animation.finished;
+
+ +

Valor

+ +

Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.

+ +

Ejemplos

+ +

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento elem hayan terminado, después elimina el elemento del arbol del DOM:

+ +
Promise.all(
+  elem.getAnimations().map(
+    function(animation) {
+      return animation.finished
+    }
+  )
+).then(
+  function() {
+    return elem.remove();
+  }
+);
+ +

Especificaciones

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
+ +

Compatibilidad del navegador

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

+ +

Ver también

+ + diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/terminado/index.html deleted file mode 100644 index 5d321ba012..0000000000 --- a/files/es/web/api/animation/terminado/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Animation.finished -slug: Web/API/Animation/terminado -tags: - - API - - Animacion - - Animaciones Web - - Experimental - - Reference -translation_of: Web/API/Animation/finished ---- -

{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}

- -

La propiedad de solo-lectura de Animation.finished de la  Web Animations API devuelve un {{jsxref("Promise")}} que se resuelve una vez que la animación a terminado de reproducirse.

- -
-

Una vez que la reproducción de la animación abandona el estado  finished  ( es decir, la reproducción se está ejecutando otra vez ), Un nuevo Promise es creado para esta propiedad. El nuevo Promise será resuelto cuando se haya completado la actual secuencia de la animación.

-
- -

Sintaxis

- -
var animationsPromise = Animation.finished;
-
- -

Valor

- -

Un objeto {{jsxref("Promise")}} que se resuelve cuando haya finalizado la reproducción de la animación.

- -

Ejemplos

- -

El siguiente código espera a que todas las animaciones que se ejecutan en el elemento elem hayan terminado, después elimina el elemento del arbol del DOM:

- -
Promise.all(
-  elem.getAnimations().map(
-    function(animation) {
-      return animation.finished
-    }
-  )
-).then(
-  function() {
-    return elem.remove();
-  }
-);
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-finished', 'Animation.finished' )}}{{Spec2('Web Animations')}}Editor's draft.
- -

Compatibilidad del navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta y de lanzamiento estableciendo la preferencia dom.animations-api.core.enabled en true, y puedes deshabilitarlo en cualquier versión de Firefox estableciendo esta propiedad en false.

- -

Ver también

- - diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/tiempoactual/index.html deleted file mode 100644 index acd56f9170..0000000000 --- a/files/es/web/api/animation/tiempoactual/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: Animation.currentTime -slug: Web/API/Animation/tiempoActual -tags: - - Animacion -translation_of: Web/API/Animation/currentTime ---- -

{{APIRef("Web Animations")}}{{SeeCompatTable}}

- -

La propiedad Animation.currentTime de la Web Animations API devuelve y establece el valor del tiempo de la animación en milisegundos, tanto si se está ejecutando como en pausa.

- -

Si la animación carece de un {{domxref("AnimationTimeline", "timeline")}}, está inactiva, o no ha sido reproducida todavía, el valor devuelto por currentTime es null.

- -

Sintaxis

- -
var currentTime = Animation.currentTime;
-Animation.currentTime = newTime;
- -

Valor

- -

Un número que representa el tiempo actual en milisegundos, o null para desactivar la animación.

- -

Ejemplos

- -

En el juego Drink Me/Eat Me , la altura de Alicia está animada, por lo que puede cambiar de pequeña a grande y de grande a pequeña. Al inicio del juego, su altura de fija estableciendo el currentTime (tiempoActual) a la mitad de la duración total delKeyframeEffect:

- -
aliceChange.currentTime = aliceChange.effect.timing.duration / 2;
- -

Un modo más genérico para encontrar la marca del 50% en una animación sería :

- -
animation.currentTime =
-  animation.effect.getComputedTiming().delay +
-  animation.effect.getComputedTiming().activeDuration / 2;
- -

Especificaciones

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Animations', '#dom-animation-currenttime', 'currentTime')}}{{Spec2("Web Animations")}} 
- -

Compatibilidad del navegador

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(39.0)}}{{CompatGeckoMobile(48)}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(39.0)}}
-
- -

[1] La Web Animations API solo está habilitada por defecto en Firefox Developer Edition y Nightly builds. Puedes habilitarlo en versiones Beta estableciendo la preferencia dom.animations-api.core.enabled en true, y puede ser deshabilitado en cualquier versión de Firefox, estableciendo esta preferencia en false.

- -

Ver también

- - diff --git a/files/es/web/api/api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/index.html deleted file mode 100644 index 26a858d254..0000000000 --- a/files/es/web/api/api_de_almacenamiento_web/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: API de almacenamiento web -slug: Web/API/API_de_almacenamiento_web -tags: - - API - - API de almacenamiento web - - Almacenamiento web - - Storage - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API ---- -

{{DefaultAPISidebar("Web Storage API")}}

- -

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

- -

Almacenamiento web, conceptos y uso

- -

Los dos mecanismos en el almacenamiento web son los siguientes:

- - - -

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

- -
-

Nota: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene deshabilitadas las cookies de terceros (Firefox implementa este comportamiento a partir de la versión 43).

-
- -
-

Nota: El almacenamiento web no es lo mismo que mozStorage (interfaces Mozilla's XPCOM para SQLite) o la Session store API (una utilidad de almacenamiento XPCOM usada por extensiones).

-
- -

Interfaces de almacenamiento web

- -
-
{{domxref("Storage")}}
-
Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.
-
{{domxref("Window")}}
-
La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).
-
{{domxref("StorageEvent")}}
-
El evento storage se dispara en el objeto Window de un documento cuando un área de la memoria cambia.
-
- -

Ejemplos

- -

Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado Demo de almacenamiento web. La página de inicio proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

- -

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}} 
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracteristicaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

- -
-

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

-
- - - -

La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.

- -

La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.

- -

Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a esta entrada de blog WHATWG que trata específicamente con este tema.

- -

Ver también

- - diff --git a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html b/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html deleted file mode 100644 index 086af18610..0000000000 --- a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: Usando la API de almacenamiento web -slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web -tags: - - API - - API de almacenamiento web - - Guía - - localStorage - - sessionStorage -translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API ---- -
{{DefaultAPISidebar("Web Storage API")}}
- -
-

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

- -

Este artículo proporciona una guía general de cómo usar esta tecnología.

-
- -

Conceptos básicos

- -

Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:

- -
localStorage.colorSetting = '#a4509b';
-localStorage['colorSetting'] = '#a4509b';
-localStorage.setItem('colorSetting', '#a4509b');
- -
-

Nota: Se recomiendo usar la API de almacenamiento web (setItem, getItem, removeItem, key, length) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.

-
- -

Los dos mecanismos en el almacenamiento web son los siguientes:

- - - -

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

- -

Así que, por ejemplo, si en un inicio se llama a localStorage en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a sessionStorage en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.

- -

Detectar la característica localStorage

- -

Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.

- -

Probar la disponibilidad

- -
-

Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.

-
- -

Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede soportar localStorage, pero puede no hacerlo disponible para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, disponible. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.

- -

Esta función detecta si localStorage tiene soporte y está disponible:

- -
function storageAvailable(type) {
-    try {
-        var storage = window[type],
-            x = '__storage_test__';
-        storage.setItem(x, x);
-        storage.removeItem(x);
-        return true;
-    }
-    catch(e) {
-        return e instanceof DOMException && (
-            // everything except Firefox
-            e.code === 22 ||
-            // Firefox
-            e.code === 1014 ||
-            // test name field too, because code might not be present
-            // everything except Firefox
-            e.name === 'QuotaExceededError' ||
-            // Firefox
-            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
-            // acknowledge QuotaExceededError only if there's something already stored
-            storage.length !== 0;
-    }
-}
- -

Y aquí se muestra cómo usarla:

- -
if (storageAvailable('localStorage')) {
-  // Yippee! We can use localStorage awesomeness
-}
-else {
-  // Too bad, no localStorage for us
-}
- -

También puedes probar sessionStorage invocando storageAvailable('sessionStorage').

- -

Aquí puedes ver una breve historia de la detección de la característica localStorage.

- -

Ejemplo

- -

Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos Demo de almacenamiento web. La página de inicio proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:

- -

Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

- -

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.

- -

- -
-

Nota: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes ver el código fuente.

-
- -

Probar si la memoria tiene valores

- -

En el inicio de main.js, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):

- -
if(!localStorage.getItem('bgcolor')) {
-  populateStorage();
-} else {
-  setStyles();
-}
- -

El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato bgcolor existe; si no, corremos populateStorage() para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos setStyles() para actualizar el estilo de la página con los valores almacenados.

- -

Nota: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.

- -

Obtener valores de la memoria

- -

Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:

- -
function setStyles() {
-  var currentColor = localStorage.getItem('bgcolor');
-  var currentFont = localStorage.getItem('font');
-  var currentImage = localStorage.getItem('image');
-
-  document.getElementById('bgcolor').value = currentColor;
-  document.getElementById('font').value = currentFont;
-  document.getElementById('image').value = currentImage;
-
-  htmlElem.style.backgroundColor = '#' + currentColor;
-  pElem.style.fontFamily = currentFont;
-  imgElem.setAttribute('src', currentImage);
-}
- -

Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.

- -

Guardar valores en la memoria

- -

{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.

- -
function populateStorage() {
-  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
-  localStorage.setItem('font', document.getElementById('font').value);
-  localStorage.setItem('image', document.getElementById('image').value);
-
-  setStyles();
-}
- -

La función populateStorage() define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función setStyles() para actualizar el estilo de la página, etc.

- -

También incluimos un manejador onchange para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:

- -
bgcolorForm.onchange = populateStorage;
-fontForm.onchange = populateStorage;
-imageForm.onchange = populateStorage;
- -

Responder a cambios en la memoria con el evento StorageEvent

- -

El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.

- -

En la página de eventos (ver events.js) el único JavaScript es el siguiente:

- -
window.addEventListener('storage', function(e) {
-  document.querySelector('.my-key').textContent = e.key;
-  document.querySelector('.my-old').textContent = e.oldValue;
-  document.querySelector('.my-new').textContent = e.newValue;
-  document.querySelector('.my-url').textContent = e.url;
-  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
-});
- -

Aquí añadimos un detector de evento al objeto window que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).

- -

Borrar registros

- -

El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:

- - - -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
-
- -

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

- -
-

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

-
- -

Ver también

- - diff --git a/files/es/web/api/api_del_portapapeles/index.html b/files/es/web/api/api_del_portapapeles/index.html deleted file mode 100644 index 53e43f6bd5..0000000000 --- a/files/es/web/api/api_del_portapapeles/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: API del portapapeles -slug: Web/API/API_del_portapapeles -translation_of: Web/API/Clipboard_API ---- -
{{DefaultAPISidebar("Clipboard API")}}
- -

La API del portapapeles permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos: El permiso clipboard-write es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso clipboard-read debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.

- -

Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.

- -

Accediendo al portapapeles

- -

En vez de instanciar un objeto Clipboard, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:

- -
navigator.clipboard.readText().then(
-  clipText => document.querySelector(".editor").innerText += clipText);
- -

Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase editor. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.

- -

Interfaces

- -
-
{{domxref("Clipboard")}} {{securecontext_inline}}
-
Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'
-
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
-
Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.
-
{{domxref("ClipboardItem")}} {{securecontext_inline}}
-
Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.
-
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoObservaciones
{{SpecName('Clipboard API')}}{{Spec2('Clipboard API')}}Definición primitiva.
- -

Compatibilidad con navegadores

- -

Clipboard

- -
- - -

{{Compat("api.Clipboard")}}

- -

ClipboardEvent

- - - -

{{Compat("api.ClipboardEvent")}}

- -

ClipboardItem

- - - -

{{Compat("api.ClipboardItem")}}

- -

Véase también

- - -
diff --git a/files/es/web/api/battery_status_api/index.html b/files/es/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..9cdc7259be --- /dev/null +++ b/files/es/web/api/battery_status_api/index.html @@ -0,0 +1,39 @@ +--- +title: API de Estado de Bateria +slug: WebAPI/Estado_de_Bateria +tags: + - API + - Apps + - Firefox OS + - Mobile +translation_of: Web/API/Battery_Status_API +--- +

La API de Estado de Batería, también conocida como "Battery API", provee información acerca del sistema de carga de la batería y permite notificar mediante eventos que son enviados cuando el nivel de la batería cambia. Este puede ser usado para ajustar el uso de recursos por parte de una aplicación y evitar un gasto innecesario de energía cuando la batería esta baja o para guardar cambios en un archivo antes de que la batería se agote y así prevenir perdida de información.

+

La API de Estado de Batería se puede extender mediante {{domxref("window.navigator")}} con una propiedad {{domxref("window.navigator.battery")}} que pertenece al objeto {{domxref("BatteryManager")}} y agrega algunos nuevos eventos que usted puede recibir en el monitor de estado de la batería.

+

Ejemplo

+

En este ejemplo, observamos los cambios en el estado de la carga (este o no conectado y cargando) y  en el nivel de la batería. Esto se hace escuchando el evento {{event("chargingchange")}} y el evento {{event("levelchange")}} respectivamente.

+
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
+
+function updateBatteryStatus() {
+  console.log("Battery status: " + battery.level * 100 + " %");
+
+  if (battery.charging) {
+    console.log("Battery is charging");
+  }
+}
+
+battery.addEventListener("chargingchange", updateBatteryStatus);
+battery.addEventListener("levelchange", updateBatteryStatus);
+updateBatteryStatus();
+
+

Vea también: El ejemplo en las especificaciones

+

Especificaciones

+

{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}

+

Compatibilidad del Navegador

+

{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}

+

Vea también

+ diff --git a/files/es/web/api/canvas_api/a_basic_ray-caster/index.html b/files/es/web/api/canvas_api/a_basic_ray-caster/index.html new file mode 100644 index 0000000000..7917541554 --- /dev/null +++ b/files/es/web/api/canvas_api/a_basic_ray-caster/index.html @@ -0,0 +1,59 @@ +--- +title: A basic ray-caster +slug: Web/HTML/Canvas/A_basic_ray-caster +tags: + - Avanzado + - Canvas + - Ejemplo + - Espanol(2) + - Gráficos(2) + - HTML + - Necesita traducción + - Web +translation_of: Web/API/Canvas_API/A_basic_ray-caster +--- +
{{CanvasSidebar}}
+ +
+

Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.

+
+ +

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

+ +

Abrir en una nueva ventana

+ +

¿Por qué?

+ +

 

+ +

Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento <canvas> sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que ya estaba soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.

+ +

El tutorial y el resumen que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.

+ +

¿Cómo?

+ +

La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento <canvas>  en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el tutorial sobre <canvas> vale para eso, y quería ver si podía hacer esto.

+ +

Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el <canvas> es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.

+ +

El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe Tricks of the Game Programming Gurus y una versión en java de un raycaster que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.

+ +

Resultados

+ +

El <canvas> en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.

+ +

Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)

+ +

El ray-caster

+ +

El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un vistazo, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).

+ +

¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <canvas> y a disfrutar!
+
+ input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

+ +

Ver también

+ + diff --git a/files/es/web/api/canvas_api/index.html b/files/es/web/api/canvas_api/index.html new file mode 100644 index 0000000000..dfdde2bf63 --- /dev/null +++ b/files/es/web/api/canvas_api/index.html @@ -0,0 +1,170 @@ +--- +title: API Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - JavaScript + - Referencia + - introducción +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Añadido en HTML5, el elemento HTML {{HTMLElement("canvas")}} se puede usar para dibujar gráficos mediante scripting en JavaScript. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.

+ +

Las aplicaciones de Mozilla soportan <canvas> desde Gecko 1.8 (es decir, Firefox 1.5). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <canvas> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <canvas> a una página incluyendo un script del proyecto de Google Explorer Canvas. Google Chrome y Opera 9 también soportan <canvas>.

+ +

El elemento <canvas> también se usa en WebGL para dibujar gráficos 3D con aceleración por hardware en páginas web.

+ +

Ejemplo

+ +

Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Edita este código para ver tus cambios en tiempo real en este canvas:

+ + + +

{{ EmbedLiveSample('Código_editable', 700, 360) }}

+ +

Referencia

+ +
+ +
+ +

Las interfaces relacionadas con WebGLRenderingContext están en WebGL.

+ +

{{domxref("CanvasCaptureMediaStream")}} está relacionado..

+ +

Guías y tutoriales

+ +
+
Tutorial Canvas
+
Tutorial exhaustivo que cubre tanto el uso básico de <canvas> como sus características avanzadas.
+
Fragmentos de código: Canvas
+
Algunos fragmentos de código orientados al desarrollador de extensiones usando <canvas>.
+
Demo: Un laberinto básico
+
Una demo de una animación de laberinto usando canvas.
+
Dibujar objetos DOM en un canvas
+
Cómo dibujar contenido DOM, como elementos HTML, en un canvas.
+
Manipulación de vídeo usando canvas
+
Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.
+
+ +

Recursos

+ +

Genéricos

+ + + +

Librerías

+ + + +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
+ +

Ver también

+ + diff --git a/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html new file mode 100644 index 0000000000..a3ae61673d --- /dev/null +++ b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html @@ -0,0 +1,126 @@ +--- +title: Manipular video por medio de canvas +slug: Web/HTML/anipular_video_por_medio_de_canvas +tags: + - Canvas + - Firefox 3.5 + - Video + - para_revisar +translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas +--- +

{{ fx_minversion_header (3.5) }}

+

Al combinar las capacidades del elemento video introducido en Firefox 3.5 con un elemento canvas , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.  Este artículo, adaptado de esta entrada del blog de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.

+

Ver este ejemplo en vivo .

+

El contenido del documento

+

El documento XHTML que se utiliza para representar este contenido se muestra a continuación.

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <style>
+      body {
+        background: black;
+        color:#CCCCCC;
+      }
+      #c2 {
+        background-image: url(foo.png);
+        background-repeat: no-repeat;
+      }
+      div {
+        float: left;
+        border :1px solid #444444;
+        padding:10px;
+        margin: 10px;
+        background:#3B3B3B;
+      }
+    </style>
+    <script type="text/javascript;version=1.8" src="main.js"></script>
+  </head>
+
+  <body onload="processor.doLoad()">
+    <div>
+      <video id="video" src="video.ogv" controls="true"/>
+    </div>
+    <div>
+      <canvas id="c1" width="160" height="96"/>
+      <canvas id="c2" width="160" height="96"/>
+    </div>
+  </body>
+</html>
+
+

Los puntos clave a tener en cuenta son:

+
    +
  1. Este documento establece dos elemento canvas , con los identificadores de c1 y c2 .  Canvas c1 se utiliza para mostrar la imagen actual del video original, mientras que c2 se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; c2 se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
    2. +
  2. El código JavaScript es importado de un script llamado main.js ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
    3. +
  3. Cuando se carga el documento, se ejecuta el método processor.doLoad() de main.js.
    4. +
+

El código JavaScript

+

El código JavaScript en main.js consta de tres métodos.

+

Inicializar el reproductor de croma

+

El método doLoad() se llama cuando el documento XHTML se carga inicialmente.  La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.

+
  doLoad: function() {
+    this.video = document.getElementById("video");
+    this.c1 = document.getElementById("c1");
+    this.ctx1 = this.c1.getContext("2d");
+    this.c2 = document.getElementById("c2");
+    this.ctx2 = this.c2.getContext("2d");
+    let self = this;
+    this.video.addEventListener("play", function() {
+        self.width = self.video.videoWidth / 2;
+        self.height = self.video.videoHeight / 2;
+        self.timerCallback();
+      }, false);
+  },
+
+

Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento video y los dos elementos canvas.  También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.  Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.

+

Luego addEventListener() es llamado para empezar a ver el elemento video de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.  En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método timerCallback() para iniciar el visionado del video y la computación del efecto visual.

+

La devolución de llamada del temporizador

+

La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.

+
  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    let self = this;
+    setTimeout(function () {
+        self.timerCallback();
+      }, 0);
+  },
+
+

Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.

+

A continuación, llama al método computeFrame(), que lleva a cabo la manipulación del efecto croma en la imagen de video actual.

+

Lo último que la devolución de llamada hace es llamar a setTimeout() para programarse para ser llamado lo más pronto posible.  En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.

+

Manipulación de los datos de la imagen del video

+

El método computeFrame(), que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.

+
  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    let l = frame.data.length / 4;
+
+    for (let i = 0; i < l; i++) {
+      let r = frame.data[i * 4 + 0];
+      let g = frame.data[i * 4 + 1];
+      let b = frame.data[i * 4 + 2];
+      if (g > 100 && r > 100 && b < 43)
+        frame.data[i * 4 + 3] = 0;
+    }
+    this.ctx2.putImageData(frame, 0, 0);
+    return;
+  }
+
+

Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:

+

video.png

+

En la línea 2, ese fotograma de video se copia al contexto gráfico ctx1 del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño.  Ten en cuenta que puedes pasar simplemente el elemento de video al método drawImage() del contexto para dibujar el fotograma de video actual en dicho contexto.  El resultado es:

+

sourcectx.png

+

Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método getImageData() en el primer contexto.  Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.  Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.

+

El bucle for que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de foo.png .

+

Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.  Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.

+

La imagen resultante tiene este aspecto:

+

output.png

+

Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.

+

Ver este ejemplo en vivo .

+

Consulta también

+ +

{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}

diff --git a/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..15ab72ee7f --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: Advanced animations +slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations +tags: + - Canvas + - Tutoria + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
+ +
+

En el último capítulo hicimos unas animaciones básicas y nos familiarizamos con varias maneras de mover cosas. En esta parte examinaremos la moción misma y agregaremos la física para hacer nuestras animaciones más avanzadas.

+
+ +

Dibujar una bola

+ +

Vamos a usar una bola para nuestro estudio de la animación, entonces primero dibujamos la bola dentro del canvas. El siguente código lo configurará.

+ +
<canvas id="canvas" width="600" height="300"></canvas>
+
+ +

Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido ball lo cual contiene propiedades y un método draw().

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var ball = {
+  x: 100,
+  y: 100,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+ball.draw();
+ +

Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con el método {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

+ +

Agregar velocidad

+ +

Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el último capítulo de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 2,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function draw() {
+  ctx.clearRect(0,0, canvas.width, canvas.height);
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mouseover', function(e) {
+  raf = window.requestAnimationFrame(draw);
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+});
+
+ball.draw();
+
+ +

Límites

+ +

Si no probamos los límites, de repente nuestra bola se agota el canvas. Necesitamos verificar si las posiciones x e y están fuera de las dimensiones del canvas y invertir la direción de los vectores de velocidad. Para hacer eso, agregamos los siguentes pasos al método draw:

+ +
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  ball.vy = -ball.vy;
+}
+if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  ball.vx = -ball.vx;
+}
+ +

Primera demo

+ +

Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canvas para empezar la animación.

+ + + +

{{EmbedLiveSample("First_demo", "610", "310")}}

+ +

Aceleración

+ +

Para convertir la moción en más auténtica, puedes jugar con la velocidad, así por ejemplo:

+ +
ball.vy *= .99;
+ball.vy += .25;
+ +

Esto reduce el vector vertical de velocidad para cada fotograma para que la bola termina rebotando en el suelo.

+ + + +

{{EmbedLiveSample("Second_demo", "610", "310")}}

+ +

Efecto de rezagar

+ +

Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}. Si reemplazas este método con un semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, puedes facilmente crear un efecto de rezagar.

+ +
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+ctx.fillRect(0, 0, canvas.width, canvas.height);
+ + + +

{{EmbedLiveSample("Third_demo", "610", "310")}}

+ +

Agregar control de ratón

+ +

Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento mousemove, por ejemplo. El evento click solta la bola y la deja rebotar de nuevo.

+ + + +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+var raf;
+var running = false;
+
+var ball = {
+  x: 100,
+  y: 100,
+  vx: 5,
+  vy: 1,
+  radius: 25,
+  color: 'blue',
+  draw: function() {
+    ctx.beginPath();
+    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
+    ctx.closePath();
+    ctx.fillStyle = this.color;
+    ctx.fill();
+  }
+};
+
+function clear() {
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+}
+
+function draw() {
+  clear();
+  ball.draw();
+  ball.x += ball.vx;
+  ball.y += ball.vy;
+
+  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+    ball.vy = -ball.vy;
+  }
+  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+    ball.vx = -ball.vx;
+  }
+
+  raf = window.requestAnimationFrame(draw);
+}
+
+canvas.addEventListener('mousemove', function(e) {
+  if (!running) {
+    clear();
+    ball.x = e.clientX;
+    ball.y = e.clientY;
+    ball.draw();
+  }
+});
+
+canvas.addEventListener('click', function(e) {
+  if (!running) {
+    raf = window.requestAnimationFrame(draw);
+    running = true;
+  }
+});
+
+canvas.addEventListener('mouseout', function(e) {
+  window.cancelAnimationFrame(raf);
+  running = false;
+});
+
+ball.draw();
+
+ +

Mueve la bola usando el ratón y suéltala haciendo click.

+ +

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

+ +

Breakout

+ +

Este capítulo corto sólo explica algunas técnicas para crear animaciones más avanzadas. ¡Hay muchos más!  ¿Qué tal agregar una raqueta, algunos ladrillos, y convertir esta demo en un partido Breakout? Visita nuestra área de Game development para mayor información.

+ +

Vea también

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..ab76918132 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,726 @@ +--- +title: Applying styles and colors +slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
+ +
+

En el capítulo acerca de dibujar formas, usamos unicamente los estilos de linea y de relleno por defecto. Aqui exploraremos las opciones del canvas que tenemos a nuestra disposición para hacer los dibujos un tanto más atractivos. Aprenderas como agregar diferentes colores, estilos de linea, gradiantes, patrones y sombras a tus dibujos.

+
+ +

Colors

+ +

Hasta ahrora nosotros solo me hemos visto metodos en el contexto de dibujo. Si quisieramos aplicar colores a las formas, hay dos importantes propiedades que podemos usar: fillStyle y strokeStyle.

+ +
+
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
+
Configura el estilo cuando se rellenan las formas.
+
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
+
Configura el estilo al contorno perimetral de las formas.
+
+ +

color es una cadena que representa  un CSS {{cssxref("<color>")}}, un objeto gradiante, o un objeto patron. Miraremos en objetos de gradientes y patrones mas tarde. Por defecto, el color del trazo y del relleno son configurados en negro (valor de color CSS #000000).

+ +
+

Nota:  Cuando configuras la propiedad  strokeStyle y/o fillStyle, el nuevo valor llega a ser el vador por defecto para los dibujos posteriores. Para cada forma que tu quieras en un color difrente, necesitaras reasignar las propiedades anteriores.

+
+ +

Las cadenas validas que tu pueden entrar deberian, segun la especificación, ser valores de  {{cssxref("<color>")}} CSS. En el siguiente ejemplo, describimos en mismo color.

+ +
// these all set the fillStyle to 'orange'
+
+ctx.fillStyle = 'orange';
+ctx.fillStyle = '#FFA500';
+ctx.fillStyle = 'rgb(255, 165, 0)';
+ctx.fillStyle = 'rgba(255, 165, 0, 1)';
+
+ +

A fillStyle example

+ +

En este ejemplo, usamos dos bucles for para dibujar una cuadrícula de rectangulos, cada uno de diferente color. La imagen resultante deberia ser similar a la de la screenhot. No hay nada demasiado espectacular en el proceso. Usamos dos variables i y j para generar un unico color RGB para cada celda cuadrada, modificando las componentes rojo y verde. El canal azul tiene un valor fijo. Modificando los canales, puedes generar todo tipo de paletas. Incrementando los paos, puedes lograr algo similar que se parezca a las paletas de colores que Photoshop usa.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 6; i++) {
+    for (var j = 0; j < 6; j++) {
+      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
+                       Math.floor(255 - 42.5 * j) + ', 0)';
+      ctx.fillRect(j * 25, i * 25, 25, 25);
+    }
+  }
+}
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

+ +

A strokeStyle example

+ +

Este ejemplo es similar al de arriba, pero usa la propiedad  strokeStyle para cambiar el color del contorno de las formas. Usamos el método  arc() para dibujar circulos en lugar de celdas cuadradas.

+ +
  function draw() {
+    var ctx = document.getElementById('canvas').getContext('2d');
+    for (var i = 0; i < 6; i++) {
+      for (var j = 0; j < 6; j++) {
+        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
+                         Math.floor(255 - 42.5 * j) + ')';
+        ctx.beginPath();
+        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+        ctx.stroke();
+      }
+    }
+  }
+
+ + + +

The result looks like this:

+ +

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

+ +

Transparency

+ +

Ademas de dibujar formas opacas en el canvas, podemos dibujar formas semi-transparentes(o translucidas). Esto se logra bien configurando la propiedad  globalAlpha o asignando un color semi-transparente al estilo del trazo u  u/y al de relleno.

+ +
+
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
+
Applies the specified transparency value to all future shapes drawn on the canvas. The value must be between 0.0 (fully transparent) to 1.0 (fully opaque). This value is 1.0 (fully opaque) by default.
+
+ +

The globalAlpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.

+ +

Debido qaque las propiedades  strokeStyle y fillStyle aceptan valores de color rgba de CSS, podemos usar la siguiente notacion para asignar una color transparente a ellos.

+ +
// Assigning transparent colors to stroke and fill style
+
+ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+
+ +

The rgba() function is similar to the rgb() function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque).

+ +

A globalAlpha example

+ +

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // draw background
+  ctx.fillStyle = '#FD0';
+  ctx.fillRect(0, 0, 75, 75);
+  ctx.fillStyle = '#6C0';
+  ctx.fillRect(75, 0, 75, 75);
+  ctx.fillStyle = '#09F';
+  ctx.fillRect(0, 75, 75, 75);
+  ctx.fillStyle = '#F30';
+  ctx.fillRect(75, 75, 75, 75);
+  ctx.fillStyle = '#FFF';
+
+  // set transparency value
+  ctx.globalAlpha = 0.2;
+
+  // Draw semi transparent circles
+  for (var i = 0; i < 7; i++) {
+    ctx.beginPath();
+    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+ + + +

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

+ +

An example using rgba()

+ +

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Draw background
+  ctx.fillStyle = 'rgb(255, 221, 0)';
+  ctx.fillRect(0, 0, 150, 37.5);
+  ctx.fillStyle = 'rgb(102, 204, 0)';
+  ctx.fillRect(0, 37.5, 150, 37.5);
+  ctx.fillStyle = 'rgb(0, 153, 255)';
+  ctx.fillRect(0, 75, 150, 37.5);
+  ctx.fillStyle = 'rgb(255, 51, 0)';
+  ctx.fillRect(0, 112.5, 150, 37.5);
+
+  // Draw semi transparent rectangles
+  for (var i = 0; i < 10; i++) {
+    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
+    for (var j = 0; j < 4; j++) {
+      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
+    }
+  }
+}
+ + + +

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

+ +

Line styles

+ +

There are several properties which allow us to style lines.

+ +
+
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
+
Sets the width of lines drawn in the future.
+
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
+
Sets the appearance of the ends of lines.
+
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
+
Sets the appearance of the "corners" where lines meet.
+
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
+
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
+
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
+
Returns the current line dash pattern array containing an even number of non-negative numbers.
+
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
+
Sets the current line dash pattern.
+
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
+
Specifies where to start a dash array on a line.
+
+ +

You'll get a better understanding of what these do by looking at the examples below.

+ +

A lineWidth example

+ +

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

+ +

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

+ +

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 10; i++) {
+    ctx.lineWidth = 1 + i;
+    ctx.beginPath();
+    ctx.moveTo(5 + i * 14, 5);
+    ctx.lineTo(5 + i * 14, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

+ +

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

+ +

+ +

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

+ +

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

+ +
+

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

+ +

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

+
+ +

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

+ +

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

+ +

A lineCap example

+ +

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

+ +

+ +
+
butt
+
The ends of lines are squared off at the endpoints.
+
round
+
The ends of lines are rounded.
+
square
+
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
+
+ +

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

+ +

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineCap = ['butt', 'round', 'square'];
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(140, 10);
+  ctx.moveTo(10, 140);
+  ctx.lineTo(140, 140);
+  ctx.stroke();
+
+  // Draw lines
+  ctx.strokeStyle = 'black';
+  for (var i = 0; i < lineCap.length; i++) {
+    ctx.lineWidth = 15;
+    ctx.lineCap = lineCap[i];
+    ctx.beginPath();
+    ctx.moveTo(25 + i * 50, 10);
+    ctx.lineTo(25 + i * 50, 140);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

+ +

A lineJoin example

+ +

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

+ +

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

+ +

+ +
+
round
+
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
+
bevel
+
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
+
miter
+
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
+
+ +

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var lineJoin = ['round', 'bevel', 'miter'];
+  ctx.lineWidth = 10;
+  for (var i = 0; i < lineJoin.length; i++) {
+    ctx.lineJoin = lineJoin[i];
+    ctx.beginPath();
+    ctx.moveTo(-5, 5 + i * 40);
+    ctx.lineTo(35, 45 + i * 40);
+    ctx.lineTo(75, 5 + i * 40);
+    ctx.lineTo(115, 45 + i * 40);
+    ctx.lineTo(155, 5 + i * 40);
+    ctx.stroke();
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

+ +

A demo of the miterLimit property

+ +

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

+ +

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

+ +

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

+ + + +

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

+ +

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Clear canvas
+  ctx.clearRect(0, 0, 150, 150);
+
+  // Draw guides
+  ctx.strokeStyle = '#09f';
+  ctx.lineWidth   = 2;
+  ctx.strokeRect(-5, 50, 160, 50);
+
+  // Set line styles
+  ctx.strokeStyle = '#000';
+  ctx.lineWidth = 10;
+
+  // check input
+  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
+    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
+  } else {
+    alert('Value must be a positive number');
+  }
+
+  // Draw lines
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (i = 0; i < 24 ; i++) {
+    var dy = i % 2 == 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+  return false;
+}
+
+ + + +

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

+ +

Using line dashes

+ +

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

+ +

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

+ + + +
var ctx = document.getElementById('canvas').getContext('2d');
+var offset = 0;
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.setLineDash([4, 2]);
+  ctx.lineDashOffset = -offset;
+  ctx.strokeRect(10, 10, 100, 100);
+}
+
+function march() {
+  offset++;
+  if (offset > 16) {
+    offset = 0;
+  }
+  draw();
+  setTimeout(march, 20);
+}
+
+march();
+ +

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

+ +

Gradients

+ +

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

+ +
+
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
+
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
+
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
+
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
+
+ +

For example:

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
+
+ +

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

+ +
+
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
+
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
+
+ +

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

+ +
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
+lineargradient.addColorStop(0, 'white');
+lineargradient.addColorStop(1, 'black');
+
+ +

A createLinearGradient example

+ +

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
+  lingrad.addColorStop(0, '#00ABEB');
+  lingrad.addColorStop(0.5, '#fff');
+  lingrad.addColorStop(0.5, '#26C000');
+  lingrad.addColorStop(1, '#fff');
+
+  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
+  lingrad2.addColorStop(0.5, '#000');
+  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
+
+  // assign gradients to fill and stroke styles
+  ctx.fillStyle = lingrad;
+  ctx.strokeStyle = lingrad2;
+
+  // draw shapes
+  ctx.fillRect(10, 10, 130, 130);
+  ctx.strokeRect(50, 50, 50, 50);
+
+}
+
+ + + +

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

+ +

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

+ +

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

+ +

A createRadialGradient example

+ +

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Create gradients
+  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
+  radgrad.addColorStop(0, '#A7D30C');
+  radgrad.addColorStop(0.9, '#019F62');
+  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
+
+  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
+  radgrad2.addColorStop(0, '#FF5F98');
+  radgrad2.addColorStop(0.75, '#FF0188');
+  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
+
+  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
+  radgrad3.addColorStop(0, '#00C9FF');
+  radgrad3.addColorStop(0.8, '#00B5E2');
+  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
+
+  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
+  radgrad4.addColorStop(0, '#F4F201');
+  radgrad4.addColorStop(0.8, '#E4C700');
+  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
+
+  // draw shapes
+  ctx.fillStyle = radgrad4;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad3;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad2;
+  ctx.fillRect(0, 0, 150, 150);
+  ctx.fillStyle = radgrad;
+  ctx.fillRect(0, 0, 150, 150);
+}
+
+ + + +

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

+ +

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

+ +

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

+ +

Patterns

+ +

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

+ +
+
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
+
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
+
+ +

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

+ +
+
repeat
+
Tiles the image in both vertical and horizontal directions.
+
repeat-x
+
Tiles the image horizontally but not vertically.
+
repeat-y
+
Tiles the image vertically but not horizontally.
+
no-repeat
+
Doesn't tile the image. It's used only once.
+
+ +

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

+ +
var img = new Image();
+img.src = 'someimage.png';
+var ptrn = ctx.createPattern(img, 'repeat');
+
+ +
+

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

+
+ +

A createPattern example

+ +

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // create new image object to use as pattern
+  var img = new Image();
+  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
+  img.onload = function() {
+
+    // create pattern
+    var ptrn = ctx.createPattern(img, 'repeat');
+    ctx.fillStyle = ptrn;
+    ctx.fillRect(0, 0, 150, 150);
+
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

+ +

Shadows

+ +

Using shadows involves just four properties:

+ +
+
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
+
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
+
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
+
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
+
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
+
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
+
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
+
+ +

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

+ +

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

+ +

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

+ +
+

Note: Shadows are only drawn for source-over compositing operations.

+
+ +

A shadowed text example

+ +

This example draws a text string with a shadowing effect.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.shadowOffsetX = 2;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowBlur = 2;
+  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
+
+  ctx.font = '20px Times New Roman';
+  ctx.fillStyle = 'Black';
+  ctx.fillText('Sample String', 5, 30);
+}
+
+ + + +

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

+ +

We will look at the font property and fillText method in the next chapter about drawing text.

+ +

Canvas fill rules

+ +

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
+
+ Two values are possible:

+ + + +

In this example we are using the evenodd rule.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.beginPath();
+  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
+  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
+  ctx.fill('evenodd');
+}
+ + + +

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/es/web/api/canvas_api/tutorial/basic_animations/index.html b/files/es/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..94c66fb05d --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,333 @@ +--- +title: Animaciones básicas +slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations +tags: + - Canvas + - HTML5 + - Intermedio + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
+ +
+

Ya que estamos usando JavaScript para controlar elementos {{HTMLElement("canvas")}} , también es muy fácil hacer animaciones (interactivas). En este capitulo veremos como hacer algunas animaciones básicas.

+
+ +

Probablemente la mayor limitación es que una vez que se dibuja una forma, se mantiene de esa manera. Si necesitamos moverlo tenemos que volver a dibujarlo y todo lo que se dibujó antes. Se necesita mucho tiempo para volver a dibujar estructuras complejas y el rendimiento depende en gran medida de la velocidad de la computadora en la que se ejecuta.

+ +

Pasos básicos de animación

+ +

Estos son los pasos que necesitas para dibujar un cuadro:

+ +
    +
  1. Limpiar el canvas
    + A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. +
  2. Guardar el estado del canvas
    + Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. 
    3. +
  3. Dibujar formas animadas
    + El paso en el que realizas el renderizado del cuadro actual.
    4. +
  4. Restaurar el estado del canvas
    + Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
    5. +
+ +

Controlando una animación

+ +

Las formas se dibujan en el canvas utilizando los métodos de canvas directamente o llamando a funciones personalizadas. En circunstancias normales, solo vemos que estos resultados aparecen en el canvas cuando el script termina de ejecutarse. Por ejemplo, no es posible hacer una animación desde un bucle for.

+ +

Eso significa que necesitamos una forma de ejecutar nuestras funciones de dibujo durante un período de tiempo. Hay dos formas de controlar una animación como esta.

+ +

Actualizaciones Programadas

+ +

Primero {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, y {{domxref("window.requestAnimationFrame()")}} son funciones que pueden ser usadas para llamar una función especifica en un periodo de tiempo establecido.

+ +
+
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
+
Ejecuta una función especificada por function cada delay milisegundos.
+
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
+
Ejecuta una función especificada por function dentro de delay milisegundos.
+
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
+
Comunica al navegador que  deseas iniciar una animación y requieres que el navegador llame a las funciones especificas para actualizar la misma antes de la siguiente escena.
+
+ +

Si no quieres ninguna interacción del usuario puedes usar la función setInterval() que repite la ejecución del código suministrado. Si lo que queremos es hacer un juego, podríamos usar eventos de teclado o el mouse para controlar la animación y usar setTimeout(). Al establecer los {{domxref("EventListener")}}, capturamos cualquier interacción del usuario y ejecutamos nuestras funciones de animación.

+ +
+

En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método requestAnimationFrame provee formas amigables y mas eficientes  para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo Anatomía de un videojuego en nuestra GameZona de desarrollo de Juegos.

+
+ +

Un sistema solar animado

+ +

Este ejemplo animado es un pequeño modelo de nuestro sistema solar.

+ +
var sun = new Image();
+var moon = new Image();
+var earth = new Image();
+function init(){
+  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
+  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
+  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
+  window.requestAnimationFrame(draw);
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.clearRect(0,0,300,300); // limpiar canvas
+
+  ctx.fillStyle = 'rgba(0,0,0,0.4)';
+  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
+  ctx.save();
+  ctx.translate(150,150);
+
+  // La tierra
+  var time = new Date();
+  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
+  ctx.translate(105,0);
+  ctx.fillRect(0,-12,50,24); // Sombra
+  ctx.drawImage(earth,-12,-12);
+
+  // La luna
+  ctx.save();
+  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
+  ctx.translate(0,28.5);
+  ctx.drawImage(moon,-3.5,-3.5);
+  ctx.restore();
+
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre
+  ctx.stroke();
+
+  ctx.drawImage(sun,0,0,300,300);
+
+  window.requestAnimationFrame(draw);
+}
+
+init();
+
+ + + +

{{EmbedLiveSample("Un_sistema_solar_animado", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

+ +

Un reloj animado

+ +

Este ejemplo dibuja una reloj animado, mostrando la hora actual.

+ +
function clock(){
+  var now = new Date();
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.save();
+  ctx.clearRect(0,0,150,150);
+  ctx.translate(75,75);
+  ctx.scale(0.4,0.4);
+  ctx.rotate(-Math.PI/2);
+  ctx.strokeStyle = "black";
+  ctx.fillStyle = "white";
+  ctx.lineWidth = 8;
+  ctx.lineCap = "round";
+
+  // Aguja de la hora
+  ctx.save();
+  for (var i=0;i<12;i++){
+    ctx.beginPath();
+    ctx.rotate(Math.PI/6);
+    ctx.moveTo(100,0);
+    ctx.lineTo(120,0);
+    ctx.stroke();
+  }
+  ctx.restore();
+
+  // Aguja del minuto
+  ctx.save();
+  ctx.lineWidth = 5;
+  for (i=0;i<60;i++){
+    if (i%5!=0) {
+      ctx.beginPath();
+      ctx.moveTo(117,0);
+      ctx.lineTo(120,0);
+      ctx.stroke();
+    }
+    ctx.rotate(Math.PI/30);
+  }
+  ctx.restore();
+
+  var sec = now.getSeconds();
+  var min = now.getMinutes();
+  var hr  = now.getHours();
+  hr = hr>=12 ? hr-12 : hr;
+
+  ctx.fillStyle = "black";
+
+  // Escribimos la hora
+  ctx.save();
+  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
+  ctx.lineWidth = 14;
+  ctx.beginPath();
+  ctx.moveTo(-20,0);
+  ctx.lineTo(80,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // escribimos los minutos
+  ctx.save();
+  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(-28,0);
+  ctx.lineTo(112,0);
+  ctx.stroke();
+  ctx.restore();
+
+  // escribimos los segundos
+  ctx.save();
+  ctx.rotate(sec * Math.PI/30);
+  ctx.strokeStyle = "#D40000";
+  ctx.fillStyle = "#D40000";
+  ctx.lineWidth = 6;
+  ctx.beginPath();
+  ctx.moveTo(-30,0);
+  ctx.lineTo(83,0);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0,0,10,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.arc(95,0,10,0,Math.PI*2,true);
+  ctx.stroke();
+  ctx.fillStyle = "rgba(0,0,0,0)";
+  ctx.arc(0,0,3,0,Math.PI*2,true);
+  ctx.fill();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.lineWidth = 14;
+  ctx.strokeStyle = '#325FA2';
+  ctx.arc(0,0,142,0,Math.PI*2,true);
+  ctx.stroke();
+
+  ctx.restore();
+
+  window.requestAnimationFrame(clock);
+}
+
+window.requestAnimationFrame(clock);
+ + + +

{{EmbedLiveSample("Un_reloj_animado", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

+ +

Un panorama en bucle

+ +

En este ejemplo, una foto panorámica avanza de izquierda a derecha. Donde usaremos una imagen del Parque Nacional de Yosemite que tomamos de Wikipedia, pero tu podrías usar cualquier imagen que sea mas grande que el canvas.

+ +
var img = new Image();
+
+// Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento
+// dirección y velocidad.
+
+img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
+var CanvasXSize = 800;
+var CanvasYSize = 200;
+var speed = 30; //más bajo es más rápido
+var scale = 1.05;
+var y = -4.5; //desplazamiento vertical
+
+// Programa principal
+
+var dx = 0.75;
+var imgW;
+var imgH;
+var x = 0;
+var clearX;
+var clearY;
+var ctx;
+
+img.onload = function() {
+    imgW = img.width * scale;
+    imgH = img.height * scale;
+
+    if (imgW > CanvasXSize) {
+        // imagen más grande que canvas
+        x = CanvasXSize - imgW;
+    }
+    if (imgW > CanvasXSize) {
+        // ancho de imagen más grande que canvas
+        clearX = imgW;
+    } else {
+        clearX = CanvasXSize;
+    }
+    if (imgH > CanvasYSize) {
+        // altura de la imagen más grande que canvas
+        clearY = imgH;
+    } else {
+        clearY = CanvasYSize;
+    }
+
+    // obtener contexto de canvas
+    ctx = document.getElementById('canvas').getContext('2d');
+
+    // establecer frecuencia de actualización
+    return setInterval(draw, speed);
+}
+
+function draw() {
+    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
+
+    // si la imagen es <= tamaño de Canvas
+    if (imgW <= CanvasXSize) {
+        // reiniciar, comenzar desde el principio
+        if (x > CanvasXSize) {
+            x = -imgW + x;
+        }
+        // dibujar image1 adicional
+        if (x > 0) {
+            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
+        }
+        // dibujar image2 adicional
+        if (x - imgW > 0) {
+            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
+        }
+    }
+
+    // la imagen es > tamaño de Canvas
+    else {
+        // reiniciar, comenzar desde el principio
+        if (x > (CanvasXSize)) {
+            x = CanvasXSize - imgW;
+        }
+        // dibujar image adicional
+        if (x > (CanvasXSize-imgW)) {
+            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
+        }
+    }
+    // dibujar imagen
+    ctx.drawImage(img, x, y,imgW, imgH);
+    // cantidad para moverse
+    x += dx;
+}
+ +

Debajo esta el elemento {{HTMLElement("canvas")}} en el cual va la imagen se va ha desplazar. Nota que el ancho y el alto especificado aquí son las variables CanvasXZSize y CanvasYSize.

+ +
<canvas id="canvas" width="800" height="200"></canvas>
+ +

{{EmbedLiveSample("Un_panorama_en_bucle", "830", "230")}}

+ +

Otros ejemplos

+ +
+
Un ray-caster básico
+
Un buen ejemplo de como hacer animaciones usando como control el teclado.
+
Animaciones avanzadas
+
Vamos a echar un vistazo a algunas técnicas de animación avanzadas y física en el próximo capítulo.
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/es/web/api/canvas_api/tutorial/basic_usage/index.html b/files/es/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..17136d7a7e --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,146 @@ +--- +title: Uso básico de Canvas +slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Dibujando_formas")}}
+ +
+

Comenzamos este tutorial observando el elemento  {{HTMLElement("canvas")}}. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.

+
+ +

El elemento <canvas>

+ +
<canvas id="tutorial" width="150" height="150"></canvas>
+
+ +

A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos - {{htmlattrxref("width", "canvas")}} y {{htmlattrxref("height", "canvas")}}. Ambos son opcionales y pueden ser definidos usando propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con 300 pixels ancho y 150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.

+ +
+

Nota: Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del <canvas> , y no usando CSS.

+
+ +

El atributo id no está especificado para el elemento  <canvas> pero es uno de los atributos globales de HTML el cual puede ser aplicado a cualquier elemento HTML (como class por ejemplo). Siempre es buena idea proporcionar un id porque esto hace más fácil identificarlo en un script.

+ +

El elemento <canvas> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en un capítulo dedicado en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.

+ +
+

Contenido alternativo

+ +

El elemento <canvas> se diferencia de un tag {{HTMLElement("img")}} en que, como los elementos {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.

+ +

Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento <canvas>. Los navegadores que no soporten <canvas> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten <canvas> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.

+ +

Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:

+ +
<canvas id="stockGraph" width="150" height="150">
+  current stock price: $3.15 +0.15
+</canvas>
+
+<canvas id="clock" width="150" height="150">
+  <img src="images/clock.png" width="150" height="150" alt=""/>
+</canvas>
+
+ +

Etiqueta </canvas> requerida

+ +

De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta  (</canvas>).

+ +
+

Note: Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.

+
+ +

Si el contenido alternativo no se necesita, un simple <canvas id="foo" ...></canvas> es completamente compatible con todos los navegadores que soportan canvas.

+ +

El contexto de renderización

+ +

{{HTMLElement("canvas")}} crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES.

+ +

El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento  {{HTMLElement("canvas")}} tiene un method llamado  getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo. getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".

+ +
var canvas = document.getElementById('tutorial');
+var ctx = canvas.getContext('2d');
+
+ +

La primera linea regresa el nodo DOM para el elemento {{HTMLElement("canvas")}} llamando al metodo  {{domxref("document.getElementById()")}}. Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo getContext().

+ +
+

Comprobando soporte

+ +

El contenido de regreso que es mostrado en navegadores los cuales no soportan {{HTMLElement("canvas")}}. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo getContext(). Con un trozo de codigo parecido al que viene debajo:

+ +
var canvas = document.getElementById('tutorial');
+
+if (canvas.getContext){
+  var ctx = canvas.getContext('2d');
+  // drawing code here
+} else {
+  // canvas-unsupported code here
+}
+
+
+
+ +

Un esqueleto de plantilla

+ +

Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.

+ +
<html>
+  <head>
+    <title>Canvas tutorial</title>
+    <script type="text/javascript">
+      function draw(){
+        var canvas = document.getElementById('tutorial');
+        if (canvas.getContext){
+          var ctx = canvas.getContext('2d');
+        }
+      }
+    </script>
+    <style type="text/css">
+      canvas { border: 1px solid black; }
+    </style>
+  </head>
+  <body onload="draw();">
+    <canvas id="tutorial" width="150" height="150"></canvas>
+  </body>
+</html>
+
+ +

El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usando {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.

+ +

Aqui esta como la plantilla se ve en acción:

+ +

{{EmbedLiveSample("Un_esqueleto_de_plantilla", 160, 160)}}

+ +

Un simple ejemplo

+ +

Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.

+ +
<html>
+ <head>
+  <script type="application/javascript">
+    function draw() {
+      var canvas = document.getElementById("canvas");
+      if (canvas.getContext) {
+        var ctx = canvas.getContext("2d");
+
+        ctx.fillStyle = "rgb(200,0,0)";
+        ctx.fillRect (10, 10, 55, 50);
+
+        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+        ctx.fillRect (30, 30, 55, 50);
+      }
+    }
+  </script>
+ </head>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+ </body>
+</html>
+
+ +

Este ejemplo quedaría así:

+ +

{{EmbedLiveSample("Un_simple_ejemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas")}}

diff --git a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html b/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html deleted file mode 100644 index b85b83238c..0000000000 --- a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html +++ /dev/null @@ -1,295 +0,0 @@ ---- -title: Ejemplo de composición -slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo -tags: - - Canvas - - Ejemplo - - HTML - - HTML5 - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -
{{CanvasSidebar}}
- -

Este programa de ejemplo muestra una cantidad de operaciones de composición. La salida se ve así:

- -

{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}

- -

Ejemplo de composición

- -

Este código establece los valores globales utilizados por el resto del programa.

- -
var canvas1 = document.createElement("canvas");
-var canvas2 = document.createElement("canvas");
-var gco = [ 'source-over','source-in','source-out','source-atop',
-            'destination-over','destination-in','destination-out','destination-atop',
-            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
-            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
-          ].reverse();
-var gcoText = [
-'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
-'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
-'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
-'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
-'Se dibujan nuevas formas detrás del contenido del canvas existente',
-'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
-'El contenido existente se mantiene donde no se superpone a la nueva forma.',
-'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
-'Donde ambas formas se superponen, el color se determina agregando valores de color.',
-'Solo se muestra la nueva forma.',
-'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
-'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
-'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
-'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
-'Conserva los píxeles más oscuros de ambas capas.',
-'Conserva los píxeles más claros de ambas capas.',
-'Divide la capa inferior por la capa superior invertida.',
-'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
-'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
-'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
-'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
-'Al igual que la diferencia, pero con menor contraste.',
-'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
-'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
-'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
-'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
-          ].reverse();
-var width = 320;
-var height = 340;
-
- -

Programa principal

- -

Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:

- -
window.onload = function() {
-    // lum en sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // redimensionar canvas
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix()
-    colorSphere();
-    runComposite();
-    return;
-};
-
- -

Y este código, runComposite(), maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.

- -
function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-    return canvas;
-}
-
-function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
-
-        var canvasToDrawOn = createCanvas();
-        var canvasToDrawFrom = createCanvas();
-        var canvasToDrawResult = createCanvas();
-
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('existing content', 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('new content', 5, height/2 - 5);
-        ctx.restore();
-
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
-
-        dl.appendChild(dd);
-    }
-};
-
- -

Funciones de utilidad

- -

El programa se basa en una serie de funciones de utilidad.

- -
var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
-};
-
- -
var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // por grado
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
-        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
-        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-        gradient.addColorStop(0, "rgba(0,0,0,0)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
-    ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
-    ctx.fill();
-    return ctx.canvas;
-};
-
- -
// HSV (1978) = H: Hue / S: Saturation / V: Value
-Color = {};
-Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
-    }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
-};
-
-var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
-};
-
-var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/es/web/api/canvas_api/tutorial/compositing/example/index.html b/files/es/web/api/canvas_api/tutorial/compositing/example/index.html new file mode 100644 index 0000000000..b85b83238c --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/compositing/example/index.html @@ -0,0 +1,295 @@ +--- +title: Ejemplo de composición +slug: Web/API/Canvas_API/Tutorial/Compositing/Ejemplo +tags: + - Canvas + - Ejemplo + - HTML + - HTML5 + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example +--- +
{{CanvasSidebar}}
+ +

Este programa de ejemplo muestra una cantidad de operaciones de composición. La salida se ve así:

+ +

{{EmbedLiveSample("Ejemplo_de_composición", "100%", 7250)}}

+ +

Ejemplo de composición

+ +

Este código establece los valores globales utilizados por el resto del programa.

+ +
var canvas1 = document.createElement("canvas");
+var canvas2 = document.createElement("canvas");
+var gco = [ 'source-over','source-in','source-out','source-atop',
+            'destination-over','destination-in','destination-out','destination-atop',
+            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+          ].reverse();
+var gcoText = [
+'Esta es la configuración predeterminada y dibuja nuevas formas sobre el contenido del canvas existente.',
+'La nueva forma se dibuja solo donde la nueva forma y el canvas de destino se superponen. Todo lo demás se hace transparente.',
+'La nueva forma se dibuja donde no se superpone al contenido del canvas existente.',
+'La nueva forma solo se dibuja donde se solapa con el contenido del canvas existente.',
+'Se dibujan nuevas formas detrás del contenido del canvas existente',
+'El contenido del canvas existente se conserva donde la nueva forma y el contenido del canvas existente se superponen. Todo lo demás se hace transparente.',
+'El contenido existente se mantiene donde no se superpone a la nueva forma.',
+'El canvas existente solo se conserva donde se solapa con la nueva forma. La nueva forma se dibuja detrás del contenido del canvas.',
+'Donde ambas formas se superponen, el color se determina agregando valores de color.',
+'Solo se muestra la nueva forma.',
+'Las formas se hacen transparentes donde ambas se superponen y se dibujan de manera normal en cualquier otro lugar.',
+'Los píxeles de la capa superior se multiplican con el píxel correspondiente de la capa inferior. El resultado es una imagen más oscura. ',
+'Los píxeles están invertidos, multiplicados e invertidos nuevamente. Una imagen más clara es el resultado (opuesto a multiplicar).',
+'Una combinación de multiplicar y pantalla. Las partes oscuras en la capa base se oscurecen y las partes claras se vuelven más claras.',
+'Conserva los píxeles más oscuros de ambas capas.',
+'Conserva los píxeles más claros de ambas capas.',
+'Divide la capa inferior por la capa superior invertida.',
+'Divide la capa inferior invertida por la capa superior, y luego invierte el resultado.',
+'Una combinación de multiplicar y pantalla como superposición, pero con la parte superior y la capa inferior intercambiado.',
+'Una versión más suave de la luz dura. Negro puro o blanco no da como resultado negro o blanco puro.',
+'Resta la capa inferior de la capa superior o viceversa para obtener siempre un valor positivo.',
+'Al igual que la diferencia, pero con menor contraste.',
+'Conserva la luma y el croma de la capa inferior, mientras adopta el tono de la capa superior.',
+'Conserva la luma y el tono de la capa inferior, mientras adopta el croma de la capa superior.',
+'Conserva la luma de la capa inferior, mientras adopta el matiz y el croma de la capa superior.',
+'Conserva el tono y el croma de la capa inferior, mientras adopta la luma de la capa superior.'
+          ].reverse();
+var width = 320;
+var height = 340;
+
+ +

Programa principal

+ +

Cuando se carga la página, este código se ejecuta para configurar y ejecutar el ejemplo:

+ +
window.onload = function() {
+    // lum en sRGB
+    var lum = {
+        r: 0.33,
+        g: 0.33,
+        b: 0.33
+    };
+    // redimensionar canvas
+    canvas1.width = width;
+    canvas1.height = height;
+    canvas2.width = width;
+    canvas2.height = height;
+    lightMix()
+    colorSphere();
+    runComposite();
+    return;
+};
+
+ +

Y este código, runComposite(), maneja la mayor parte del trabajo, dependiendo de una serie de funciones de utilidad para hacer las partes difíciles.

+ +
function createCanvas() {
+    var canvas = document.createElement("canvas");
+    canvas.style.background = "url("+op_8x8.data+")";
+    canvas.style.border = "1px solid #000";
+    canvas.style.margin = "5px";
+    canvas.width = width/2;
+    canvas.height = height/2;
+    return canvas;
+}
+
+function runComposite() {
+    var dl = document.createElement("dl");
+    document.body.appendChild(dl);
+    while(gco.length) {
+        var pop = gco.pop();
+        var dt = document.createElement("dt");
+        dt.textContent = pop;
+        dl.appendChild(dt);
+        var dd = document.createElement("dd");
+        var p = document.createElement("p");
+        p.textContent = gcoText.pop();
+        dd.appendChild(p);
+
+        var canvasToDrawOn = createCanvas();
+        var canvasToDrawFrom = createCanvas();
+        var canvasToDrawResult = createCanvas();
+
+        var ctx = canvasToDrawResult.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = pop;
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText(pop, 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawOn.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('existing content', 5, height/2 - 5);
+        ctx.restore();
+
+        var ctx = canvasToDrawFrom.getContext('2d');
+        ctx.clearRect(0, 0, width, height)
+        ctx.save();
+        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+        ctx.fillStyle = "rgba(0,0,0,0.8)";
+        ctx.fillRect(0, height/2 - 20, width/2, 20);
+        ctx.fillStyle = "#FFF";
+        ctx.font = "14px arial";
+        ctx.fillText('new content', 5, height/2 - 5);
+        ctx.restore();
+
+        dd.appendChild(canvasToDrawOn);
+        dd.appendChild(canvasToDrawFrom);
+        dd.appendChild(canvasToDrawResult);
+
+        dl.appendChild(dd);
+    }
+};
+
+ +

Funciones de utilidad

+ +

El programa se basa en una serie de funciones de utilidad.

+ +
var lightMix = function() {
+    var ctx = canvas2.getContext("2d");
+    ctx.save();
+    ctx.globalCompositeOperation = "lighter";
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(255,0,0,1)";
+    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,0,255,1)";
+    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+    ctx.fill()
+    ctx.beginPath();
+    ctx.fillStyle = "rgba(0,255,0,1)";
+    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.fillStyle = "#f00";
+    ctx.fillRect(0,0,30,30)
+    ctx.fill();
+};
+
+ +
var colorSphere = function(element) {
+    var ctx = canvas1.getContext("2d");
+    var width = 360;
+    var halfWidth = width / 2;
+    var rotate = (1 / 360) * Math.PI * 2; // por grado
+    var offset = 0; // scrollbar offset
+    var oleft = -20;
+    var otop = -20;
+    for (var n = 0; n <= 359; n ++) {
+        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
+        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
+        gradient.addColorStop(0, "rgba(0,0,0,0)");
+        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+        gradient.addColorStop(1, "rgba(255,255,255,1)");
+        ctx.beginPath();
+        ctx.moveTo(oleft + halfWidth, otop);
+        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+        ctx.lineTo(oleft + halfWidth + 6, otop);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+        ctx.translate(oleft + halfWidth, otop + halfWidth);
+        ctx.rotate(rotate);
+        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+    }
+    ctx.beginPath();
+    ctx.fillStyle = "#00f";
+    ctx.fillRect(15,15,30,30)
+    ctx.fill();
+    return ctx.canvas;
+};
+
+ +
// HSV (1978) = H: Hue / S: Saturation / V: Value
+Color = {};
+Color.HSV_RGB = function (o) {
+    var H = o.H / 360,
+        S = o.S / 100,
+        V = o.V / 100,
+        R, G, B;
+    var A, B, C, D;
+    if (S == 0) {
+        R = G = B = Math.round(V * 255);
+    } else {
+        if (H >= 1) H = 0;
+        H = 6 * H;
+        D = H - Math.floor(H);
+        A = Math.round(255 * V * (1 - S));
+        B = Math.round(255 * V * (1 - (S * D)));
+        C = Math.round(255 * V * (1 - (S * (1 - D))));
+        V = Math.round(255 * V);
+        switch (Math.floor(H)) {
+            case 0:
+                R = V;
+                G = C;
+                B = A;
+                break;
+            case 1:
+                R = B;
+                G = V;
+                B = A;
+                break;
+            case 2:
+                R = A;
+                G = V;
+                B = C;
+                break;
+            case 3:
+                R = A;
+                G = B;
+                B = V;
+                break;
+            case 4:
+                R = C;
+                G = A;
+                B = V;
+                break;
+            case 5:
+                R = V;
+                G = A;
+                B = B;
+                break;
+        }
+    }
+    return {
+        R: R,
+        G: G,
+        B: B
+    };
+};
+
+var createInterlace = function (size, color1, color2) {
+    var proto = document.createElement("canvas").getContext("2d");
+    proto.canvas.width = size * 2;
+    proto.canvas.height = size * 2;
+    proto.fillStyle = color1; // top-left
+    proto.fillRect(0, 0, size, size);
+    proto.fillStyle = color2; // top-right
+    proto.fillRect(size, 0, size, size);
+    proto.fillStyle = color2; // bottom-left
+    proto.fillRect(0, size, size, size);
+    proto.fillStyle = color1; // bottom-right
+    proto.fillRect(size, size, size, size);
+    var pattern = proto.createPattern(proto.canvas, "repeat");
+    pattern.data = proto.canvas.toDataURL();
+    return pattern;
+};
+
+var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..3467533e93 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,513 @@ +--- +title: Dibujando formas con canvas +slug: Web/Guide/HTML/Canvas_tutorial/Dibujando_formas +tags: + - Canvas + - HTML + - HTML Canvas + - HTML5 + - Intermedio + - Tutorial + - graficos +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
+ +
+

Ahora que hemos preparado nuestro entorno canvas, podemos entrar en detalles de como dibujar en el canvas. Al final de este artículo, habrás aprendido  como dibujar rectángulos, triángulos, líneas, arcos y curvas, dándote familiaridad con algunas figuras básicas. Trabajar con rutas es esencial cuando dibujamos objetos sobre el canvas y veremos como se puede hacer eso.

+
+ +

La cuadrícula

+ +

Antes de que podamos empezar a dibujar, necesitamos hablar sobre la cuadrícula del canvas o el espacio de coordenadas. La plantilla HTML de la página anterior tenía un elemento canvas con un 'height' y un 'width' de 150 píxeles. A la derecha, puedes ver este canvas con la cuadrícula por defecto superpuesta. Normalmente una unidad en la cuadrícula corresponde a un píxel en el elemento canvas. El origen de esta cuadrícula está posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posicion diferente, girar la cuadrícula e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas común.

+ +

Dibujando rectángulos

+ +

A diferencia de SVG, {{HTMLElement("canvas")}} solo soporta una forma primitiva: rectangulos. Todas las otras formas deben ser creadas por la combinación de uno o más trazos, listas de puntos conectados por líneas. Afortunadamente, tenemos una variedad de funciones para dibujar trazos  que hacen posible componer formas muy complejas.

+ +
+

Primero veamos el rectángulo. Aquí hay tres funciones que podemos usar en el canvas para dibujarlos:

+ +
+
fillRect(x, y, width, height)
+
Dibuja un rectángulo relleno.
+
strokeRect(x, y, width, height)
+
Dibuja el contorno de un rectángulo.
+
clearRect(x, y, width, height)
+
Borra un área rectangular especificada, dejándola totalmente transparente.
+
+ +

Cada una de estas tres funciones toma los mismos parámetros. X e Y especifican la posición del canvas (en relación con el origen) desde la esquina superior izquierda del rectángulo. Tambien especifica los parámetros de anchura y altura que proporcionan el tamaño del rectángulo.

+ +

A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.

+ +

Ejemplo de forma rectangular

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.fillRect(25,25,100,100);
+    ctx.clearRect(45,45,60,60);
+    ctx.strokeRect(50,50,50,50);
+  }
+}
+ +

El resultado de este ejemplo se muestra a continuación.

+ +

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

La función fillRect() dibuja un cuadrado grande negro de 100 píxeles en cada lado. La función clearRect() luego borra un cuadrado de 60x60 píxeles del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro del cuadrado borrado.

+ +

En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo de diferentes formas.

+ +

A diferencia de las funciones de trazo que veremos en la próxima sección, las tres funciones del rectángulo dibujan inmediatamente en el canvas.

+ +

Dibujando trazos

+ +

Crear formas mediante trazos requiere algunos pasos adicionales.

+ +
    +
  1. Primero, se crea el trazo.
    2. +
  2. A continuación, se usan comandos de dibujo para dibujar dentro del trazo.
    3. +
  3. Después, se cierra el trazo.
    4. +
  4. Una vez el trazo ha sido creado, se le puede dar contorno o relleno para renderizarlo.
    5. +
+ +

Estas son las funciones que se usan para llevar a cabo estos pasos:

+ +
+
beginPath()
+
Crea un nuevo trazo. Una vez creado, los comandos de dibujo futuros son aplicados dentro del trazo y usados para construir el nuevo trazo hacia arriba.
+
closePath()
+
Cierra el trazo de tal forma que los comandos de dibujo futuros son, una vez más redireccionados al contexto.
+
stroke()
+
Dibuja el contorno de la forma.
+
fill()
+
Dibuja una forma solida rellenando el área del trazo.
+
+ +

El primer paso para crear un trazo es llamar la función beginPath(). Internamente, los trazos son guardados como una lista de subtrazos (lineas, arcos, etc) los cuales juntos crean una forma. Todo tiempo que sea llamado este método la lista es reseteada y podemos empezar a dibujar nuevas formas.

+ +
Nota: Cuando el trazo actual este vacio, como aparece inmediatamente despues de llamar la función beginPath(), o en un canvas nuevo, el primer comando para la construcción del trazo es siempre tratada como un moveTo(), independientemente de cual es el trazo actual. Por esta razón casi siempre querrás específicamente setear tu posición de inicio despues de resetear un trazo.
+ +

El segundo paso es llamar los métodos que específican los trazos a crear. Los veremos en seguida.

+ +

El tercero, y un paso opcional, es llamar a la función closePath(). Este método trata de cerrar la forma dibujando una linea recta desde el punto actual al inicio. Si la forma ya ha sido cerrada o hay solamente un punto en la lista, la función hace nada.

+ +
Nota: Cuando llamas a la función fill(), cualquier forma abierta es cerrada automaticamente, de tal forma que no tendrás que llamar a la función closePath(). Este no es el caso cuando llamas a la función stroke().
+ +

Dibujando un triangulo

+ +

Por ejemplo, el código para dibujar un triangulo luciría como el siguiente:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75,50);
+    ctx.lineTo(100,75);
+    ctx.lineTo(100,25);
+    ctx.closePath();
+    ctx.fill();
+  }
+}
+
+ +

El resultado lucirá así:

+ +

{{EmbedLiveSample("Drawing_a_triangle", 160, 160)}}

+ +

Moviendo la pluma

+ +

Una función muy útil, la cual realmente no dibuja algo pero convierte parte de la lista de trazos descrita arriba, es la función moveTo(). Puedes, probablemente, pensar mejor de esta como levantar el lápiz o la pluma de un punto en un pedazo de papel y ponerlo en el siguiente punto.

+ +
+
moveTo(x, y)
+
Mueve la pluma a las coordenadas específicadas por x e y.
+
+ +

Cuando el canvas es inicializado ó la función beginPath() es llamada, querrás usar la función moveTo() para colocar el punto de inicio en alguna otra parte. Podríamos usar moveTo() para dibujar trazos sin conectar. Toma un vistazo a la cara sonriente de abajo. He marcado los lugares donde use el método moveTo() (las líneas rojas).

+ +

Para intentar esto por tí mismo, puedes usar el pequeño código de abajo. Solo pégalo dentro de la función draw() que vimos antes.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75,75,50,0,Math.PI*2,true); // Círculo externo
+    ctx.moveTo(110,75);
+    ctx.arc(75,75,35,0,Math.PI,false);   // Boca (contra reloj)
+    ctx.moveTo(65,65);
+    ctx.arc(60,65,5,0,Math.PI*2,true);  // Ojo izquierdo
+    ctx.moveTo(95,65);
+    ctx.arc(90,65,5,0,Math.PI*2,true);  // Ojo derecho
+    ctx.stroke();
+  }
+}
+
+ +

El resultado luce así:

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

Si quisieras ver las líneas conectadas, puedes remover las líneas de código que llaman moveTo().

+ +
+

Nota: Para aprender más sobre la función arc(), vea los {{anch("Arcs")}} a continuación.

+
+ +

Líneas

+ +

Para dibujar lineas rectas usa el método lineTo().

+ +
+
lineTo(x, y)
+
Dibuja una línea desde la posición actual del dibujo a la posición específicada por x e y.
+
+ +

Este método toma dos argumentos x e y, los cuales son las coordenadas del punto final de la linea. El punto de inicio es dependiente de los trazos previamente dibujados, donde el punto final del trazo anterior es el punto inicial para el siguiente, etc. El punto de inicio también puede ser cambiado usando el método moveTo().

+ +

El ejemplo siguiente dibuja dos triángulos, uno rellenado y el otro contorneado.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Triángulo rellenado
+    ctx.beginPath();
+    ctx.moveTo(25,25);
+    ctx.lineTo(105,25);
+    ctx.lineTo(25,105);
+    ctx.fill();
+
+    // Triángulo contorneado
+    ctx.beginPath();
+    ctx.moveTo(125,125);
+    ctx.lineTo(125,45);
+    ctx.lineTo(45,125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

Esto comienza llamando a beginPath() para empezar una nueva forma. Entonces usamos el método moveTo() para mover el punto de inicio a la posición deseada. Debajo de esto dos líneas son dibujadas lo cual pinta dos lados del triángulo.

+ +

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

Te darás cuenta de la diferencia entre el triángulo rellenado y el contorneado. Esto es, como se menciona arriba, porque las formas son automáticamente cerradas cuando un trazo es rellenado, pero no cuando esta contorneado. Si sacamos el closePath() para el triángulo contorneado, solamente dos líneas serian dibujadas, no un triángulo completo.

+ +

Arcos

+ +

Para dibujar arcos o circulos usamos el método arc(). También puedes usar arcTo(), pero su implementación es un poco menos confiable, así que no lo cubriremos aquí.

+ +
+
arc(x, y, radius, startAngle, endAngle, anticlockwise)
+
Dibuja un arco.
+
+ +

Este método toma cinco parámetros: x e y son las coordenadas del centro del círculo en el cual el arco debería ser dibujado. radius se explica por sí solo. Los parámetros startAngle y endAngle definen el punto de inicio y punto final del arco en radianes a lo largo de la curva del círculo. Estos son medidos desde el eje x. El parámetro anticlockwise es un valor Booleano el cual cuando es verdadero (true) dibuja el arco al contrario de las manecillas del reloj, de lo contrario el arco es dibujado al sentido de las manecillas del reloj.

+ +
+

Nota: Los ángulos en la función del arco (arc) son medidos en radianes, no en grados. Para convertir grados a radianes puedes usar la siguiente expresión en Javascript: radians = (Math.PI/180)*degrees.

+
+ +

El siguiente ejemplo es un poco más complejo que otros que hemos visto arriba. Esto dibuja 12 diferentes arcos, todos con diferentes ángulos y rellenos.

+ +

Las dos sentencias for son para iterar a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo trazo llamando beginPath(). En el código, cada uno de los parámetros para el arco estan en una variable para su entendimiento, pero no es necesario esto en la vida real.

+ +

Las coordenadas x e y deberían ser suficientemente claras. radius y startAngle estan arreglados. El endAngle inicia en 180 grados (la mitad de un círculo) en la primera columna y es incrementado por pasos de 90 grados, culminando en un círculo completo en la última columna.

+ +

El parámetro clockwise resulta, en la primera y tercera fila siendo dibujado como un arco al sentido de las manecillas de reloj y la segunda y cuarta fila como arcos al contrario de las manecillas de reloj. Finalmente, la estructura if hace los arcos contorneados a la mitad desde arriba y los arcos hacia abajorellenados a la mitad.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    for(var i=0;i<4;i++){
+      for(var j=0;j<3;j++){
+        ctx.beginPath();
+        var x              = 25+j*50;               // Coordenada x
+        var y              = 25+i*50;               // Coordenada y
+        var radius         = 20;                    // Radio del arco
+        var startAngle     = 0;                     // Punto inicial del círculo
+        var endAngle       = Math.PI+(Math.PI*j)/2; // Punto final del círculo
+        var anticlockwise  = i%2==0 ? false : true; // Sentido de las manecillas del reloj y contrario a ellas
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i>1){
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} + +

Curvas Bezier curvas cuadráticas

+ +

El siguiente tipo de trazos disponibles son las  curvas Bézier, en sus dos variantes, cúbicas y cuadráticas. Son usadas generalmente para dibujar complejas formas orgánicas.

+ +
+
quadraticCurveTo(cp1x, cp1y, x, y)
+
Dibuja una curva cuadrática de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.
+
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
+
Dibuja una curva cúbica de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y (cp2x, cp2y).
+
+ +

La diferencia entre estos puede describirse mejor utilizando la imagen de la derecha. Una curva cuadrática de Bézier tiene un punto inicial y un punto final (puntos azules) y un solo punto de control (indicado por el punto rojo), mientras que una curva cúbica de Bézier utiliza dos puntos de control.

+ +

Los parámetros x e y de ambos métodos son las coordenadas del punto final. cp1x y cp1y son las coordenadas del primer punto de control, y cp2x y cp2y son las coordenadas del segundo punto de control.

+ +

El uso de curvas cuadráticas y cúbicas Bézier puede ser bastante difícil, ya que a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos respuesta visual directa en cuanto a lo que estamos haciendo. Esto hace bastante difícil dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si tienes el tiempo y, sobre todo, la paciencia, se pueden crear formas mucho más complejas.

+ +

No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas que se dibujan que finalmente dan lugar a una forma completa.

+ +

Curvas de Bezier cuadraticas

+ +

Este ejemplo usa multiples curvas cuadraticas de Bézier para renderizar un globo de voz.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,25);
+    ctx.quadraticCurveTo(25,25,25,62.5);
+    ctx.quadraticCurveTo(25,100,50,100);
+    ctx.quadraticCurveTo(50,120,30,125);
+    ctx.quadraticCurveTo(60,120,65,100);
+    ctx.quadraticCurveTo(125,100,125,62.5);
+    ctx.quadraticCurveTo(125,25,75,25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

Curvas cúbicas Bezier

+ +

Este ejemplo dibuja un corazon usanco curvas cúbicas de Bézier.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75,40);
+    ctx.bezierCurveTo(75,37,70,25,50,25);
+    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
+    ctx.bezierCurveTo(20,80,40,102,75,120);
+    ctx.bezierCurveTo(110,102,130,80,130,62.5);
+    ctx.bezierCurveTo(130,62.5,130,25,100,25);
+    ctx.bezierCurveTo(85,25,75,37,75,40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

Rectangles

+ +

In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

+ +
+
rect(x, y, width, height)
+
Draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height.
+
+ +

When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

+ +

Making combinations

+ +

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext){
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx,12,12,150,150,15);
+    roundedRect(ctx,19,19,150,150,9);
+    roundedRect(ctx,53,53,49,33,10);
+    roundedRect(ctx,53,119,49,16,6);
+    roundedRect(ctx,135,53,49,33,10);
+    roundedRect(ctx,135,119,25,49,10);
+
+    ctx.beginPath();
+    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
+    ctx.lineTo(31,37);
+    ctx.fill();
+
+    for(var i=0;i<8;i++){
+      ctx.fillRect(51+i*16,35,4,4);
+    }
+
+    for(i=0;i<6;i++){
+      ctx.fillRect(115,51+i*16,4,4);
+    }
+
+    for(i=0;i<8;i++){
+      ctx.fillRect(51+i*16,99,4,4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83,116);
+    ctx.lineTo(83,102);
+    ctx.bezierCurveTo(83,94,89,88,97,88);
+    ctx.bezierCurveTo(105,88,111,94,111,102);
+    ctx.lineTo(111,116);
+    ctx.lineTo(106.333,111.333);
+    ctx.lineTo(101.666,116);
+    ctx.lineTo(97,111.333);
+    ctx.lineTo(92.333,116);
+    ctx.lineTo(87.666,111.333);
+    ctx.lineTo(83,116);
+    ctx.fill();
+
+    ctx.fillStyle = "white";
+    ctx.beginPath();
+    ctx.moveTo(91,96);
+    ctx.bezierCurveTo(88,96,87,99,87,101);
+    ctx.bezierCurveTo(87,103,88,106,91,106);
+    ctx.bezierCurveTo(94,106,95,103,95,101);
+    ctx.bezierCurveTo(95,99,94,96,91,96);
+    ctx.moveTo(103,96);
+    ctx.bezierCurveTo(100,96,99,99,99,101);
+    ctx.bezierCurveTo(99,103,100,106,103,106);
+    ctx.bezierCurveTo(106,106,107,103,107,101);
+    ctx.bezierCurveTo(107,99,106,96,103,96);
+    ctx.fill();
+
+    ctx.fillStyle = "black";
+    ctx.beginPath();
+    ctx.arc(101,102,2,0,Math.PI*2,true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89,102,2,0,Math.PI*2,true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx,x,y,width,height,radius){
+  ctx.beginPath();
+  ctx.moveTo(x,y+radius);
+  ctx.lineTo(x,y+height-radius);
+  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
+  ctx.lineTo(x+width-radius,y+height);
+  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
+  ctx.lineTo(x+width,y+radius);
+  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
+  ctx.lineTo(x+radius,y);
+  ctx.quadraticCurveTo(x,y,x,y+radius);
+  ctx.stroke();
+}
+
+ +
+

The resulting image looks like this:

+ +

{{EmbedLiveSample("Making_combinations", 160, 160)}}

+ +

We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.

+ +

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

+
+
+ +

 

diff --git a/files/es/web/api/canvas_api/tutorial/drawing_text/index.html b/files/es/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..10a5970824 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,67 @@ +--- +title: Dibujar texto usando canvas +slug: Dibujar_texto_usando_canvas +tags: + - 'HTML:Canvas' +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +

{{ Gecko_minversion_header(1.9) }} +{{ Fx_minversion_header(3) }} +El elemento <canvas> permite dibujar texto en él a través de una API experimental de Mozilla. +

+

API

+
attribute DOMString mozTextStyle;
+void mozDrawText(in DOMString textToDraw);
+float mozMeasureText(in DOMString textToMeasure);
+void mozPathText(in DOMString textToPath);
+void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
+
+

Notas

+ +

Demostraciones

+

Mira algunos ejemplos aquí, aquí, y aquí. +

+

Cambiar el tipo de letra actual

+

El atributo mozTextStyle contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las tipografías CSS. +

Ej: +

+
ctx.mozTextStyle = "20pt Arial"
+
+

Dibujar texto

+

Dibujar es muy sencillo. mozDrawText usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto. +

+
ctx.translate(10, 50);
+ctx.fillStyle = "Red";
+ctx.mozDrawText("Sample String");
+
+

Medir texto

+

A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo). +

+
var text = "Sample String";
+var width = ctx.canvas.width;
+var len = ctx.mozMeasureText(text);
+ctx.translate(len/2, 0);
+ctx.mozDrawText(text);
+
+

Interacción texto/trazo

+

Si quieres tachar un texto, mozDrawText no te lo permite. En cambio, mozPathText agrega el tachado de texto al trazo actual. +

+
ctx.fillStyle = "green";
+ctx.strokeStyle = "black";
+ctx.mozPathText("Sample String");
+ctx.fill()
+ctx.stroke()
+
+

Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece mozTextAlongPath. Al contrario de otras funciones de texto, mozTextAlongPath necesita dos argumentos: el texto y qué se quiere hacer con él. mozTextAlongPath aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter. +

Una vez que mozTextAlongPath sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es false, entonces dibuja el carácter como lo haría mozDrawText. Si es true, agrega el carácter al trazo actual, como lo hace mozPathText. Esto puede usarse para crear efectos únicos. +


+


+

+
+
+{{ languages( { "en": "en/Drawing_text_using_a_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "ja": "ja/Drawing_text_using_a_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }} diff --git a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..967710de49 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,99 @@ +--- +title: Hit regions and accessibility +slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.
+ +
El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.
+ +

Fallback content

+ +

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at html5accessibility.com demonstrates how this can be done:

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

See the video how NVDA reads this example by Steve Faulkner.

+ +

ARIA rules

+ +

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See ARIA and ARIA techniques for more information.

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

Hit regions

+ +

Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
Adds a hit region to the canvas.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
Removes the hit region with the specified id from the canvas.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
Removes all hit regions from the canvas.
+
+ +

You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.

+ +
<canvas id="canvas"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+</script>
+ +

The addHitRegion() method also takes a control option to route events to an element (that is a descendant of the canvas):

+ +
ctx.addHitRegion({control: element});
+ +

This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this codepen demo.

+ +

Focus rings

+ +

When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the drawFocusIfNeeded property can be used.

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
If a given element is focused, this method draws a focus ring around the current path.
+
+ +

Additionally, the scrollPathIntoView() method can be used to make an element visible on the screen if focused, for example.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
Scrolls the current path or a given path into the view.
+
+ +

See also

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/es/web/api/canvas_api/tutorial/index.html b/files/es/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..da5b0b3cc9 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,61 @@ +--- +title: Tutorial Canvas +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - Canvas + - HTML5 + - graficos +translation_of: Web/API/Canvas_API/Tutorial +--- +

+ +

<canvas> es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones. Las imágenes a la derecha muestran algunos ejemplos de implementaciones <canvas>  las cuales se verán en un futuro en este tutorial.

+ +

<canvas>  fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El <canvas> es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.

+ +

En este tutorial se describe cómo usar el elemento <canvas> para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

+ +

Antes de Empezar

+ +

Usar el elemento <canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento <canvas> no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

+ +

En este Tutorial

+ + + +

Vea también

+ + + +

Nota a los contribuyentes

+ +

Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.

+ +
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..145e2734f0 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,19 @@ +--- +title: Optimizing canvas +slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +

{{HTMLElement("canvas")}} es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.

+

A continuación una lista de tips par mejorar el rendimiento:

+ +

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}

diff --git a/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html new file mode 100644 index 0000000000..14ccc9c4a5 --- /dev/null +++ b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html @@ -0,0 +1,301 @@ +--- +title: Pixel manipulation with canvas +slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas +translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
+ +
+

Hasta ahora, no habíamos mirado los píxeles reales de nuestro canvas. Con el objeto ImageData, puedes leer y escribir directamente un array de datos para manipular píxeles.

+ +

También veremos cómo se puede controlar el suavizado de la imagen (antialiasing) y cómo guardar imágenes de tu canvas.

+
+ +

El objeto ImageData

+ +

El objeto {{domxref("ImageData")}} representa los datos pixelados subyacentes de un área de un objeto lienzo. Contiene los siguientes atributos de sólo lectura:

+ +
+
width
+
El ancho de la imagen en píxeles.
+
height
+
La altura de la imagen en píxeles.
+
data
+
Un objeto {{jsxref("Uint8ClampedArray")}} que representa un array unidimensional, contiene información en formato RGBA, con valores desde 0 hasta 255 (incluído).
+
+ +

La propiedad data devuelve un  {{jsxref("Uint8ClampedArray")}}, al que se puede acceder para ver los datos originales del pixel; cada pixel está representado por cuatro valores (rojo, verde, azul, y alfa, en ese orden; esto es, formato "RGBA"). Cada componente de color se representa con un valor entero entre 0 y 255. Dentro del array, cada componente ocupa un índice consecutivo, comenzando con 0 desde el punto superior izquierdo, continuando de izquierda a derecha y de arriba hacia abajo, a través del array.

+ +

El {{jsxref("Uint8ClampedArray")}} contiene alto × ancho × 4 bytes de datos, con valores de índice en el rango entre 0 y (alto×ancho×4)-1.

+ +

Por ejemplo, para leer el valor del componente azul del pixel en la columna 200, fila 50 de una imagen, deberías hacer lo siguiente:

+ +

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

+ +

Si se le da un conjunto de coordenadas (X e Y), puede que termine haciendo algo así:

+ +
var xCoord = 50;
+var yCoord = 100;
+var canvasWidth = 1024;
+
+function getColorIndicesForCoord(x, y, width) {
+  var red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+}
+
+var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+var redIndex = colorIndices[0];
+var greenIndex = colorIndices[1];
+var blueIndex = colorIndices[2];
+var alphaIndex = colorIndices[3];
+
+var redForCoord = imageData.data[redIndex];
+var greenForCoord = imageData.data[greenIndex];
+var blueForCoord = imageData.data[blueIndex];
+var alphaForCoord = imageData.data[alphaIndex];
+
+ +

O, en ES6 sería algo así:

+ +
const xCoord = 50;
+const yCoord = 100;
+const canvasWidth = 1024;
+
+const getColorIndicesForCoord = (x, y, width) => {
+  const red = y * (width * 4) + x * 4;
+  return [red, red + 1, red + 2, red + 3];
+};
+
+const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
+
+const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
+
+ +

You may also access the size of the pixel array in bytes by reading the Uint8ClampedArray.length attribute:

+ +
var numBytes = imageData.data.length;
+
+ +

Creando un objeto ImageData

+ +

Para crear un objeto nuevo y vacío tipo ImageData, debes usar el método  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hay dos versiones del método createImageData():

+ +
var myImageData = ctx.createImageData(width, height);
+ +

Esto crea un nuevo objeto ImageData con las dimensiones especificadas. Todos los pixels tienen valor correspondiente a negro - transparente (0,0,0,0).

+ +

También puedes crear un nuevo objeto ImageData con las mismas dimensiones que otro objeto, especificado por anotherImageData. Los píxels del nuevo objeto tienen valor negro - transparente. ¡Esto no es una copia de los datos de la imagen!

+ +
var myImageData = ctx.createImageData(anotherImageData);
+ +

Getting the pixel data for a context

+ +

To obtain an ImageData object containing a copy of the pixel data for a canvas context, you can use the getImageData() method:

+ +
var myImageData = ctx.getImageData(left, top, width, height);
+ +

This method returns an ImageData object representing the pixel data for the area of the canvas whose corners are represented by the points (left,top), (left+width, top), (left, top+height), and (left+width, top+height). The coordinates are specified in canvas coordinate space units.

+ +
+

Note: Any pixels outside the canvas are returned as transparent black in the resulting ImageData object.

+
+ +

This method is also demonstrated in the article Manipulating video using canvas.

+ +

A color picker

+ +

In this example we are using the getImageData() method to display the color under the mouse cursor. For this, we need the current position of the mouse with layerX and layerY, then we look up the pixel data on that position in the pixel array that getImageData() provides us. Finally, we use the array data to set a background color and a text in the <div> to display the color.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+img.onload = function() {
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+};
+var color = document.getElementById('color');
+function pick(event) {
+  var x = event.layerX;
+  var y = event.layerY;
+  var pixel = ctx.getImageData(x, y, 1, 1);
+  var data = pixel.data;
+  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
+             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
+  color.style.background =  rgba;
+  color.textContent = rgba;
+}
+canvas.addEventListener('mousemove', pick);
+
+ +

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

+ +

Painting pixel data into a context

+ +

You can use the putImageData() method to paint pixel data into a context:

+ +
ctx.putImageData(myImageData, dx, dy);
+
+ +

The dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.

+ +

For example, to paint the entire image represented by myImageData to the top left corner of the context, you can simply do the following:

+ +
ctx.putImageData(myImageData, 0, 0);
+
+ +

Grayscaling and inverting colors

+ +

In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putImageData(). The invert function simply subtracts each color from the max value 255. The grayscale function simply uses the average of red, green and blue. You can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. See Grayscale on Wikipedia for more information.

+ + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  var data = imageData.data;
+
+  var invert = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = 255 - data[i];     // red
+      data[i + 1] = 255 - data[i + 1]; // green
+      data[i + 2] = 255 - data[i + 2]; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var grayscale = function() {
+    for (var i = 0; i < data.length; i += 4) {
+      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
+      data[i]     = avg; // red
+      data[i + 1] = avg; // green
+      data[i + 2] = avg; // blue
+    }
+    ctx.putImageData(imageData, 0, 0);
+  };
+
+  var invertbtn = document.getElementById('invertbtn');
+  invertbtn.addEventListener('click', invert);
+  var grayscalebtn = document.getElementById('grayscalebtn');
+  grayscalebtn.addEventListener('click', grayscale);
+}
+
+ +

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+ +

Zooming and anti-aliasing

+ +

With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details.

+ +

We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.

+ +
zoomctx.drawImage(canvas,
+                  Math.abs(x - 5), Math.abs(y - 5),
+                  10, 10, 0, 0, 200, 200);
+ +

Because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. You can toggle the checkbox to see the effect of the imageSmoothingEnabled property (which needs prefixes for different browsers).

+ + + + + +
var img = new Image();
+img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+img.onload = function() {
+  draw(this);
+};
+
+function draw(img) {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.drawImage(img, 0, 0);
+  img.style.display = 'none';
+  var zoomctx = document.getElementById('zoom').getContext('2d');
+
+  var smoothbtn = document.getElementById('smoothbtn');
+  var toggleSmoothing = function(event) {
+    zoomctx.imageSmoothingEnabled = this.checked;
+    zoomctx.mozImageSmoothingEnabled = this.checked;
+    zoomctx.webkitImageSmoothingEnabled = this.checked;
+    zoomctx.msImageSmoothingEnabled = this.checked;
+  };
+  smoothbtn.addEventListener('change', toggleSmoothing);
+
+  var zoom = function(event) {
+    var x = event.layerX;
+    var y = event.layerY;
+    zoomctx.drawImage(canvas,
+                      Math.abs(x - 5),
+                      Math.abs(y - 5),
+                      10, 10,
+                      0, 0,
+                      200, 200);
+  };
+
+  canvas.addEventListener('mousemove', zoom);
+}
+ +

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

+ +

Guardando las imágenes

+ +

The {{domxref("HTMLCanvasElement")}} provides a toDataURL() method, which is useful when saving images. It returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

+ +
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
+
Default setting. Creates a PNG image.
+
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
+
Creates a JPG image. Optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file size.
+
+ +

Once you have generated a data URI from you canvas, you are able to use it as the source of any {{HTMLElement("image")}} or put it into a hyper link with a download attribute to save it to disc, for example.

+ +

You can also create a {{domxref("Blob")}} from the canvas.

+ +
+
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
+
Creates a Blob object representing the image contained in the canvas.
+
+ +

See also

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/es/web/api/clipboard_api/index.html b/files/es/web/api/clipboard_api/index.html new file mode 100644 index 0000000000..53e43f6bd5 --- /dev/null +++ b/files/es/web/api/clipboard_api/index.html @@ -0,0 +1,76 @@ +--- +title: API del portapapeles +slug: Web/API/API_del_portapapeles +translation_of: Web/API/Clipboard_API +--- +
{{DefaultAPISidebar("Clipboard API")}}
+ +

La API del portapapeles permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos: El permiso clipboard-write es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso clipboard-read debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.

+ +

Esta API está diseñada para reemplazar el acceso al portapapeles usando {{domxref("document.execCommand()")}}.

+ +

Accediendo al portapapeles

+ +

En vez de instanciar un objeto Clipboard, se puede acceder al portapapeles del sistema a través de la variable global {{domxref("Navigator.clipboard")}}:

+ +
navigator.clipboard.readText().then(
+  clipText => document.querySelector(".editor").innerText += clipText);
+ +

Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase editor. Desde que {{domxref("Clipboard.readText", "readText()")}} (y también {{domxref("Clipboard.read", "read()")}}, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.

+ +

Interfaces

+ +
+
{{domxref("Clipboard")}} {{securecontext_inline}}
+
Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'
+
{{domxref("ClipboardEvent")}} {{securecontext_inline}}
+
Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son: {{domxref("Element/cut_event", "cortar")}}, {{domxref("Element/copy_event", "copiar")}}, y {{domxref("Element/paste_event", "pegar")}}. La especificación se refiere a esto como 'Clipboard Event API'.
+
{{domxref("ClipboardItem")}} {{securecontext_inline}}
+
Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoObservaciones
{{SpecName('Clipboard API')}}{{Spec2('Clipboard API')}}Definición primitiva.
+ +

Compatibilidad con navegadores

+ +

Clipboard

+ +
+ + +

{{Compat("api.Clipboard")}}

+ +

ClipboardEvent

+ + + +

{{Compat("api.ClipboardEvent")}}

+ +

ClipboardItem

+ + + +

{{Compat("api.ClipboardItem")}}

+ +

Véase también

+ + +
diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/tabla/index.html deleted file mode 100644 index 53f57f5636..0000000000 --- a/files/es/web/api/console/tabla/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: Console.table() -slug: Web/API/Console/tabla -tags: - - API - - Consola - - DOM - - Depuración -translation_of: Web/API/Console/table ---- -
{{APIRef("Console API")}}
- -

Muestra datos tabulares como una tabla.

- -

Esta función toma un argumento obligatorio: data, que debe ser un array o un objeto, y un parámetro adicional: columns.

- -

Muestra data como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si data es un objeto) será una fila en la tabla.

- -

La primera columna de la tabla se identificará como (index). Si data es un array, sus valores serán los índices del array. Si data es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) console.table está limitado a mostrar 1000 filas (la primera columna es la llamada index).

- -

{{AvailableInWorkers}}

- -

Colecciones de tipos primitivos

- -

El argumento data puede ser un array o un objeto.

- -
// un array de strings
-
-console.table(["apples", "oranges", "bananas"]);
- -

- -
// un objeto cuyas propiedades son strings
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var me = new Person("John", "Smith");
-
-console.table(me);
- -

- -

Colecciones de tipos compuestos

- -

Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:

- -
// un array de arrays
-
-var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
-console.table(people);
- -

Table displaying array of arrays

- -
// un array de objetos
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
-
-console.table([john, jane, emily]);
- -

Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.

- -

Table displaying array of objects

- -
// un objeto cuyas propiedades son objetos
-
-var family = {};
-
-family.mother = new Person("Jane", "Smith");
-family.father = new Person("John", "Smith");
-family.daughter = new Person("Emily", "Smith");
-
-console.table(family);
- -

Table displaying object of objects

- -

Restringiendo las columnas mostradas

- -

Por defecto, console.table() muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional columns  para seleccionar un subconjunto de columnas que mostrar:

- -
// an array of objects, logging only firstName
-
-function Person(firstName, lastName) {
-  this.firstName = firstName;
-  this.lastName = lastName;
-}
-
-var john = new Person("John", "Smith");
-var jane = new Person("Jane", "Doe");
-var emily = new Person("Emily", "Jones");
-
-console.table([john, jane, emily], ["firstName"]);
- -

Table displaying array of objects with filtered output

- -

Ordenando columnas

- -

Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.

- -

Sintaxis

- -
console.table(data [, columns]);
-
- -

Parámetros

- -
-
data
-
La información a mostrar. Puede ser tanto un array como un objeto.
-
columns
-
Un array que contenga los nombres de las columnas a incluir.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Definición inicial
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
diff --git a/files/es/web/api/console/table/index.html b/files/es/web/api/console/table/index.html new file mode 100644 index 0000000000..53f57f5636 --- /dev/null +++ b/files/es/web/api/console/table/index.html @@ -0,0 +1,212 @@ +--- +title: Console.table() +slug: Web/API/Console/tabla +tags: + - API + - Consola + - DOM + - Depuración +translation_of: Web/API/Console/table +--- +
{{APIRef("Console API")}}
+ +

Muestra datos tabulares como una tabla.

+ +

Esta función toma un argumento obligatorio: data, que debe ser un array o un objeto, y un parámetro adicional: columns.

+ +

Muestra data como una tabla en la consola. Cada elemento en el array (o propiedad enumerable si data es un objeto) será una fila en la tabla.

+ +

La primera columna de la tabla se identificará como (index). Si data es un array, sus valores serán los índices del array. Si data es un objeto, entonces sus valores serán los nombres de las propiedades. Tenga en cuenta que (en Firefox) console.table está limitado a mostrar 1000 filas (la primera columna es la llamada index).

+ +

{{AvailableInWorkers}}

+ +

Colecciones de tipos primitivos

+ +

El argumento data puede ser un array o un objeto.

+ +
// un array de strings
+
+console.table(["apples", "oranges", "bananas"]);
+ +

+ +
// un objeto cuyas propiedades son strings
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var me = new Person("John", "Smith");
+
+console.table(me);
+ +

+ +

Colecciones de tipos compuestos

+ +

Si los elementos en el array, o propiedades en el objeto, son también arrays u objetos, sus elementos o propiedades serán enumeradas en la fila, una por columna:

+ +
// un array de arrays
+
+var people = [["John", "Smith"], ["Jane", "Doe"], ["Emily", "Jones"]]
+console.table(people);
+ +

Table displaying array of arrays

+ +
// un array de objetos
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily]);
+ +

Tenga en cuenta que si el array contiene objetos, las columnas se etiquetarán con el nombre de la propiedad.

+ +

Table displaying array of objects

+ +
// un objeto cuyas propiedades son objetos
+
+var family = {};
+
+family.mother = new Person("Jane", "Smith");
+family.father = new Person("John", "Smith");
+family.daughter = new Person("Emily", "Smith");
+
+console.table(family);
+ +

Table displaying object of objects

+ +

Restringiendo las columnas mostradas

+ +

Por defecto, console.table() muestra todos los elementos de cada fila. Puedes emplear el parámetro opcional columns  para seleccionar un subconjunto de columnas que mostrar:

+ +
// an array of objects, logging only firstName
+
+function Person(firstName, lastName) {
+  this.firstName = firstName;
+  this.lastName = lastName;
+}
+
+var john = new Person("John", "Smith");
+var jane = new Person("Jane", "Doe");
+var emily = new Person("Emily", "Jones");
+
+console.table([john, jane, emily], ["firstName"]);
+ +

Table displaying array of objects with filtered output

+ +

Ordenando columnas

+ +

Se puede ordenar la tabla por una columna en particular pulsando en la etiqueta de dicha columna.

+ +

Sintaxis

+ +
console.table(data [, columns]);
+
+ +

Parámetros

+ +
+
data
+
La información a mostrar. Puede ser tanto un array como un objeto.
+
columns
+
Un array que contenga los nombres de las columnas a incluir.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("Console API", "#table", "console.table()")}}{{Spec2("Console API")}}Definición inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
Disponible en workers{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("38.0")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Disponible en workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("38.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/crypto/getrandomvalues/index.html b/files/es/web/api/crypto/getrandomvalues/index.html new file mode 100644 index 0000000000..b6e09439a9 --- /dev/null +++ b/files/es/web/api/crypto/getrandomvalues/index.html @@ -0,0 +1,75 @@ +--- +title: Crypto.getRandomValues() +slug: Web/API/RandomSource/Obtenervaloresaleatorios +tags: + - API + - Criptografía + - Referencia + - metodo +translation_of: Web/API/Crypto/getRandomValues +--- +

{{APIRef("Web Crypto API")}}

+ +

El método Crypto.getRandomValues() permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).

+ +

Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.

+ +

Sintaxis

+ +
cryptoObj.getRandomValues(typedArray);
+ +

Parámetros

+ +
+
typedArray
+
Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.
+
+ +

Excepciones

+ + + +

Ejemplo

+ +
/* Asumiendo que window.crypto.getRandomValues está disponible */
+
+var array = new Uint32Array(10);
+window.crypto.getRandomValues(array);
+
+console.log("Tus numeros de la suerte:");
+for (var i = 0; i < array.length; i++) {
+    console.log(array[i]);
+}
+
+ +

Especificación

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definición Inicial
+ +

Compatibilidad del navegador

+ +

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe https://github.com/mdn/browser-compat-data y envianos un pull request.

+ +

{{Compat("api.Crypto.getRandomValues")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/abrir/index.html deleted file mode 100644 index 13b541561d..0000000000 --- a/files/es/web/api/document/abrir/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: Document.open() -slug: Web/API/Document/abrir -translation_of: Web/API/Document/open ---- -
{{APIRef("DOM")}}
- -

El método Document.open() abre un documento para escritura (writing)

- -

Esto viene con algunos efectos secundarios. Por ejemplo:

- - - -

Sintaxis

- -
document.open();
-
- -

Parametros

- -

Ninguno.

- -

Valor devuelto

- -

Una instancia del objeto Document (Document).

- -

Ejemplos

- -

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.

- -
document.open();
-document.write("<p>Hola mundo!</p>");
-document.write("<p>Soy un pez</p>");
-document.write("<p>El numero es 42</p>");
-document.close();
- -

Notas

- -
-

Traducción pendiente para el texto que sigue

-
- -

An automatic document.open() call happens when {{domxref("document.write()")}} is called after the page has loaded.

- -

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

- -

Gecko-specific notes

- -

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

- -

Starting with Gecko 1.9.2, document.open() uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using wrappedJSObject. See Security check basics for more about principals.

- -

Three-argument document.open()

- -

There is a lesser-known and little-used three-argument version of document.open() , which is an alias of {{domxref("Window.open()")}} (see its page for full details).

- -

This call, for example opens github.com in a new window, with its opener set to null:

- -
document.open('https://www.github.com','', 'noopener=true')
- -

Two-argument document.open()

- -

Browsers used to support a two-argument document.open(), with the following signature:

- -
document.open(type, replace)
- -

Where type specified the MIME type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.

- -

This form is now obsolete; it won't throw an error, but instead just forwards to document.open() (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
- -

Browser compatibility

- - - -

{{Compat("api.Document.open")}}

- -

See also

- - diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/document/async/index.html deleted file mode 100644 index 132fd106e1..0000000000 --- a/files/es/web/api/document/async/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Document.async -slug: Web/API/Document/async -translation_of: Web/API/XMLDocument/async ---- -

document.async es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. true es su valor por defecto, indicando que el documento se cargó asincrónicamente.

- -

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

- -

Ejemplo

- -
function loadXMLData(e) {
-  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
-}
-
-var xmlDoc = document.implementation.createDocument("", "test", null);
-
-xmlDoc.async = false;
-xmlDoc.onload = loadXMLData;
-xmlDoc.load('querydata.xml');
- -

Especificación

- - - -

Véase también

- - diff --git a/files/es/web/api/document/cookie/index.html b/files/es/web/api/document/cookie/index.html new file mode 100644 index 0000000000..791ae788f2 --- /dev/null +++ b/files/es/web/api/document/cookie/index.html @@ -0,0 +1,119 @@ +--- +title: document.cookie +slug: DOM/document.cookie +tags: + - NeedsContent +translation_of: Web/API/Document/cookie +--- +

{{ApiRef("DOM")}}

+ +

Resumen

+ +

Con document.cookie se obtienen y definen las cookies asociadas con el documento.

+ +

Sintaxis

+ +

Leer todas las cookies accesibles desde una localización

+ +
todasLasCookies = document.cookie;
+
+ +

En el código anterior todasLasCookies es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares clave=valor). Tenga en cuenta que clave y valor pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho RFC 6265 especifica que debe haber un espacio en blanco después de cada punto y coma (;), pero algunos agentes de usuario no son muy estrictos con esto.

+ + + +
document.cookie = nuevaCookie;
+ +

En el código anterior, nuevacookie es una cadena de la forma clave=valor. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:

+ + + +
{{ gecko_callout_heading("6.0") }}
+ +
Nótese que previamente a Gecko 6.0 {{ geckoRelease("6.0") }}, rutas que contenían comillas eran tratadas como si las comillas fueran parte de la cadena, en lugar de considerarse como un delimitador de la ruta actual. Esto ya ha sido arreglado.
+ +

Ejemplos

+ +

Ejemplo # 1: Uso sencillo

+ +
document.cookie = "nombre=oeschger";
+document.cookie = "comida_preferida=tripa";
+function alertCookie() {
+  alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa
+
+}
+ +
<button onclick="alertCookie()">Mostrar cookies</button>
+ +

{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}

+ + + +
document.cookie = "test1=Hola";
+document.cookie = "test2=Mundo";
+
+var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
+
+function alertCookieValue() {
+  alert(cookieValor);
+}
+
+ +
<button onclick="alertCookieValue()">Mostrar valor de cookie</button>
+ +

{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}

+ +

Ejemplo #3: Hacer algo una sola vez

+ +

De manera a usar el siguiente código, favor remplace todas las veces la palabra hacerAlgoUnaSolaVez (el nombre de la cookie) con un nombre personalizado.

+ +
function hazUnaVez() {
+  if (document.cookie.replace(/(?:(?:^|.*;\s*)hacerAlgoUnaSolaVez\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
+    alert("Hacer algo aquí!");
+    document.cookie = "hacerAlgoUnaSolaVez=true; expires=Fri, 31 Dec 9999 23:59:59 GMT";
+  }
+}
+ +
<button onclick="dhacerUnaVez()">Solo hacer algo una vez</button>
+ +

{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}

+ +

Seguridad

+ +

Es importante mencionar que la restricción path no protege contra la lectura no autorizada de cookies de una ruta distinta. Puede ser fácilmente resuelto mediante DOM (por ejemplo creando un iframe oculto con la ruta de la cookie y accediendo a la propiedad contentDocument.cookie del iframe). La única manera de proteger el acceso a cookies es ocupando un dominio o subdominio diferente, debido a la política de mismo origen.

+ +

Notas

+ + + +

Especificación

+ +

DOM Level 2: HTMLDocument.cookie

diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/crearatributo/index.html deleted file mode 100644 index 22f769d577..0000000000 --- a/files/es/web/api/document/crearatributo/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Document.createAttribute() -slug: Web/API/Document/crearAtributo -tags: - - Atributos - - Crear Atributo - - JavaScript - - Métodos -translation_of: Web/API/Document/createAttribute ---- -
{{ ApiRef("DOM") }}
- -

El método Document.createAttribute() crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.

- -
-

El texto pasado como parametro es convertido a minusculas.

-
- -

Sintaxis

- -
atributo = document.createAttribute(nombre)
-
- -

Parametros

- - - -

Valor que retorna

- -

Un nodo {{domxref("Attr")}} nodo.

- -

Excepciones

- - - -

Ejemplo

- -
var nodo = document.getElementById("div1");
-var a = document.createAttribute("miAtributo");
-a.value = "nuevoVal";
-nodo.setAttributeNode(a);
-console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Comportamiento preciso con caracteres en mayuscula 
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Definición inicial
- -

Compatibilidad del buscador

- - - -

{{Compat("api.Document.createAttribute")}}

- -

Ver ademas

- - diff --git a/files/es/web/api/document/createattribute/index.html b/files/es/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..22f769d577 --- /dev/null +++ b/files/es/web/api/document/createattribute/index.html @@ -0,0 +1,91 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/crearAtributo +tags: + - Atributos + - Crear Atributo + - JavaScript + - Métodos +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

El método Document.createAttribute() crea un nuevo nodo de tipo atributo (attr), y lo retorna. El objeto crea un nodo implementando la interfaz {{domxref("Attr")}}. El DOM no impone que tipo de atributos pueden ser agregados a un particular elemento de esta forma.

+ +
+

El texto pasado como parametro es convertido a minusculas.

+
+ +

Sintaxis

+ +
atributo = document.createAttribute(nombre)
+
+ +

Parametros

+ + + +

Valor que retorna

+ +

Un nodo {{domxref("Attr")}} nodo.

+ +

Excepciones

+ + + +

Ejemplo

+ +
var nodo = document.getElementById("div1");
+var a = document.createAttribute("miAtributo");
+a.value = "nuevoVal";
+nodo.setAttributeNode(a);
+console.log(nodo.getAttribute("miAtributo")); // "nuevoVal"
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}{{Spec2("DOM WHATWG")}}Comportamiento preciso con caracteres en mayuscula 
{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM3 Core')}}Sin cambios
{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM2 Core')}}Sin cambios
{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}{{Spec2('DOM1')}}Definición inicial
+ +

Compatibilidad del buscador

+ + + +

{{Compat("api.Document.createAttribute")}}

+ +

Ver ademas

+ + diff --git a/files/es/web/api/document/createevent/index.html b/files/es/web/api/document/createevent/index.html new file mode 100644 index 0000000000..7b273c6e33 --- /dev/null +++ b/files/es/web/api/document/createevent/index.html @@ -0,0 +1,35 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evento + - metodo +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

Crea un nuevo evento, que debe ser inicializado llamando a su método init().

+ +

Sintaxis

+ +
document.createEvent(tipo);
+ +
+
tipo
+
Una string indicando el tipo de evento a crear.
+
+ +

Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.

+ +

Ejemplo

+ +
var nuevoEvento = document.createEvent("UIEvents");
+ +

Especificación

+ + diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/document/getselection/index.html deleted file mode 100644 index 6c03b64dcf..0000000000 --- a/files/es/web/api/document/getselection/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Document.getSelection() -slug: Web/API/Document/getSelection -tags: - - Referencia - - Selección - - metodo -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.

diff --git a/files/es/web/api/document/open/index.html b/files/es/web/api/document/open/index.html new file mode 100644 index 0000000000..13b541561d --- /dev/null +++ b/files/es/web/api/document/open/index.html @@ -0,0 +1,109 @@ +--- +title: Document.open() +slug: Web/API/Document/abrir +translation_of: Web/API/Document/open +--- +
{{APIRef("DOM")}}
+ +

El método Document.open() abre un documento para escritura (writing)

+ +

Esto viene con algunos efectos secundarios. Por ejemplo:

+ + + +

Sintaxis

+ +
document.open();
+
+ +

Parametros

+ +

Ninguno.

+ +

Valor devuelto

+ +

Una instancia del objeto Document (Document).

+ +

Ejemplos

+ +

El código simple a continuación abre el documento y reemplaza su contenido con un número de diferentes fragmentos HTML antes de cerrarlo nuevamente.

+ +
document.open();
+document.write("<p>Hola mundo!</p>");
+document.write("<p>Soy un pez</p>");
+document.write("<p>El numero es 42</p>");
+document.close();
+ +

Notas

+ +
+

Traducción pendiente para el texto que sigue

+
+ +

An automatic document.open() call happens when {{domxref("document.write()")}} is called after the page has loaded.

+ +

For years Firefox and Internet Explorer additionally erased all JavaScript variables, etc., in addition to removing all nodes. This is no longer the case.document non-spec'ed parameters to document.open

+ +

Gecko-specific notes

+ +

Starting with Gecko 1.9, this method is subject to the same same-origin policy as other properties, and does not work if doing so would change the document's origin.

+ +

Starting with Gecko 1.9.2, document.open() uses the principal of the document whose URI it uses, instead of fetching the principal off the stack. As a result, you can no longer call {{domxref("document.write()")}} into an untrusted document from chrome, even using wrappedJSObject. See Security check basics for more about principals.

+ +

Three-argument document.open()

+ +

There is a lesser-known and little-used three-argument version of document.open() , which is an alias of {{domxref("Window.open()")}} (see its page for full details).

+ +

This call, for example opens github.com in a new window, with its opener set to null:

+ +
document.open('https://www.github.com','', 'noopener=true')
+ +

Two-argument document.open()

+ +

Browsers used to support a two-argument document.open(), with the following signature:

+ +
document.open(type, replace)
+ +

Where type specified the MIME type of the data you are writing (e.g. text/html) and replace if set (i.e. a string of "replace") specified that the history entry for the new document would replace the current history entry of the document being written to.

+ +

This form is now obsolete; it won't throw an error, but instead just forwards to document.open() (i.e. is the equivalent of just running it with no arguments).  The history-replacement behavior now always happens.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser compatibility

+ + + +

{{Compat("api.Document.open")}}

+ +

See also

+ + diff --git a/files/es/web/api/document/pointerlockchange_event/index.html b/files/es/web/api/document/pointerlockchange_event/index.html new file mode 100644 index 0000000000..2d5af4205b --- /dev/null +++ b/files/es/web/api/document/pointerlockchange_event/index.html @@ -0,0 +1,80 @@ +--- +title: pointerlockchange +slug: Web/Events/pointerlockchange +translation_of: Web/API/Document/pointerlockchange_event +--- +

El evento pointerlockchange es disparado cuando el cursor del navegador es bloqueado o desbloqueado.

+ +

Información general

+ +
+
Specification
+
Pointer Lock
+
Interface
+
Event
+
Bubbles
+
Yes
+
Cancelable
+
No
+
Target
+
Document
+
Default Action
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Ejemplo

+ +
//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador.
+document.addEventListener("pointerlockchange", function( event ) {
+    // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document".
+    // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement.
+    document.pointerLockElement;
+
+});
+
+ +

Eventos relacionados

+ + + +

Véase también:

+ + diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/document/pointerlockelement/index.html deleted file mode 100644 index cc5d490e5c..0000000000 --- a/files/es/web/api/document/pointerlockelement/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: Document.pointerLockElement -slug: Web/API/Document/pointerLockElement -translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement ---- -
{{APIRef("DOM")}}
- -

La propiedad pointerLockElement conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es null si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.

- -

Sintaxis

- -
var elemento = document.pointerLockElement;
-
- -

Valor retornado

- -

Un {{domxref("Element")}} o null.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}{{Spec2('Pointer lock')}}Extiende de la interfaz Document
- -

Compatibilidad del Navegador

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte sin prefijar{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}   
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Véase también:

- - diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/document/stylesheets/index.html deleted file mode 100644 index 0458cb3fc9..0000000000 --- a/files/es/web/api/document/stylesheets/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: Document.styleSheets -slug: Web/API/Document/styleSheets -translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets ---- -

{{ ApiRef() }}

-

Resumen

-

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

-

Propiedades

-

styleSheetList.length - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

-

Sintaxis

-
styleSheetList = document.styleSheets
-
-

El objeto devuelto es del tipo StyleSheetList.

-

Es una colección ordenada de objetos de tipo stylesheet. styleSheetList.item(index) o simplemente styleSheetList{{ mediawiki.external(' - - index - ') }} devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

-

Especificación

-

DOM Level 2 Style: styleSheets

-

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/es/web/api/document_object_model/events/index.html b/files/es/web/api/document_object_model/events/index.html new file mode 100644 index 0000000000..fce2530535 --- /dev/null +++ b/files/es/web/api/document_object_model/events/index.html @@ -0,0 +1,72 @@ +--- +title: Eventos y el DOM +slug: Referencia_DOM_de_Gecko/Eventos +tags: + - DOM + - Guía +translation_of: Web/API/Document_Object_Model/Events +--- +

Introducción

+ +

Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz Event, así como las interfaces para el registro de eventos en los nodos del DOM, y los oyentes de eventos, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.

+ +

Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador DOM Level 3 Events.

+ +

Vea también el Ejemplo 5: Propagación de eventos en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.

+ +

Registrando oyentes de eventos

+ +

Hay 3 formas de registrar gestores de eventos para un elemento DOM.

+ +

EventTarget.addEventListener

+ +
// Se supone que myButton es un elemento de botón
+myButton.addEventListener('click', function(){alert('Hello world');}, false);
+
+ +

Este es el método que debe usar en las páginas web modernas. 

+ +

Nota: Internet Explorer 6-8 no admite este método, ofreciendo una API similar {{domxref("EventTarget.attachEvent")}} en su lugar. Para la compatibilidad entre navegadores utilice una de las muchas bibliotecas de JavaScript disponibles.

+ +

Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.

+ +

Atributo HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

+ +

Debe evitarse esta forma. Hace que el marcado sea más grande y menos legible. El comitido del contenido/estructura y del comportamiento no están bien separadas, por lo que es más difícil encontrar un error.

+ +

Propiedades del elemento DOM

+ +
// Se supone que myButton es un elemento de botón
+myButton.onclick = function(event){alert('Hello world');};
+
+ +

La función se puede defirnir para que tome un parámetro event. El valor de retorno se trata de una manera especial, descrita en la especificación HTML.

+ +

El problema con este método es que solo se puede establecer un gestor por elemento y por evento.

+ +

Accediendo a las Interfaces de eventos

+ +

Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al objeto window, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.

+ +

Se puede acceder a la interfaz {{domxref ("Evento")}} desde la función del gestor, a través del objeto de evento pasado como primer argumento. El siguiente ejemplo simple muestra cómo se pasa un objeto de evento a la función del controlador de eventos, y se puede usar desde dentro de una de esas funciones.

+ +
function foo(evt) {
+  // al parámetro evt se le asigna automáticamente el objeto event
+  alert(evt);
+}
+table_el.onclick = foo;
+
+ + + + diff --git a/files/es/web/api/document_object_model/examples/index.html b/files/es/web/api/document_object_model/examples/index.html new file mode 100644 index 0000000000..33f0e9e2b7 --- /dev/null +++ b/files/es/web/api/document_object_model/examples/index.html @@ -0,0 +1,367 @@ +--- +title: Ejemplos +slug: Referencia_DOM_de_Gecko/Ejemplos +tags: + - DOM + - Referencia_DOM_de_Gecko + - Todas_las_Categorías + - páginas_a_traducir +translation_of: Web/API/Document_Object_Model/Examples +--- +

En este capítulo se brindan ejemplos relativamente extensos que ilustran el uso del DOM para el desarrollo web y XML. Siempre que sea posible, usaremos las APIs, trucos y patrones comunes en JavaScript para la manipulación del objeto document.

+ +

Ejemplo 1: Altos y anchos

+ +

El ejemplo siguiente muestra el uso de las propiedades de alto (height) y ancho (width) junto a imágenes de dimensiones variadas:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="es">
+
+<head>
+<title>Ejemplo de height/width</title>
+<script type="text/javascript">
+function iniciar()
+{
+  var arrImages = new Array(3);
+  arrImages[0] = document.getElementById("imagen1");
+  arrImages[1] = document.getElementById("imagen2");
+  arrImages[2] = document.getElementById("imagen3");
+  var objOutput = document.getElementById("salida");
+  var strHtml = "<ul>";
+  for (var i = 0; i < arrImages.length; i++)
+    strHtml += "<li>imagen" + (i+1) +
+            ": height=" + arrImages[i].height +
+            ", width=" + arrImages[i].width +
+            ", style.height=" + arrImages[i].style.height +
+            ", style.width=" + arrImages[i].style.width +
+            "<\/li>";
+  strHtml += "<\/ul>";
+  salida.innerHTML = strHtml;
+}
+</script>
+</head>
+<body onload="iniciar();">
+
+<p>La 1ª imagen:
+- alto (height): no
+- ancho (width): no
+- estilo (style): no
+    <img id="imagen1" src="http://www.mozilla.org/images/mozilla-banner.gif">
+</p>
+<p>La 2ª imagen:
+- height="50"
+- width="500"
+- style: no
+    <img id="imagen2" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         height="50" width="500">
+</p>
+<p>La 3ª imagen:
+- height y width: no
+- style="height: 50px; width: 500px;": sí
+    <img id="imagen3" src="http://www.mozilla.org/images/mozilla-banner.gif"
+         style="height: 50px; width: 500px;">
+</p>
+
+<div id="salida"> </div>
+</body>
+</html>
+
+ +

height y width son además propiedades de los elementos OBJECT y APPLET.

+ +

Ejemplo 2: Atributos de una imagen

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="es">
+
+<head>
+<title>Modificación del borde de una imagen</title>
+<script type="text/javascript">
+function setBorderWidth(width) {
+  document.getElementById("img1").style.borderWidth = width + "px";
+}
+</script>
+</head>
+
+<body>
+<p>
+  <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
+height="100" alt="test de borde">
+</p>
+
+<form name="Formulario">
+  <p><input type="button" value="Definir un borde de 20px"
+onclick="setBorderWidth(20);"> <input type="button" value="Definir un borde de 5px"
+onclick="setBorderWidth(5);"></p>
+</form>
+
+</body>
+</html>
+
+ +

Ejemplo 3: Manipulación de estilos

+ +

En este ejemplo sencillo, algunas propiedades de estilo básicas de un elemento párrafo HTML son accedidas utilizando el objeto estilo en el elemento y aquellas propiedades de estilo CSS del objeto, pueden ser entregadas y establecidas desde el DOM. En este caso, está manipulando los estilos directamente. En el siguiente ejemplo (ver ejemplo 4), puede utilizar las hojas de estilo y sus reglas para cambiar estilos para el documento entero.

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+
+<head>
+<title>Changing color and font-size example</title>
+<script type="text/javascript">
+function changeText() {
+	var p = document.getElementById("pid");
+	p.style.color = "blue"
+	p.style.fontSize = "18pt"
+}
+</script>
+</head>
+<body>
+<p id="pid"
+onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
+<form>
+<p><input value="rec" type="button" onclick="changeText();"></p>
+</form>
+</body>
+</html>
+
+ +

Ejemplo 4: Utilización de las hojas de estilo

+ +

La propiedad de las hojas de estilo en un objeto de documento muestra una lista de las hojas de estilo que acompañan a ése documento. Usando los objetos de la hoja de estilo, del estilo y de las reglas de CSS se puede acceder individualmente a esas hojas de estilo y sus reglas, como se demuestra en este ejemplo, el cual muestra todos los selectores de reglas de estilo en la consola.

+ +
ss = document.styleSheets;
+for(i=0; i<ss.length; i++)
+ {
+ for(j=0; j<ss[0].cssRules.length; j++)
+  {
+  dump( ss[i].cssRules[j].selectorText + "\n" );
+  }
+ }
+
+ +

Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:

+ +
BODY { background-color: darkblue; }
+P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

El script sale así:

+ +
BODY
+P
+#LUMPY
+
+ +

Ejemplo 5: Propagación del evento

+ +

Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (body ) de ese documento HTML se carga,un evento listener es registrado con la columna superior de la TABLA. El evento listener maneja el evento ejecutando la función stopEvent, que cambia el valor en el final de la celda de la tabla.

+ +

Sin embargo, stopEvent también llama a un método del objeto evento, event.stopPropagation, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento onclick que muestra un mensaje cuando la tabla es seleccionada. Pero el método stopEvent ha detenido la propagación, y así despues los datos en la tabla son actualizados, la fase de evento es efectivamente finalizada, y un cuadro de alerta es mostrado para confirmar esto.

+ +
<html>
+<head>
+<title>Propagación del evento</title>
+
+<style type="text/css">
+ #t-daddy { border: 1px solid red }
+ #c1 { background-color: pink; }
+</style>
+
+<script type="text/javascript">
+
+function stopEvent(ev) {
+  c2 = document.getElementById("c2");
+  c2.innerHTML = "hola";
+
+  // this ought to keep t-daddy from getting the click.
+  ev.stopPropagation();
+  alert("La propagación del evento se ha parado.");
+}
+
+function load() {
+  elem = document.getElementById("tbl1");
+  elem.addEventListener("click", stopEvent, false);
+}
+</script>
+</head>
+
+<body onload="load();">
+
+<table id="t-daddy" onclick="alert('hi');">
+ <tr id="tbl1">
+  <td id="c1">uno</td>
+ </tr>
+ <tr>
+  <td id="c2">dos</td>
+ </tr>
+</table>
+
+</body>
+</html>
+
+ +

Ejemplo 6: Conseguir el estilo computado (getComputedStyle)

+ +

Este ejemplo demuestra como el método window.getComputedStyle puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo style o con JavaScript (por ejemplo, element.style.backgroundColor="rgb(173, 216, 230)"). Estos últimos tipos de estilos se pueden recuperar con el atributo element.style, las propiedades del cual están en la lista de propiedades de CSS del DOM.

+ +

getComputedStyle() devuelve un objeto ComputedCSSStyleDeclaration, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto getPropertyValue(), el siguiente documento de ejemplo lo muestra.

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html lang="en">
+
+<head>
+ <title>Ejemplo de ''getComputedStyle''</title>
+
+ <script type="text/javascript">
+   function cStyles()
+  {
+   var RefDiv = document.getElementById("d1");
+
+   var txtHeight = document.getElementById("t1");
+   var h_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
+   txtHeight.value = h_style;
+
+   var txtWidth = document.getElementById("t2");
+   var w_style =
+document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
+   txtWidth.value = w_style;
+
+   var txtBackgroundColor = document.getElementById("t3");
+   var b_style =
+document.defaultView.getComputedStyle(RefDiv,
+null).getPropertyValue("background-color");
+   txtBackgroundColor.value = b_style;
+  }
+ </script>
+
+ <style type="text/css">
+   #d1 { margin-left: 10px; background-color: rgb(173, 216, 230);
+height: 20px; max-width: 20px; }
+ </style>
+
+</head>
+
+<body>
+
+<div id="d1">&nbsp;</div>
+
+<form action="">
+<p><button type="button" onclick="cStyles();">getComputedStyle</button>
+  height<input id="t1" type="text" value="1">
+  max-width<input id="t2" type="text" value="2">
+  bg-color<input id="t3" type="text" value="3"></p>
+</form>
+
+</body>
+</html>
+
+ +

Ejemplo 7: Mostrar las propiedades del objeto de evento

+ +

Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del evento de window.onload y sus valores en una tabla. Muestra además una cómoda técnica del uso de un buclefor...in para iterar sobre las propiedades de un objeto y conseguir sus valores.

+ +

Las propiedades de los objetos de evento difieren bastante entre los navegadores, la especificación W3C de los eventos del DOM 2 enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.

+ +

El siguiente código colocado dentro de un nuevo archivo de texto y cargado en un surtido de navegadores, sorprenderá por las diferencias de los números y nombres de propiedades y/o al ponerle más elementos a la página y llamar esa función desde diferentes gestores de evento.

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+
+<title>Muestra las propiedades del evento</title>
+
+<style type="text/css">
+  table {border-collapse: collapse;}
+  thead {font-weight: bold;}
+  td {padding: 2px 10px 2px 10px;}
+  .odd {background-color: #efdfef;}
+  .even {background-color: #ffffff;}
+</style>
+
+<script type="text/javascript">
+
+function showEventProperties(e)
+{
+  function addCell(row, text) {
+    var cell = row.insertCell(-1);
+    cell.appendChild(document.createTextNode(text));
+  }
+
+  document.getElementById('eventType').innerHTML = e.type;
+
+  var e = e || window.event;
+  var table = document.createElement('table');
+  var thead = table.createTHead();
+  var row = thead.insertRow(-1);
+  var lableList = ['#', 'Propriété', 'Valeur'];
+  var len = lableList.length;
+
+  for (var i=0; i<len; i++) {
+    addCell(row, lableList[i]);
+  }
+
+  var tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+
+  for (var p in e) {
+    row = tbody.insertRow(-1);
+    row.className = (row.rowIndex % 2)? 'odd':'even';
+    addCell(row, row.rowIndex);
+    addCell(row, p);
+    addCell(row, e[p]);
+  }
+
+  document.body.appendChild(table);
+}
+window.onload = function(event){
+  showEventProperties(event);
+}
+</script>
+
+<h1>Propiedades del objeto evento del DOM<span id="eventType"></span></h1>
+
+ +

Ejemplo 8: Utilización del interfaz de tabla del DOM

+ +

La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son table.insertRow y row.insertCell.

+ +

Para agregar una columna y algunas celdas a una tabla existente:

+ +
<table id="table0">
+ <tr>
+  <td>Row 0 Cell 0</td>
+  <td>Row 0 Cell 1</td>
+ </tr>
+</table>
+
+<script type="text/javascript">
+
+var table = document.getElementById('table0');
+var row = table.insertRow(-1);
+var cell, text;
+for (var i=0; i<2; i++) {
+  cell = row.insertCell(-1);
+  text = 'Row ' + row.rowIndex + ' Cell ' + i;
+  cell.appendChild(document.createTextNode(text));
+}
+
+</script>
+
+ +

Notas

+ + diff --git a/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html b/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..25546a1704 --- /dev/null +++ b/files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html @@ -0,0 +1,130 @@ +--- +title: Cómo crear un DOM tree +slug: How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +

 

+

Esta página describe cómo usar el API DOM Core en JavaScript para crear o modificar objetos DOM. Es aplicable a todas las aplicaciones basadas en Gecko (como Mozilla Firefox) cuyo código tenga privilegios (como las extensiones) y a las que no (páginas web).

+

Creación dinámica de un DOM tree

+

Considere el siguiente documento XML:

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

El W3C DOM API soportado por Mozilla, puede ser usado para crear una representación en memoria del documento anterior, como se ve a continuación:

+
var doc = document.implementation.createDocument("", "", null);
+var peopleElem = doc.createElement("people");
+
+var personElem1 = doc.createElement("person");
+personElem1.setAttribute("first-name", "eric");
+personElem1.setAttribute("middle-initial", "h");
+personElem1.setAttribute("last-name", "jung");
+
+var addressElem1 = doc.createElement("address");
+addressElem1.setAttribute("street", "321 south st");
+addressElem1.setAttribute("city", "denver");
+addressElem1.setAttribute("state", "co");
+addressElem1.setAttribute("country", "usa");
+personElem1.appendChild(addressElem1);
+
+var addressElem2 = doc.createElement("address");
+addressElem2.setAttribute("street", "123 main st");
+addressElem2.setAttribute("city", "arlington");
+addressElem2.setAttribute("state", "ma");
+addressElem2.setAttribute("country", "usa");
+personElem1.appendChild(addressElem2);
+
+var personElem2 = doc.createElement("person");
+personElem2.setAttribute("first-name", "jed");
+personElem2.setAttribute("last-name", "brown");
+
+var addressElem3 = doc.createElement("address");
+addressElem3.setAttribute("street", "321 north st");
+addressElem3.setAttribute("city", "atlanta");
+addressElem3.setAttribute("state", "ga");
+addressElem3.setAttribute("country", "usa");
+personElem2.appendChild(addressElem3);
+
+var addressElem4 = doc.createElement("address");
+addressElem4.setAttribute("street", "123 west st");
+addressElem4.setAttribute("city", "seattle");
+addressElem4.setAttribute("state", "wa");
+addressElem4.setAttribute("country", "usa");
+personElem2.appendChild(addressElem4);
+
+var addressElem5 = doc.createElement("address");
+addressElem5.setAttribute("street", "321 south avenue");
+addressElem5.setAttribute("city", "denver");
+addressElem5.setAttribute("state", "co");
+addressElem5.setAttribute("country", "usa");
+personElem2.appendChild(addressElem5);
+
+peopleElem.appendChild(personElem1);
+peopleElem.appendChild(personElem2);
+doc.appendChild(peopleElem);
+
+

Vea también el Capítulo DOM del Tutorial de XUL.

+

Se puede automatizar la creación de un DOM tree usando el JXON reverse algorithm (algoritmo inverso JXON) en asociación con la siguiente representación JSON:

+
{
+  "people": {
+    "person": [{
+      "address": [{
+        "@street": "321 south st",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }, {
+        "@street": "123 main st",
+        "@city": "arlington",
+        "@state": "ma",
+        "@country": "usa"
+      }],
+      "@first-name": "eric",
+      "@middle-initial": "H",
+      "@last-name": "jung"
+    }, {
+      "address": [{
+        "@street": "321 north st",
+        "@city": "atlanta",
+        "@state": "ga",
+        "@country": "usa"
+      }, {
+        "@street": "123 west st",
+        "@city": "seattle",
+        "@state": "wa",
+        "@country": "usa"
+      }, {
+        "@street": "321 south avenue",
+        "@city": "denver",
+        "@state": "co",
+        "@country": "usa"
+      }],
+      "@first-name": "jed",
+      "@last-name": "brown"
+    }]
+  }
+}
+
+

¿Ahora qué?

+

Los DOM trees pueden ser invocados usando expresiones XPath, convertidos a cadenas de texto, salvados a un archivo local o remoto usando XMLSerializer (sin tener que convertirlo primero a una cadena de texto), Enviados mediante POST a un servidor web (via XMLHttpRequest), transformados usando XSLT, XLink, convertidos a un objeto JavaScript a tráves del  algoritmo JXON, etc.

+

Adicionalmente se puede hacer uso de los DOM trees para modelar los datos que no estén bien formados para RDF (o si sólo no prefieres usar RDF). Otra aplicación que puedes darle, se relaciona a XUL (que es XML), la UI (interfaz) de tu aplicación puede ser manipulada dinámicamente, descargada, subida, guardada, cargada, convertida, o transformada fácilmente.

+

Vea también

+ +

{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}

diff --git a/files/es/web/api/document_object_model/index.html b/files/es/web/api/document_object_model/index.html new file mode 100644 index 0000000000..0f3a2a7f75 --- /dev/null +++ b/files/es/web/api/document_object_model/index.html @@ -0,0 +1,91 @@ +--- +title: Referencia DOM de Gecko +slug: Referencia_DOM_de_Gecko +tags: + - DOM + - NecesitaRevisiónTécnica + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model +--- +

+« Referencia DOM de Gecko +


+Aquí está la tabla de contenido para la referencia DOM de Gecko. +

+

Prefacio

+ +

Introducción

+ +

La referencia al elemento (element) de DOM

+ +

La referencia a la ventana (window) de DOM

+ +

La referencia al document de DOM

+ +

La referencia al event de DOM

+ +

La referencia al estilo (style) de DOM

+ +

La referencia al rango (range) de DOM

+ +

La referencia a la selección (selection) de DOM

+ +

Interfaz del elemento formulario (form) en HTML

+ +

Interfaz del elemento tabla (table) en HTML

+ +

Ejemplos DOM

+ +
+

Información sobre el documento original

+ +
+{{ languages( { "en": "en/Gecko_DOM_Reference", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }} diff --git a/files/es/web/api/document_object_model/introduction/index.html b/files/es/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..5c604a7a6c --- /dev/null +++ b/files/es/web/api/document_object_model/introduction/index.html @@ -0,0 +1,248 @@ +--- +title: Introducción +slug: Referencia_DOM_de_Gecko/Introducción +tags: + - DOM + - Gecko + - Manuales + - Todas_las_Categorías +translation_of: Web/API/Document_Object_Model/Introduction +--- +

 

+ +

Ésta sección da una breve introducción conceptual del DOM: qué es, cómo proporciona la estructura para los documentos HTML y XML, cómo se accede a él, y cómo esta "API" presenta la información de referencia y ejemplos.

+ +

¿Qué es el DOM?

+ +

El modelo de objeto de documento (DOM) es una interfaz de programación para los documentos HTML y XML. Facilita una representación estructurada del documento y define de qué manera los programas pueden acceder, al fin de modificar, tanto su estructura, estilo y contenido. El DOM da una representación del documento como un grupo de nodos y objetos estructurados que tienen propiedades y métodos. Esencialmente, conecta las páginas web a scripts o lenguajes de programación.

+ +

Una página web es un documento. Éste documento puede exhibirse en la ventana de un navegador o también como código fuente HTML. Pero, en los dos casos, es el mismo documento. El modelo de objeto de documento (DOM) proporciona otras formas de presentar, guardar y manipular este mismo documento. El DOM es una representación completamente orientada al objeto de la página web y puede ser modificado con un lenguaje de script como JavaScript.

+ +

El W3C DOM estándar forma la base del funcionamiento del DOM en muchos navegadores modernos. Varios navegadores ofrecen extensiones más allá del estándar W3C, hay que ir con extremo cuidado al utilizarlas en la web, ya que los documentos pueden ser consultados por navegadores que tienen DOMs diferentes.

+ +

Por ejemplo, el DOM de W3C especifica que el método getElementsByTagName en el código de abajo debe devolver una lista de todos los elementos <p> del documento:

+ +
paragraphs = document.getElementsByTagName ("p");
+// paragraphs[0] es el primer elemento <p>
+// paragraphs[1] es el segundo elemento <p>, etc.
+alert (paragraphs [0].nodeName);
+
+ +

Todas las propiedades, métodos y eventos disponibles para la manipulación y la creación de páginas web está organizado dentro de objetos. Un ejemplo: el objeto document representa al documento mismo, el objeto table hace funcionar la interfaz especial HTMLTableElement del DOM para acceder a tablas HTML, y así sucesivamente. Ésta documentación procura una relación objeto-por-objeto del DOM que funciona con los navegadores basados en Gecko.

+ +

DOM y JavaScript

+ +

El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es JavaScript. Es decir, es escrito en JavaScript pero utiliza el DOM para acceder al documento y a sus elementos. El DOM no es un lenguaje de programación pero sin él, el lenguaje JavaScript no tiene ningún modelo o noción de las páginas web, de la páginas XML ni de los elementos con los cuales es usualmente relacionado. Cada elemento -"el documento íntegro, el título, las tablas dentro del documento, los títulos de las tablas, el texto dentro de las celdas de las tablas"- es parte del modelo de objeto del documento para cada documento, así se puede acceder y manipularlos utilizando el DOM y un lenguaje de escritura, como JavaScript.

+ +

En el comienzo, JavaScript y el DOM estaban herméticamente enlazados, pero después se desarrollaron como entidades separadas. El contenido de la página es almacenado en DOM y el acceso y la manipulación se hace vía JavaScript, podría representarse aproximadamente así:

+ +

API(web o página XML) = DOM + JS(lenguaje de script)

+ +

El DOM fue diseñado para ser independiente de cualquier lenguaje de programación particular, hace que la presentación estructural del documento sea disponible desde un simple y consistente API. Aunque en este manual nos centramos exclusivamente en JavaScript, la directrices del DOM pueden construirse para cualquier lenguaje, así lo demuestra el siguiente ejemplo de Python:

+ +
# Ejemplo DOM de Python
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # Propiedad DOM del objeto document;
+p_list = doc.getElementsByTagName("para");
+ +

¿Cómo se accede al DOM?

+ +

No se tiene que hacer nada especial para empezar a utilizar el DOM. Los diferentes navegadores tienen directrices DOM distintas, y éstas directrices tienen diversos grados de conformidad al actual estándar DOM (un tema que se intenta evitar en este manual), pero todos los navegadores web usan el modelo de objeto de documento para hacer accesibles las páginas web al script.

+ +

Cuando se crea un script –esté en un elemento <SCRIPT> o incluido en una página web por la instrucción de cargar un script– inmediatamente está disponible para usarlo con el API, accediendo así a los elementos document o window, para manipular el documento mismo o sus diferentes partes, las cuales son los varios elementos de una página web. La programación DOM hace algo tan simple como lo siguiente, lo cual abre un mensaje de alerta usando la función alert() desde el objeto window, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.

+ +
<body onload="window.alert('Bienvenido a mi página!');">
+
+ +

Aparte del elemento <script> en el cual JavaScript es definido, el ejemplo siguiente muestra la función a ejecutar cuando el documento se está cargando (y que el DOM completo es disponible para su uso). Esta función crea un nuevo elemento H1, le pone texto y después lo agrega al árbol del documento:

+ +
<html>
+  <head>
+    <script>
+       // ejecuta esta función cuando se cargue el documento
+       window.onload = function() {
+
+         // crea dinámicamente un par de elementos HTML en una página vacia
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("el texto que desee");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Tipos de datos importantes

+ +

Esta parte intenta describir, de la manera más simple posible, los diferentes objetos y tipos. Pero hay que conocer una cantidad de tipos de datos diferentes que son utilizados por el API. Para simplificarlo, los ejemplos de sintaxis en esta API se refieren a nodos como elements, a una lista de nodos como nodeLists (o simples elementos) y a nodos de atributo como attributes.

+ +

La siguiente tabla describe brevemente estos tipos de datos.

+ + + + + + + + + + + + + + + + + + + + + + + + +
documentCuando un miembro devuelve un objeto del tipo document (por ejemplo, la propiedad ownerDocument de un elemento devuelve el documento "document" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo La referencia al documento (document) de DOM lo explica con más detalles.
elementelement se refiere a un elemento o a un nodo de tipo de elemento "element" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método document.createElement() devuelve un objeto referido a un nodo, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos element ponen en funcionamiento a la interfaz Element del DOM y también a la interfaz de nodo "Node" más básica, las cuales son incluidas en esta referencia.
nodeListUna "nodeList" es una serie de elementos, parecido a lo que devuelve el método document.getElementsByTagName(). Se accede a los items de la nodeList de cualquiera de las siguientes dos formas: +
    +
  • list.item (1)
    • +
  • lista {{mediawiki.external (1)}}
    • +
+ +

Ambas maneras son equivalentes. En la primera, item() es el método del objeto nodeList. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.

+
attributeCuando un atributo ("attribute") es devuelto por un miembro (por ej., por el método createAttribute()), es una referencia a un objeto que expone una interfaz particular (aunque limitada) a los atributos. Los atributos son nodos en el DOM igual que los elementos, pero no suelen usarse así.
NamedNodeMapUn namedNodeMap es una serie, pero los ítems son accesibles tanto por el nombre o por un índice, este último caso es meramente una conveniencia para enumerar ya que no están en ningún orden en particular en la lista. Un NamedNodeMap es un método de ítem() por esa razón, y permite poner o quitar ítems en un NamedNodeMap
+ +

Interfaces del DOM

+ +

Uno de los propósitos de esta guía es minimizar el hablar de interfaces abstractas, heredadas y otros detalles de funcionamiento. Más bien, concentrarse sobre los objetos en el DOM y sobre las actuales cosas que se pueden usar para manipular la jerarquía de DOM. Desde el punto de vista del programador web, es bastante indiferente saber que la representación del objeto del elemento HTML form toma la propidedad name desde la interfaz HTMLFormElement pero que las propiedades className se toman desde la propia interfaz HTMLElement. En ambos casos, la propiedad está sólo en el objeto form.

+ +

Pero puede resultar confuso el funcionamiento de la fuerte relación entre objetos e interfaces en el DOM, por eso esta sección intentará hablar un poquito sobre las interfaces actuales en la especificación del DOM y de como se dispone de ellas.

+ +

Interfaces y objetos

+ +

En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (table) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una Interfaz especial del elemento table HTML, la cual incluye métodos como createCaption y insertRow. Pero como también es un elemento HTML, table pone en marcha a la interfaz del Element descrita en el capítulo La referencia al elemento del DOM. Y finalmente, puesto que un elemento HTML es también, por lo que concierna al DOM, un nodo en el árbol de nodos que hace el modelo de objeto para una página web o XML, el elemento de table hace funcionar la interfaz más básica de Node, desde el cual deriva Element.

+ +

La referencia a un objeto table, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/interfaz Element
+for (var i = 0; i < tableAttrs.length; i++) {
+  // interfaz HTMLTableElement: atributo border
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// interfaz HTMLTableElement: atributo summary
+table.summary = "nota: borde aumentado";
+ +

Interfaces esenciales en el DOM

+ +

Esta sección lista las interfaces más comúnmente utilizadas en el DOM. La idea no es describir qué hacen estas APIs pero sí dar una idea de las clases de métodos y propiedades que se encuentran con el uso del DOM. Muchos ejemplos de uso común de esta API se encuentran en el capítulo Ejemplos DOM al final de este manual.

+ +

document y window son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto window representa algo como podría ser el navegador, y el objeto document es la raíz del documento en sí. Element hereda de la interfaz genérica Node, y juntos, estas dos interfaces proporcionan muchos métodos y propiedades utilizables sobre los elementos individuales. Éstos elementos pueden igualmente tener interfaces específicas según el tipo de datos representados, como en el ejemplo anterior del objeto table. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.

+ + + +

Probando el API del DOM

+ +

Ésta parte procura ejemplos para todas las interfaces usadas en el desarrollo web. En algunos casos, los ejemplos son páginas HTML enteras, con el acceso del DOM a un elemento de <script>, la interfaz necesaria (por ejemplo, botones) para la ejecución del script en un formulario, y también que los elementos HTML sobre los cuales opera el DOM se listen. Según el caso, los ejemplos se pueden copiar y pegar en un documento web para probarlos.

+ +

No es el caso donde los ejemplos son muchos más concisos. Para la ejecución de estos ejemplos que sólo demuestran la relación básica entre la interfaz y los elementos HTML, resulta útil tener una página de prueba en la cual las interfaces serán fácilmente accesibles por los scripts. La muy simple página siguiente proporciona en las cabeceras un elemento de script en el cual se pondrán las funciones para testar la interfaz elegida, algunos elementos HTML con atributos que se puedan leer, editar y también manipular, así como la interfaz web necesaria para llamar esas funciones desde el navegador.

+ +

Para probar y ver como trabajan en la plataforma del navegador las interfaces del DOM, esta página de prueba o una nueva similar son factibles. El contenido de la función test() se puede actualizar según la necesidad, para crear más botones o poner más elementos.

+ +
<html>
+  <head>
+    <title>Pruebas DOM</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr, value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>texto</tt></b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">negro
+          <option value="darkblue">azul oscuro
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">blanco
+          <option value="lightgrey">gris
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">azul
+          <option value="green">verde
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+ +

La creación de una página de prueba con una paleta de botones, campos de texto u otros elementos HTML, permitirá testar una gran cantidad de interfaces en un mismo documento, por ejemplo una serie de propiedades que afectan a los colores de una página web. Lo siguiente permite hacerse una idea de como pueden agruparse las interfaces para probarlas.

+ +

Figura 0.1 Muestra DOM página de prueba

+ +

+ +

En este ejemplo, los menúes desplegables actualizan dinámicamente los aspectos de la página web accesibles al DOM como el color de fondo (bgColor), de los hiper-enlaces (aLink), y el del texto (text). El hecho de diseñar páginas, testar las interfaces que se encuentren a lo largo de la lectura son una parte importante del aprendizaje para una utilización eficaz del DOM.

+ +

Otros enlaces

+ + + +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
+ +
+ + +
 
+ +
 
+
diff --git a/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html new file mode 100644 index 0000000000..cf8a94cd4a --- /dev/null +++ b/files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -0,0 +1,50 @@ +--- +title: Localizando elementos DOM usando selectores +slug: Referencia_DOM_de_Gecko/Localizando_elementos_DOM_usando_selectores +tags: + - DOM + - Necesita actualizacion para principiantes + - Principiante +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

Los selectores api proveen metodos que hacen mas facil y rapido devolver elementos del nodo {{domxref("Element")}} del DOM mediante emparejamiento de un conjunto de selectores. Esto es mucho mas rapido que las tecnicas anteriores, donde fuera necesario, por ejemplo usar un loop en un codigo JavaScript para localizar el item especifico que quisieras encontrar.

+ +

Interfaz de NodeSelector

+ +

Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:

+ +
+
{{domxref("Element.querySelector", "querySelector()")}}
+
Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve null .
+
{{domxref("Element.querySelectorAll", "querySelectorAll()")}}
+
devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( Element) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio NodeList sino se encuentran coincidencias.
+
+ +
Note: El {{domxref("NodeList")}} devuelto por {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} no es dinamico, Es decir que cualquier cambio realizado en el DOM no se vera reflejado en la coleccion. Esto es diferente de otros metodos de querying del dom que si devuelven listados de nodos dinamicos.
+ +

Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo Code snippets for querySelector.

+ +

Selectors

+ +

El metodo de selectores acepta uno o mas selectores seperados por comas entre cada selector  para determinar que elemento o elementos deben ser devueltos. por ejemplo para seleccionar todos los elementos (p) del parrafo en un documento donde la clase CSS sea tanto warning or note, podes hacer lo siguiente:

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

tambien por usar query para etiquetas id. Por ejemplo:

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

luego de ejecutar el codigo de arriba, la variable el contiene el primer elemento del documento, su ID puede ser uno de los siguentes  main, basic, or exclamation.

+ +

Podes usar cualquier selector CSS con los metodos querySelector() y querySelectorAll().

+ +

Ver tambien.

+ + diff --git a/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html new file mode 100644 index 0000000000..b8bc2e4cf9 --- /dev/null +++ b/files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html @@ -0,0 +1,337 @@ +--- +title: Trazado de una tabla HTML mediante JavaScript y la Interface DOM +slug: Trazado_de_una_tabla_HTML_mediante_JavaScript_y_la_Interface_DOM +translation_of: >- + Web/API/Document_Object_Model/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces +--- +

Introducción

+ +

Este artículo es un resumen de algunos métodos DOM nivel 1 poderosos y fundamentales así como una descripción de cómo utilizarlos utilizando Javascript.  Aprenderás a crear, accesar, controlar, y remover elementos HTML dinámicamente.  Los métodos DOM presentados aquí no son específicos de HTML; también aplican para XML. Las demostraciones aquí proporcionadas funcionarán en cualquier navegador moderno, incluyendo todas las versiones de Firefox e IE 5+.

+ +
Los métodos DOM presentados aquí forman parte del Modelo de Documento basado en Objetos (DOM: Document Object Model por sus siglas en inglés) de especificación nivel 1.  DOM nivel 1 incluye métodos tanto para acceso genérico del documento (DOM 1 Core) así como métodos específicos para documentos HTML (DOM 1 HTML).
+ +

Ejemplo: Crear una tabla HTML dinámicamente (Ejemplo1.html)

+ +

Contenido HTML

+ +
<input type="button" value="Genera una tabla" onclick="genera_tabla()">
+
+ +

JavaScript Content

+ +
function genera_tabla() {
+  // Obtener la referencia del elemento body
+  var body = document.getElementsByTagName("body")[0];
+
+  // Crea un elemento <table> y un elemento <tbody>
+  var tabla   = document.createElement("table");
+  var tblBody = document.createElement("tbody");
+
+  // Crea las celdas
+  for (var i = 0; i < 2; i++) {
+    // Crea las hileras de la tabla
+    var hilera = document.createElement("tr");
+
+    for (var j = 0; j < 2; j++) {
+      // Crea un elemento <td> y un nodo de texto, haz que el nodo de
+      // texto sea el contenido de <td>, ubica el elemento <td> al final
+      // de la hilera de la tabla
+      var celda = document.createElement("td");
+      var textoCelda = document.createTextNode("celda en la hilera "+i+", columna "+j);
+      celda.appendChild(textoCelda);
+      hilera.appendChild(celda);
+    }
+
+    // agrega la hilera al final de la tabla (al final del elemento tblbody)
+    tblBody.appendChild(hilera);
+  }
+
+  // posiciona el <tbody> debajo del elemento <table>
+  tabla.appendChild(tblBody);
+  // appends <table> into <body>
+  body.appendChild(tabla);
+  // modifica el atributo "border" de la tabla y lo fija a "2";
+  tabla.setAttribute("border", "2");
+}
+ +

{{ EmbedLiveSample('Overview_of_Sample1.html') }}

+ +

Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:

+ +
    +
  1. Primero se crea el elemento <table>.
    2. +
  2. Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .
    3. +
  3. Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento <tbody>.
    4. +
  4. Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos <td> que son hijos de los elementos <tr>.
    5. +
  5. Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.
    6. +
+ +

Una vez creados los elementos <table>, <tbody>, <tr>, y <td> así como los nodos de texto, adicionamos a cada hijo bajo su padre en el órden opuesto:

+ +
    +
  1. Primero, anexamos cada nodo de texto a su elemento padre <td> : + 
    celda.appendChild(textoCelda);
    +
    2. +
  2. Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> : + 
    hilera.appendChild(celda);
    +
    3. +
  3. Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>: + 
    tblBody.appendChild(hilera);
    +
    4. +
  4. Después, anexamos el elemento <tbody> a su elemento padre <table>: + 
    tabla.appendChild(tblBody);
    +
    5. +
  5. Finalmente, anexamos el elemento <table> a su elemento padre <body>: + 
    body.appendChild(tabla);
    +
    6. +
+ +

Recuérda esta técnica. Te será muy útil en la programación bajo el estándar W3C DOM. Primero, creas los elementos de arriba a abajo; posteriormente adicionas los hijos a los padres de abajo a arriba.

+ +

A continuación aparece el código HTML generado por el código JavaScript:

+ +
...
+<table border="2">
+    <tbody>
+        <tr><td>celda en la hilera 0, columna 0</td><td>celda en la hilera 0, columna 1</td></tr>
+        <tr><td>celda en la hilera 1, columna 0</td><td>celda en la hilera 1, columna 1</td></tr>
+    </tbody>
+</table>
+...
+
+ +

Aquí está el árbol de objetos DOM generado por el código del elemento <TABLE> :

+ +

Image:sample1-tabledom.jpg

+ +

Tú puedes construir esta tabla y sus elementos internos utilizando sólo algunos de los varios métodos del DOM. Recuerda tener en mente el modelo de la estructura que planeas crear; esto hará mucho más fácil la escritura del código necesario.

+ +

En el árbol del elemento <table> de la Figura 1, el elemento <table> tiene solamente un hijo mientras que <tbody> tiene dos.  A su vez, cada hijo de <tbody> tiene dos hijos. Finalmente, cada elemento <td> tiene sólo uno, el nodo de texto.

+ +

Ejemplo: Configuración del color de fondo de un párrafo

+ +

getElementsByTagName(tagNameValue) es un método disponible en cualquier elemento DOM o el elemento raíz del documento. Cuando se le llama, devolverá una matriz con todos los descendientes de elementos que coincidan con el nombre de la etiqueta. El primer elemento de la lista se encuentra en la posición [0] de la matriz.

+ +

HTML Content

+ +
<body>
+  <input type="button" value="Set paragraph background color" onclick="set_background()">
+  <p>hi</p>
+  <p>hello</p>
+</body>
+ +

JavaScript Content

+ +
function set_background() {
+  // get a list of all the body elements (there will only be one),
+  // and then select the zeroth (or first) such element
+  myBody = document.getElementsByTagName("body")[0];
+
+  // now, get all the p elements that are descendants of the body
+  myBodyElements = myBody.getElementsByTagName("p");
+
+  // get the second item of the list of p elements
+  myP = myBodyElements[1];
+  myP.style.background = "rgb(255,0,0)";
+}
+ +

{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}

+ +

En este ejemplo, establecemos la variable myP en el objeto DOM para el segundo elementop dentro del body:

+ +
    +
  1. Primero, obtendremos una lista de todos los elementos body mediante + 
    myBody = document.getElementsByTagName("body")[0]
    + Como en cualquier documento HTML sólo hay un elemento body válido, esta lista tendrá sólo un elemento, que recuperamos seleccionando el primer elemento de esa lista usando {{mediawiki.external(0)}}.
    2. +
  2. Luego, obtenemos todos los elementos p que son descendientes del body mediante + 
    myBodyElements = myBody.getElementsByTagName("p");
    +
    3. +
  3. Finalmente, obtenemos el segundo item de la lista de elementos p mediante + 
    myP = myBodyElements[1];
    +
    4. +
+ +

Image:sample2a2.jpg

+ +

Una vez que haya obtenido el objeto DOM para un elemento HTML, puede establecer sus propiedades. Por ejemplo, si desea establecer la propiedad estilo de color de fondo, agregue:

+ +
myP.style.background = "rgb(255,0,0)";
+// setting inline STYLE attribute
+
+ +

Creating TextNodes with document.createTextNode("..")

+ +

Use the document object to invoke the createTextNode method and create your text node. You just need to pass the text content. The return value is an object that represents the text node.

+ +
myTextNode = document.createTextNode("world");
+
+ +

This means that you have created a node of the type TEXT_NODE (a piece of text) whose text data is "world", and myTextNode is your reference to this node object. To insert this text into your HTML page, you need to make this text node a child of some other node element.

+ +

Inserting Elements with appendChild(..)

+ +

So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second <p> element.

+ +
myP.appendChild(myTextNode);
+
+ +

After testing this sample, note that the words hello and world are together: helloworld. So visually, when you see the HTML page it seems like the two text nodes hello and world are a single node, but remember that in the document model, there are two nodes. The second node is a new node of type TEXT_NODE, and it is the second child of the second <p> tag. The following figure shows the recently created Text Node object inside the document tree.

+ +

Image:sample2b2.jpg

+ +
createTextNode and appendChild is a simple way to include white space between the words hello and world. Another important note is that the appendChild method will append the child after the last child, just like the word world has been added after the word hello. So if you want to append a Text Node between hello and world you will need to use insertBefore instead of appendChild.
+ +

Creating New Elements with the document object and the createElement(..) method

+ +

You can create new HTML elements or any other element you want with createElement. For example, if you want to create a new <p> element as a child of the <body> element, you can use the myBody in the previous example and append a new element node. To create a node simply call document.createElement("tagname"). For example:

+ +
myNewPTAGnode = document.createElement("p");
+myBody.appendChild(myNewPTAGnode);
+
+ +

Image:sample2c.jpg

+ +

Removing nodes with the removeChild(..) method

+ +

Nodes can be removed. The following code removes text node myTextNode (containing the word "world") from the second <p> element, myP.

+ +
myP.removeChild(myTextNode);
+
+ +

Text node myTextNode (containing the word "world") still exists. The following code attaches myTextNode to the recently created <p> element, myNewPTAGnode.

+ +
myNewPTAGnode.appendChild(myTextNode);
+
+ +

The final state for the modified object tree looks like this:

+ +

Image:sample2d.jpg

+ +

Creating a table dynamically (back to Sample1.html)

+ +

For the rest of this article we will continue working with sample1.html. The following figure shows the table object tree structure for the table created in the sample.

+ +

Reviewing the HTML Table structure

+ +

Image:sample1-tabledom.jpg

+ +

Creating element nodes and inserting them into the document tree

+ +

The basic steps to create the table in sample1.html are:

+ + + +
At the end of the start function there is a new line of code. The table's border property was set using another DOM method, setAttribute. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.
+ +
<head>
+<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
+<script>
+    function start() {
+        // get the reference for the body
+        var mybody = document.getElementsByTagName("body")[0];
+
+        // creates <table> and <tbody> elements
+        mytable     = document.createElement("table");
+        mytablebody = document.createElement("tbody");
+
+        // creating all cells
+        for(var j = 0; j < 2; j++) {
+            // creates a <tr> element
+            mycurrent_row = document.createElement("tr");
+
+            for(var i = 0; i < 2; i++) {
+                // creates a <td> element
+                mycurrent_cell = document.createElement("td");
+                // creates a Text Node
+                currenttext = document.createTextNode("cell is row " + j + ", column " + i);
+                // appends the Text Node we created into the cell <td>
+                mycurrent_cell.appendChild(currenttext);
+                // appends the cell <td> into the row <tr>
+                mycurrent_row.appendChild(mycurrent_cell);
+            }
+            // appends the row <tr> into <tbody>
+            mytablebody.appendChild(mycurrent_row);
+        }
+
+        // appends <tbody> into <table>
+        mytable.appendChild(mytablebody);
+        // appends <table> into <body>
+        mybody.appendChild(mytable);
+        // sets the border attribute of mytable to 2;
+        mytable.setAttribute("border","2");
+    }
+</script>
+</head>
+<body onload="start()">
+</body>
+</html>
+ +

Manipulating the table with DOM and CSS

+ +

Getting a text node from the table

+ +

This example introduces two new DOM attributes. First it uses the childNodes attribute to get the list of child nodes of mycel. The childNodes list includes all child nodes, regardless of what their name or type is. Like getElementsByTagName(), it returns a list of nodes. The differences are that (a) getElementsByTagName() only returns elements of the specified tag name; and (b) getElementsByTagName() returns descendants at any level, not just immediate children. Once you have the returned list, use {{mediawiki.external('x')}} method to retrieve the desired child item. This example stores in myceltext the text node of the second cell in the second row of the table. Then, to display the results in this example, it creates a new text node whose content is the data of myceltext and appends it as a child of the <body> element.

+ +
If your object is a text node, you can use the data attribute and retrieve the text content of the node.
+ +
mybody      = document.getElementsByTagName("body")[0];
+mytable     = mybody.getElementsByTagName("table")[0];
+mytablebody = mytable.getElementsByTagName("tbody")[0];
+myrow       = mytablebody.getElementsByTagName("tr")[1];
+mycel       = myrow.getElementsByTagName("td")[1];
+
+// first item element of the childNodes list of mycel
+myceltext=mycel.childNodes[0];
+
+// content of currenttext is the data content of myceltext
+currenttext=document.createTextNode(myceltext.data);
+mybody.appendChild(currenttext);
+
+ +

Getting an attribute value

+ +

At the end of sample1 there is a call to setAttribute on the mytable object. This call was used to set the border property of the table. To retrieve the value of the attribute, use the getAttribute method:

+ +
mytable.getAttribute("border");
+
+ +

Hiding a column by changing style properties

+ +

Once you have the object in your JavaScript variable, you can set style properties directly. The following code is a modified version of sample1.html in which each cell of the second column is hidden and each cell of the first column is changed to have a red background. Note that the style property was set directly.

+ +
<html>
+<body onload="start()">
+</body>
+<script>
+    function start() {
+       var mybody =document.getElementsByTagName("body")[0];
+       mytable     = document.createElement("table");
+       mytablebody = document.createElement("tbody");
+
+       for(var j = 0; j < 2; j++) {
+           mycurrent_row=document.createElement("tr");
+           for(var i = 0; i < 2; i++) {
+               mycurrent_cell = document.createElement("td");
+               currenttext = document.createTextNode("cell is:" + i + j);
+               mycurrent_cell.appendChild(currenttext);
+               mycurrent_row.appendChild(mycurrent_cell);
+               // set the cell background color
+               // if the column is 0. If the column is 1 hide the cel
+               if (i == 0) {
+                   mycurrent_cell.style.background = "rgb(255,0,0)";
+               } else {
+                   mycurrent_cell.style.display = "none";
+               }
+           }
+           mytablebody.appendChild(mycurrent_row);
+       }
+       mytable.appendChild(mytablebody);
+       mybody.appendChild(mytable);
+    }
+</script>
+</html>
+
diff --git a/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html new file mode 100644 index 0000000000..6c5f14c025 --- /dev/null +++ b/files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html @@ -0,0 +1,93 @@ +--- +title: Using the W3C DOM Level 1 Core +slug: Using_the_W3C_DOM_Level_1_Core +tags: + - DOM + - NeedsTranslation + - NeedsUpdate + - TopicStub +translation_of: Web/API/Document_object_model/Using_the_W3C_DOM_Level_1_Core +--- +

The W3C's DOM Level 1 Core is a powerful object model for changing the content tree of documents. It is supported in all major browsers including Mozilla Firefox and Microsoft Internet Explorer. It is a powerful base for scripting on the web.

+ +

What is a content tree?

+ +

Many HTML authors may think of HTML as something flat -- a bunch of text with tags in the middle. However, it is something much more than that. Any HTML document (or for that matter any SGML document or XML document) is a tree structure. For example, the following document and tree structure are similar (although not identical -- see the notes on whitespace in the DOM):

+ +
<html>
+<head>
+  <title>My Document</title>
+</head>
+<body>
+  <h1>Header</h1>
+  <p>Paragraph</p>
+</body>
+</html>
+
+ +

image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg

+ +

When Mozilla parses a document, it builds a content tree and then uses it to display the document.

+ +

The terms used to describe trees show up often in the DOM Level 1 Core. Each of the boxes I drew in the tree above is a node in the tree. The line above a node expresses a parent-child relationship: the node on top is the parent, and the node on the bottom is the child. Two children of the same parent are therefore siblings. Similarly, one can refer to ancestors and descendants. (Cousins are too messy, though.)

+ +

What does the DOM Level 1 Core let me do?

+ +

The W3C DOM Level 1 allows you to change the content tree any way you want. It is powerful enough to build any HTML document from scratch. It allows authors to change anything in the document from script, at any time. The easiest way for web page authors to change the DOM dynamically is using JavaScript. In JavaScript, the document is accessible the same way it has been in older browsers: from the document property of the global object. This document object implements the Document interface from the W3C's DOM Level 1 spec.

+ +

A simple example

+ +

Suppose the author wants to take the above document and change the contents of the header, and write two paragraphs instead of one. The following script would do the job:

+ +

HTML Content

+ +
<body>
+<input type="button" value="Change this document." onclick="change()">
+<h2>Header</h2>
+<p>Paragraph</p>
+</body>
+
+ +

JavaScript Content

+ +
  function change() {
+    // document.getElementsByTagName("H2") returns a NodeList of the <h2>
+    // elements in the document, and the first is number 0:
+
+    var header = document.getElementsByTagName("H2").item(0);
+    // the firstChild of the header is a Text node:
+    header.firstChild.data = "A dynamic document";
+    // now the header is "A dynamic document".
+
+    var para = document.getElementsByTagName("P").item(0);
+    para.firstChild.data = "This is the first paragraph.";
+
+    // create a new Text node for the second paragraph
+    var newText = document.createTextNode("This is the second paragraph.");
+    // create a new Element to be the second paragraph
+    var newElement = document.createElement("P");
+    // put the text in the paragraph
+    newElement.appendChild(newText);
+    // and put the paragraph on the end of the document by appending it to
+    // the BODY (which is the parent of para)
+    para.parentNode.appendChild(newElement);
+  }
+ +

{{ EmbedLiveSample('A_simple_example', 800, 300) }}

+ +

You can see this script as a complete example.

+ +

How can I learn more?

+ +

Now that you are familiar with the basic concepts of the DOM, there is a document explaining the DOM Level 1 fundamental methods. It is the follow-up to this document.

+ +

See also the DOM Level 1 Core specification from the W3C. It's a reasonably clear spec, although it is formal. The main thing that's useful to authors is the description of the different DOM objects and all their properties and methods. Also see our other DOM documentation.

+ +
+

Original Document Information

+ + +
diff --git a/files/es/web/api/document_object_model/whitespace/index.html b/files/es/web/api/document_object_model/whitespace/index.html new file mode 100644 index 0000000000..a943896180 --- /dev/null +++ b/files/es/web/api/document_object_model/whitespace/index.html @@ -0,0 +1,476 @@ +--- +title: 'Cómo manejan el espacio en blanco HTML, CSS y el DOM' +slug: Referencia_DOM_de_Gecko/Cómo_espacioenblanco +tags: + - CSS + - DOM + - HTML + - JavaScript + - espacioenblanco + - whitespace +translation_of: Web/API/Document_Object_Model/Whitespace +--- +
{{APIRef("DOM")}}
+ +

La presencia de espacios en blanco en el DOM puede causar problemas de diseño y dificultar la manipulación del árbol de contenido de formas inesperadas, dependiendo de dónde se encuentra. Este artículo explora cuándo pueden surgir dificultades y analiza qué se puede hacer para mitigar los problemas resultantes.

+ +

¿Qué es el espacio en blanco?

+ +

El espacio en blanco es cualquier cadena de texto compuesta solo por espacios, tabulaciones o saltos de línea (para ser precisos, secuencias CRLF, retornos de carro o avances de línea). Estos caracteres te permiten formatear tu código de una manera que lo hará fácilmente legible por ti y otras personas. De hecho, gran parte de nuestro código fuente está lleno de estos caracteres de espacio en blanco, y solo tendemos a deshacernos de ellos en un paso de compilación de producción para reducir el tamaño de descarga del código.

+ +

¿HTML ignora en gran medida los espacios en blanco?

+ +

En el caso de HTML, los espacios en blanco se ignoran en gran medida: los espacios en blanco entre palabras se tratan como un solo carácter y los espacios en blanco al principio y al final de los elementos y los elementos externos se ignoran. Tomemos el siguiente ejemplo minimalista:

+ + + +
<!DOCTYPE html>
+
+    <h1>       ¡Hola      mundo!     </h1>
+ +

{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}

+ +

Este código fuente contiene un par de avances de línea después del DOCTYPE y un montón de caracteres de espacio antes, después y dentro del elemento <h1>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:

+ +

Esto es para que los espacios en blanco no afecten el diseño de tu página. Crear espacio alrededor y dentro de los elementos es el trabajo de CSS.

+ +

¿Qué sucede con los espacios en blanco?

+ +

Sin embargo, no solo desaparecen.

+ +

Cualquier carácter de espacio en blanco que esté fuera de los elementos HTML del documento original se representan en el DOM. Esto es necesario internamente para que el editor pueda preservar el formato de los documentos. Esto significa que:

+ + + +

Tomemos el siguiente documento, por ejemplo:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Mi Documento</title>
+</head>
+<body>
+  <h1>Encabezado</h1>
+  <p>
+    Párrafo
+  </p>
+</body>
+</html>
+
+ +

El árbol del DOM para esto se ve así:

+ +

árbol de dom equivalente al ejemplo de HTML anterior

+ +

Conservar caracteres de espacio en blanco en el DOM es útil de muchas maneras, pero hay ciertos lugares donde esto hace que ciertos diseños sean más difíciles de implementar y causa problemas a los desarrolladores que quieren iterar a través de los nodos del DOM. Veremos estas y algunas soluciones más adelante.

+ +

¿CSS cómo procesa los espacios en blanco?

+ +

La mayoría de los espacios en blanco se ignoran, no todos. En el ejemplo anterior, uno de los espacios entre "!Hola" y "mundo!" todavía existe cuando la página se representa en un navegador. Hay reglas en el motor del navegador que deciden qué caracteres de espacio en blanco son útiles y cuáles no; estos se especifican al menos en parte en el Módulo de texto CSS Nivel 3, y especialmente las partes sobre la propiedad white-space en CSS y detalles de procesamiento del espacio en blanco, pero también ofrecemos una explicación más sencilla a continuación.

+ +

Tomemos otro ejemplo realmente simple. Para hacerlo más fácil, ilustramos todos los espacios con ◦, todas las tabulaciones con ⇥ y todos los saltos de línea con ⏎:

+ +

Este ejemplo:

+ +
<h1>◦◦◦¡Hola◦⏎
+⇥⇥⇥⇥<span>◦mundo!</span>⇥◦◦</h1>
+ +

se representa en el navegador así:

+ + + +

{{EmbedLiveSample('Hidden_example')}}

+ +

El elemento <h1> contiene solo elementos en línea. De hecho contiene:

+ + + +

Debido a esto, establece lo que se llama un {{cssxref("Inline_formatting_context", "contexto de formato en línea")}}. Este es uno de los posibles contextos de representación de diseño con los que funcionan los motores del navegador.

+ +

Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:

+ +
    +
  1. +

    Primero, todos los espacios y tabulaciones inmediatamente antes y después de un salto de línea se ignoran, por lo que, si tomamos nuestro marcado de ejemplo anterior y aplicamos esta primera regla, obtenemos:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>⇥◦◦</h1>
    +
    2. +
  2. +

    A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:

    + + 
    <h1>◦◦◦¡Hola⏎
+<span>◦mundo!</span>◦◦◦</h1>
    +
    3. +
  3. +

    A continuación, los saltos de línea se convierten en espacios:

    + + 
    <h1>◦◦◦¡Hola◦<span>◦mundo!</span>◦◦◦</h1>
    +
    4. +
  4. +

    Después de eso, cualquier espacio inmediatamente después de otro espacio (incluso a través de dos elementos en línea separados) se ignora, por lo que terminamos con:

    + + 
    <h1>◦¡Hola◦<span>mundo!</span>◦</h1>
    +
    5. +
  5. +

    Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:

    + + 
    <h1>¡Hola◦<span>mundo!</span></h1>
    +
    6. +
+ +

Es por eso que las personas que visitan la página web simplemente verán la frase "¡Hola mundo!" muy bien escrita en la parte superior de la página, en lugar de un "!Hola" con una sangría extraña, seguido de un "mundo!" en la línea debajo de esa.

+ +
+

Nota: Firefox DevTools ha admitido el resaltado de nodos de texto desde la versión 52, lo que facilita ver exactamente qué contenido hay dentro de los nodos de espacios en blanco. Los nodos de espacios en blanco puros están marcados con una etiqueta "whitespace".

+
+ +

Espacio en blanco en contextos de formato de bloque

+ +

Anteriormente, solo miramos elementos que contienen elementos en línea y contextos de formato en línea. Si un elemento contiene al menos un elemento de bloque, entonces establece lo que se llama un {{cssxref("Block_formatting_context", "contexto de formato de bloque")}}.

+ +

En este contexto, los espacios en blanco se tratan de manera muy diferente. Veamos un ejemplo para explicar cómo. Hemos marcado los espacios en blanco como antes.

+ +
<body>⏎
+⇥<div>◦◦¡Hola◦◦</div>⏎
+⏎
+◦◦◦<div>◦◦mundo!◦◦</div>◦◦⏎
+</body>
+ +

Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <div>, uno entre los 2 <div>s y uno después del segundo <div>.

+ +

Esto se renderiza así:

+ + + +

{{EmbedLiveSample('Hidden_example_2')}}

+ +

Podemos resumir cómo se maneja el espacio en blanco aquí de la siguiente manera (puede haber algunas pequeñas diferencias en el comportamiento exacto entre los navegadores, pero básicamente, esto funciona):

+ +
    +
  1. +

    Debido a que estamos dentro de un contexto de formato de bloque, todo debe ser un bloque, por lo que nuestros 3 nodos de texto también se convierten en bloques, al igual que los 2 <div>s. Los bloques ocupan todo el ancho disponible y se apilan unos encima de los otros, lo cual significa que terminamos con un diseño compuesto por esta lista de bloques:

    + + 
    <block>⏎⇥</block>
+<block>◦◦¡Hola◦◦</block>
+<block>⏎◦◦◦</block>
+<block>◦◦mundo!◦◦</block>
+<block>◦◦⏎</block>
    +
    2. +
  2. +

    Esto luego se simplifica aún más aplicando las reglas de procesamiento para espacios en blanco en contextos de formato en línea a estos bloques:

    + + 
    <block></block>
+<block>¡Hola</block>
+<block></block>
+<block>mundo!</block>
+<block></block>
    +
    3. +
  3. +

    Los 3 bloques vacíos que tenemos ahora no van a ocupar ningún espacio en el diseño final, porque no contienen nada, así que terminaremos con solo 2 bloques ocupando espacio en la página. Las personas que visitan la página web ven las palabras "!Hola" y "mundo!" en 2 líneas separadas, ya que esperarías que se distribuyeran 2 <div>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.

    +
    4. +
+ +

Espacios entre elementos en línea y bloques en línea

+ +

Ahora analicemos algunos problemas que pueden surgir debido a los espacios en blanco y qué se puede hacer al respecto. En primer lugar, veremos qué sucede con los espacios entre los elementos en línea y de bloque en línea. De hecho, ya vimos esto en nuestro primer ejemplo, cuando describimos cómo se procesan los espacios en blanco dentro de los contextos de formato en línea.

+ +

Dijimos que había reglas para ignorar la mayoría de los caracteres, pero que los caracteres que separan palabras permanecen. Cuando solo se trata de elementos a nivel de bloque como <p> que solo contienen elementos en línea como <em>, <strong>, <span>, etc., normalmente no te importa esto porque el espacio en blanco adicional que llega al diseño es útil para separar las palabras en la oración.

+ +

Sin embargo, se vuelve más interesante cuando comienzas a usar elementos inline-block. Estos elementos se comportan como elementos en línea en el exterior y como bloques en el interior, y a menudo se utilizan para mostrar piezas de la IU más complejas que solo texto, una al lado de la otra en la misma línea, por ejemplo, elementos del menú de navegación.

+ +

Debido a que son bloques, muchas personas esperan que se comporten como tales, pero en realidad no es así. Si hay espacios en blanco de formato entre elementos en línea adyacentes, esto dará como resultado un espacio en el diseño, al igual que los espacios entre palabras en el texto.

+ +

Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):

+ +
.people-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.people-list li {
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  background: #f06;
+  border: 1px solid;
+}
+
+ +
<ul class="people-list">⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+◦◦<li></li>⏎
+
+</ul>
+ +

Esto se traduce de la siguiente manera:

+ + + +

{{EmbedLiveSample('Hidden_example_3')}}

+ +

Probablemente no desees los espacios entre los bloques — dependiendo del caso de uso (¿esta es una lista de avatares o botones de navegación horizontales?), Probablemente desees que los lados del elemento estén alineados entre sí y poder controlar cualquier espacio tú mismo.

+ +

El Inspector HTML de Firefox DevTools resaltará los nodos de texto y también te mostrará exactamente qué áreas están ocupando los elementos, lo que es útil si te preguntas qué está causando el problema y tal vez estés pensando que tienes un margen adicional allí o algo así.

+ +

Espacio en blanco en Devtools

+ +

Hay algunas formas de solucionar este problema:

+ +

Utiliza Flexbox para crear la lista horizontal de elementos en lugar de probar una solución de inline-block. Esto se encarga de todo por ti y definitivamente es la solución preferida:

+ +
ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+ +

Si necesitas confiar en inline-block, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño ems (según el font-size, por lo que el tamaño del bloque también terminaría siendo 0). rems sería una buena opción aquí:

+ +
ul {
+  font-size: 0;
+  ...
+}
+
+li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  ...
+}
+
+ +

O puedes establecer un margen negativo en los elementos de la lista:

+ +
li {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  margin-right: -0.25rem;
+}
+ +

También puedes resolver este problema colocando los elementos de tu lista en la misma línea en la fuente, lo cual hace que los nodos de espacios en blanco no se creen en primer lugar:

+ +
<li></li><li></li><li></li><li></li><li></li>
+ +

Recorrido del DOM y el espacio en blanco

+ +

Al intentar realizar una manipulación del DOM en JavaScript, también puedes encontrar problemas debido a los nodos de espacios en blanco. Por ejemplo, si tienes una referencia a un nodo padre y deseas afectar su primer elemento hijo usando Node.firstChild, si hay un nodo de espacio en blanco deshonesto justo después de la etiqueta de apertura principal, no obtendrás el resultado que esperabas. Se seleccionaría el nodo de texto en lugar del elemento al que deseas afectar.

+ +

Veamos otro ejemplo, si tienes un determinado subconjunto de elementos en los que deseas hacer algo en función de si están vacíos (no tienen nodos secundarios) o, no puedes verificar si cada elemento está vacío usando algo como Node.hasChildNodes(), pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.

+ +

Funciones auxiliares de espacios en blanco

+ +

El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:

+ +
/**
+ * En todo, el espacio en blanco se define como uno de los caracteres
+ *  "\t" TAB \u0009
+ *  "\n" LF  \u000A
+ *  "\r" CR  \u000D
+ *  " "  SPC \u0020
+ *
+ * Esto no usa la "\s" de Javascript porque eso incluye
+ * espacios irrompibles (y también algunos otros caracteres).
+ */
+
+
+/**
+ * Determina si el contenido de texto de un nodo es completamente de espacios en blanco.
+ *
+ * @param nod  Un nodo que implementa la interfaz | CharacterData | (es decir,
+ *             un nodo |Text|, |Comment| o |CDATASection|
+ * @return     True si todo el contenido de texto de |nod| es espacio en blanco,
+ *             de lo contrario false.
+ */
+function is_all_ws( nod )
+{
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  return !(/[^\t\n\r ]/.test(nod.textContent));
+}
+
+
+/**
+ * Determina si un nodo debe ser ignorado por las funciones del iterador.
+ *
+ * @param nod  Un objeto implementando la interfaz |Node| de DOM1.
+ * @return     true si el nodo es:
+ *                1) Un nodo |Text| en que todo es espacio en blanco
+ *                2) Un nodo |Comment|
+ *             y de lo contrario false.
+ */
+
+function is_ignorable( nod )
+{
+  return ( nod.nodeType == 8) || // Un nodo comment
+         ( (nod.nodeType == 3) && is_all_ws(nod) ); // un nodo text, todo es eeb
+}
+
+/**
+ * Versión de |previousSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |previousSibling| es una propiedad
+ * de todos los nodos DOM que devuelve el nodo hermano, el nodo que es
+ * un hijo del mismo padre, que ocurre inmediatamente antes del
+ * nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano anterior más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_before( sib )
+{
+  while ((sib = sib.previousSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |nextSibling| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El hermano más cercano a |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function node_after( sib )
+{
+  while ((sib = sib.nextSibling)) {
+    if (!is_ignorable(sib)) return sib;
+  }
+  return null;
+}
+
+/**
+ * Versión de |lastChild| que omite los nodos que son completamente
+ * espacio en blanco o comentarios.  (Normalmente |lastChild| es una propiedad
+ * de todos los nodos del DOM que da el último de los nodos contenidos
+ * directamente en el nodo de referencia).
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El último hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function last_child( par )
+{
+  var res=par.lastChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.previousSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |firstChild| que omite los nodos que son completamente
+ * espacios en blanco y comentarios.
+ *
+ * @param sib  El nodo de referencia.
+ * @return     O bien:
+ *               1) El primer hijo de |sib| eso no es
+ *                  ignorable según |is_ignorable|, o
+ *               2) null si no existe tal nodo.
+ */
+function first_child( par )
+{
+  var res=par.firstChild;
+  while (res) {
+    if (!is_ignorable(res)) return res;
+    res = res.nextSibling;
+  }
+  return null;
+}
+
+/**
+ * Versión de |data| que no incluye espacios en blanco al principio
+ * y finaliza y normaliza todos los espacios en blanco a un solo espacio.  (Normalmente
+ * |data| es una propiedad de los nodos de texto que proporciona el texto del nodo).
+ *
+ * @param txt  El nodo de texto cuyos datos se deben devolver
+ * @return     Una cadena que proporciona el contenido del nodo de texto con
+ *             espacios en blanco colapsados.
+ */
+function data_of( txt )
+{
+  var data = txt.textContent;
+  // Usa las características de String y RegExp de ECMA-262 Edición 3
+  data = data.replace(/[\t\n\r ]+/g, " ");
+  if (data.charAt(0) == " ")
+    data = data.substring(1, data.length);
+  if (data.charAt(data.length - 1) == " ")
+    data = data.substring(0, data.length - 1);
+  return data;
+}
+
+ +

Ejemplo

+ +

El siguiente código demuestra el uso de las funciones anteriores. Itera sobre los hijos de un elemento (cuyos hijos son todos elementos) para encontrar aquel cuyo texto es "Este es el tercer párrafo", y luego cambia el atributo de clase y el contenido de ese párrafo.

+ +
var cur = first_child(document.getElementById("test"));
+while (cur)
+{
+  if (data_of(cur.firstChild) == "Este es el tercer párrafo.")
+  {
+    cur.className = "magic";
+    cur.firstChild.textContent = "Este es el párrafo mágico.";
+  }
+  cur = node_after(cur);
+}
+
diff --git a/files/es/web/api/documentorshadowroot/getselection/index.html b/files/es/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..6c03b64dcf --- /dev/null +++ b/files/es/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,13 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +tags: + - Referencia + - Selección + - metodo +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

Este método funciona exactamente igual que {{domxref("Window.getSelection()")}}; devuelve un objeto {{domxref("Selection")}} que representa el texto que se ha seleccionado en el documento.

diff --git a/files/es/web/api/documentorshadowroot/pointerlockelement/index.html b/files/es/web/api/documentorshadowroot/pointerlockelement/index.html new file mode 100644 index 0000000000..cc5d490e5c --- /dev/null +++ b/files/es/web/api/documentorshadowroot/pointerlockelement/index.html @@ -0,0 +1,105 @@ +--- +title: Document.pointerLockElement +slug: Web/API/Document/pointerLockElement +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +
{{APIRef("DOM")}}
+ +

La propiedad pointerLockElement conserva el elemento adquirido, para el evento del mouse, mientras el bloqueo se encuentre activo .  Es null si el bloqueo se encuentra en estado pendiente para bloqueo, o si el bloqueo se ha liberado, es decir ya no se encuentra en estado bloqueado, o si el elemento bloqueado se encuentra en otro documento.

+ +

Sintaxis

+ +
var elemento = document.pointerLockElement;
+
+ +

Valor retornado

+ +

Un {{domxref("Element")}} o null.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Bloquear puntero','l#extension-to-the-document-interface','Document')}}{{Spec2('Pointer lock')}}Extiende de la interfaz Document
+ +

Compatibilidad del Navegador

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }} {{property_prefix("moz")}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Soporte sin prefijar{{ CompatVersionUnknown() }}{{CompatUnknown}}{{CompatGeckoDesktop(50)}}   
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Véase también:

+ + diff --git a/files/es/web/api/documentorshadowroot/stylesheets/index.html b/files/es/web/api/documentorshadowroot/stylesheets/index.html new file mode 100644 index 0000000000..0458cb3fc9 --- /dev/null +++ b/files/es/web/api/documentorshadowroot/stylesheets/index.html @@ -0,0 +1,22 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +translation_of_original: Web/API/Document/styleSheets +--- +

{{ ApiRef() }}

+

Resumen

+

Devuelve una lista de objetos de tipo stylesheet para las hojas de estilo que están específicamente enlazadas o contenidas en el documento.

+

Propiedades

+

styleSheetList.length - devuelve el número de objetos de tipo stylesheet contenidos en el objeto.

+

Sintaxis

+
styleSheetList = document.styleSheets
+
+

El objeto devuelto es del tipo StyleSheetList.

+

Es una colección ordenada de objetos de tipo stylesheet. styleSheetList.item(index) o simplemente styleSheetList{{ mediawiki.external(' + + index + ') }} devuelve un único objeto de tipo stylesheet con el índice especificado (el índice es de origen 0).

+

Especificación

+

DOM Level 2 Style: styleSheets

+

{{ languages( { "ja": "ja/DOM/document.styleSheets", "pl": "pl/DOM/document.styleSheets" } ) }}

diff --git a/files/es/web/api/domstring/binary/index.html b/files/es/web/api/domstring/binary/index.html new file mode 100644 index 0000000000..a52358f62c --- /dev/null +++ b/files/es/web/api/domstring/binary/index.html @@ -0,0 +1,31 @@ +--- +title: Cadenas binarias +slug: Web/API/DOMString/Cadenas_binarias +tags: + - Arreglos tipados JavaScript + - Cadena + - Cadena de caracteres + - DOM + - JavaScript + - Referencia + - String +translation_of: Web/API/DOMString/Binary +--- +

{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar 65535 puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede 127). Por ejemplo, la cadena "¡Hola mundo!" pertenece al subconjunto ASCII, mientras que la cadena "ÀÈÌÒÙ" no. Una cadena binaria es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a 127, permite hasta 255 puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

+ +

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de 255 causará un error Caracter fuera de rango.

+ +

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números uint8 es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

+ +

En el pasado, esto se tenía que simular tratando los datos sin procesar como string y utilizar el método charCodeAt() para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

+ +

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de StringView cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

+ +

Ve también

+ + diff --git a/files/es/web/api/domstring/cadenas_binarias/index.html b/files/es/web/api/domstring/cadenas_binarias/index.html deleted file mode 100644 index a52358f62c..0000000000 --- a/files/es/web/api/domstring/cadenas_binarias/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Cadenas binarias -slug: Web/API/DOMString/Cadenas_binarias -tags: - - Arreglos tipados JavaScript - - Cadena - - Cadena de caracteres - - DOM - - JavaScript - - Referencia - - String -translation_of: Web/API/DOMString/Binary ---- -

{{jsxref("String", "Cadenas JavaScript")}} son cadenas codificadas en UTF-16. Esto significa que cada unidad de código requiere dos bytes de memoria y puede representar 65535 puntos de código diferentes. Un subconjunto de estas cadenas está representado por cadenas UTF-16 que contienen solo caracteres ASCII (es decir, caracteres cuyo punto de código no excede 127). Por ejemplo, la cadena "¡Hola mundo!" pertenece al subconjunto ASCII, mientras que la cadena "ÀÈÌÒÙ" no. Una cadena binaria es un concepto similar al subconjunto ASCII, pero en lugar de limitar el rango a 127, permite hasta 255 puntos de código. Sin embargo, su propósito no es representar caracteres, sino datos binarios. El tamaño de los datos así representados es el doble de lo que sería en formato binario normal, sin embargo, esto no será visible para el usuario final, ya que la longitud de las cadenas de JavaScript se calcula usando dos bytes como unidad.

- -

Las cadenas binarias no forman parte del diseño del lenguaje JavaScript. Sin embargo, al menos una función nativa requiere cadenas binarias como entrada, {{domxref("WindowBase64.btoa", "btoa()")}}: invocarla en una cadena que contiene puntos de código mayores de 255 causará un error Caracter fuera de rango.

- -

La razón que llevó al uso de unidades de código UTF-16 como marcadores de posición para los números uint8 es que a medida que las aplicaciones web se vuelven cada vez más poderosas (agregando funciones como manipulación de audio y video, acceso a datos sin procesar usando WebSockets, y así sucesivamente) ha quedado claro que hay ocasiones en las que sería útil que el código JavaScript pudiera manipular rápida y fácilmente datos binarios sin procesar.

- -

En el pasado, esto se tenía que simular tratando los datos sin procesar como string y utilizar el método charCodeAt() para leer los bytes del búfer de datos (es decir, usando cadenas binarias). Sin embargo, esto es lento y propenso a errores, debido a la necesidad de múltiples conversiones (especialmente si los datos binarios en realidad no son datos en formato de bytes, sino, por ejemplo, enteros de 32 bits o flotantes).

- -

Los arreglos tipados en JavaScript proporcionan un mecanismo para acceder a datos binarios sin procesar mucho más eficientemente. La API de StringView cuyo constructor no es nativo está un nivel por encima de los arreglos tipados y proporciona una interfaz para cadenas similar a la de C.

- -

Ve también

- - diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/element/accesskey/index.html deleted file mode 100644 index 7d73c395fc..0000000000 --- a/files/es/web/api/element/accesskey/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -tags: - - API - - Propiedad - - necesidades de contenido -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -
 
- -

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

- -
-

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

-
- -

 

- -

 

diff --git a/files/es/web/api/element/blur_event/index.html b/files/es/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..b54ad3e6a6 --- /dev/null +++ b/files/es/web/api/element/blur_event/index.html @@ -0,0 +1,156 @@ +--- +title: blur (evento) +slug: Web/Events/blur +tags: + - DOM +translation_of: Web/API/Element/blur_event +--- +

El evento blur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout es que sólo el último se propaga (bubbles).

+ +

Información General

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
{{domxref("FocusEvent")}}
+
Burbujas
+
No
+
Cancelable
+
No
+
Objetivo
+
Element
+
Acción por defecto
+
Ninguna.
+
+ +

{{NoteStart}}El valor de  {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ({{bug(452307)}}): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.{{NoteEnd}}

+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}Objetivo del evento (elemento DOM)
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el elemento normalmente se propaga o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento es cancelable o no.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

Delegación de eventos

+ +

Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento focusout en exploradores que lo soporten, o cambiando el parámetro "useCapture" de addEventListener a true:

+ +

Contenido HTML

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

Contenido JavaScript

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Delegación_de_eventos')}}

+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
+
+ +

[1] Antes de Gecko 24 {{geckoRelease(24)}} la interfaz para este evento era {{domxref("Event")}}, no {{domxref("FocusEvent")}}. Vea ({{bug(855741)}}).

+ +

Eventos relacionados

+ + diff --git a/files/es/web/api/element/name/index.html b/files/es/web/api/element/name/index.html deleted file mode 100644 index c970ea8947..0000000000 --- a/files/es/web/api/element/name/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -tags: - - API - - Compatibilidad de los navegadores - - DOM - - Elemento - - Propiedad - - Referencia - - Web - - actualizacion -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -

{{ APIRef("DOM") }}

- -

Sumario

- -

name obtiene o establece la propiedad del nombre de un objeto DOM; sólo se aplica a los siguientes 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") }}, and {{ HTMLelement("textarea") }}.

- -
-

Nota: La propiedad name no esixte para otros elementos; a diferencia de tagName y nodeName, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.

-
- -

name puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una configuración y con la colección de elementos de la configuración. cuando utilizamos una configuración o  elementos de una colección, puede devolver un solo elemento o una colección.

- -

Síntasix

- -
HTMLElement.name = string;
-var elName = HTMLElement.name;
-
-var fControl = HTMLFormElement.elementName;
-var controlCollection = HTMLFormElement.elements.elementName;
-
- -

Ejemplo

- -
<form action="" name="formA">
-  <input type="text" value="foo">
-</form>
-
-<script type="text/javascript">
-
-  // Get a reference to the first element in the form
-  var formElement = document.forms['formA'].elements[0];
-
-  // Give it a name
-  formElement.name = 'inputA';
-
-  // Show the value of the input
-  alert(document.forms['formA'].elements['inputA'].value);
-
-</script>
-
- -

Notas

- -

En Internet Explorer (IE), la propiedad name de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada

- -

Especificaciones

- -

W3C DOM 2 HTML Specification:

- - diff --git a/files/es/web/api/element/ongotpointercapture/index.html b/files/es/web/api/element/ongotpointercapture/index.html deleted file mode 100644 index 3023c3758e..0000000000 --- a/files/es/web/api/element/ongotpointercapture/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Element.ongotpointercapture -slug: Web/API/Element/ongotpointercapture -tags: - - API - - Controlador - - DOM - - Elemento - - Eventos Puntero - - Propiedad - - Referencia -translation_of: Web/API/GlobalEventHandlers/ongotpointercapture -translation_of_original: Web/API/Element/ongotpointercapture ---- -

{{ ApiRef("DOM") }}

- -

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

- -

Síntasix

- -
var gotCaptureHandler = target.ongotpointercpature;
-
- -

Valor de Retorno

- -
-
gotCaptureHandler
-
El controlador de eventos  gotpointercapture para el elemento target.
-
- -

Ejemplo

- -
<html>
-<script>
-function overHandler(ev) {
- // Determine the target event's gotpointercapture handler
- var gotCaptureHandler = ev.target.ongotpointercapture;
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerover = overHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementación retirada. Ver {{Bug("1166347")}}.

- -

Ver también

- - diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/element/onlostpointercapture/index.html deleted file mode 100644 index 9a07506d45..0000000000 --- a/files/es/web/api/element/onlostpointercapture/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Element.onlostpointercapture -slug: Web/API/Element/onlostpointercapture -tags: - - API - - Controlador de Eventos - - DOM - - Eventos Puntero - - Propiedad - - Referencia -translation_of: Web/API/GlobalEventHandlers/onlostpointercapture -translation_of_original: Web/API/Element/onlostpointercapture ---- -

{{ ApiRef("DOM") }}

- -

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

- -

Síntasix

- -
var lostCaptureHandler = target.onlostpointercpature;
-
- -

Valor de Retorno

- -
-
lostCaptureHandler
-
El controlador de eventos  lostpointercapture para el elemento target.
-
- -

Ejemplo

- -
<html>
-<script>
-function overHandler(ev) {
- // Determine the target event's lostpointercapture handler
- var lostCaptureHandler = ev.target.onlostpointercapture;
-}
-function init() {
- var el=document.getElementById("target");
- el.onpointerover = overHandler;
-}
-</script>
-<body onload="init();">
-<div id="target"> Touch me ... </div>
-</body>
-</html>
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
- -

Compatibilidad en los Navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementación retirada. Ver {{Bug("1166347")}}.

- -

Ver también

- - diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/element/onwheel/index.html deleted file mode 100644 index b8f829969b..0000000000 --- a/files/es/web/api/element/onwheel/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Element.onwheel -slug: Web/API/Element/onwheel -tags: - - API - - DOM - - Gecko - - Propiedad - - Referencia -translation_of: Web/API/GlobalEventHandlers/onwheel ---- -

{{ ApiRef("DOM") }}

- -

{{ non-standard_header() }}

- -

Sumario

- -

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

- -

Syntax

- -
element.onwheel = event handling code
-
- -

Notas

- -

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

- -

Ver también

- -

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

diff --git a/files/es/web/api/elementcssinlinestyle/style/index.html b/files/es/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..62c8903b72 --- /dev/null +++ b/files/es/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,52 @@ +--- +title: Element.style +slug: Web/API/HTMLElement/style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ ApiRef("HTML DOM") }}

+ +

Resumen

+ +

Devuelve un objeto que representa el atributo style del elemento.

+ +

Ejemplo

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Notas

+ +

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

+ +

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

+ +

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

+ +

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

+ +

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

+ +

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

+ +
elt.style.color = "blue";  // Asignación directa
+
+var st = elt.style;
+st.color = "blue";  // Asignación Indirecta
+
+ +

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(elt, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+
+ +

 

+ +

Especificación

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/es/web/api/elementoshtmlparavideo/index.html b/files/es/web/api/elementoshtmlparavideo/index.html deleted file mode 100644 index 4b36d9cba2..0000000000 --- a/files/es/web/api/elementoshtmlparavideo/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Elementos HTML para Video -slug: Web/API/ElementosHTMLparaVideo -translation_of: Web/API/HTMLVideoElement ---- -
-
{{APIRef("HTML DOM")}}
-
- -

El interfaz de HTMLVideoElement provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

- -

La lista de supported media formats (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.

- -

{{InheritanceDiagram(600, 140)}}

- -

Propiedades

- -

Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLVideoElement.height")}}
-
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.
-
{{domxref("HTMLVideoElement.poster")}}
-
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.
-
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
-
Devuelve un unsigned long que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
-
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
-
Devuelve un unsigned long que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
-
{{domxref("HTMLVideoElement.width")}}
-
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.
-
- -

Propiedades especificas para Gecko

- -
-
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos de video que han sido analizados del recurso de multimedia.
-
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos de video que han sido decifrados como imágines.
-
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.
-
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un unsigned long con el conteo de marcos presentados que han sido pintados en la pantalla.
-
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un double con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.
-
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
-
Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.
-
- -

Métodos

- -

Hereda los métodos anteriores de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

- -
-
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
-
Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstadoComentario
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Anadio el metodo getVideoPlaybackQuality() .
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Sin cambios del {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Definicion incial.
- -

Compatibilidad con Navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracteristicasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Apoyo básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Gecko implementa esto detras de la preferencia media.mediasource.enabled, predispuesto a false.

- -

Lea Tambien

- - diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/event/createevent/index.html deleted file mode 100644 index 7b273c6e33..0000000000 --- a/files/es/web/api/event/createevent/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -tags: - - API - - DOM - - Evento - - metodo -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -

{{APIRef("DOM")}}

- -

Crea un nuevo evento, que debe ser inicializado llamando a su método init().

- -

Sintaxis

- -
document.createEvent(tipo);
- -
-
tipo
-
Una string indicando el tipo de evento a crear.
-
- -

Este método devuelve un nuevo objeto {{ domxref("Event") }} del DOM del tipo indicado, que debe ser inicializado antes de su uso.

- -

Ejemplo

- -
var nuevoEvento = document.createEvent("UIEvents");
- -

Especificación

- - diff --git a/files/es/web/api/fetch_api/basic_concepts/index.html b/files/es/web/api/fetch_api/basic_concepts/index.html new file mode 100644 index 0000000000..8c02021de6 --- /dev/null +++ b/files/es/web/api/fetch_api/basic_concepts/index.html @@ -0,0 +1,73 @@ +--- +title: Conceptos básicos de Fetch +slug: Web/API/Fetch_API/Conceptos_basicos +tags: + - API + - API Fetch + - Fetch + - conceptos + - guard + - request +translation_of: Web/API/Fetch_API/Basic_concepts +--- +

{{DefaultAPISidebar("Fetch API")}}{{draft}}

+ +
+

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

+
+ +
+

Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

+
+ +

En pocas palabras

+ +

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

+ +

Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.

+ +

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.

+ +

Guard

+ +

Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.

+ +

Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
nuevo tipo de objetocreando el constructorconfiguraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}immutable
+ +

Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si

+ + diff --git a/files/es/web/api/fetch_api/conceptos_basicos/index.html b/files/es/web/api/fetch_api/conceptos_basicos/index.html deleted file mode 100644 index 8c02021de6..0000000000 --- a/files/es/web/api/fetch_api/conceptos_basicos/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Conceptos básicos de Fetch -slug: Web/API/Fetch_API/Conceptos_basicos -tags: - - API - - API Fetch - - Fetch - - conceptos - - guard - - request -translation_of: Web/API/Fetch_API/Basic_concepts ---- -

{{DefaultAPISidebar("Fetch API")}}{{draft}}

- -
-

La API Fetch proporciona una interfaz para obtener recursos (incluso a traves de la red). Parecera familiar a quien sea que haya usado {{domxref("XMLHttpRequest")}}, pero proporciona un conjunto de características más potentes y flexibles. Este artículo explica algunos de los conceptos básicos de la API Fetch.

-
- -
-

Este artículo será añadido en un futuro. Si encuenta un concepto de Fetch que siente necesita una mejor explicación, hagalo saber a alguien en el foro de discusión de MDN, o Mozilla IRC (#mdn room.)

-
- -

En pocas palabras

- -

En el corazón de Fetch estan las abstracciones de interfaz de cargas de HTTP {{domxref("Request")}}s, {{domxref("Response")}}s, {{domxref("Headers")}}, y {{domxref("Body")}}, junto a un método {{domxref("GlobalFetch.fetch","global fetch")}} para inicializar peticiones de recurso asíncronos. Porque los prinipales componentes de HTTP son abstraídos como objetos Javascript, es sencillo para otras APIs el hacer uso de dicha funcionalidad.

- -

Service Workers es un ejemplo de una API que hace un fuerte uso de Fetch.

- -

Fetch toma la naturaleza asíncrona de dichas peticiones un paso adelante. La API esta completamente basada en {{jsxref("Promise")}}.

- -

Guard

- -

Guard es una característica de objetos {{domxref("Headers")}}, con los valores posibles immutable, request, request-no-cors, response, o none, dependiendo de donde el encabezado es usado.

- -

Cuando un nuevo objeto {{domxref("Headers")}} es creado usando el {{domxref("Headers.Headers","Headers()")}} {{glossary("constructor")}}, su guarda (guard) se establece a none (por defecto). Cuando un objeto {{domxref("Request")}} o {{domxref("Response")}} es creado, tiene un objeto  {{domxref("Headers")}} asociado cuyo guarda (guard) se establece como se resume a continuación:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
nuevo tipo de objetocreando el constructorconfiguraciones de guarda (guard) del objeto {{domxref("Headers")}} asociado
{{domxref("Request")}}{{domxref("Request.Request","Request()")}}request
{{domxref("Request.Request","Request()")}} con {{domxref("Request.mode","mode")}} de no-corsrequest-no-cors
{{domxref("Response")}}{{domxref("Response.Response","Response()")}}response
Métodos {{domxref("Response.error","error()")}} o {{domxref("Response.redirect","redirect()")}}immutable
- -

Un guarda (guard) de encabezado afecta los métodos {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, y {{domxref("Headers.append","append()")}} que cambían los contenidos del encabezado. Un TypeError es arrojado si se trata modificar un objeto {{domxref("Headers")}} cuyo guarda (guard) es immutable. Sin embargo, la operación funcionará si

- - diff --git a/files/es/web/api/fetch_api/using_fetch/index.html b/files/es/web/api/fetch_api/using_fetch/index.html new file mode 100644 index 0000000000..51617ad047 --- /dev/null +++ b/files/es/web/api/fetch_api/using_fetch/index.html @@ -0,0 +1,377 @@ +--- +title: Uso de Fetch +slug: Web/API/Fetch_API/Utilizando_Fetch +tags: + - API + - BODY + - Experimental + - Fetch + - Guía + - HTTP + - Petición + - Promesa + - Promise + - Respuesta +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

+ +
+

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

+
+ +

Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

+ +

La especificación fetch difiere de JQuery.ajax() en dos formas principales:

+ + + +

Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:

+ +
fetch('http://example.com/movies.json')
+  .then(response => response.json())
+  .then(data => console.log(data));
+ +

Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.

+ +

Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).

+ +
+

Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.

+
+ +

Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.

+ +

Suministrando opciones de petición

+ +

El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:

+ +

Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.

+ +
// Ejemplo implementando el metodo POST:
+async function postData(url = '', data = {}) {
+  // Opciones por defecto estan marcadas con un *
+  const response = await fetch(url, {
+    method: 'POST', // *GET, POST, PUT, DELETE, etc.
+    mode: 'cors', // no-cors, *cors, same-origin
+    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+    credentials: 'same-origin', // include, *same-origin, omit
+    headers: {
+      'Content-Type': 'application/json'
+      // 'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    redirect: 'follow', // manual, *follow, error
+    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
+    body: JSON.stringify(data) // body data type must match "Content-Type" header
+  });
+  return response.json(); // parses JSON response into native JavaScript objects
+}
+
+postData('https://example.com/answer', { answer: 42 })
+  .then(data => {
+    console.log(data); // JSON data parsed by `data.json()` call
+  });
+ +

Tenga en cuenta que  mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:

+ + + +

Comprobando que la petición es satisfactoria

+ +

Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:

+ +
fetch('flores.jpg').then(function(response) {
+  if(response.ok) {
+    response.blob().then(function(miBlob) {
+      var objectURL = URL.createObjectURL(miBlob);
+      miImagen.src = objectURL;
+    });
+  } else {
+    console.log('Respuesta de red OK pero respuesta HTTP no OK');
+  }
+})
+.catch(function(error) {
+  console.log('Hubo un problema con la petición Fetch:' + error.message);
+});
+ +

Proporcionando tu propio objeto Request

+ +

En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest)
+.then(function(response) {
+  return response.blob();
+})
+.then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:

+ +
var anotherRequest = new Request(myRequest, myInit);
+ +

Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.

+ +
+

Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.

+
+ +

Enviar una petición con credenciales incluido

+ +

Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.

+ +
// El script fué llamado desde el origen 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+ +

Enviando datos JSON

+ +

Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .

+ +
var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Enviando un archivo

+ +

Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.

+ +
var formData = new FormData();
+var fileField = document.querySelector("input[type='file']");
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', response));
+ +

Cabeceras

+ +

La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

Los contenidos pueden ser consultados o recuperados:

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular headers.

+ +

Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("Cannot pretend to be a bank!");
+}
+ +

Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:

+ +
fetch(myRequest).then(function(response) {
+  var contentType = response.headers.get("content-type");
+  if(contentType && contentType.indexOf("application/json") !== -1) {
+    return response.json().then(function(json) {
+      // process your JSON further
+    });
+  } else {
+    console.log("Oops, we haven't got JSON!");
+  }
+});
+ +

Guarda (Guard)

+ +

Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.

+ +

Los valores posibles de guarda (guard) son:

+ + + +
+

Nota:  No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.

+
+ +

Objetos Response

+ +

Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.

+ +

Las propiedades de response que usarás son:

+ + + +

Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});
+ +

El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).

+ +
+

Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.

+
+ +

Body

+ +

Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:

+ + + +

El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.

+ + + +

Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.

+ +

Las peticiones body pueden ser establecidas pasando el parametro body:

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+});
+ +

Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.

+ +

Detectar característica

+ +

Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:

+ +
if (self.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+}
+ +

Polyfill

+ +

Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Vea también

+ + diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/utilizando_fetch/index.html deleted file mode 100644 index 51617ad047..0000000000 --- a/files/es/web/api/fetch_api/utilizando_fetch/index.html +++ /dev/null @@ -1,377 +0,0 @@ ---- -title: Uso de Fetch -slug: Web/API/Fetch_API/Utilizando_Fetch -tags: - - API - - BODY - - Experimental - - Fetch - - Guía - - HTTP - - Petición - - Promesa - - Promise - - Respuesta -translation_of: Web/API/Fetch_API/Using_Fetch ---- -

{{DefaultAPISidebar("Fetch API")}}{{ SeeCompatTable }}

- -
-

La API Fetch proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, tales como peticiones y respuestas. También provee un método global {{domxref("GlobalFetch.fetch","fetch()")}} que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red.

-
- -

Este tipo de funcionalidad se conseguía previamente haciendo uso de {{domxref("XMLHttpRequest")}}. Fetch proporciona una alternativa mejor que puede ser empleada fácilmente por otras tecnologías como {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP.

- -

La especificación fetch difiere de JQuery.ajax() en dos formas principales:

- - - -

Una petición básica de fetch es realmente simple de realizar. Eche un vistazo al siguente código:

- -
fetch('http://example.com/movies.json')
-  .then(response => response.json())
-  .then(data => console.log(data));
- -

Aquí estamos recuperando un archivo JSON a través de red e imprimiendo en la consola. El uso de fetch() más simple toma un argumento (la ruta del recurso que quieres obtener) y devuelve un objeto Promise conteniendo la respuesta, un objeto {{domxref("Response")}}.

- -

Esto es, por supuesto, una respuesta HTTP no el archivo JSON. Para extraer el contenido en el cuerpo del JSON desde la respuesta, usamos el método {{domxref("Body.json","json()")}} (definido en el mixin de {{domxref("Body")}}, el cual está implementado por los objetos {{domxref("Request")}} y {{domxref("Response")}}).

- -
-

Nota: El mixin de Body tambien tiene metodos parecidos para extraer otros tipos de contenido del cuerpo. Vease {{anch("Body")}} para más información.

-
- -

Las peticiones de Fetch son controladas por la directiva de connect-src de Content Security Policy en vez de la directiva de los recursos que se han devuelto.

- -

Suministrando opciones de petición

- -

El método fetch() puede aceptar opcionalmente un segundo parámetro, un objeto init que permite controlar un numero de diferentes ajustes:

- -

Vea {{domxref("GlobalFetch.fetch","fetch()")}}, para ver todas las opciones disponibles y más detalles.

- -
// Ejemplo implementando el metodo POST:
-async function postData(url = '', data = {}) {
-  // Opciones por defecto estan marcadas con un *
-  const response = await fetch(url, {
-    method: 'POST', // *GET, POST, PUT, DELETE, etc.
-    mode: 'cors', // no-cors, *cors, same-origin
-    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-    credentials: 'same-origin', // include, *same-origin, omit
-    headers: {
-      'Content-Type': 'application/json'
-      // 'Content-Type': 'application/x-www-form-urlencoded',
-    },
-    redirect: 'follow', // manual, *follow, error
-    referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
-    body: JSON.stringify(data) // body data type must match "Content-Type" header
-  });
-  return response.json(); // parses JSON response into native JavaScript objects
-}
-
-postData('https://example.com/answer', { answer: 42 })
-  .then(data => {
-    console.log(data); // JSON data parsed by `data.json()` call
-  });
- -

Tenga en cuenta que  mode: "no-cors" solo permite un conjunto limitado de encabezados en la solicitud:

- - - -

Comprobando que la petición es satisfactoria

- -

Una petición promise {{domxref("GlobalFetch.fetch","fetch()")}} será rechazada con {{jsxref("TypeError")}} cuando se encuentre un error de red, aunque esto normalmente significa problemas de permisos o similares — por ejemplo, un 404 no constituye un error de red. Una forma precisa de comprobar que la petición fetch() es satisfactoria pasa por comprobar si la promesa ha sido resuelta, además de comprobar que la propiedad {{domxref("Response.ok")}} tiene el valor true que indica que el estado de la petición HTTP es OK (código 200-299). El código sería algo así:

- -
fetch('flores.jpg').then(function(response) {
-  if(response.ok) {
-    response.blob().then(function(miBlob) {
-      var objectURL = URL.createObjectURL(miBlob);
-      miImagen.src = objectURL;
-    });
-  } else {
-    console.log('Respuesta de red OK pero respuesta HTTP no OK');
-  }
-})
-.catch(function(error) {
-  console.log('Hubo un problema con la petición Fetch:' + error.message);
-});
- -

Proporcionando tu propio objeto Request

- -

En lugar de pasar la ruta al recurso que deseas solicitar a la llamada del método fetch(), puedes crear un objeto de petición utilizando el constructor {{domxref("Request.Request","Request()")}}, y pasarlo como un argumento del método fetch():

- -
var myHeaders = new Headers();
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', myInit);
-
-fetch(myRequest)
-.then(function(response) {
-  return response.blob();
-})
-.then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
- -

Request() acepta exactamente los mismos parámetros que el método fetch(). Puedes incluso pasar un objeto de petición existente para crear una copia del mismo:

- -
var anotherRequest = new Request(myRequest, myInit);
- -

Esto es muy útil ya que el cuerpo de las solicitudes y respuestas son de un sólo uso. Haciendo una copia como esta te permite utilizar la petición/respuesta de nuevo, y al mismo tiempo, si lo deseas, modificar las opciones de init. La copia debe estar hecha antes de la lectura del <body>, y leyendo el <body> en la copia, se marcará como leido en la petición original.

- -
-

Nota: Existe también un método {{domxref("Request.clone","clone()")}} que crea una copia. Este tiene una semántica ligeramente distinta al otro método de copia — el primero fallará si el cuerpo de la petición anterior ya ha sido leído (lo mismo para copiar una respuesta), mientras que clone() no.

-
- -

Enviar una petición con credenciales incluido

- -

Para producir que los navegadores envien una petición con las credenciales incluidas, incluso para una llamada de origen cruzado, añadimos credentials: 'include' en el el objeto init que se pasa al método fetch().

- -
fetch('https://example.com', {
-  credentials: 'include'
-})
- -

Si solo quieres enviar la credenciales si la URL de la petición está en el mismo origen desde donde se llamada el script, añade credentials: 'same-origin'.

- -
// El script fué llamado desde el origen 'https://example.com'
-
-fetch('https://example.com', {
-  credentials: 'same-origin'
-})
- -

Sin embargo para asegurarte que el navegador no incluye las credenciales en la petición, usa credentials: 'omit'.

- -
fetch('https://example.com', {
-  credentials: 'omit'
-})
- -

Enviando datos JSON

- -

Usa {{domxref("GlobalFetch.fetch","fetch()")}} para enviar una petición POST con datos codificados en JSON .

- -
var url = 'https://example.com/profile';
-var data = {username: 'example'};
-
-fetch(url, {
-  method: 'POST', // or 'PUT'
-  body: JSON.stringify(data), // data can be `string` or {object}!
-  headers:{
-    'Content-Type': 'application/json'
-  }
-}).then(res => res.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', response));
- -

Enviando un archivo

- -

Los archivos pueden ser subido mediante el HTML de un elemento input <input type="file" />, {{domxref("FormData.FormData","FormData()")}} y {{domxref("GlobalFetch.fetch","fetch()")}}.

- -
var formData = new FormData();
-var fileField = document.querySelector("input[type='file']");
-
-formData.append('username', 'abc123');
-formData.append('avatar', fileField.files[0]);
-
-fetch('https://example.com/profile/avatar', {
-  method: 'PUT',
-  body: formData
-})
-.then(response => response.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', response));
- -

Cabeceras

- -

La interfaz {{domxref("Headers")}} te permite crear tus propios objetos de headers mediante el constructor {{domxref("Headers.Headers","Headers()")}}. Un objeto headers es un simple multi-mapa de nombres y valores:

- -
var content = "Hello World";
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
- -

Lo mismo se puede lograr pasando un "array de arrays" o un objeto literal al constructor:

- -
myHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
- -

Los contenidos pueden ser consultados o recuperados:

- -
console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
-
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
-
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
- -

Algunas de estas operaciones solo serán utiles en  {{domxref("ServiceWorker_API","ServiceWorkers")}}, pero estas disponen de una mejor API  para manipular headers.

- -

Todos los métodosde de headers lanzan un TypeError si un nombre de cabecera no es un nombre de cabecera HTTP válido. Las operaciones de mutación lanzarán un TypeError si hay un guarda inmutable (ver más abajo). Si no, fallan silenciosamente. Por ejemplo:

- -
var myResponse = Response.error();
-try {
-  myResponse.headers.set("Origin", "http://mybank.com");
-} catch(e) {
-  console.log("Cannot pretend to be a bank!");
-}
- -

Un buen caso de uso para headers es comprobar cuando el tipo de contenido es correcto antes de que se procese:

- -
fetch(myRequest).then(function(response) {
-  var contentType = response.headers.get("content-type");
-  if(contentType && contentType.indexOf("application/json") !== -1) {
-    return response.json().then(function(json) {
-      // process your JSON further
-    });
-  } else {
-    console.log("Oops, we haven't got JSON!");
-  }
-});
- -

Guarda (Guard)

- -

Desde que las cabeceras pueden ser enviadas  en peticiones y recibidas en respuestas, y tienen limitaciones sobre que información puede y debería ser mutable, los objeto headers tienen una propierdad de guarda. Este no está expuesto a la Web, pero puede afectar a que operaciones de mutación son permitidas sobre el objeto headers.

- -

Los valores posibles de guarda (guard) son:

- - - -
-

Nota:  No se debería añadir o establecer una petición a un objeto headers guardado con la cabecera Content-Length. De igual manera, insertar Set-Cookie en la respuesta de la cabecera no esta permitido: ServiceWorkers no estan autorizados a establecer cookies a través de respuestas sintéticas.

-
- -

Objetos Response

- -

Cómo has visto anteriormente, las instancias de {{domxref("Response")}} son devueltas cuando fetch() es resuelto.

- -

Las propiedades de response que usarás son:

- - - -

Estos pueden también creados programáticamente a través de JavaScript, pero esto solamente es realmete útil en {{domxref("ServiceWorker_API", "ServiceWorkers")}},  cuando pones un objeto response personalizado a una respuesta recibida usando un método {{domxref("FetchEvent.respondWith","respondWith()")}}:

- -
var myBody = new Blob();
-
-addEventListener('fetch', function(event) {
-  event.respondWith(
-    new Response(myBody, {
-      headers: { "Content-Type" : "text/plain" }
-    })
-  );
-});
- -

El constructor {{domxref("Response.Response","Response()")}} toma dos argurmentos opcionales, un cuerpo para la respuesta y un objeto init (similar al que acepta {{domxref("Request.Request","Request()")}}).

- -
-

Nota: El método estático {{domxref("Response.error","error()")}} simplemente devuelve un error en la respuesta. De igual manera que {{domxref("Response.redirect","redirect()")}} devuelve una respuesta que resulta en un redirección a una URL especificada. Estos son solo relevantes tambien a ServiceWorkers.

-
- -

Body

- -

Tanto las peticiones como las respuestas pueden contener datos body. Body es una instancia de cualquiera de los siguientes tipos:

- - - -

El mixin de {{domxref("Body")}} define los siguientes metodos para extraer un body (implementado por {{domxref("Request")}} and {{domxref("Response")}}). Todas ellas devuelven una promesa que es eventualmente resuelta con el contenido actual.

- - - -

Este hace uso de los datos no texttuales mucho mas facil que si fuera con XHR.

- -

Las peticiones body pueden ser establecidas pasando el parametro body:

- -
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
-  method: "POST",
-  body: form
-});
- -

Tanto peticiones y respuestas (y por extensión la function fetch()), intentaran inteligentemente determinar el tipo de contenido. Una petición tambien establecerá automáticamente la propiedad Context-Type de la cabecera si no es ha establecido una.

- -

Detectar característica

- -

Puedes comprobar si el navegador soporta  la API de Fetch comprobando la existencia de {{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} o {{domxref("GlobalFetch.fetch","fetch()")}} sobre el ámbito de {{domxref("Window")}} o {{domxref("Worker")}}. Por ejemplo:

- -
if (self.fetch) {
-    // run my fetch request here
-} else {
-    // do something with XMLHttpRequest?
-}
- -

Polyfill

- -

Para utilizar fetch() en un explorador no soportado, hay disponible un Fetch Polyfill que recrea la funcionalidad para navegadores no soportados.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Definición inicial
- -

Compatibilidad en navegadores

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

Vea también

- - diff --git a/files/es/web/api/formdata/index.html b/files/es/web/api/formdata/index.html new file mode 100644 index 0000000000..2ca830daf7 --- /dev/null +++ b/files/es/web/api/formdata/index.html @@ -0,0 +1,84 @@ +--- +title: FormData +slug: Web/API/XMLHttpRequest/FormData +tags: + - API + - FormData + - Interfaz + - Referencia + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera "multipart/form-data".

+ +

También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.

+ +

Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).

+ +
+

Nota: Esta característica está disponible en Web Workers.

+
+ +

Constructor

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Crea un nuevo objeto FormData.
+
+ +

Métodos

+ +
+
{{domxref("FormData.append()")}}
+
Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
+
{{domxref("FormData.delete()")}}
+
Elimina una pareja clave/valor de un objeto FormData.
+
{{domxref("FormData.entries()")}}
+
Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.get()")}}
+
Devuelve el primer valor asociado con una clave dada en un objeto FormData.
+
{{domxref("FormData.getAll()")}}
+
Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
+
{{domxref("FormData.has()")}}
+
Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
+
{{domxref("FormData.keys()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
+
{{domxref("FormData.set()")}}
+
Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
+
{{domxref("FormData.values()")}}
+
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definido en XHR spec
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("api.FormData")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/formdata/using_formdata_objects/index.html b/files/es/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..13f4c9635a --- /dev/null +++ b/files/es/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,137 @@ +--- +title: Usando Objetos FormData +slug: Web/Guide/Usando_Objetos_FormData +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +

Los objetos FormData le permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".

+ +

Creación de un objeto FormData desde cero

+ +

Usted mismo puede construir un objeto FormData instanciándolo y después añadiendo campos a la instancia usando su método  append() , tal y como se muestra:

+ +
var formData = new FormData();
+
+formData.append("username", "Groucho");
+formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
+
+// HTML file input user's choice...
+formData.append("userfile", fileInputElement.files[0]);
+
+// JavaScript file-like object...
+var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
+var blob = new Blob([content], { type: "text/xml"});
+
+formData.append("webmasterfile", blob);
+
+var request = new XMLHttpRequest();
+request.open("POST", "http://foo.com/submitform.php");
+request.send(formData);
+
+ +
Nota: Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el método FormData.append() (el valor del campo puede ser un {{ domxref("Blob") }}, {{ domxref("File") }}, o una cadena de texto; si el valor no es ni un Blob, ni un File, será convertido a un string).
+ +

Este ejemplo construye una instancia de FormData que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el método send() de XMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es un Blob. Un objeto Blob representa un objeto de tipo similar a un fichero que es inalterable y que almacenará datos en formato raw. Los Blobs representan datos que no necesariamente tendrán un formato Javascript nativo. La interfaz {{ domxref("File") }} está basada en Blob, y hereda su funcionalidad y la amplía para dar soporte a archivos que estén en el sistema del usuario. Para construir un Blob, puede invocar al constructor del objeto Blob.

+ +

Recuperando un objeto FormData de un formulario HTML 

+ +

Para construir un objeto FormData que contenga los datos de un {{ HTMLElement("form") }} existente, especifique ese elemento form cuando cree el objeto FormData:

+ +
var formData = new FormData(someFormElement);
+
+ +

Por ejemplo:

+ +
var formElement = document.getElementById("myFormElement");
+var request = new XMLHttpRequest();
+request.open("POST", "submitform.php");
+request.send(new FormData(formElement));
+
+ +

También puede añadir datos adicionales al objeto FormData antes de enviarlo. Así:

+ +
var formElement = document.getElementById("myFormElement");
+formData = new FormData(formElement);
+formData.append("serialnumber", serialNumber++);
+request.send(formData);
+ +

Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.

+ +

Enviando archivos usando objetos FormData

+ +

También puede enviar archivos usando FormData. Simplemente incluye un elemento {{ HTMLElement("input") }} de tipo {{ domxref("File") }}:

+ +
<form enctype="multipart/form-data" method="post" name="fileinfo">
+  <label>Your email address:</label>
+  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
+  <label>Custom file label:</label>
+  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
+  <label>File to stash:</label>
+  <input type="file" name="file" required />
+  <input type="submit" value="Stash the file!" />
+</form>
+<div id="output"></div>
+
+ +

Luego puede enviarlo usando código como el siguiente:

+ +
var form = document.forms.namedItem("fileinfo");
+form.addEventListener('submit', function(ev) {
+
+  var
+    oOutput = document.getElementById("output"),
+    oData = new FormData(document.forms.namedItem("fileinfo"));
+
+  oData.append("CustomField", "This is some extra data");
+
+  var oReq = new XMLHttpRequest();
+  oReq.open("POST", "stash.php", true);
+  oReq.onload = function(oEvent) {
+    if (oReq.status == 200) {
+      oOutput.innerHTML = "Uploaded!";
+    } else {
+      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
+    }
+  };
+
+  oReq.send(oData);
+  ev.preventDefault();
+}, false);
+
+ +
+

Nota: el método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().

+
+ +

También puede añadir un {{ domxref("File") }} o un {{ domxref("Blob") }} directamente al objeto {{ domxref("XMLHttpRequest/FormData", "FormData") }} de la siguiente manera:

+ +
data.append("myfile", myBlob, "filename.txt");
+
+ +

Cuando se usa el método append es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabecera Content-Disposition que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.

+ +

Además, puede usar FormData con jQuery si asigna las opciones correctas:

+ +
var fd = new FormData(document.getElementById("fileinfo"));
+fd.append("CustomField", "This is some extra data");
+$.ajax({
+  url: "stash.php",
+  type: "POST",
+  data: fd,
+  processData: false,  // tell jQuery not to process the data
+  contentType: false   // tell jQuery not to set contentType
+});
+
+ +

Envío de formularios y carga de archivos vía AJAX sin  objetos FormData

+ +

Si quiere saber cómo serializar y enviar vía AJAX un formulario sin utilizar objetos FormData, por favor leer este párrafo .

+ +

Vea también

+ + diff --git a/files/es/web/api/geolocation_api/index.html b/files/es/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..6d50972f8b --- /dev/null +++ b/files/es/web/api/geolocation_api/index.html @@ -0,0 +1,232 @@ +--- +title: Uso de geolocalización +slug: WebAPI/Using_geolocation +tags: + - API + - Geolocalización + - Guía + - clearWatch + - watchPosition +translation_of: Web/API/Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}

+ +

La API de geolocalización permite al usuario compartir su ubicación a las aplicaciones web si así lo desea. Por razones de privacidad, al usuario se le pide que confirme el permiso para proporcionar información de ubicación.

+ +

El objeto geolocation

+ +

La API de geolocalización se publica a través del objeto {{domxref("window.navigator.geolocation","navigator.geolocation")}}.

+ +

Si el objeto existe, los servicios de geolocalización están disponibles. Se puede comprobar la presencia de la geolocalización de esta manera:

+ +
if ("geolocation" in navigator) {
+  /* la geolocalización está disponible */
+} else {
+  /* la geolocalización NO está disponible */
+}
+
+ +
+

Nota: En Firefox 24 y versiones anteriores, "geolocation" in navigator siempre retornaba true incluso si la API se encontraba deshabilitada. Esto ha sido corregido en Firefox 25 para cumplir con la especificación.  ({{bug(884921)}}).

+
+ +

Obtención de la ubicación actual

+ +

Para obtener la ubicación actual del usuario, puede llamar al método {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+ +

Esto inicia una solicitud asíncrona para detectar la posición del usuario, y consulta el hardware de posicionamiento para obtener información actualizada. Cuando se determina la posición, se ejecuta la función de callback. Si lo desea, puede proporcionar otra función de callback que se ejecuta si se produce un error. Un tercer parámetro opcional, es un objeto de opciones donde se puede establecer la edad máxima de la posición devuelta, el tiempo de espera para una solicitud y si se requiere una alta precisión para la posición.

+ +
+

Nota: Por defecto, {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} intenta responder tan rápido como sea posible con un resultado de baja precisión. Es útil cuando se necesita una respuesta rápida sin importar su exactitud. A los dispositivos con GPS, por ejemplo, les puede tomar más de un minuto obtener una posición, por lo que datos menos precisos (localización por IP o wifi) pueden ser devueltos por {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
navigator.geolocation.getCurrentPosition(function(position) {
+  haz_algo(position.coords.latitude, position.coords.longitude);
+});
+ +

En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.

+ +

Rastreando la posición actual

+ +

Si los datos de ubicación cambian (si el dispositivo se mueve o información geográfica más precisa es recibida), puede definir una función de callback que se ejecuta al cambiar la posición. Esto se logra a través de la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}}, que recibe los mismos parámetros que {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. La función de callback es ejecutada varias veces, permitiendo al navegador actualizar la ubicación cada vez que cambia, o proporcionar una posición con mayor exactitud utilizando distintas técnicas de geolocalización. La función de callback de error, la cual es opcional como en {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, es llamada solo una vez, cuando nunca serán devueltos resultados correctos.

+ +
+

Nota: Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.

+
+ +
var watchID = navigator.geolocation.watchPosition(function(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+});
+ +

El método {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} devuelve un número que se utiliza para identificar el rastreador de posición solicitado; este valor se utiliza junto con el método {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} para dejar de rastrear la posición del usuario.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

Afinando la respuesta

+ +

Ambos métodos,  {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} y {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} aceptan una función de callback en caso de éxito, una función callback opcional si ocurre algún error, y un objeto PositionOptions también opcional.

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}

+ +

Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:

+ +
function geo_success(position) {
+  do_something(position.coords.latitude, position.coords.longitude);
+}
+
+function geo_error() {
+  alert("Sorry, no position available.");
+}
+
+var geo_options = {
+  enableHighAccuracy: true,
+  maximumAge        : 30000,
+  timeout           : 27000
+};
+
+var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
+ +

Demo de watchPosition: http://www.thedotproduct.org/experiments/geo/
+ 

+ +

Describiendo una posición

+ +

La ubicación del usuario es descrita con un objeto Position referenciando a un objeto Coordinates.

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}

+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}

+ +

Manejo de errores

+ +

La función de callback de error, si existe cuando se llama a getCurrentPosition() o watchPosition(), recibe un objeto  PositionError como su primer parámetro.

+ +
function errorCallback(error) {
+  alert('ERROR(' + error.code + '): ' + error.message);
+};
+
+ +

{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}

+ +

Ejemplo de geolocalización

+ + + +

Contenido HTML

+ +
<p><button onclick="geoFindMe()">Show my location</button></p>
+<div id="out"></div>
+
+ +

Contenido JavaScript

+ +
function geoFindMe() {
+  var output = document.getElementById("out");
+
+  if (!navigator.geolocation){
+    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
+    return;
+  }
+
+  function success(position) {
+    var latitude  = position.coords.latitude;
+    var longitude = position.coords.longitude;
+
+    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';
+
+    var img = new Image();
+    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";
+
+    output.appendChild(img);
+  };
+
+  function error() {
+    output.innerHTML = "Unable to retrieve your location";
+  };
+
+  output.innerHTML = "<p>Locating…</p>";
+
+  navigator.geolocation.getCurrentPosition(success, error);
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}

+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.605
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
+
+ +

Notas sobre Gecko

+ +

Firefox incluye soporte para localizar basándose en información de redes inalámbricas, usando Google Location Services. En la transacción entre Firefox y Google, los datos son compartidos incluyendo información del punto de acceso inalámbrico, un token de acceso (similar a una cookie con duración de dos semanas), y la dirección IP del usuario. Para más información, por favor consulte la Política de Privacidad de Mozilla y la Política de Privacidad de Google, dichos documentos cubren como estos datos pueden ser utilizados.

+ +

En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio GPSD para geolocalización en sistemas Linux.

+ +

Consultar también

+ + + +

 

diff --git a/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html new file mode 100644 index 0000000000..3023c3758e --- /dev/null +++ b/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -0,0 +1,134 @@ +--- +title: Element.ongotpointercapture +slug: Web/API/Element/ongotpointercapture +tags: + - API + - Controlador + - DOM + - Elemento + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +translation_of_original: Web/API/Element/ongotpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

ongotpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("gotpointercapture")}}.

+ +

Síntasix

+ +
var gotCaptureHandler = target.ongotpointercpature;
+
+ +

Valor de Retorno

+ +
+
gotCaptureHandler
+
El controlador de eventos  gotpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's gotpointercapture handler
+ var gotCaptureHandler = ev.target.ongotpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html new file mode 100644 index 0000000000..9a07506d45 --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html @@ -0,0 +1,133 @@ +--- +title: Element.onlostpointercapture +slug: Web/API/Element/onlostpointercapture +tags: + - API + - Controlador de Eventos + - DOM + - Eventos Puntero + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +translation_of_original: Web/API/Element/onlostpointercapture +--- +

{{ ApiRef("DOM") }}

+ +

onlostpointercapture es una propiedad {{domxref("EventHandler")}} de la interfaz {{domxref("Element")}}  que devuelve el controlador de eventos (función) para el evento tipo {{event("lostpointercapture")}} .

+ +

Síntasix

+ +
var lostCaptureHandler = target.onlostpointercpature;
+
+ +

Valor de Retorno

+ +
+
lostCaptureHandler
+
El controlador de eventos  lostpointercapture para el elemento target.
+
+ +

Ejemplo

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's lostpointercapture handler
+ var lostCaptureHandler = ev.target.onlostpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Pointer Events 2','#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}Versión no estable.
{{SpecName('Pointer Events', '#widl-Element-onlostpointercapture', 'onlostpointercapture')}}{{Spec2('Pointer Events')}}Definición inicial.
+ +

Compatibilidad en los Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FunciónChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico{{CompatNo}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FunciónAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementación retirada. Ver {{Bug("1166347")}}.

+ +

Ver también

+ + diff --git a/files/es/web/api/globaleventhandlers/onunload/index.html b/files/es/web/api/globaleventhandlers/onunload/index.html deleted file mode 100644 index a665fc2027..0000000000 --- a/files/es/web/api/globaleventhandlers/onunload/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: window.onunload -slug: Web/API/GlobalEventHandlers/onunload -translation_of: Web/API/WindowEventHandlers/onunload ---- -

{{ ApiRef() }}

-

Test Summary

-

The unload event is raised when the document is unloaded.

-

Syntax

-
window.onunload = funcRef;
-
- -

Example

-
<html>
-<head>
-
-<title>onunload test</title>
-
-<script type="text/javascript">
-
-window.onunload = unloadPage;
-
-function unloadPage()
-{
- alert("unload event detected!");
-}
-</script>
-</head>
-
-<body>
-<p>Reload a new page into the browser<br />
- to fire the unload event for this page.</p>
-<p>You can also use the back or forward buttons<br />
- to load a new page and fire this event.</p>
-</body>
-</html>
-
-

Notes

-

Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

-

Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.

-

Specification

-

{{ DOM0() }}

-

{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}

diff --git a/files/es/web/api/globaleventhandlers/onwheel/index.html b/files/es/web/api/globaleventhandlers/onwheel/index.html new file mode 100644 index 0000000000..b8f829969b --- /dev/null +++ b/files/es/web/api/globaleventhandlers/onwheel/index.html @@ -0,0 +1,31 @@ +--- +title: Element.onwheel +slug: Web/API/Element/onwheel +tags: + - API + - DOM + - Gecko + - Propiedad + - Referencia +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

{{ non-standard_header() }}

+ +

Sumario

+ +

La propiedad  onwheel devuelve el código del controlador de eventos onwheel en el elemento actual.

+ +

Syntax

+ +
element.onwheel = event handling code
+
+ +

Notas

+ +

El evento wheel se genera cuando el usuario desplaza el contenido de un elemento.

+ +

Ver también

+ +

Bug 18542 – el atributo onmousewheel  debe ser reemplazado con onwheel

diff --git a/files/es/web/api/history_api/example/index.html b/files/es/web/api/history_api/example/index.html new file mode 100644 index 0000000000..1971f1348f --- /dev/null +++ b/files/es/web/api/history_api/example/index.html @@ -0,0 +1,415 @@ +--- +title: Ejemplo de Navegación usando Ajax +slug: DOM/Manipulando_el_historial_del_navegador/Ejemplo +translation_of: Web/API/History_API/Example +--- +

This is an example of an AJAX web site composed only of three pages (first_page.php, second_page.php and third_page.php). To see how it works, please, create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ):

+ +
Note: For fully integrating the {{HTMLElement("form")}} elements within this mechanism, please take a look at the paragraph Submitting forms and uploading files.
+ +

first_page.php:

+ +
+
<?php
+    $page_title = "First page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>first_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

second_page.php:

+ +
+
<?php
+    $page_title = "Second page";
+
+    $as_json = false;
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        $as_json = true;
+        ob_start();
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php } ?>
+
+    <p>This is the content of <strong>second_page.php</strong>.</p>
+
+<?php
+    if ($as_json) {
+        echo json_encode(array("page" => $page_title, "content" => ob_get_clean()));
+    } else {
+?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

third_page.php:

+ +
+
<?php
+    $page_title = "Third page";
+    $page_content = "<p>This is the content of <strong>third_page.php</strong>. This content is stored into a php variable.</p>";
+
+    if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") {
+        echo json_encode(array("page" => $page_title, "content" => $page_content));
+    } else {
+?>
+<!doctype html>
+<html>
+<head>
+<?php
+        include "include/header.php";
+        echo "<title>" . $page_title . "</title>";
+?>
+</head>
+
+<body>
+
+<?php include "include/before_content.php"; ?>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<div id="ajax-content">
+<?php echo $page_content; ?>
+</div>
+
+<p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p>
+
+<?php
+        include "include/after_content.php";
+        echo "</body>\n</html>";
+    }
+?>
+
+
+ +

css/style.css:

+ +
#ajax-loader {
+    position: fixed;
+    display: table;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+#ajax-loader > div {
+    display: table-cell;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    text-align: center;
+    background-color: #000000;
+    opacity: 0.65;
+}
+
+ +

include/after_content.php:

+ +
<p>This is the footer. It is shared between all ajax pages.</p>
+
+ +

include/before_content.php:

+ +
<p>
+[ <a class="ajax-nav" href="first_page.php">First example</a>
+| <a class="ajax-nav" href="second_page.php">Second example</a>
+| <a class="ajax-nav" href="third_page.php">Third example</a>
+| <a class="ajax-nav" href="unexisting.php">Unexisting page</a> ]
+</p>
+
+
+ +

include/header.php:

+ +
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<script type="text/javascript" src="js/ajax_nav.js"></script>
+<link rel="stylesheet" href="css/style.css" />
+
+ +

js/ajax_nav.js:

+ +

(before implementing it in a working environment, please read the note about the const statement compatibility)

+ +
+
"use strict";
+
+const ajaxRequest = new (function () {
+
+    function closeReq () {
+        oLoadingBox.parentNode && document.body.removeChild(oLoadingBox);
+        bIsLoading = false;
+    }
+
+    function abortReq () {
+        if (!bIsLoading) { return; }
+        oReq.abort();
+        closeReq();
+    }
+
+    function ajaxError () {
+        alert("Unknown error.");
+    }
+
+    function ajaxLoad () {
+        var vMsg, nStatus = this.status;
+        switch (nStatus) {
+            case 200:
+                vMsg = JSON.parse(this.responseText);
+                document.title = oPageInfo.title = vMsg.page;
+                document.getElementById(sTargetId).innerHTML = vMsg.content;
+                if (bUpdateURL) {
+                    history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url);
+                    bUpdateURL = false;
+                }
+                break;
+            default:
+                vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown");
+                switch (Math.floor(nStatus / 100)) {
+                    /*
+                    case 1:
+                        // Informational 1xx
+                        console.log("Information code " + vMsg);
+                        break;
+                    case 2:
+                        // Successful 2xx
+                        console.log("Successful code " + vMsg);
+                        break;
+                    case 3:
+                        // Redirection 3xx
+                        console.log("Redirection code " + vMsg);
+                        break;
+                    */
+                    case 4:
+                        /* Client Error 4xx */
+                        alert("Client Error #" + vMsg);
+                        break;
+                    case 5:
+                        /* Server Error 5xx */
+                        alert("Server Error #" + vMsg);
+                        break;
+                    default:
+                        /* Unknown status */
+                        ajaxError();
+                }
+        }
+        closeReq();
+    }
+
+    function filterURL (sURL, sViewMode) {
+        return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, "");
+    }
+
+    function getPage (sPage) {
+        if (bIsLoading) { return; }
+        oReq = new XMLHttpRequest();
+        bIsLoading = true;
+        oReq.onload = ajaxLoad;
+        oReq.onerror = ajaxError;
+        if (sPage) { oPageInfo.url = filterURL(sPage, null); }
+        oReq.open("get", filterURL(oPageInfo.url, "json"), true);
+        oReq.send();
+        oLoadingBox.parentNode || document.body.appendChild(oLoadingBox);
+    }
+
+    function requestPage (sURL) {
+        if (history.pushState) {
+            bUpdateURL = true;
+            getPage(sURL);
+        } else {
+            /* Ajax navigation is not supported */
+            location.assign(sURL);
+        }
+    }
+
+    function processLink () {
+        if (this.className === sAjaxClass) {
+            requestPage(this.href);
+            return false;
+        }
+        return true;
+    }
+
+    function init () {
+        oPageInfo.title = document.title;
+        for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink);
+    }
+
+    const
+
+        /* customizable constants */
+        sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav",
+
+        /* not customizable constants */
+        rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/,
+        oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(),
+        oPageInfo = {
+            title: null,
+            url: location.href
+        }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ {
+            100: "Continue",
+            101: "Switching Protocols",
+            102: "Processing",
+            200: "OK",
+            201: "Created",
+            202: "Accepted",
+            203: "Non-Authoritative Information",
+            204: "No Content",
+            205: "Reset Content",
+            206: "Partial Content",
+            207: "Multi-Status",
+            208: "Already Reported",
+            226: "IM Used",
+            300: "Multiple Choices",
+            301: "Moved Permanently",
+            302: "Found",
+            303: "See Other",
+            304: "Not Modified",
+            305: "Use Proxy",
+            306: "Reserved",
+            307: "Temporary Redirect",
+            308: "Permanent Redirect",
+            400: "Bad Request",
+            401: "Unauthorized",
+            402: "Payment Required",
+            403: "Forbidden",
+            404: "Not Found",
+            405: "Method Not Allowed",
+            406: "Not Acceptable",
+            407: "Proxy Authentication Required",
+            408: "Request Timeout",
+            409: "Conflict",
+            410: "Gone",
+            411: "Length Required",
+            412: "Precondition Failed",
+            413: "Request Entity Too Large",
+            414: "Request-URI Too Long",
+            415: "Unsupported Media Type",
+            416: "Requested Range Not Satisfiable",
+            417: "Expectation Failed",
+            422: "Unprocessable Entity",
+            423: "Locked",
+            424: "Failed Dependency",
+            425: "Unassigned",
+            426: "Upgrade Required",
+            427: "Unassigned",
+            428: "Precondition Required",
+            429: "Too Many Requests",
+            430: "Unassigned",
+            431: "Request Header Fields Too Large",
+            500: "Internal Server Error",
+            501: "Not Implemented",
+            502: "Bad Gateway",
+            503: "Service Unavailable",
+            504: "Gateway Timeout",
+            505: "HTTP Version Not Supported",
+            506: "Variant Also Negotiates (Experimental)",
+            507: "Insufficient Storage",
+            508: "Loop Detected",
+            509: "Unassigned",
+            510: "Not Extended",
+            511: "Network Authentication Required"
+        };
+
+    var
+
+        oReq, bIsLoading = false, bUpdateURL = false;
+
+    oLoadingBox.id = "ajax-loader";
+    oCover.onclick = abortReq;
+    oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==";
+    oCover.appendChild(oLoadingImg);
+    oLoadingBox.appendChild(oCover);
+
+    onpopstate = function (oEvent) {
+        bUpdateURL = false;
+        oPageInfo.title = oEvent.state.title;
+        oPageInfo.url = oEvent.state.url;
+        getPage();
+    };
+
+    window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init);
+
+    // Public methods
+
+    this.open = requestPage;
+    this.stop = abortReq;
+    this.rebuildLinks = init;
+
+})();
+
+
+ +
Note: The current implementation of const (constant statement) is not part of ECMAScript 5. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10. const is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the let statement, constants declared with const will be block-scoped. We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the const statements with the var statements.
+ +

For more information, please see: Manipulating the browser history.

+ +

See also

+ + diff --git a/files/es/web/api/history_api/index.html b/files/es/web/api/history_api/index.html new file mode 100644 index 0000000000..eb2c0b3fdd --- /dev/null +++ b/files/es/web/api/history_api/index.html @@ -0,0 +1,228 @@ +--- +title: Manipulando el historial del navegador +slug: DOM/Manipulando_el_historial_del_navegador +tags: + - HTML5 + - historial + - para_revisar +translation_of: Web/API/History_API +--- +

El objeto DOM {{ domxref("window") }} proporciona acceso al historial del navegador a través del objeto {{ domxref("window.history", "history") }} . Este da acceso a métodos y propiedades útiles que permiten avanzar y retroceder a través del historial del usuario, así como --a partir de HTML5-- manipular el contenido del historial.

+ +

Viajando a través del historial

+ +

Retroceder y avanzar a través del historial del usuario utilizando los métodos back(), forward() y go().

+ +

Moviéndose hacia adelante y hacia atrás

+ +

Para moverte hacia atrás, solo debes hacer:

+ +
window.history.back();
+
+ +

Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.

+ +

De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:

+ +
window.history.forward();
+
+ +

Moverse a un punto específico del historial

+ +

Puedes usar el método go() para cargar una página desde el historial de la sesión, identificada por su poscición relativa a la página actual  (Siendo la página actual, por supuesto, relativa al índice 0).

+ +

Para moverse atrás una página (equivalente a llamar back()):

+ +
window.history.go(-1);
+
+ +

Para moverse una página hacia adelante, como si se llamara a forward():

+ +
window.history.go(1);
+
+ +

De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.

+ +

Otro uso para go() es el de actualizar la página ya sea pasando 0 como parámetro o ninguno.

+ +
// Cada una de las siguientes
+// instrucciones actualiza la página
+window.history.go(0);
+window.history.go();
+ +

Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad length:

+ +
var numeroDeEntradas = window.history.length;
+
+ +
Nota: Internet Explorer admite el paso de cadenas de URL como parámetro para go(); esto no es estándar y no está implementado en Gecko.
+ +

Añadiendo y modificando entradas del historial

+ +

{{ gecko_minversion_header("2") }}

+ +

HTML5 introduce los métodos history.pushState() y history.replaceState(), los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.

+ +

Hacer uso de history.pushState() cambia el referer que es utilizado en la cabecera HTTP por los objetos XMLHttpRequest que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea this al momento de la creación del objeto XMLHttpRequest.

+ +

Ejemplo

+ +

Supongamos que http://mozilla.org/foo.html ejecuta el siguiente JavaScript:

+ +
var stateObj = { foo: "bar" };
+history.pushState(stateObj, "page 2", "bar.html");
+
+ +

Esto causará que la barra de URL muestre http://mozilla.org/bar.html, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.

+ +

Supongamos ahora que el usuario navega hacia http://google.com, y despúes hace clic en Atrás.  En este punto, la barra de URL mostrará http://mozilla.org/bar.html, y la página tendrá un evento popstate cuyo state object contiene una copia de stateObj. La página en si se verá como foo.html, aunque la página podria modificar su contenido durante el evento popstate event.

+ +

Si hacemos clic en "atrás" nuevamente, la URL cambiará a http://mozilla.org/foo.html, y el documento generará otro evento popstate event, esta vez con un state object nulo. Aquí también, ir atrás no cambia el contenido del documento con respecto al paso anterior, aunque el documento permite actualizar su contenido manualmente después de recibir el evento popstate.

+ +

El método pushState()

+ +

pushState() toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL.  Vamos a examinar cada uno de estos tres parametros en más detalle:

+ + + +

En un sentido, llamar pushState() es similar a asignar window.location = "#foo", en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual. Pero pushState() tiene las siguientes ventajas:

+ + + +

Hay que tener en cuenta que pushState() nunca dispara un evento hashchange, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.

+ +

En un documento XUL, crea el elemento XUL específico.

+ +

En otros documentos, crea un elemento con un namespace de URI nulo (null).

+ +

El método replaceState()

+ +

history.replaceState() trabaja exactamente igual a history.pushState() excepto que replaceState() modifica la entrada al historial actual en lugar de crear una nueva.

+ +

replaceState() es particularmente útil si deseas actualizar el objeto estado o la URL del la actual entrada al historial en respuesta a alguna acción del usuario.

+ +

El evento popstate

+ +

Un evento popstate es dirigido a la ventana cada vez que la entrada al historial cambia. Si la entrada al historial es activada y fue creada por un llamado a pushState o afectada por una llamada a replaceState, la propiedad state del evento popstate contiene una copia del historial de entradas del objeto estado.

+ +

Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.

+ +

Leyendo el estado actual

+ +

Cuando la página carga, debería tener un objeto de estado no nulo. Esto podría ocurrir, por ejemplo, si la página establece un object de estado (usando pushState() o replaceState()) y entonces el usuario reinicia su navegador. Cuando la página carga de nuevo, la página recibirá el evento onload, pero no el evento popstate.  Sin embargo, si lees la propiedad history.state, obtendrás el objeto estado que habrías tenido si se hubiera lanzado el evento apopstate.

+ +

Puedes leer el estado del historial actual sin tener que esperar un evento popstate usando la propiedad  history.state de esta manera:

+ +
var currentState = history.state;
+ +

Ejemplos

+ +

Para un ejemplo completo de un sitio AJAX, ver: Ejemplo de navegación AJAX.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstado Comentario
{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}{{Spec2('HTML WHATWG')}}No hay cambios desde {{SpecName("HTML5 W3C")}}.
{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}{{Spec2('HTML5 W3C')}}Definición inicial
+ +

Compatibilidad entre navegadores

+ +

{{ CompatibilityTable() }}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
replaceState, pushState5{{ CompatGeckoDesktop("2.0") }}1011.505.0
history.state18{{ CompatGeckoDesktop("2.0") }}1011.506.0
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
replaceState, pushState{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
history.state{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+ +

Ver también

+ + diff --git a/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html new file mode 100644 index 0000000000..1225072b01 --- /dev/null +++ b/files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html @@ -0,0 +1,117 @@ +--- +title: Drag & Drop archivo +slug: DragDrop/Drag_and_Drop/drag_and_drop_archivo +tags: + - Guía + - arrastra y suelta + - drag and drop + - drop zone + - zona de arrastre +translation_of: Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

Las interfaces Drag-and-Drop posibilitan arrastrar y soltar archivos en una página web. En este documento se describe cómo una aplicación puede aceptar uno, o más, archivos que son arrastrados desde el explorador de archivos de la plataforma y soltados en una página web.

+ +

Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (drop zone), es decir, definir un elemento donde se podrá soltar el archivo; y 2) definir funciones para la gestión de los eventos {{event("drop")}} y {{event("dragover")}}. Estos pasos se describen a continuación, tambien se incluyen ejemplos snippets de código. El código fuente completo está disponible en el repositorio drag-and-drop de MDN (cualquier sugerencia o  tema que revisar es bienvenido).

+ +

Nota: {{domxref("HTML_Drag_and_Drop_API","HTML drag and drop")}} define 2 diferentes APIs para soportar drag and drop de archivos. Una API es la interfaz {{domxref("DataTransfer")}} y la segunda API son las interfaces {{domxref("DataTransferItem")}} y {{domxref("DataTransferItemList")}}.  Este ejemplo ilustra el uso de ambas APIs (y no usa ninguna interfaz específica de Gecko).

+ +

Define la zona "drop" [drop zone]

+ +

Es necesario configurar un evento {{event("drop")}} en el objeto sobre el cual se soltará el objeto arrastrado. Este evento llamará una función global {{domxref("GlobalEventHandlers.ondrop","ondrop")}} que recibe los datos del objeto arrastrado. El siguiente código muestra cómo se hace con un elemento {{HTMLelement("div")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);">
+  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
+</div>
+ +

Normalmente, una aplicación incluirá una función de gestión de eventos {{event("dragover")}} en el elemento objetivo del arrastre y esa función desactivará el comportamiento de arrastre por defecto del browser. Para añadir esta función necesita incluir una función global {{domxref("GlobalEventHandlers.ondragover","ondragover")}}:

+ +
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
+  <p>Arrastra y suelta uno o más archivos a esta zona ...</p>
+</div>
+
+ +

Por último, puede que una aplicación quiera personalizar el estilo del elemento objetivo del arrastre para indicar visualmente que es una zona drag and drop. En este ejemplo, el elemento objetivo usa el siguiente estilo:

+ +
#drop_zone {
+  border: 5px solid blue;
+  width:  200px;
+  height: 100px;
+}
+
+ +
+

Fíjese que los eventos dragstart y dragend no son activados cuando se arrastra un archivo al browser desde el SO.

+
+ +

Procesar la acción de soltar [drop]

+ +

El evento {{event("drop")}} se ejecuta cuando el usuario suelta el o los archivos. En el siguiente manejador, si el navegador sorporta la interfaz {{domxref("DataTransferItemList")}} , el método {{domxref("DataTransferItem.getAsFile","getAsFile()")}} se utiliza para acceder cada fichero; de lo contrario la propiedad {{domxref("DataTransfer")}} de la interfaz {{domxref("DataTransfer.files","files")}} es usada para acceder cada archivo.

+ +

El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación real, se querrá procesar un archivo usando {{domxref("File","File API")}}.

+ +

Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.

+ +
function dropHandler(ev) {
+  console.log('Fichero(s) arrastrados');
+
+  // Evitar el comportamiendo por defecto (Evitar que el fichero se abra/ejecute)
+  ev.preventDefault();
+
+  if (ev.dataTransfer.items) {
+    // Usar la interfaz DataTransferItemList para acceder a el/los archivos)
+    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+      // Si los elementos arrastrados no son ficheros, rechazarlos
+      if (ev.dataTransfer.items[i].kind === 'file') {
+        var file = ev.dataTransfer.items[i].getAsFile();
+        console.log('... file[' + i + '].name = ' + file.name);
+      }
+    }
+  } else {
+    // Usar la interfaz DataTransfer para acceder a el/los archivos
+    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+      console.log('... file[' + i + '].name = ' + ev.dataTransfer.files[i].name);
+    }
+  }
+
+  // Pasar el evento a removeDragData para limpiar
+  removeDragData(ev)
+}
+ +

Prevenir el comportamiento default de arrastrado en el browser 

+ +

El siguiente evento {{event("dragover")}} llama a  {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.

+ +
function dragOverHandler(ev) {
+  console.log('File(s) in drop zone');
+
+  // Prevent default behavior (Prevent file from being opened)
+  ev.preventDefault();
+}
+
+ +

Limpieza (Cleanup)

+ +

Typically, an application may want to perform some cleanup by deleting the file drag data. In this example, the drop event is passed along from drop handler to a custom function called removeDragData. If the browser supports the {{domxref("DataTransferItemList")}} interface, the list's {{domxref("DataTransferItemList.clear","clear()")}} method is used to delete the file drag data; otherwise the {{domxref("DataTransfer")}} object's {{domxref("DataTransfer.clearData","clearData()")}} method is used to delete the data.

+ +
function removeDragData(ev) {
+  console.log('Removing drag data')
+
+  if (ev.dataTransfer.items) {
+    // Use DataTransferItemList interface to remove the drag data
+    ev.dataTransfer.items.clear();
+  } else {
+    // Use DataTransfer interface to remove the drag data
+    ev.dataTransfer.clearData();
+  }
+}
+
+ +

See also

+ + diff --git a/files/es/web/api/html_drag_and_drop_api/index.html b/files/es/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..82e069ed48 --- /dev/null +++ b/files/es/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,57 @@ +--- +title: Arrastrar y soltar +slug: DragDrop/Drag_and_Drop +tags: + - HTML5 + - XUL +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

Firefox y otras aplicaciones de Mozilla admiten una serie de características para gestionar la funcionalidad de arrastrar y soltar. Esto le permite al usuario hacer clic y mantener presionado el botón del ratón/mouse sobre un elemento, arrastrarlo a otra ubicación y soltarlo para colocar el elemento allí. Al puntero le seguirá una representación transparente de lo que se está arrastrando durante la operación. La ubicación de destino puede ser una aplicación diferente. Sitios web, extensiones y aplicaciones XUL pueden hacer uso de esta funcionalidad para personalizar los elementos que pueden ser arrastrados, evaluar la operación, así como especificar el lugar donde los elementos se pueden soltar.

+
Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la documentación de la API anterior para Firefox 3.0 y versiones anteriores.
+ + +

Elementos básicos de arrastrar y soltar

+

Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:

+ +

Mozilla y Firefox admiten una serie de características que no se encuentran en el modelo estándar de arrastrar y soltar. Estas te permiten arrastrar elementos múltiples y arrastrar datos que no son cadenas. Para obtener más información, consulta Arrastrar y soltar múltiples elementos .

+

Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta Tipos de operaciones de arrastre recomendados.

+

Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:

+ +

Consulta DataTransfer para tener una referencia al objeto DataTransfer.

+ + +

Eventos de arrastre

+

Se utilizan una serie de eventos que se ejecutan durante las diversas etapas de la operación de arrastre y colocación. Ten en cuenta que se ejecutan sólo los eventos de arrastre, los eventos del ratón/mouse como mousemove no se ejecutan durante una operación de arrastre.

+

La propiedad dataTransfer de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.

+ + +
+
dragstart
+
Se ejecuta sobre un elemento cuando se inicia una operación de arrastre. El usuario está solicitando arrastrar el elemento al que dispara el evento dragstart. Durante este evento, un proceso de escucha ajustará cierto tipo de información como los datos de la operación de arrastre y la imagen que se asocia con ella. Para obtener más información al respecto, consulta Inicio de una operación de arrastre .
+
dragenter
+
Se dispara cuando el ratón/mouse se mueve primero sobre un elemento, mientras está teniendo lugar una operación de arrastre. Un proceso de escucha de este evento debe indicar si se permite una operación de arrastre sobre esta ubicación. Si no hay procesos de escucha o éstos no realizan ninguna operación, entonces no se permite, de manera predeterminada, una operación de arrastre. Este es también el evento al que escuchar si deseas proporcionar información acerca de que se permite una operación de arrastre, como, por ejemplo, mostrar un resaltado o un marcador de inserción. Para obtener más información al respecto, consulta Especificación de destinos de colocación .
+
dragover
+
Este evento se activa cuando el ratón/mouse se mueve sobre un elemento cuando está teniendo lugar una operación de arrastre. Gran parte del tiempo, la operación que tiene lugar durante un proceso de escucha será la misma que el evento dragenter. Para obtener más información al respecto, consulta Especificación de destinos de colocación.
+
dragleave
+
Este evento se activa cuando el ratón/mouse sale de un elemento mientras que está teniendo lugar una operación de arrastre. Los procesos de escucha deben eliminar cualquier resaltado o marcador de inserción que usan para la información sobre el proceso de arrastre.
+
drag
+
Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.
+
drop
+
El evento se dispara sobre el elemento en el que se produjo la colocación al finalizar la operación de arrastre. Un proceso de escucha se encargará de recuperar los datos que se arrastran e insertarlos en la ubicación de la colocación. Este evento sólo se activará si se desea disponer de la funcionalidad de soltar. No se activará si el usuario cancela la operación de arrastre, por ejemplo, pulsando la tecla Escape, o si se liberó el botón del ratón/mouse mientras que éste no estaba sobre un destino de colocación válido. Para más información sobre esto, consulta Realizar una operación de colocación.
+
dragend
+
El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta Finalizar una operación de arrastre si deseas más información.
+
+ + +
{{ HTML5ArticleTOC () }}
diff --git a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html new file mode 100644 index 0000000000..daad516a44 --- /dev/null +++ b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html @@ -0,0 +1,144 @@ +--- +title: Tipos de Drag recomendados +slug: DragDrop/Recommended_Drag_Types +translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types +--- +

A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.

+

Arrastramdo Texto

+

Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:

+
event.dataTransfer.setData("text/plain", "This is text to drag")
+
+

Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.

+

Se recomienda que siempre se agrega datos del tipo  text/plain  como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.

+

En códigos más viejo, encontrara text/unicode o el tipo Text.Estos equivalen text/plain,que guardara y recibia los datos del texto plano en ese lugar.

+ +

Los enlaces deben incluir los datos de los dos tipos, el primero debe ser  URL utilizando el tipo text/uri-list,y el segundo es URL utilizando el tipo text/plain. Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:

+
var dt = event.dataTransfer;
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+

Es constumbre, establecer el tipo text/plain de ultimo, , ya que es menos específico que el tipo de URI.

+

Note que el tipo de URL uri-list es con una "i", no una "L"

+

Note that the URL type is uri-list with an 'I', not with an 'L'.

+

To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The text/plain version of the drag data should include all links but should not include the comments.

+

For example:

+
http://www.mozilla.org
+#A second link
+http://www.xulplanet.com
+
+

This sample text/uri-list data contains two links and a comment.

+

When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type URL may be used to refer to the first valid link within the data for the text/uri-list type. You should not add data using the URL type; attempting to do so will just set the value of the text/uri-list type instead.

+
var url = event.dataTransfer.getData("URL");
+
+

You may also see data using the text/x-moz-url type which is a Mozilla specific type. If it appears, it should be used before the text/uri-list type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:

+
http://www.mozilla.org
+Mozilla
+http://www.xulplanet.com
+XUL Planet
+
+

Dragging HTML and XML

+

HTML content may use the text/html type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the innerHTML property of an element.

+

XML content may use the text/xml type, but you should ensure that the data value is well-formed XML.

+

You may also include a plain text representation of the HTML or XML data using the text/plain type. The data should be just the text and should not include any of the source tags or attributes. For instance:

+
var dt = event.dataTransfer;
+dt.setData("text/html", "Hello there, <strong>stranger</strong>");
+dt.setData("text/plain", "Hello there, stranger");
+
+

Dragging Files

+

A local file is dragged using the application/x-moz-file type with a data value that is an nsIFile object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the mozSetDataAt method to assign the data. Similarly, when retrieving the data, you must use the mozGetDataAt method.

+
event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0);
+
+

If possible, you may also include the file URL of the file using both the text/uri-list and/or text/plain types. These types should be added last so that the more specific application/x-moz-file type has higher priority.

+

Multiple files will be received during a drop as mutliple items in the data transfer. See Dragging and Dropping Multiple Items for more details about this.

+

The following example shows how to create an area for receiving dropped files:

+
<listbox ondragenter="return checkDrag(event)"
+         ondragover="return checkDrag(event)"
+         ondrop="doDrop(event)"/>
+
+<script>
+function checkDrag(event)
+{
+  return event.dataTransfer.types.contains("application/x-moz-file");
+}
+
+function doDrop(event)
+{
+  var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0);
+  if (file instanceof Components.interfaces.nsIFile)
+    event.currentTarget.appendItem(file.leafName);
+}
+</script>
+
+

In this example, the event returns false only if the data transfer contains the application/x-moz-file type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the instanceof operator is used here as the mozGetDataAt method will return an nsISupports that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.

+

Dragging Images

+

Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the text/uri-list type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see the data URL scheme.

+

As with other links, the data for the text/plain type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the text/plain data in this situation.

+

In chrome or other privileged code, you may also use the image/jpeg, image/png or image/gif types, depending on the type of image. The data should be an object which implements the nsIInputStream interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.

+

You should also include the application/x-moz-file type if the image is located on disk. In fact, this a common way in which image files are dragged.

+

It is important to set the data in the right order, from most specific to least specific. The image type such as image/jpeg should come first, followed by the application/x-moz-file type. Next, you should set the text/uri-list data and finally the text/plain data. For example:

+
var dt = event.dataTransfer;
+dt.mozSetDataAt("image/png", stream, 0);
+dt.mozSetDataAt("application/x-moz-file", file, 0);
+dt.setData("text/uri-list", imageurl);
+dt.setData("text/plain", imageurl);
+
+

Note that the mozGetDataAt method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.

+

Dragging Nodes

+

Nodes and elements in a document may be dragged using the application/x-moz-node type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.

+

You should always include a plain text alternative for the node.

+

Dragging Custom Data

+

You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.

+

Dragging files to an operating system folder

+

There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:

+
// currentEvent is a given existing drag operation event
+
+currentEvent.dataTransfer.setData("text/x-moz-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL);
+currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName);
+currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise',
+                  new dataProvider(success,error),
+                  0, Components.interfaces.nsISupports);
+
+function dataProvider(){}
+
+dataProvider.prototype = {
+  QueryInterface : function(iid) {
+    if (iid.equals(Components.interfaces.nsIFlavorDataProvider)
+                  || iid.equals(Components.interfaces.nsISupports))
+      return this;
+    throw Components.results.NS_NOINTERFACE;
+  },
+  getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) {
+    if (aFlavor == 'application/x-moz-file-promise') {
+
+       var urlPrimitive = {};
+       var dataSize = {};
+
+       aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize);
+       var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+       console.log("URL file orignal is = " + url);
+
+       var namePrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize);
+       var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString));
+
+       console.log("target filename is = " + name);
+
+       var dirPrimitive = {};
+       aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize);
+       var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile);
+
+       console.log("target folder is = " + dir.path);
+
+       var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile);
+       file.initWithPath(dir.path);
+       file.appendRelativePath(name);
+
+       console.log("output final path is =" + file.path);
+
+       // now you can write or copy the file yourself...
+    }
+  }
+}
+
+

{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}

diff --git a/files/es/web/api/htmlelement/accesskey/index.html b/files/es/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..7d73c395fc --- /dev/null +++ b/files/es/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,23 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Propiedad + - necesidades de contenido +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +
 
+ +

La propiedad Element.accessKey establece la pulsación de teclado mediante el cual un usuario puede presionar para saltar a este elemento.

+ +
+

Nota: la propiedad Element.accessKey se usa raramente debido a sus múltiples conflictos con las asociaciones de teclas que ya están presentes  en los navegadores. Para evitar esto, los navegadores implementan el comportamiento tecla de acceso si se pulsan las claves con otras teclas "cualificadas" (como Alt + tecla de acceso).

+
+ +

 

+ +

 

diff --git a/files/es/web/api/htmlelement/animationend_event/index.html b/files/es/web/api/htmlelement/animationend_event/index.html new file mode 100644 index 0000000000..8bca8b046f --- /dev/null +++ b/files/es/web/api/htmlelement/animationend_event/index.html @@ -0,0 +1,81 @@ +--- +title: animationend +slug: Web/Events/animationend +translation_of: Web/API/HTMLElement/animationend_event +--- +

El evento animationend es lanzado cuando una animación CSS se ha completado.

+ +

Información General

+ +
+
Especificación
+
CSS Animations
+
Interface
+
AnimationEvent
+
Bubbles
+
Si
+
Cancelable
+
No
+
Target
+
Document, Element
+
Acción por defecto
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{ReadOnlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{ReadOnlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{ReadOnlyInline}}booleanDoes the event normally bubble?
cancelable {{ReadOnlyInline}}booleanIs it possible to cancel the event?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{ReadOnlyInline}}FloatThe amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for animation-delay, in which case the event will be fired with an elapsedTime of (-1 * delay).
+ +

Eventos relacionados

+ + + +

Ver también

+ + diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 10c6f555f9..0000000000 --- a/files/es/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -
{{ APIRef("HTML DOM") }}
- -

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

- - - -

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

- -

Conversion de nombres

- -

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

- - - -

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

- - - -

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

- -

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

- - - -

Accediendo valores

- - - -

Definiendo valores

- - - -

Sintaxis

- - - -

Ejemplos

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
const el = document.querySelector('#user');
-
-// el.id == 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-// set the data attribute
-el.dataset.dateOfBirth = '1960-10-03';
-// Result: el.dataset.dateOfBirth === 1960-10-03
-
-delete el.dataset.dateOfBirth;
-// Result: el.dataset.dateOfBirth === undefined
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// Result: 'someDataAttr' in el.dataset === true
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.dataset")}}

- -

Ver también

- - diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlelement/focus/index.html deleted file mode 100644 index d615cbf12e..0000000000 --- a/files/es/web/api/htmlelement/focus/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: HTMLElement.focus() -slug: Web/API/HTMLElement/focus -tags: - - API - - HTML DOM - - HTMLElement - - Referencia - - metodo -translation_of: Web/API/HTMLOrForeignElement/focus ---- -
{{ APIRef("HTML DOM") }}
- -

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

- -

Sintaxis

- -
element.focus();
-element.focus(focusOption); // Object parameter
- -

Parámetros

- -
-
focusOptions {{optional_inline}} {{experimental_inline}}
-
Es un objeto con la siguiente propiedad:
-
-
-
preventScroll {{optional_inline}}
-
Es un valor Boolean: -
    -
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • -
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • -
-
-
-
-
- -

Ejemplos

- -

Enfocar un campo de texto

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myTextField").focus();
-}
- -

HTML

- -
<input type="text" id="myTextField" value="Campo de texto.">
-<p></p>
-<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_on_a_text_field') }}

- -

Enfocar un botón

- -

JavaScript

- -
focusMethod = function getFocus() {
-  document.getElementById("myButton").focus();
-}
-
- -

HTML

- -
<button type="button" id="myButton">Púlsame!</button>
-<p></p>
-<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_on_a_button') }}

- - - -

Enfocar con focusOption

- -

JavaScript

- -
focusScrollMethod = function getFocus() {
-  document.getElementById("myButton").focus({preventScroll:false});
-}
-focusNoScrollMethod = function getFocusWithoutScrolling() {
-  document.getElementById("myButton").focus({preventScroll:true});
-}
-
-
- -

HTML

- -
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
-<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
-
-<div id="container" style="height: 1000px; width: 1000px;">
-<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
-</div>
-
-
- -

Resultado

- -

{{ EmbedLiveSample('Focus_prevent_scroll') }}

- -

Especificación

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
- -

Notas

- -

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

- -

Compatibilidad en navegadores

- - - -

{{Compat("api.HTMLElement.focus")}}

- -

Ver también

- - diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/htmlelement/style/index.html deleted file mode 100644 index 62c8903b72..0000000000 --- a/files/es/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Element.style -slug: Web/API/HTMLElement/style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -

{{ ApiRef("HTML DOM") }}

- -

Resumen

- -

Devuelve un objeto que representa el atributo style del elemento.

- -

Ejemplo

- -
var div = document.getElementById("div1");
-div.style.marginTop = ".25in";
-
- -

Notas

- -

Ya que la propiedad style tiene la misma (y más alta) prioridad en la cascada CSS que las declaraciones in-line hechas mediante el atributo style, resulta muy útil para establecer el estilo en un elemento específico. 

- -

Sin embargo, no resulta útil para aprender acerca del estilo original de un elemento, ya que representa sólo la declaración CSS en el atributo style in-line y no aquellos atributos que vienen de alguna otra parte, como las declaraciones en la sección <head> o en hojas de estilo.

- -

Para recoger los valores de todas las propiedades CSS de un elemento, deberías usar window.getComputedStyle en su lugar.

- -

Mira la lista de Propiedades CSS del DOM (DOM CSS Properties List) para tener una lista completa de las propiedades CSS que están disponibles en el Gecko DOM.

- -

Generalmente es mejor usarla propiedad style que usar elt.setAttribute('style', '...'), ya que el uso de la propiedad style no reemplazará otras propiedades CSS que puedan especificarse en el atributo style.

- -

Los estilos no pueden establecerse asignando una cadena a la propiedad (solo lectura) style, como en elt.style = "color: blue;". Esto es porque el atributo style devuelve un objeto del tipo CSSStyleDeclaration. En su lugar, pueds establecer las propiedades como:

- -
elt.style.color = "blue";  // Asignación directa
-
-var st = elt.style;
-st.color = "blue";  // Asignación Indirecta
-
- -

El siguiente código presenta los nombres de todas las propiedades style, los valores se establecen de forma explícita para los elementos elt y sus valores heredados: 

- -
var elt = document.getElementById("elementIdHere");
-var out = "";
-var st = elt.style;
-var cs = window.getComputedStyle(elt, null);
-for (x in st)
-  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
-
- -

 

- -

Especificación

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/es/web/api/htmlelement/transitioncancel_event/index.html b/files/es/web/api/htmlelement/transitioncancel_event/index.html new file mode 100644 index 0000000000..3f9c622bd2 --- /dev/null +++ b/files/es/web/api/htmlelement/transitioncancel_event/index.html @@ -0,0 +1,163 @@ +--- +title: transitioncancel +slug: Web/Events/transitioncancel +tags: + - DOM + - Evento + - Referencia + - eventos +translation_of: Web/API/HTMLElement/transitioncancel_event +--- +

{{SeeCompatTable}}

+ +

El evento transitioncancel es lanzado cuando una transición CSS es cancelada.

+ +

Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.

+ +

Información general

+ +
+
Interfaz
+
{{domxref("TransitionEvent")}}
+
Burbuja
+
Sí
+
Cancelable
+
No
+
Objetivo
+
{{domxref("document")}}, {{domxref("element")}}
+
Acción por defecto
+
Ninguna
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyinline}}{{domxref("EventTarget")}}El objetivo del evento (the topmost target in the DOM tree).
type {{readonlyinline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyinline}}{{domxref("Boolean")}}Si el evento normalmente se propaga o no
cancelable {{readonlyinline}}{{domxref("Boolean")}}Si el evento es cancelable o no
propertyName{{readonlyinline}}{{domxref("DOMString")}}El nombre de la propiedad CSS asociada con la transición.
elapsedTime{{readonlyinline}}{{domxref("Float")}} +

La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de transition-delay.

+
pseudoElement{{readonlyinline}}{{domxref("DOMString")}} +

El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

 

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Véase también

+ + diff --git a/files/es/web/api/htmlelement/transitionend_event/index.html b/files/es/web/api/htmlelement/transitionend_event/index.html new file mode 100644 index 0000000000..8370f0e39e --- /dev/null +++ b/files/es/web/api/htmlelement/transitionend_event/index.html @@ -0,0 +1,183 @@ +--- +title: transitionend +slug: Web/Events/transitionend +tags: + - DOM + - Event + - Referencia + - Transiciones CSS + - Transiciones CSS3 + - TransitionEvent + - transitionend +translation_of: Web/API/HTMLElement/transitionend_event +--- +

El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a "none", entonces el evento no será generado.

+ +

Información general

+ +
+
Especificación
+
{{SpecName("CSS3 Transitions")}}
+
Interfaz
+
{{domxref("TransitionEvent")}}
+
Burbuja
+
Sí
+
Cancelable
+
Sí
+
Objetivo
+
{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}
+
Acción
+
undefined
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
+ +

Ejemplo

+ +

Este ejemplo establece un manejador de evento para detectar el evento transitionend, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.

+ +
let element = document.getElementById("slidingMenu");
+element.addEventListener("transitionend", function(event) {
+  element.innerHTML = "Done!";
+}, false);
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Definición inicial.
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]
+ 36		{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}1010.5[2]
+ 12
+ 12.10
+ 23		3.2[1]
+ 7.0.6
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
+ 12
+ 12.10		3.2[1]
+
+ +

[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como webkitTransitionEnd. Chrome 36 y WebKit 7.0.6 usan el estándar transitionend.

+ +

[2] Implementado como oTransitionEnd desde Opera 10.5, como otransitionend desde la versión 12 y como el estándar transitionend desde la versión 12.10.

+ +

Véase también

+ +

La interfaz {{domxref("TransitionEvent")}}

+ + diff --git a/files/es/web/api/htmlmediaelement/abort_event/index.html b/files/es/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..641d144c77 --- /dev/null +++ b/files/es/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,68 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

The abort event is fired when the loading of a resource has been aborted.

+ +

Información general

+ +
+
Specification
+
DOM L3
+
Interface
+
UIEvent if generated from a user interface, Event otherwise.
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/es/web/api/htmlorforeignelement/dataset/index.html b/files/es/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..10c6f555f9 --- /dev/null +++ b/files/es/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

La propiedad dataset en {{domxref("HTMLElement")}} proporciona una interfaz lectura/escritura para obtener todos los atributos de datos personalizados (data-*) de cada uno de los elementos. Está disponible el acceso en HTML y en el DOM.  Dentro del map of DOMString, aparece una entrada por cada atributo de datos. Hay que tener en cuenta que la propiedad dataset puede leerse, pero no modificarse directamente.  En vez de eso, las escrituras deben ser realizadas a través de cada propiedad individual del dataset, que representan a cada atributo correspondiente. Además un HTML data-attribute y su correspondiente DOM dataset.property no comparten el mismo nombre, pero son siempre similares:

+ + + +

Adicionalmente, encontrarás una guía de como usar los atributos data de HTML en nuestro articulo Using data attributes.

+ +

Conversion de nombres

+ +

dash-style a camelCase: Un atributo de datos personalizado se transforma en una clave para la entrada {{ domxref("DOMStringMap") }} con las siguientes reglas

+ + + +

camelCase a dash-style: La conversión opuesta, mapea una clave en un nombre de atributo, usa las siguientes reglas:

+ + + +

La restricción en las reglas anteriores aseguran que las dos conversiones sean inversas una a la otra.

+ +

Por ejemplo, el atributo nombrado data-abc-def corresponde a la clave abcDef.

+ + + +

Accediendo valores

+ + + +

Definiendo valores

+ + + +

Sintaxis

+ + + +

Ejemplos

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlorforeignelement/focus/index.html b/files/es/web/api/htmlorforeignelement/focus/index.html new file mode 100644 index 0000000000..d615cbf12e --- /dev/null +++ b/files/es/web/api/htmlorforeignelement/focus/index.html @@ -0,0 +1,164 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - HTML DOM + - HTMLElement + - Referencia + - metodo +translation_of: Web/API/HTMLOrForeignElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

El método HTMLElement.focus() fija el foco del cursor en el elemento indicado, si éste puede ser enfocado.

+ +

Sintaxis

+ +
element.focus();
+element.focus(focusOption); // Object parameter
+ +

Parámetros

+ +
+
focusOptions {{optional_inline}} {{experimental_inline}}
+
Es un objeto con la siguiente propiedad:
+
+
+
preventScroll {{optional_inline}}
+
Es un valor Boolean: +
    +
  • Si es false, el método hará scroll hasta que el elemento esté visible en la ventana del navegador
    • +
  • Si es true,  el método NO hará scroll hasta que el elemento esté visible en la ventana del navegador.
    • +
+
+
+
+
+ +

Ejemplos

+ +

Enfocar un campo de texto

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="Campo de texto.">
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el campo de texto!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

Enfocar un botón

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+
+ +

HTML

+ +
<button type="button" id="myButton">Púlsame!</button>
+<p></p>
+<button type="button" onclick="focusMethod()">¡Púlsame para enfocar el botón!</button>
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ + + +

Enfocar con focusOption

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">¡Púlsame para enfocar el botón!</button>
+<button type="button" onclick="focusNoScrollMethod()">¡Púlsame para enfocar el botón sin hacer scroll!</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">¡Púlsame!</button>
+</div>
+
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

Notas

+ +

Si se llama a HTMLElement.focus() desde un gestor de eventos "mousedown" (ratón presionado), se debe también llamar al método event.preventDefault() para evitar que el foco abandone HTMLElement.

+ +

Compatibilidad en navegadores

+ + + +

{{Compat("api.HTMLElement.focus")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/htmlvideoelement/index.html b/files/es/web/api/htmlvideoelement/index.html new file mode 100644 index 0000000000..4b36d9cba2 --- /dev/null +++ b/files/es/web/api/htmlvideoelement/index.html @@ -0,0 +1,202 @@ +--- +title: Elementos HTML para Video +slug: Web/API/ElementosHTMLparaVideo +translation_of: Web/API/HTMLVideoElement +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

El interfaz de HTMLVideoElement provee propiedades especiales y metodos para manipular objectos de videos. Tambien, este interfaz hereda propiedades y métodos de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +

La lista de supported media formats (formatos de medios compatibles) varía de un navegador a otro. Debe proveer su video en un formato sencillo que sea compatible con todos los navegadores o proveer varias fuentes de videos in varios formatos, para que así todo navegador que necesite este cubierto.

+ +

{{InheritanceDiagram(600, 140)}}

+ +

Propiedades

+ +

Hereda las propiedades de los interfaces anteriores, {{domxref("HTMLMediaElement")}}, y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.height")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("height", "video")}}, el cual especifica la altura del area mostrada, en pixeles CSS.
+
{{domxref("HTMLVideoElement.poster")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("poster", "video")}}, el cual especifica que imagen sera mostrada en la ausencia de data de video.
+
{{domxref("HTMLVideoElement.videoHeight")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la altura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.videoWidth")}} {{readonlyInline}}
+
Devuelve un unsigned long que contiene la anchura intrinsica del recurso en pixeles CSS, tomando en consideracion las dimensiones, aspecto proporcional, apertura limpia, resolucion, etc., ya definidas por el formato usado por el recurso.  Si el estado disponible del elemento es HAVE_NOTHING, su valor es 0.
+
{{domxref("HTMLVideoElement.width")}}
+
Es un {{domxref("DOMString")}} que refleja el atributo HTML {{htmlattrxref("width", "video")}}, el cual especifica la anchura del area mostrada, en pixeles CSS.
+
+ +

Propiedades especificas para Gecko

+ +
+
{{domxref("HTMLVideoElement.mozParsedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido analizados del recurso de multimedia.
+
{{domxref("HTMLVideoElement.mozDecodedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos de video que han sido decifrados como imágines.
+
{{domxref("HTMLVideoElement.mozPresentedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos decodificados que han sido  presentados a la canalización de render para pintar.
+
{{domxref("HTMLVideoElement.mozPaintedFrames")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un unsigned long con el conteo de marcos presentados que han sido pintados en la pantalla.
+
{{domxref("HTMLVideoElement.mozFrameDelay")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un double con el tiempo, en segundos, que el último marco de video fue pintado por retrazo.
+
{{domxref("HTMLVideoElement.mozHasAudio")}} {{readonlyInline}}{{non-standard_inline}}
+
Devuelve un {{domxref("Boolean")}} indicando si existe algún audio asociado con el video.
+
+ +

Métodos

+ +

Hereda los métodos anteriores de {{domxref("HTMLMediaElement")}} y {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLVideoElement.getVideoPlaybackQuality()")}} {{experimental_inline}}
+
Devuelve un {{domxref("VideoPlaybackQuality")}} para objetos que contienen las medidas de reproducciones actuales.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName('Media Source Extensions', '#idl-def-HTMLVideoElement', 'Extensions to HTMLVideoElement')}}{{Spec2("Media Source Extensions")}}Anadio el metodo getVideoPlaybackQuality() .
{{SpecName('HTML WHATWG', "the-video-element.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML WHATWG')}}Sin cambios del {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "embedded-content-0.html#the-video-element", "HTMLAreaElement")}}{{Spec2('HTML5 W3C')}}Definicion incial.
+ +

Compatibilidad con Navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicasChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Apoyo basico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9.010.50{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoDesktop("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Apoyo básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
mozParsedFrames mozDecodedFrames mozPresentedFrames mozPaintedFrames mozFrameDelay {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("5.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozHasAudio {{non-standard_inline}}{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile("15.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
getVideoPlaybackQuality(){{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{ CompatGeckoMobile("25.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko implementa esto detras de la preferencia media.mediasource.enabled, predispuesto a false.

+ +

Lea Tambien

+ + diff --git a/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html new file mode 100644 index 0000000000..34d4fdd438 --- /dev/null +++ b/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html @@ -0,0 +1,216 @@ +--- +title: Conceptos Básicos +slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

IndexedDB es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).

+ +

Sobre este documento

+ +

Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de Definiciones.

+ +

Para un tutorial sobre cómo usar la API, vea Usando IndexedDB. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.

+ +

Visión general de IndexedDB

+ +

IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una política de mismo origen, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.

+ +

La API incluye una variante asíncrona y una síncrona. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo WebWorkers, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.

+ +

IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.

+ +

Conceptos principales

+ +

Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:

+ + + +

Definiciones

+ +

Esta sección define y explica los términos utilizados en la API de IndexedDB.

+ +

Base de Datos

+ +
+
base de datos
+
Un repositorio de información, típicamente compuesto de uno o más  almacenes de objetos. Cada base de datos debe tener: +
    +
  • Nombre. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).
    • +
  • +

    Versión actual. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.

    +
    • +
+
+
almacén de objetos
+
+

El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las llaves en orden ascendente.

+ +

Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un generador de llaves y una ruta de llaves. Si el almacén tiene una ruta de llaves, éste utiliza llaves en línea; si no, utiliza llaves fuera de línea.

+ +

Para documentación de referencia sobre los almacenes de objetos, vew IDBObjectStore o IDBObjectStoreSync.

+
+
versión
+
Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una transacción versionchange y dispara el evento upgradeneeded. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.
+
Nota: Esta definición describe la especificación más actual, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método IDBDatabase.setVersion(), que ya ha sido marcado obsoleto y removido.
+
conexión a la base de datos
+
Una operación creada al abrir una base de datos. Una base de datos puede tener múltiples conexiónes al mismo tiempo.
+
transacción
+
+

Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.

+ +

Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan ámbitos que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén flyingMonkey, se puede iniciar una segunda que tenga como ámbito los almacenes unicornCentaur y unicornPegasus. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.

+ +

Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.

+ +

Los tres modos de transacción son: readwrite, readonly, y versionchange. La única manera de crear y borrar almacenes es usar una transacción versionchange. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de IndexedDB.

+ +

Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea IDBTransaction, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea IDBTransactionSync.

+
+
solicitud
+
La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.
+
índice
+
+

Un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

+ +

Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

+ +

Para aprender más sobre el uso de los índices, vea Usando IndexedDB. Para documentación de referencia, vea IDBKeyRange.

+
+
+ +

Llave y valor

+ +
+
llave
+
+

Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un generador de llaves, una ruta de llave, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.

+ + +

Una llave puede ser de uno de los siguientes tipos: String, Date, float, y Array. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves {{ fx_minversion_inline("11") }}.

+ +

Como alternativa, se pueden realizar búsquedas de objetos usando un índice.

+
+
generador de llaves
+
Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.
+
llaves en línea
+
Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  ruta de llave. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.
+
llave fuera de línea
+
Una llave que se almacena separada del valor.
+
ruta de llave
+
Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.
+
valor
+
+

Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: booleanos, números, cadenas, fechas, objetos, arreglos, expresiones regulares, undefined, y null.

+ +

Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.

+ +

Se pueden almacenar Blobs y archivos. cf. especificación {{ fx_minversion_inline("11") }}.

+
+
+ +

Rango y ámbito

+ +
+
ámbito
+
El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.
+
cursor
+
Un mecanismo para iterar a través de múltiples registros con un rango de llaves. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea IDBCursor o IDBCursorSync.
+
rango de llaves
+
+

Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.

+ +

Para documentación de referencia sobre los rangos de llaves, vea IDBKeyRange.

+
+
+ +

Limitaciones

+ +

IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:

+ + + +

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

+ + + +

Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.

+ +
+

Advertencia: Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un Web App. Esto requiere mayor investigación para documentarlo.

+
+ +

Próximo paso

+ +

Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea Usando IndexedDB.

+ +

Vea también

+ +

Especificación

+ + + +

Referencia

+ + + +

Tutoriales

+ + + +

Artículo relacionado

+ + diff --git a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html b/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html deleted file mode 100644 index 34d4fdd438..0000000000 --- a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: Conceptos Básicos -slug: Web/API/IndexedDB_API/Conceptos_Basicos_Detras_De_IndexedDB -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -

IndexedDB es una manera de almacenar datos de manera persistente en el navegador. Dado que permite la creación de aplicaciones web con capacidades de consulta mejoradas, éstas pueden funcionar tanto en línea como fuera de línea. IndexedDB es útil para aplicaciones que almacenan una gran cantidad de datos (catálogos de DVDs en una biblioteca, por ejemplo) y para aplicaciones que no necesitan de una conexión permanente a internet para funcionar (clientes de correo, listas de tareas y blocs de notas, por ejemplo).

- -

Sobre este documento

- -

Esta introducción discute conceptos y terminologías fundamentales en IndexedDB. Provee una visión general y orienta sobre los conceptos clave. Para aprender más sobre los términos relacionados con IndexedDB, vea la sección de Definiciones.

- -

Para un tutorial sobre cómo usar la API, vea Usando IndexedDB. Para ver la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus sub-páginas, que documentan los tipos de objetos utilizados por IndexedDB, así como los métodos de las API síncrona y asíncrona.

- -

Visión general de IndexedDB

- -

IndexedDB le permite almacenar y obtener objetos indizados a partir de una "llave". Todos los cambios realizados a la base de datos ocurren dentro de transacciones. Como la mayoría de las soluciones de almacenamiento web, IndexedDB sigue una política de mismo origen, por lo que aún cuando se puede acceder a datos almacenados en un dominio, no se pueden acceder a datos a través de distintos dominios.

- -

La API incluye una variante asíncrona y una síncrona. La variante asíncrona puede ser utilizada en la mayoría de los casos, incluyendo WebWorkers, mientras la variante síncrona está diseñada para ser utilizada solo con WebWorkers. Actualmente, ninguno de los navegadores principales soportan la API síncrona. Sin embargo, aún cuando la API síncrona sea soportada, en la mayoría de los casos de uso de IndexedDB lo más probable es que se utilice la API asíncrona.

- -

IndexedDB es una alternativa a WebSQL, que fue marcada como obsoleta por W3C el 18 de Noviembre de 2010. Aún cuando IndexedDB y WebSQL son soluciones para el almacenamiento, éstas no ofrecen las mismas funcionalidades. WebSQL es un sistema relacional de acceso a datos, mientras que IndexedDB es un sistema de tablas indizadas.

- -

Conceptos principales

- -

Si usted tiene alguna idea de cómo trabajan otros tipos de bases de datos, podría tener algún conflicto de conceptos al trabajar con IndexedDB. Por esta razón mantenga los siguientes conceptos importantes en mente:

- - - -

Definiciones

- -

Esta sección define y explica los términos utilizados en la API de IndexedDB.

- -

Base de Datos

- -
-
base de datos
-
Un repositorio de información, típicamente compuesto de uno o más  almacenes de objetos. Cada base de datos debe tener: -
    -
  • Nombre. Identifica la base de datos dentro de un mismo origen y no cambia a lo largo de la existencia de ésta. El nombre puede ser cualquier cadena de caracteres (incluyendo una vacía).
    • -
  • -

    Versión actual. Cuando una base de datos se crea por primera vez, la versión es el número entero 1 si no se indica otra cosa. Cada base de datos puede tener una y sólo una versión en cualquier momento.

    -
    • -
-
-
almacén de objetos
-
-

El mecanismo a través del cual los datos son almacenados en la base de datos. El almacén de objetos mantiene registros de manera persistente, que son pares de llave-valor. Los registros dentro de un almacén de objetos son ordenados de acuerdo con las llaves en orden ascendente.

- -

Todo almacén de objetos debe tener un nombre que es único a lo largo de su base de datos. Opcionalmente puede tener un generador de llaves y una ruta de llaves. Si el almacén tiene una ruta de llaves, éste utiliza llaves en línea; si no, utiliza llaves fuera de línea.

- -

Para documentación de referencia sobre los almacenes de objetos, vew IDBObjectStore o IDBObjectStoreSync.

-
-
versión
-
Cuando una base de datos es creada por primera vez, su versión es 1. Cada base de datos tiene una versión en cualquier momento y no puede tener varias versiones al mismo tiempo. La única manera de cambiar la versión es abrir la base de datos con una versión mayor a la actual. Esto arranca una transacción versionchange y dispara el evento upgradeneeded. El único momento cuando se puede actualizar el esquema de la base de datos es dentro del manejador de este evento.
-
Nota: Esta definición describe la especificación más actual, que solo está implementada por las versiones más nuevas de los navegadores. Los navegadores más antiguos implementaron el método IDBDatabase.setVersion(), que ya ha sido marcado obsoleto y removido.
-
conexión a la base de datos
-
Una operación creada al abrir una base de datos. Una base de datos puede tener múltiples conexiónes al mismo tiempo.
-
transacción
-
-

Un conjunto atómico y durable de operaciónes de acceso y modificación de datos sobre una base de datos particular. Esta es la manera cómo se interactúa con los datos de una base de datos. De hecho, cualquier lectura o modificación de datos en la base de datos debe ocurrir dentro de una transacción.

- -

Una conexión a la base de datos puede tener varias transacciones activas, siempre que las operaciones de escrituras no tengan ámbitos que se solapen. El ámbito de las transacciones, que es definido al momento en que éstas son creadas, determina con qué almacenes de datos puede interactuar ésta y permanece constante a lo largo de su existencia. Así, por ejemplo, si una conexión tiene una transacción escribiendo con un ámbito que abarca solo el almacén flyingMonkey, se puede iniciar una segunda que tenga como ámbito los almacenes unicornCentaur y unicornPegasus. En el caso de las transacciones de lectura, se pueden tener varias aún cuando se solapen.

- -

Se espera que las transacciones tengan una existencia corta, de manera que el navegador puede cancelar una transacción que tome demasiado tiempo para liberar recursos que la misma tenga bloqueados. Usted puede abortar la transacción, lo que deshace los cambios hechos a la base de datos durante la misma. Ni siquiera es necesario esperar a que la transacción inicie para abortarla.

- -

Los tres modos de transacción son: readwrite, readonly, y versionchange. La única manera de crear y borrar almacenes es usar una transacción versionchange. Para aprender más sobre los tipos de transacción, vea al artículo de referencia de IndexedDB.

- -

Debido a que todo sucede dentro de una transacción, este es un concepto muy importante. Para aprender más sobre las transacciones, especialmente sobre como se relacionan con el versionado, vea IDBTransaction, que también cuenta con documentación de referencia. Para la documentación sobre la API asíncrona, vea IDBTransactionSync.

-
-
solicitud
-
La operación por medio de la cual se lee o se escribe en una base de datos. Toda solicitud representa una y solo una operación de lectura o escritura.
-
índice
-
-

Un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado. El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado. Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado. Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

- -

Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.

- -

Para aprender más sobre el uso de los índices, vea Usando IndexedDB. Para documentación de referencia, vea IDBKeyRange.

-
-
- -

Llave y valor

- -
-
llave
-
-

Es uno de los atributos del objeto a partir del cual los demás objetos son organizados y obtenidos desde el almacén de objetos. El almacén puede derivar una llave desde uno de tres orígenes: un generador de llaves, una ruta de llave, y un valor indicado de forma explícita. La llave debe ser de un tipo de datos que tenga un número creciente en relación con los objetos almacenados previamente. Cada registro en un almacén de datos debe tener una llave única en el almacén, de manera que no se pueden tener varios objetos con la misma llave en un almacén de objetos dado.

- - -

Una llave puede ser de uno de los siguientes tipos: String, Date, float, y Array. Para los arreglos, la llave puede tener un rango desde un valor vacío hasta infinito, y puede incluirse un arreglo dentro de otro. No se requiere usar solo cadenas o enteros para las llaves {{ fx_minversion_inline("11") }}.

- -

Como alternativa, se pueden realizar búsquedas de objetos usando un índice.

-
-
generador de llaves
-
Es un mecanismo para producir nuevas llaves en una secuencia ordenada. Si un almacén de objetos no tiene un generador de llaves, entonces la aplicación debe proveer llaves para los registros que se almacenen. Los generadores no son compartidos entre almacenes. Esto es un detalle de implementación de los navegadores, porque en desarrollo web, realmente no se crea o se accede a un generador de llaves.
-
llaves en línea
-
Es una llave que se almacena como parte del valor almacenado. La manera como se determina cuál es la llave es utilizando una  ruta de llave. Una llave en línea puede obtenerse con un generador. Después de que la llave ha sido generada, esta puede almacenarse en el valor usando la ruta del atributo o puede ser usada directamente como llave.
-
llave fuera de línea
-
Una llave que se almacena separada del valor.
-
ruta de llave
-
Define de dónde se debe extraer la llave desde un valor en el almacén o en un índice. Una ruta de llave válida puede incluir alguno de los siguientes: una cadena vacía, un identificador de JavaScript, o múltiples identificadores de JavaScript separados con puntos. No puede incluir espacios.
-
valor
-
-

Cada registro tiene un valor, el cual puede ser cualquier cosa que pueda ser expresada en JavaScript, incluyendo: booleanos, números, cadenas, fechas, objetos, arreglos, expresiones regulares, undefined, y null.

- -

Cuando un objeto o un arreglo es almacenado, las propiedades y valores en ese objeto o arreglo pueden ser cualquier cosa que sea un valor válido.

- -

Se pueden almacenar Blobs y archivos. cf. especificación {{ fx_minversion_inline("11") }}.

-
-
- -

Rango y ámbito

- -
-
ámbito
-
El conjunto de almacenes de objetos e índices en los que una transacción aplica. Los ámbitos de varias transacciones de solo lectura pueden solaparse y ejecutarse al mismo tiempo. En cambio, los ámbitos de transacciones de escritura no pueden solaparse. Aún así se pueden crear varias transacciones con el mismo ámbito al mismo tiempo, pero éstas serán manejadas por una cola y ejecutadas una detrás de otra.
-
cursor
-
Un mecanismo para iterar a través de múltiples registros con un rango de llaves. El cursor tiene un orígen que indica que índice o almacén de datos está iterando. El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro. Para obtener documentación de referencia sobre cursores, vea IDBCursor o IDBCursorSync.
-
rango de llaves
-
-

Un intervalo continuo sobre algún tipo de datos utilizado para las llaves. Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves. Los rangos pueden limitarse o filtrarse con umbrales inferiores y superiores. Por ejemplo, se puede iterar sobre todos los valores de una llave desde x hasta y.

- -

Para documentación de referencia sobre los rangos de llaves, vea IDBKeyRange.

-
-
- -

Limitaciones

- -

IndexedDB está diseñado para cubrir la mayoría de los casos en los que se necesita almacenamiento del lado del cliente. Sin embargo, no están contemplados en su diseño unos pocos casos como los siguientes:

- - - -

Adicionalmente, tenga en cuenta que los navegadores podrían eliminar la base de datos, como en las siguientes condiciones:

- - - -

Las circunstancias exactas y capacidades de los navegadores cambian con el tiempo, pero la filosofía de los navegadores es, en general, hacer lo posible por conservar los datos.

- -
-

Advertencia: Al momento, debido a errores o a propósito, es imposible abrir una base de datos IndexedDB desde un Web App. Esto requiere mayor investigación para documentarlo.

-
- -

Próximo paso

- -

Ok, ahora con estos conceptos generales bajo nuestros cinturones, podemos seguir a cosas más concretas. Para un tutorial sobre como utilizar la API, vea Usando IndexedDB.

- -

Vea también

- -

Especificación

- - - -

Referencia

- - - -

Tutoriales

- - - -

Artículo relacionado

- - diff --git a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html b/files/es/web/api/indexeddb_api/usando_indexeddb/index.html deleted file mode 100644 index ea9d2d879c..0000000000 --- a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html +++ /dev/null @@ -1,1308 +0,0 @@ ---- -title: Usando IndexedDB -slug: Web/API/IndexedDB_API/Usando_IndexedDB -tags: - - API - - Almacenamiento - - Avanzado - - Base de datos - - Guía - - IndexedDB - - Tutorial - - jsstore -translation_of: Web/API/IndexedDB_API/Using_IndexedDB ---- -
-

IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.

-
- -

Acerca de este documento

- -

Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero Conceptos Básicos Acerca de IndexedDB.

- -

Para la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. 

- -

Patrones Básicos

- -

El patrón básico que indexedDB propone es:

- -
    -
  1. Abrir una base de datos.
    2. -
  2. Crear un objeto de almacenamiento en la base de datos.
    3. -
  3. Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.
    4. -
  4. -
    Espere a que se complete la operación por la escucha de la clase correcta de eventos DOM .
    -
    5. -
  5. -
    Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).
    -
    6. -
- -

Con esos grandes rasgos en mente, seremos más concretos.

- -

Creando y estructurando el almacenamiento

- -

Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. Hasta que la especificación se haya consolidado, los proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB. Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo moz , mientras que los navegadores basados en WebKit usan el prefijo webkit.

- -

Usando una versión experimental de IndexedDB

- -

En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  

- -
// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
-window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
-// No use "var indexedDB = ..." Si no está en una función.
-// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
-window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
-window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
-// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)
- -

Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :

- -
if (!window.indexedDB) {
-    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
-}
-
- -

Abriendo una base de datos

- -

Iniciamos todo el proceso así:

- -
// dejamos abierta nuestra base de datos
-var request = window.indexedDB.open("MyTestDatabase", 3);
-
- -

¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).

- -

La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función open() retornan unos objetos IDBOpenDBRequest, cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto IDBRequest que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un IDBDatabase.

- -

El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento onupgradeneeded de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  Actualizando la versión de la base de datos. 

- -
-

Importante: El número de versión es un unsigned long. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento upgradeneeded no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:

- -
var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2
-
- -

Generando manipuladores

- -

La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:

- -
request.onerror = function(event) {
-  // Hacer algo con request.errorCode!
-};
-request.onsuccess = function(event) {
-  // Hacer algo con request.result!
-};
- -

¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.

- -

La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte Límites de almacenamiento.)  

- -

Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox no está implementado a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).

- -

Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:

- -
var db;
-var request = indexedDB.open("MyTestDatabase");
-request.onerror = function(event) {
-  alert("Why didn't you allow my web app to use IndexedDB?!");
-};
-request.onsuccess = function(event) {
-  db = request.result;
-};
-
- -

Manejando errores

- -

Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:

- -
db.onerror = function(event) {
-  // Generic error handler for all errors targeted at this database's
-  // requests!
-  alert("Database error: " + event.target.errorCode);
-};
-
- -

Uno de los errores más comunes posibles al abrir una base de datos es VER_ERR. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.

- -

Creación o actualización de la versión de la base de datos

- -

Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto IDBVersionChangeEvent será pasado a cualquier controlador de eventos onversionchange establecido en request.result (es decir, db en el ejemplo). En el controlador para el evento upgradeneeded, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:

- -
// Este evento solamente está implementado en navegadores recientes
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Crea un almacén de objetos (objectStore) para esta base de datos
-  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
-};
- -

En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave keyPath), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)

- -

Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.

- -

Si el evento onupgradeneeded retorna éxito, entonces se activará el manejador onsuccess de la solicitud de base de datos abierta.

- -

Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el indexedDB.open (nombre, versión).onupgradeneeded . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia IDBDatabase.

- -

Estructuración de la base de datos

- -

Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una ruta de clave o generador.

- -

La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ruta de clave(keyPath)Generador de clave (autoIncrement)Descripción
NoNoEste almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.
SiNoEste almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.
NoSiEste objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.
SiSi -

Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.

-
- -

También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.

- -

Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera unique al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera unique activada para forzar esto.

- -

Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:

- -
// Así se ve nuestra información de clientes.
-const customerData = [
-  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
-  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
-];
-
- -

Ahora, creemos una IndexedDB para almacenar los datos:

- -
const dbName = "the_name";
-
-var request = indexedDB.open(dbName, 2);
-
-request.onerror = function(event) {
-  // Manejar errores.
-};
-request.onupgradeneeded = function(event) {
-  var db = event.target.result;
-
-  // Se crea un almacén para contener la información de nuestros cliente
-  // Se usará "ssn" como clave ya que es garantizado que es única
-  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
-
-  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
-  // por lo que no se puede usar un índice único.
-  objectStore.createIndex("name", "name", { unique: false });
-
-  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
-  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
-  objectStore.createIndex("email", "email", { unique: true });
-
-  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
-  // haya finalizado antes de añadir los datos en el.
-  objectStore.transaction.oncomplete = function(event) {
-    // Guarda los datos en el almacén recién creado.
-    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
-    for (var i in customerData) {
-      customerObjectStore.add(customerData[i]);
-    }
-  }
-};
-
- -

Como se indicó previamente, onupgradeneeded es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.

- -
Los almacenes de datos son creados con una llamada a  createObjectStore(). El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.
- -

También se solicitó crear un índice llamado "name" que se fija en la propiedad name de los objetos almacenados. Así como con createObjectStore(), createIndex() toma un objeto opcional options que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad name funcionará, pero los objetos no aparecerán en el índice "name"

- -
Ahora se pueden obtener los clientes almacenados usando su ssn directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección El uso de un índice
- -

El uso de un generador de claves

- -

Indicar la bandera autoIncrement  cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.

- -

Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves

- -

Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:

- -
// Abrir la indexedDB.
-var request = indexedDB.open(dbName, 3);
-
-request.onupgradeneeded = function (event) {
-
-    var db = event.target.result;
-
-    // Create another object store called "names" with the autoIncrement flag set as true.
-    var objStore = db.createObjectStore("names", { autoIncrement : true });
-
-    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
-    // The added records would be like:
-    // key : 1 => value : "Bill"
-    // key : 2 => value : "Donna"
-    for (var i in customerData) {
-        objStore.add(customerData[i].name);
-    }
-}
- -

Para más detalles acerca del generador de claves, por favor ver "W3C Key Generators".

- -

Añadir, recuperación y eliminación de datos

- -

Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: readonly, readwrite, and versionchange.

- -

To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a version specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the name of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the versionchange transaction.)

- -

To read the records of an existing object store, the transaction can either be in readonly or readwrite mode. To make changes to an existing object store, the transaction must be in readwrite mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the storeNames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in readonly mode.

- -

You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:

- - - -

Agregar datos a la base de datos

- -

If you've just created a database, then you probably want to write to it. Here's what that looks like:

- -
var transaction = db.transaction(["customers"], "readwrite");
-// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
-// In case you want to support such an implementation, you can write:
-// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
- -

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

- -

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

- -

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling preventDefault() on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.

- -

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

- -
// Do something when all the data is added to the database.
-transaction.oncomplete = function(event) {
-  alert("All done!");
-};
-
-transaction.onerror = function(event) {
-  // Don't forget to handle errors!
-};
-
-var objectStore = transaction.objectStore("customers");
-for (var i in customerData) {
-  var request = objectStore.add(customerData[i]);
-  request.onsuccess = function(event) {
-    // event.target.result == customerData[i].ssn;
-  };
-}
- -

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the {{ anch("Updating an entry in the database") }} section.

- -

Extracción de datos de la base de datos

- -

Removing data is very similar:

- -
var request = db.transaction(["customers"], "readwrite")
-                .objectStore("customers")
-                .delete("444-44-4444");
-request.onsuccess = function(event) {
-  // It's gone!
-};
- -

Obtener datos de la base de datos

- -

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

- -
var transaction = db.transaction(["customers"]);
-var objectStore = transaction.objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Handle errors!
-};
-request.onsuccess = function(event) {
-  // Do something with the request.result!
-  alert("Name for SSN 444-44-4444 is " + request.result.name);
-};
- -

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

- -
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
-  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
-};
- -

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property.

- -
-

Note: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:

- - -
- -

Actualización de una entrada en la base de datos

- -

Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:

- -
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
-var request = objectStore.get("444-44-4444");
-request.onerror = function(event) {
-  // Handle errors!
-};
-request.onsuccess = function(event) {
-  // Get the old value that we want to update
-  var data = request.result;
-
-  // update the value(s) in the object that you want to change
-  data.age = 42;
-
-  // Put this updated object back into the database.
-  var requestUpdate = objectStore.put(data);
-   requestUpdate.onerror = function(event) {
-     // Do something with the error
-   };
-   requestUpdate.onsuccess = function(event) {
-     // Success - the data is updated!
-   };
-};
- -

So here we're creating an objectStore and requesting a customer record out of it, identified by its ssn value (444-44-4444). We then put the result of that request in a variable (data), update the age property of this object, then create a second request (requestUpdate) to put the customer record back into the objectStore, overwriting the previous value.

- -
-

Note that in this case we've had to specify a readwrite transaction because we want to write to the database, not just read out of it.

-
- -

El uso de un cursor

- -

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

- -
var objectStore = db.transaction("customers").objectStore("customers");
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
-    cursor.continue();
-  }
-  else {
-    alert("No more entries!");
-  }
-};
- -

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

- -

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

- -
var customers = [];
-
-objectStore.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    customers.push(cursor.value);
-    cursor.continue();
-  }
-  else {
-    alert("Got all customers: " + customers);
-  }
-};
- -
-

Note: Mozilla has also implemented getAll() to handle this case (and getAllKeys(), which is currently hidden behind the dom.indexedDB.experimental preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:

- -
objectStore.getAll().onsuccess = function(event) {
-  alert("Got all customers: " + event.target.result);
-};
- -

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll() for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

-
- -

El uso de un índice

- -

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

- -
var index = objectStore.index("name");
-index.get("Donna").onsuccess = function(event) {
-  alert("Donna's SSN is " + event.target.result.ssn);
-};
- -

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

- -

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

- -
// Using a normal cursor to grab whole customer record objects
-index.openCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
-    cursor.continue();
-  }
-};
-
-// Using a key cursor to grab customer record object keys
-index.openKeyCursor().onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
-    // No way to directly get the rest of the stored object.
-    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
-    cursor.continue();
-  }
-};
- -

Especificación de la gama y la dirección de los cursores

- -

If you would like to limit the range of values you see in a cursor, you can use an IDBKeyRange object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:

- -
// Only match "Donna"
-var singleKeyRange = IDBKeyRange.only("Donna");
-
-// Match anything past "Bill", including "Bill"
-var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
-
-// Match anything past "Bill", but don't include "Bill"
-var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
-
-// Match anything up to, but not including, "Donna"
-var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
-
-// Match anything between "Bill" and "Donna", but not including "Donna"
-var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
-
-// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
-index.openCursor(boundKeyRange).onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the matches.
-    cursor.continue();
-  }
-};
- -

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function as the second argument:

- -
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:

- -
objectStore.openCursor(null, "prev").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

- -
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
-  var cursor = event.target.result;
-  if (cursor) {
-    // Do something with the entries.
-    cursor.continue();
-  }
-};
- -

Please see "IDBCursor Constants" for the valid direction arguments.

- -

Cambios Versión mientras que una aplicación web está abierto en otra pestaña

- -

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until tey are closed or reloaded). Here's how it works:

- -
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
-
-openReq.onblocked = function(event) {
-  // If some other tab is loaded with the database, then it needs to be closed
-  // before we can proceed.
-  alert("Please close all other tabs with this site open!");
-};
-
-openReq.onupgradeneeded = function(event) {
-  // All other databases have been closed. Set everything up.
-  db.createObjectStore(/* ... */);
-  useDatabase(db);
-}
-
-openReq.onsuccess = function(event) {
-  var db = event.target.result;
-  useDatabase(db);
-  return;
-}
-
-function useDatabase(db) {
-  // Make sure to add a handler to be notified if another page requests a version
-  // change. We must close the database. This allows the other page to upgrade the database.
-  // If you don't do this then the upgrade won't happen until the user closes the tab.
-  db.onversionchange = function(event) {
-    db.close();
-    alert("A new version of this page is ready. Please reload!");
-  };
-
-  // Do stuff with the database.
-}
-
- -

Seguridad

- -

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

- -

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.

- -

Warning About Browser Shutdown

- -

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

- -

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. 

- -

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

- -

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

- -

Full IndexedDB example

- -

HTML Content

- -
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-
-    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
-    <div class="note">
-      <p>
-        Works and tested with:
-      </p>
-      <div id="compat">
-      </div>
-    </div>
-
-    <div id="msg">
-    </div>
-
-    <form id="register-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-title" class="required">
-                Title:
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-title" name="pub-title" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-biblioid" class="required">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-year">
-                Year:
-              </label>
-            </td>
-            <td>
-              <input type="number" id="pub-year" name="pub-year" />
-            </td>
-          </tr>
-        </tbody>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-file">
-                File image:
-              </label>
-            </td>
-            <td>
-              <input type="file" id="pub-file"/>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="pub-file-url">
-                Online-file image URL:<br/>
-                <span class="note">(same origin URL)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-file-url" name="pub-file-url"/>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-
-      <div class="button-pane">
-        <input type="button" id="add-button" value="Add Publication" />
-        <input type="reset" id="register-form-reset"/>
-      </div>
-    </form>
-
-    <form id="delete-form">
-      <table>
-        <tbody>
-          <tr>
-            <td>
-              <label for="pub-biblioid-to-delete">
-                Bibliographic ID:<br/>
-                <span class="note">(ISBN, ISSN, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="pub-biblioid-to-delete"
-                     name="pub-biblioid-to-delete" />
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label for="key-to-delete">
-                Key:<br/>
-                <span class="note">(for example 1, 2, 3, etc.)</span>
-              </label>
-            </td>
-            <td>
-              <input type="text" id="key-to-delete"
-                     name="key-to-delete" />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="button-pane">
-        <input type="button" id="delete-button" value="Delete Publication" />
-        <input type="button" id="clear-store-button"
-               value="Clear the whole store" class="destructive" />
-      </div>
-    </form>
-
-    <form id="search-form">
-      <div class="button-pane">
-        <input type="button" id="search-list-button"
-               value="List database content" />
-      </div>
-    </form>
-
-    <div>
-      <div id="pub-msg">
-      </div>
-      <div id="pub-viewer">
-      </div>
-      <ul id="pub-list">
-      </ul>
-    </div>
-
- -

CSS Content

- -
body {
-  font-size: 0.8em;
-  font-family: Sans-Serif;
-}
-
-form {
-  background-color: #cccccc;
-  border-radius: 0.3em;
-  display: inline-block;
-  margin-bottom: 0.5em;
-  padding: 1em;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-input {
-  padding: 0.3em;
-  border-color: #cccccc;
-  border-radius: 0.3em;
-}
-
-.required:after {
-  content: "*";
-  color: red;
-}
-
-.button-pane {
-  margin-top: 1em;
-}
-
-#pub-viewer {
-  float: right;
-  width: 48%;
-  height: 20em;
-  border: solid #d092ff 0.1em;
-}
-#pub-viewer iframe {
-  width: 100%;
-  height: 100%;
-}
-
-#pub-list {
-  width: 46%;
-  background-color: #eeeeee;
-  border-radius: 0.3em;
-}
-#pub-list li {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-  padding-right: 0.5em;
-}
-
-#msg {
-  margin-bottom: 1em;
-}
-
-.action-success {
-  padding: 0.5em;
-  color: #00d21e;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.action-failure {
-  padding: 0.5em;
-  color: #ff1408;
-  background-color: #eeeeee;
-  border-radius: 0.2em;
-}
-
-.note {
-  font-size: smaller;
-}
-
-.destructive {
-  background-color: orange;
-}
-.destructive:hover {
-  background-color: #ff8000;
-}
-.destructive:active {
-  background-color: red;
-}
-
- -

 

- -

JavaScript Content

- -
(function () {
-  var COMPAT_ENVS = [
-    ['Firefox', ">= 16.0"],
-    ['Google Chrome',
-     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
-  ];
-  var compat = $('#compat');
-  compat.empty();
-  compat.append('<ul id="compat-list"></ul>');
-  COMPAT_ENVS.forEach(function(val, idx, array) {
-    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
-  });
-
-  const DB_NAME = 'mdn-demo-indexeddb-epublications';
-  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
-  const DB_STORE_NAME = 'publications';
-
-  var db;
-
-  // Used to keep track of which view is displayed to avoid uselessly reloading it
-  var current_view_pub_key;
-
-  function openDb() {
-    console.log("openDb ...");
-    var req = indexedDB.open(DB_NAME, DB_VERSION);
-    req.onsuccess = function (evt) {
-      // Better use "this" than "req" to get the result to avoid problems with
-      // garbage collection.
-      // db = req.result;
-      db = this.result;
-      console.log("openDb DONE");
-    };
-    req.onerror = function (evt) {
-      console.error("openDb:", evt.target.errorCode);
-    };
-
-    req.onupgradeneeded = function (evt) {
-      console.log("openDb.onupgradeneeded");
-      var store = evt.currentTarget.result.createObjectStore(
-        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
-
-      store.createIndex('biblioid', 'biblioid', { unique: true });
-      store.createIndex('title', 'title', { unique: false });
-      store.createIndex('year', 'year', { unique: false });
-    };
-  }
-
-  /**
-   * @param {string} store_name
-   * @param {string} mode either "readonly" or "readwrite"
-   */
-  function getObjectStore(store_name, mode) {
-    var tx = db.transaction(store_name, mode);
-    return tx.objectStore(store_name);
-  }
-
-  function clearObjectStore(store_name) {
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.clear();
-    req.onsuccess = function(evt) {
-      displayActionSuccess("Store cleared");
-      displayPubList(store);
-    };
-    req.onerror = function (evt) {
-      console.error("clearObjectStore:", evt.target.errorCode);
-      displayActionFailure(this.error);
-    };
-  }
-
-  function getBlob(key, store, success_callback) {
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var value = evt.target.result;
-      if (value)
-        success_callback(value.blob);
-    };
-  }
-
-  /**
-   * @param {IDBObjectStore=} store
-   */
-  function displayPubList(store) {
-    console.log("displayPubList");
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readonly');
-
-    var pub_msg = $('#pub-msg');
-    pub_msg.empty();
-    var pub_list = $('#pub-list');
-    pub_list.empty();
-    // Resetting the iframe so that it doesn't display previous content
-    newViewerFrame();
-
-    var req;
-    req = store.count();
-    // Requests are executed in the order in which they were made against the
-    // transaction, and their results are returned in the same order.
-    // Thus the count text below will be displayed before the actual pub list
-    // (not that it is algorithmically important in this case).
-    req.onsuccess = function(evt) {
-      pub_msg.append('<p>There are <strong>' + evt.target.result +
-                     '</strong> record(s) in the object store.</p>');
-    };
-    req.onerror = function(evt) {
-      console.error("add error", this.error);
-      displayActionFailure(this.error);
-    };
-
-    var i = 0;
-    req = store.openCursor();
-    req.onsuccess = function(evt) {
-      var cursor = evt.target.result;
-
-      // If the cursor is pointing at something, ask for the data
-      if (cursor) {
-        console.log("displayPubList cursor:", cursor);
-        req = store.get(cursor.key);
-        req.onsuccess = function (evt) {
-          var value = evt.target.result;
-          var list_item = $('<li>' +
-                            '[' + cursor.key + '] ' +
-                            '(biblioid: ' + value.biblioid + ') ' +
-                            value.title +
-                            '</li>');
-          if (value.year != null)
-            list_item.append(' - ' + value.year);
-
-          if (value.hasOwnProperty('blob') &&
-              typeof value.blob != 'undefined') {
-            var link = $('<a href="' + cursor.key + '">File</a>');
-            link.on('click', function() { return false; });
-            link.on('mouseenter', function(evt) {
-                      setInViewer(evt.target.getAttribute('href')); });
-            list_item.append(' / ');
-            list_item.append(link);
-          } else {
-            list_item.append(" / No attached file");
-          }
-          pub_list.append(list_item);
-        };
-
-        // Move on to the next object in store
-        cursor.continue();
-
-        // This counter serves only to create distinct ids
-        i++;
-      } else {
-        console.log("No more entries");
-      }
-    };
-  }
-
-  function newViewerFrame() {
-    var viewer = $('#pub-viewer');
-    viewer.empty();
-    var iframe = $('<iframe />');
-    viewer.append(iframe);
-    return iframe;
-  }
-
-  function setInViewer(key) {
-    console.log("setInViewer:", arguments);
-    key = Number(key);
-    if (key == current_view_pub_key)
-      return;
-
-    current_view_pub_key = key;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readonly');
-    getBlob(key, store, function(blob) {
-      console.log("setInViewer blob:", blob);
-      var iframe = newViewerFrame();
-
-      // It is not possible to set a direct link to the
-      // blob to provide a mean to directly download it.
-      if (blob.type == 'text/html') {
-        var reader = new FileReader();
-        reader.onload = (function(evt) {
-          var html = evt.target.result;
-          iframe.load(function() {
-            $(this).contents().find('html').html(html);
-          });
-        });
-        reader.readAsText(blob);
-      } else if (blob.type.indexOf('image/') == 0) {
-        iframe.load(function() {
-          var img_id = 'image-' + key;
-          var img = $('<img id="' + img_id + '"/>');
-          $(this).contents().find('body').html(img);
-          var obj_url = window.URL.createObjectURL(blob);
-          $(this).contents().find('#' + img_id).attr('src', obj_url);
-          window.URL.revokeObjectURL(obj_url);
-        });
-      } else if (blob.type == 'application/pdf') {
-        $('*').css('cursor', 'wait');
-        var obj_url = window.URL.createObjectURL(blob);
-        iframe.load(function() {
-          $('*').css('cursor', 'auto');
-        });
-        iframe.attr('src', obj_url);
-        window.URL.revokeObjectURL(obj_url);
-      } else {
-        iframe.load(function() {
-          $(this).contents().find('body').html("No view available");
-        });
-      }
-
-    });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {string} url the URL of the image to download and store in the local
-   *   IndexedDB database. The resource behind this URL is subjected to the
-   *   "Same origin policy", thus for this method to work, the URL must come from
-   *   the same origin as the web site/app this code is deployed on.
-   */
-  function addPublicationFromUrl(biblioid, title, year, url) {
-    console.log("addPublicationFromUrl:", arguments);
-
-    var xhr = new XMLHttpRequest();
-    xhr.open('GET', url, true);
-    // Setting the wanted responseType to "blob"
-    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
-    xhr.responseType = 'blob';
-    xhr.onload = function (evt) {
-                           if (xhr.status == 200) {
-                             console.log("Blob retrieved");
-                             var blob = xhr.response;
-                             console.log("Blob:", blob);
-                             addPublication(biblioid, title, year, blob);
-                           } else {
-                             console.error("addPublicationFromUrl error:",
-                                           xhr.responseText, xhr.status);
-                           }
-                         };
-    xhr.send();
-
-    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
-    // responseType is not handled.
-    // http://bugs.jquery.com/ticket/11461
-    // http://bugs.jquery.com/ticket/7248
-    // $.ajax({
-    //   url: url,
-    //   type: 'GET',
-    //   xhrFields: { responseType: 'blob' },
-    //   success: function(data, textStatus, jqXHR) {
-    //     console.log("Blob retrieved");
-    //     console.log("Blob:", data);
-    //     // addPublication(biblioid, title, year, data);
-    //   },
-    //   error: function(jqXHR, textStatus, errorThrown) {
-    //     console.error(errorThrown);
-    //     displayActionFailure("Error during blob retrieval");
-    //   }
-    // });
-  }
-
-  /**
-   * @param {string} biblioid
-   * @param {string} title
-   * @param {number} year
-   * @param {Blob=} blob
-   */
-  function addPublication(biblioid, title, year, blob) {
-    console.log("addPublication arguments:", arguments);
-    var obj = { biblioid: biblioid, title: title, year: year };
-    if (typeof blob != 'undefined')
-      obj.blob = blob;
-
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req;
-    try {
-      req = store.add(obj);
-    } catch (e) {
-      if (e.name == 'DataCloneError')
-        displayActionFailure("This engine doesn't know how to clone a Blob, " +
-                             "use Firefox");
-      throw e;
-    }
-    req.onsuccess = function (evt) {
-      console.log("Insertion in DB successful");
-      displayActionSuccess();
-      displayPubList(store);
-    };
-    req.onerror = function() {
-      console.error("addPublication error", this.error);
-      displayActionFailure(this.error);
-    };
-  }
-
-  /**
-   * @param {string} biblioid
-   */
-  function deletePublicationFromBib(biblioid) {
-    console.log("deletePublication:", arguments);
-    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
-    var req = store.index('biblioid');
-    req.get(biblioid).onsuccess = function(evt) {
-      if (typeof evt.target.result == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      deletePublication(evt.target.result.id, store);
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublicationFromBib:", evt.target.errorCode);
-    };
-  }
-
-  /**
-   * @param {number} key
-   * @param {IDBObjectStore=} store
-   */
-  function deletePublication(key, store) {
-    console.log("deletePublication:", arguments);
-
-    if (typeof store == 'undefined')
-      store = getObjectStore(DB_STORE_NAME, 'readwrite');
-
-    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
-    // the result of the Object Store Deletion Operation algorithm is
-    // undefined, so it's not possible to know if some records were actually
-    // deleted by looking at the request result.
-    var req = store.get(key);
-    req.onsuccess = function(evt) {
-      var record = evt.target.result;
-      console.log("record:", record);
-      if (typeof record == 'undefined') {
-        displayActionFailure("No matching record found");
-        return;
-      }
-      // Warning: The exact same key used for creation needs to be passed for
-      // the deletion. If the key was a Number for creation, then it needs to
-      // be a Number for deletion.
-      req = store.delete(key);
-      req.onsuccess = function(evt) {
-        console.log("evt:", evt);
-        console.log("evt.target:", evt.target);
-        console.log("evt.target.result:", evt.target.result);
-        console.log("delete successful");
-        displayActionSuccess("Deletion successful");
-        displayPubList(store);
-      };
-      req.onerror = function (evt) {
-        console.error("deletePublication:", evt.target.errorCode);
-      };
-    };
-    req.onerror = function (evt) {
-      console.error("deletePublication:", evt.target.errorCode);
-      };
-  }
-
-  function displayActionSuccess(msg) {
-    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
-    $('#msg').html('<span class="action-success">' + msg + '</span>');
-  }
-  function displayActionFailure(msg) {
-    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
-    $('#msg').html('<span class="action-failure">' + msg + '</span>');
-  }
-  function resetActionStatus() {
-    console.log("resetActionStatus ...");
-    $('#msg').empty();
-    console.log("resetActionStatus DONE");
-  }
-
-  function addEventListeners() {
-    console.log("addEventListeners");
-
-    $('#register-form-reset').click(function(evt) {
-      resetActionStatus();
-    });
-
-    $('#add-button').click(function(evt) {
-      console.log("add ...");
-      var title = $('#pub-title').val();
-      var biblioid = $('#pub-biblioid').val();
-      if (!title || !biblioid) {
-        displayActionFailure("Required field(s) missing");
-        return;
-      }
-      var year = $('#pub-year').val();
-      if (year != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (isNaN(year))  {
-          displayActionFailure("Invalid year");
-          return;
-        }
-        year = Number(year);
-      } else {
-        year = null;
-      }
-
-      var file_input = $('#pub-file');
-      var selected_file = file_input.get(0).files[0];
-      console.log("selected_file:", selected_file);
-      // Keeping a reference on how to reset the file input in the UI once we
-      // have its value, but instead of doing that we rather use a "reset" type
-      // input in the HTML form.
-      //file_input.val(null);
-      var file_url = $('#pub-file-url').val();
-      if (selected_file) {
-        addPublication(biblioid, title, year, selected_file);
-      } else if (file_url) {
-        addPublicationFromUrl(biblioid, title, year, file_url);
-      } else {
-        addPublication(biblioid, title, year);
-      }
-
-    });
-
-    $('#delete-button').click(function(evt) {
-      console.log("delete ...");
-      var biblioid = $('#pub-biblioid-to-delete').val();
-      var key = $('#key-to-delete').val();
-
-      if (biblioid != '') {
-        deletePublicationFromBib(biblioid);
-      } else if (key != '') {
-        // Better use Number.isInteger if the engine has EcmaScript 6
-        if (key == '' || isNaN(key))  {
-          displayActionFailure("Invalid key");
-          return;
-        }
-        key = Number(key);
-        deletePublication(key);
-      }
-    });
-
-    $('#clear-store-button').click(function(evt) {
-      clearObjectStore();
-    });
-
-    var search_button = $('#search-list-button');
-    search_button.click(function(evt) {
-      displayPubList();
-    });
-
-  }
-
-  openDb();
-  addEventListeners();
-
-})(); // Immediately-Invoked Function Expression (IIFE)
-
- -

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

- -

Next step

- -

If you want to start tinkering with the API, jump in to the reference documentation and check out the different methods.

- -

See also

- -

Reference

- - - -

Tutorials

- - - -

Related articles

- - - -

Firefox

- - diff --git a/files/es/web/api/indexeddb_api/using_indexeddb/index.html b/files/es/web/api/indexeddb_api/using_indexeddb/index.html new file mode 100644 index 0000000000..ea9d2d879c --- /dev/null +++ b/files/es/web/api/indexeddb_api/using_indexeddb/index.html @@ -0,0 +1,1308 @@ +--- +title: Usando IndexedDB +slug: Web/API/IndexedDB_API/Usando_IndexedDB +tags: + - API + - Almacenamiento + - Avanzado + - Base de datos + - Guía + - IndexedDB + - Tutorial + - jsstore +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +
+

IndexedDB es una manera de almacenar datos dentro del navegador del usuario. Debido a que permite la creación de aplicaciones con habilidades de consulta enriquecidas, con independencia de la disponibilidad de la red, sus aplicaciones pueden trabajar tanto en línea como fuera de línea.

+
+ +

Acerca de este documento

+ +

Este tutorial es una guía sobre el uso de la API asíncrona de IndexedDB. Si no está familiarizado con IndexedDB, por favor consulte primero Conceptos Básicos Acerca de IndexedDB.

+ +

Para la documentación de referencia sobre la API de IndexedDB, vea el artículo IndexedDB y sus subpaginas, que documentan los tipos de objetos usados por IndexedDB, así como los métodos síncronos y asíncronos. 

+ +

Patrones Básicos

+ +

El patrón básico que indexedDB propone es:

+ +
    +
  1. Abrir una base de datos.
    2. +
  2. Crear un objeto de almacenamiento en la base de datos.
    3. +
  3. Iniciar una transacción y hacer una petición para hacer alguna operación de la base de datos, tal como añadir o recuperar datos.
    4. +
  4. +
    Espere a que se complete la operación por la escucha de la clase correcta de eventos DOM .
    +
    5. +
  5. +
    Hacer algo con el resultado (El cual puede ser encontrado en el objeto de la petición).
    +
    6. +
+ +

Con esos grandes rasgos en mente, seremos más concretos.

+ +

Creando y estructurando el almacenamiento

+ +

Como las especificaciones están todavía elaborandose, las implementaciones actuales de indexedDB dependen de los navegadores. Hasta que la especificación se haya consolidado, los proveedores de navegadores pueden tener diferentes implementaciones de los estandares de indexedDB. Una vez se alcance el consenso en el estandar, los proveedores implementarán la API sin prefijos. En algunas implementaciones ya fueron removidos los prefijos: Internet Explorer 10, Firefox 16, Chrome 24. Cuando utilizan un prefijo, los navegadores basados en gecko usan el prefijo moz , mientras que los navegadores basados en WebKit usan el prefijo webkit.

+ +

Usando una versión experimental de IndexedDB

+ +

En caso que usted quiera probar su código en navegadores que todavía usen un prefijo, puede usar el siguiente codigo:  

+ +
// En la siguiente línea, puede incluir prefijos de implementación que quiera probar.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// No use "var indexedDB = ..." Si no está en una función.
+// Por otra parte, puedes necesitar referencias a algun objeto window.IDB*:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla nunca ha prefijado estos objetos, por lo tanto no necesitamos window.mozIDB*)
+ +

Hay que tener cuidado con las implementaciones que usan un prefijo ya que puede ser inestables, incompletas, o usen una versión antigua de la especificación. En producción se recomienda usar el código sin prefijos. Es preferible no tener soporte para un navegador a decir que lo tiene y fallar en ello :

+ +
if (!window.indexedDB) {
+    window.alert("Su navegador no soporta una versión estable de indexedDB. Tal y como las características no serán validas");
+}
+
+ +

Abriendo una base de datos

+ +

Iniciamos todo el proceso así:

+ +
// dejamos abierta nuestra base de datos
+var request = window.indexedDB.open("MyTestDatabase", 3);
+
+ +

¿Lo has visto? Abrir una base de datos es igual que cualquier otra operación — solo tienes que "solicitarla" (request).

+ +

La solicitud de apertura no abre la base de datos o inicia la transacción de inmediato. La llamada a la función open() retornan unos objetos IDBOpenDBRequest, cuyo resultado, correcto o erróneo, se maneja en un evento.  Alguna otra función asincrónica en indexedDB hace lo mismo - Devolver un objeto IDBRequest que disparará un evento con el resultado o el error. El resultado para la función de abrir es una instancia de un IDBDatabase.

+ +

El segundo parámetro para el método open es la versión de la base de datos. La versión de la base de datos determina el esquema - El almacen de objectos en la base de datos y su estructura. Si la base de datos no existe, es creada y se dispara un evento onupgradeneeded de inmediato, permitiéndote proveer una actualización de la estructura e índices en la función que capture dicho evento. Se verá más adelante en  Actualizando la versión de la base de datos. 

+ +
+

Importante: El número de versión es un unsigned long. Por lo tanto significa que puede ser un entero muy grande. También significa que si usas un flotante será convertido en un entero más cercano y la transacción puede no ser iniciada, el evento upgradeneeded no se desencadenará. Por ejemplo no use 2.4 como un número de versión ya que será igual que la 2:

+ +
var request = indexedDB.open("MyTestDatabase", 2.4); // Esto no se hace, la versión será redondeada a 2
+
+ +

Generando manipuladores

+ +

La primera cosa que usted querrá hacer con la totalidad de las peticiones que usted genera es agregar controladores de éxito y de error:

+ +
request.onerror = function(event) {
+  // Hacer algo con request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Hacer algo con request.result!
+};
+ +

¿Cuál de las dos funciones, onSuccess () o onerror (), se vuelve a llamar? Si todo tiene éxito, un evento de éxito (es decir, un evento DOM cuya propiedad tipo se establece en el "éxito") se dispara con la solicitud como su objetivo. Una vez que se dispara, la función onSuccess () a petición se activa con el evento de éxito como argumento. De lo contrario, si había algún problema, un evento de error (es decir, un evento DOM cuyo tipo de propiedad se establece en "error") se dispara a petición. Esto desencadena la función onerror () con el evento de error como argumento.

+ +

La API IndexedDB está diseñada para minimizar la necesidad de control de errores, por lo que no es probable que veamos muchos eventos de error (al menos, no una vez que estás acostumbrado a la API). En el caso de la apertura de una base de datos, sin embargo, hay algunas condiciones comunes que generan eventos de error. El problema más común se produce cuando el usuario ha decidido no dar, a su aplicación web, el permiso para crear una base de datos. Uno de los principales objetivos de diseño de IndexedDB es permitir que grandes cantidades de datos se almacenen para su uso sin conexión a internet. (Para obtener más información sobre la cantidad de almacenamiento que puede tener para cada navegador, consulte Límites de almacenamiento.)  

+ +

Obviamente, los navegadores no permitirán que alguna red de publicidad o sitio web malicioso pueda contaminar su ordenador, por ello los navegadores utilizan un diálogo para indicar al usuario la primera vez que cualquier aplicación web determinada intente abrir una IndexedDB para el almacenamiento. El usuario puede optar por permitir o denegar el acceso. Además, el almacenamiento IndexedDB en los modos de privacidad navegadores sólo dura en memoria hasta que la sesión de incógnito haya sido cerrada (modo de navegación privada para el modo de Firefox e Incognito para Chrome, pero en Firefox no está implementado a partir de noviembre 2015 por lo que no puede utilizar IndexedDB en Firefox navegación privada en absoluto).

+ +

Ahora, asumiendo que el usuario acepta su solicitud para crear una base de datos, y que ha recibido un evento de éxito para activar la devolución de llamada de éxito; ¿Que sigue? La solicitud aquí se generó con una llamada a indexedDB.open (), por lo request.result es una instancia de IDBDatabase, y que sin duda quieren ahorrar para más adelante. Su código podría ser algo como esto:

+ +
var db;
+var request = indexedDB.open("MyTestDatabase");
+request.onerror = function(event) {
+  alert("Why didn't you allow my web app to use IndexedDB?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Manejando errores

+ +

Como se mencionó anteriormente, los eventos de error de burbujas. Eventos de error se dirigen a la solicitud que generó el error, entonces el evento se propaga a la operación, y finalmente con el objeto de base de datos. Si desea evitar la adición de controladores de errores a cada solicitud, en su lugar puede añadir un solo controlador de errores en el objeto de base de datos, así:

+ +
db.onerror = function(event) {
+  // Generic error handler for all errors targeted at this database's
+  // requests!
+  alert("Database error: " + event.target.errorCode);
+};
+
+ +

Uno de los errores más comunes posibles al abrir una base de datos es VER_ERR. Indica que la versión de la base de datos almacenada en el disco es mayor que la versión que está intentando abrir. Este es un caso de error que siempre debe ser manejado por el gestor de errores.

+ +

Creación o actualización de la versión de la base de datos

+ +

Cuando se crea una nueva base de datos o se aumenta el número de versión de una base de datos existente (mediante la especificación de un número de versión más alto de lo que hizo antes, en {{anch ("Cómo abrir una base de datos")}}), el evento onupgradeneeded se activará y un objeto IDBVersionChangeEvent será pasado a cualquier controlador de eventos onversionchange establecido en request.result (es decir, db en el ejemplo). En el controlador para el evento upgradeneeded, se debe crear los almacenes de objetos necesarios para esta versión de la base de datos:

+ +
// Este evento solamente está implementado en navegadores recientes
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Crea un almacén de objetos (objectStore) para esta base de datos
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

En este caso, la base de datos ya tendrá los almacenes de objetos de la versión anterior de la base de datos, por lo que no tiene que crear estos almacenes de objetos de nuevo. Sólo es necesario crear nuevos almacenes de objetos, o eliminar las tiendas de objetos de la versión anterior que ya no son necesarios. Si necesita cambiar un almacén de objetos existentes (por ejemplo, para cambiar la ruta de acceso clave keyPath), entonces se debe eliminar el antiguo almacén de objetos y crear de nuevo con las nuevas opciones. (Tenga en cuenta que esto borrará la información en el almacén de objetos Si usted necesita guardar esa información, usted debe leerlo y guardarlo en otro lugar antes de actualizar la base de datos.)

+ +

Tratar de crear un almacén de objetos con un nombre que ya existe (o tratando de eliminar un almacén de objetos con un nombre que no existe) lanzará un error.

+ +

Si el evento onupgradeneeded retorna éxito, entonces se activará el manejador onsuccess de la solicitud de base de datos abierta.

+ +

Blink / Webkit soportan la versión actual de la especificación, tal como fue liberado en Chrome 23+ y Opera 17+ ; IE10+ también lo soporta. Implementaciones mas viejas o distintas no implementan la versión actual de la especificación, y por lo tanto no son compatibles todavía con el indexedDB.open (nombre, versión).onupgradeneeded . Para obtener más información sobre cómo actualizar la versión de la base de datos en Webkit/Blink mas viejos, consulte el artículo de referencia IDBDatabase.

+ +

Estructuración de la base de datos

+ +

Ahora para estructurar la base de datos. IndexedDB usa almacenes de datos (object stores) en lugar de tablas, y una base de datos puede contener cualquier número de almacenes. Cuando un valor es almacenado, se le asocia con una clave. Existen diversas maneras en que una clave pude ser indicada dependiendo de si el almacén usa una ruta de clave o generador.

+ +

La siguiente table muetra las distintas formas en que las claves pueden ser indicadas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ruta de clave(keyPath)Generador de clave (autoIncrement)Descripción
NoNoEste almacén puede contener cualquier tipo de valor, incluso valores primitivos como números y cadenas. Se debe indicar un argumento de clave distinto cada vez que se agregue un nuevo valor.
SiNoEste almacén de objetos solo puede contener objetos de JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de clave.
NoSiEste objeto puede contener cualquier tipo de valor. La clave es generada automáticamente, o se puede indicar un argumento de clave distinto si se quiere usar una clave específica.
SiSi +

Este almacén de objetos solo puede contener objetos de JavaScript. Usualmente una clave es generada y dicho valor es almacenado en el objeto en una propiedad con el mismo nombre que la ruta de clave. Sin embargo, si dicha propiedad ya existe en el objeto, el valor de esa propuiedad es usado como clave en lugar de generar una nueva.

+
+ +

También se puede crear índices en cualquer almacén de objetos, siempre y cuando el almacén contenga objets, y no primitivos. Un índice permite buscar valores contenidos en el almacén usando el valor de una propiedad del objeto almacenado, en lugar de la clave del mismo.

+ +

Adicionalmente, los índices tienen la habilidad para hacer cumplir restricciones simples en los datos almacendos. Al indicar la bandera unique al crear el índice, el índice asegurará que no se puedan almacenar dos objetos que tengan el mismo valor para la clave del índice. Así, por ejemplo si se tiene un almacén de objetos que contiene un set de personas, y se desea asegurar que no existan dos personas con el mismo email, se puede usar un índice con la bandera unique activada para forzar esto.

+ +

Esto puede sonar confuso, pero un ejemplo simple debe ilustrar el concepto. Primero, definiremos alguna información de clientes para usar en nuestro ejemplo:

+ +
// Así se ve nuestra información de clientes.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+
+ +

Ahora, creemos una IndexedDB para almacenar los datos:

+ +
const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Manejar errores.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Se crea un almacén para contener la información de nuestros cliente
+  // Se usará "ssn" como clave ya que es garantizado que es única
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Se crea un índice para buscar clientes por nombre. Se podrían tener duplicados
+  // por lo que no se puede usar un índice único.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Se crea un índice para buscar clientespor email. Se quiere asegurar que
+  // no puedan haberdos clientes con el mismo email, asi que se usa un índice único.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Se usa transaction.oncomplete para asegurarse que la creación del almacén
+  // haya finalizado antes de añadir los datos en el.
+  objectStore.transaction.oncomplete = function(event) {
+    // Guarda los datos en el almacén recién creado.
+    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
+    for (var i in customerData) {
+      customerObjectStore.add(customerData[i]);
+    }
+  }
+};
+
+ +

Como se indicó previamente, onupgradeneeded es el único lugar donde se puede alterar la estructura de la base de datos. En el, se puede crear y borrar almacenes de objetos y construir y remover índices.

+ +
Los almacenes de datos son creados con una llamada a  createObjectStore(). El método toma como parámetros el nombre del almacén y un objeto.  A pesar de que el segundo parámetro es opcional, es muy importante, porque permite definir propiedades opcionales importantes y refinar el tipo de almacén que se desea crear. En este caso, se pregunta por un almacén llamado "customers" y se define la clave, que es la propiedad que indica que un objeto en el almacén es único. La propiedad en este ejemplo es "ssn" (Social Security Number) ya que los números de seguridad social está garantizado que sea único. "ssn" debe estar presente en cada objeto que se guarda al almacén.
+ +

También se solicitó crear un índice llamado "name" que se fija en la propiedad name de los objetos almacenados. Así como con createObjectStore(), createIndex() toma un objeto opcional options que refina el tipo de índice que se desea crear. Agregar objetos que no tengan una propiedad name funcionará, pero los objetos no aparecerán en el índice "name"

+ +
Ahora se pueden obtener los clientes almacenados usando su ssn directamente del almacen, o usando su nombre a través del índice. Para aprender como hacer esto, vea la sección El uso de un índice
+ +

El uso de un generador de claves

+ +

Indicar la bandera autoIncrement  cuando se crea el almacén habilitará el generador de claves para dicho almacén. Por defecto esta bandera no está marcada.

+ +

Con el generador de claves, la clave será generada automáticamente a medida que se agreguen valores al almacén. El número actual de un generador de claves siempre se establece en 1 cuando se creal el almacén por primera vez. Básicamente la nueva clave autogenerada es incrementada en 1 basada en la llave anterior. El numero actual para un generador de claves nunca disminuye, salvo como resultado de operaciones de base de datos  que sean revertidos, por ejemplo, cuando la transacción de base de datos es abortada. Por lo tanto borrar un registro o incluso borrar todos los registros de un almacén nunca afecta al generador de claves

+ +

Se puede crear otro almacén de objetos con generador de claves como se muestra abajo:

+ +
// Abrir la indexedDB.
+var request = indexedDB.open(dbName, 3);
+
+request.onupgradeneeded = function (event) {
+
+    var db = event.target.result;
+
+    // Create another object store called "names" with the autoIncrement flag set as true.
+    var objStore = db.createObjectStore("names", { autoIncrement : true });
+
+    // Because the "names" object store has the key generator, the key for the name value is generated automatically.
+    // The added records would be like:
+    // key : 1 => value : "Bill"
+    // key : 2 => value : "Donna"
+    for (var i in customerData) {
+        objStore.add(customerData[i].name);
+    }
+}
+ +

Para más detalles acerca del generador de claves, por favor ver "W3C Key Generators".

+ +

Añadir, recuperación y eliminación de datos

+ +

Antes que haga algo con su nueva base de datos , necesita comenzar una transacción. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Once you are inside the transaction, you can access the object stores that hold your data and make your requests. Next, you need to decide if you're going to make changes to the database or if you just need to read from it. Transactions have three available modes: readonly, readwrite, and versionchange.

+ +

To change the "schema" or structure of the database—which involves creating or deleting object stores or indexes—the transaction must be in versionchange mode. This transaction is opened by calling the {{domxref("IDBFactory.open")}} method with a version specified. (In WebKit browsers, which have not implemented the latest specifcation, the {{domxref("IDBFactory.open")}} method takes only one parameter, the name of the database; then you must call {{domxref("IDBVersionChangeRequest.setVersion")}} to establish the versionchange transaction.)

+ +

To read the records of an existing object store, the transaction can either be in readonly or readwrite mode. To make changes to an existing object store, the transaction must be in readwrite mode. You open such transactions with {{domxref("IDBDatabase.transaction")}}. The method accepts two parameters: the storeNames (the scope, defined as an array of object stores that you want to access) and the mode (readonly or readwrite) for the transaction. The method returns a transaction object containing the {{domxref("IDBIndex.objectStore")}} method, which you can use to access your object store. By default, where no mode is specified, transactions open in readonly mode.

+ +

You can speed up data access by using the right scope and mode in the transaction. Here are a couple of tips:

+ + + +

Agregar datos a la base de datos

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by first calling preventDefault() on the error event then doing something else, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine-grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aid your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, you can use the put() function, as shown below in the {{ anch("Updating an entry in the database") }} section.

+ +

Extracción de datos de la base de datos

+ +

Removing data is very similar:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Obtener datos de la base de datos

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property.

+ +
+

Note: You can speed up data access by limiting the scope and mode in the transaction. Here are a couple of tips:

+ + +
+ +

Actualización de una entrada en la base de datos

+ +

Now we've retrieved some data, updating it and inserting it back into the IndexedDB is pretty simple. Let's update the previous example somewhat:

+ +
var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Get the old value that we want to update
+  var data = request.result;
+
+  // update the value(s) in the object that you want to change
+  data.age = 42;
+
+  // Put this updated object back into the database.
+  var requestUpdate = objectStore.put(data);
+   requestUpdate.onerror = function(event) {
+     // Do something with the error
+   };
+   requestUpdate.onsuccess = function(event) {
+     // Success - the data is updated!
+   };
+};
+ +

So here we're creating an objectStore and requesting a customer record out of it, identified by its ssn value (444-44-4444). We then put the result of that request in a variable (data), update the age property of this object, then create a second request (requestUpdate) to put the customer record back into the objectStore, overwriting the previous value.

+ +
+

Note that in this case we've had to specify a readwrite transaction because we want to write to the database, not just read out of it.

+
+ +

El uso de un cursor

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
+

Note: Mozilla has also implemented getAll() to handle this case (and getAllKeys(), which is currently hidden behind the dom.indexedDB.experimental preference in about:config). these aren't part of the IndexedDB standard, so may disappear in the future. We've included them because we think they're useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll() for example, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+
+ +

El uso de un índice

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, and outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
// Using a normal cursor to grab whole customer record objects
+index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+// Using a key cursor to grab customer record object keys
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Especificación de la gama y la dirección de los cursores

+ +

If you would like to limit the range of values you see in a cursor, you can use an IDBKeyRange object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value(s)) or "open" (i.e., the key range does not include the given value(s)). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+// Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function as the second argument:

+ +
objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

If you just want to specify a change of direction but not constrain the results shown, you can just pass in null as the first argument:

+ +
objectStore.openCursor(null, "prev").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, "nextunique").onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Please see "IDBCursor Constants" for the valid direction arguments.

+ +

Cambios Versión mientras que una aplicación web está abierto en otra pestaña

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database (an onblocked event is fired until tey are closed or reloaded). Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user closes the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Seguridad

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security and privacy measure and can be considered analogous the blocking of third-party cookies. For more details, see {{ bug(595307) }}.

+ +

Warning About Browser Shutdown

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted — they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction. 

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Full IndexedDB example

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid uselessly reloading it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Resetting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin as the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Next step

+ +

If you want to start tinkering with the API, jump in to the reference documentation and check out the different methods.

+ +

See also

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/es/web/api/media_streams_api/index.html b/files/es/web/api/media_streams_api/index.html new file mode 100644 index 0000000000..f8ab5d5c05 --- /dev/null +++ b/files/es/web/api/media_streams_api/index.html @@ -0,0 +1,445 @@ +--- +title: API de MediaStream +slug: WebRTC/MediaStream_API +translation_of: Web/API/Media_Streams_API +--- +

{{SeeCompatTable}}

+

La API de proceso [i]MediaStream, a veces llamadaMedia Stream API o Stream API, es parte de la norma WebRTC [en] y describe un flujo de datos de audio o video, los métodos para trabajar con ellos, las limitaciones asociadas con este tipo de datos, las respuestas de error y éxito al usar los datos asincrónicamente y los eventos que se disparan durante el proceso.

+
+  
+

Conceptos Básicos

+

La API está basada sobre la manipulación de  un objeto {{domxref("MediaStream")}} que representa un flujo de datos de audio o video. Generalmente, un objeto MediaStream es una simple cadena URL que puede ser usada para referirse a datos almacenados en un {{domxref("Archivo")}} DOM  o un objeto {{domxref("Blob")}} creado con {{domxref("window.URL.createObjectURL()")}}, como se lo describe en Obtener el video.

+

Un MediaStream está compuesto por más objetos [i]{{domxref("MediaStreamTrack")}} que representan varias pistas de audio o video. Cada MediaStreamTrack puede tener uno o más canales. El canal representa la unidad menor de un flujo de medio, como una señal de audio asociada a un parlante específico, como el izquierdo o el derecho en una pista de audio estéreo.

+

Los objetos MediaStream poseen una sola entrada y salida[ii]. Un objeto MediaStream creado con getUserMedia() se denomina local y tiene como origen de entrada una de las cámaras o micrófonos del usuario. Un MediaStream no local puede estar representando un elemento de medio como {{HTMLElement("video")}} o {{HTMLElement("audio")}}, un flujo originado en la red y obtenido a través de la [iii]PeerConnection API o un flujo creado con la API de Audio Web [iv]{{domxref("MediaStreamAudioSourceNode")}}. La salida de un objeto MediaStream está enlazada a un consumidor. El mismo puede ser un elemento de medio  como <audio> o <video>, la PeerConnection API de WebRTC o una API de Audio Web [v]{{domxref("MediaStreamAudioDestinationNode")}}.

+
+  
+

Referencia

+
+ +
+

Pista de MediaStream

+

Una MediaStreamTrack puede ser de dos tipos, de audio o video, y representa el origen del medio, como una cámara.

+

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipoDescripción
enabledBoolean True si la pista sigue asociada a su fuente.
idDOMString, read-onlyUn globally unique identifier (GUID) que describe la pista de medios.
kindDOMString, read-onlyEl audio o video para la pista de origen.
labelDOMString, read-onlyUna cadena de tipo usuario-asignada que identifica la pista de origen, como en "internal microphone." 
onendedEventHandlerManeja el evento finalizado cuando se lo activa en el objeto MediaStreamTrack.
onmute EventHandlerManeja el evento mudo del objeto MediaStreamTrack. 
onoverconstrainedEventHandlerManeja el evento superrestricto cuando se lo activa en el objeto MediaStreamTrack.
onstartedEventHandlerManeja el evento iniciado cuando se lo activa en el objeto MediaStreamTrack.
onunmute EventHandlerManjea el evento sin enmudecer cuando se lo activa en el objeto MediaStreamTrack.
readyStateunsigned short, read-only +

Valores para la pista lista:

+
    +
  • live - la pista está activa; la salida se puede activar on y off con el atributo habilitado.
    • +
  • muted - el origen del medio subyacente de la pista no puede proveer temporalmente datos en tiempo real.
    • +
+
sourceIdDOMString, read-onlyLa identidad de este origen que es único para esta aplicación y persistente. Se recomienda una GUID pero no es obligatoria.
sourceTypeSourceTypeEnum, read-onlyContiene el tipo de información del origen, si es que existe.
+

Eventos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EventoInterfazDescripción 
startedEventEl objeto MediaStreamTrack no es más "new" en el readyState.
mutedEventEl origen del objeto MediaStreamTrack no puede proveer datos temporalmente.
unmuted EventEl origen del objeto MediaStreamTrack a recomenzado a proveer datos
overconstrainedEventEl origen del objeto MediaStreamTrack no puede ser confugurado para que encaje en las restricciones impuestas por la pista. Esto podría ocurrir con la altura en el caso de un video, entre otras posibilidades.
endedEvent +

El origen del objeto MediaStreamTrack no proveerá datos; puede ocurrir por lo siguiente:

+
    +
  • el usuario a deshabilitado los permisos de la aplicación
    • +
  • el dispositivo de origen está desconectado
    • +
  • el peer remoto no transmite datos
    • +
  • se llamó el método stop()
    • +
+
+

appendConstraint()

+

Agrega la restricción al final de la lista. Esto sólo es un método para añadir restricciones optativas.

+
+
+ Parámetros
+
+ constraintName DOMString, required.
+
+ constraintValue Primitive (DOMString, float, etc.) or MinMaxConstraint, required.
+
+ Devuelve
+
+ void
+
+ Excepciones
+
+ None.
+
+

applyConstraints()

+

Aplica una lista de opciones optativas a la pista. Sobrescribe cualquier otra restricción optativa ya existente en la pista.

+
+
+ Parámetros
+
+ constraints MediaTrackConstraints, required.
+
+ Devuelve
+
+ void
+
+ Excepciones
+
+ None.
+
+

constraints()

+

Devuelte todas las [i]restricciones en la pista, obligatorias y optativas. Si tanto mandatory u optional no tienen restricciones, ese campo será undefined. Si ninguno tiene restricciones, entonces constraints() devolverá null.

+
+
+ Parámetros
+
+ None.
+
+ Devuelve
+
+ MediaTrackConstraints or null
+
+ Excepciones
+
+ None.
+
+

getConstraint()

+

Trae una restricción específica, por nombre, de la pista. Este método puede devolver una de varias posibilidades:

+ +
+
+ Parámetros
+
+ constraintName DOMString, required.
+
+ mandatory boolean, optional, default false.
+
+ Devuelve
+
+ Any of the possibilities mentioned above.
+
+ Excepciones
+
+ None.
+
+

--

+

stop()

+

Detiene permanentemente la creación de datos para las pistas y remueve las referencias a los orígines.

+
+
+ Parámetros
+
+ None.
+
+ Devuelve
+
+ Void.
+
+ Excepciones
+
+ None.
+
+

Lista de pistas de MediaStream

+

Un MediaStream tiene dos objetos MediaStreamTrackList, uno para la pista de video y otro para la de audio.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Atributo TipoDescripción
lengthunsigned long, read-only El número de pistas en la lista.
onaddtrack EventHandlerManeja el evento addtrack.
onremovetrack EventHandlerManeja el evento removetrack.
+

Eventos

+ + + + + + + + + + + + + + + + + + + + +
EventoInterfazDescripción 
addtrack MediaStreamTrackEvent Se agregó una MediaStreamTrack a la lista.
removetrack MediaStreamTrackEventSe removió una MediaStreamTrack de la lista.
+

add()

+

Agrega una MediaStreamTrack a la lista de pistas.

+
+
+ Parámetros
+
+ MediaStreamTrack track, required.
+
+ Devuelve
+
+ Void.
+
+ Excepciones
+
+ INVALID_STATE_ERR if the stream is finished (all tracks have ended).
+
+

item()

+

Devuelve la MediaStreamTrack al valor de índice (index) especificado.

+
+
+ Parámetros
+
+ unsigned long index, required.
+
+ Devuelve
+
+ MediaStreamTrack
+
+ Excepciones
+
+ None.
+
+

Remove()

+

Remueve una MediaStreamTrack de la lista de pistas.

+
+
+ Parámetros
+
+ MediaStreamTrack track, required.
+
+ Devuelve
+
+ Void.
+
+ Excepciones
+
+ INVALID_STATE_ERR if the stream is finished (all tracks have ended).
+
+

Compatibilidad con navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOpera Safari (WebKit)
Stream API 21{{ property_prefix("webkit") }} nightly 18{{ property_prefix("moz") }} {{ CompatUnknown() }} 12{{ CompatUnknown() }} 
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Stream API {{ CompatNo() }} {{ CompatUnknown() }}{{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} 
+
+

Actualmente, el uso de WebRTC para acceder a la cámara está soportado en Chrome, Opera y Firefox Nightly 18. Habilitar WebRTC en Firefox Nightly requiere que usted establezca una advertencia (flag) en la configuración:

+ +
+

 

+
+
+
+
+

[i] en castellano,Flujo o transmisión de [multi] Medios

+
+
+
+
+

[i] en castellano, Pista de Flujo de Media

+
+
+

[ii] del inglés, input youtput

+
+
+

[iii] en castellano, API de Conexión de Pares

+
+
+

[iv] en castellano, Nodo de origen del Audio MediaStream

+
+
+

[v] en castellano, Nodo de destino del Audio MediaStream

+
+
+
+
+

[i] del inglés,constraints

+
+
+
+
+

 

+

Ver también

+ diff --git a/files/es/web/api/navigator/geolocation/index.html b/files/es/web/api/navigator/geolocation/index.html new file mode 100644 index 0000000000..94c22ef6b0 --- /dev/null +++ b/files/es/web/api/navigator/geolocation/index.html @@ -0,0 +1,106 @@ +--- +title: window.navigator.geolocation +slug: Web/API/NavigatorGeolocation/geolocation +translation_of: Web/API/Navigator/geolocation +--- +

{{APIRef("Geolocation API")}}
+ La propiedad de sólo lectura Navigator.geolocation devuelve un objeto Geolocation que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.

+ +
+

Nota: Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.

+
+ +

Sintaxis

+ +
geo = navigator.geolocation
+
+ +

Métodos

+ +
+
{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}
+
Utilizado para obtener la posición actual.
+
{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}
+
Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.
+
{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}
+
Utilizado para eliminar un manejador asignado a los cambios de ubicación.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
+ {{CompatNo}} 15.0
+ 16.0		5
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.150{{CompatGeckoMobile("4")}}1010.603.2
+
+ +

Ver también

+ + diff --git a/files/es/web/api/navigatorgeolocation/geolocation/index.html b/files/es/web/api/navigatorgeolocation/geolocation/index.html deleted file mode 100644 index 94c22ef6b0..0000000000 --- a/files/es/web/api/navigatorgeolocation/geolocation/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: window.navigator.geolocation -slug: Web/API/NavigatorGeolocation/geolocation -translation_of: Web/API/Navigator/geolocation ---- -

{{APIRef("Geolocation API")}}
- La propiedad de sólo lectura Navigator.geolocation devuelve un objeto Geolocation que proporciona acceso web a la ubicación de un dispositivo. Esto permite ofrecer al sitio web o aplicación resultados personalizados basados en la ubicación del usuario.

- -
-

Nota: Por motivos de seguridad, cuando una página web trata de acceder a la información de ubicación, se solicita permiso al usuario. Cada navegador tiene sus propias reglas sobre cómo y cuándo obtener dicho permiso.

-
- -

Sintaxis

- -
geo = navigator.geolocation
-
- -

Métodos

- -
-
{{domxref("geolocation.getCurrentPosition", "geolocation.getCurrentPosition()")}}
-
Utilizado para obtener la posición actual.
-
{{domxref("geolocation.watchPosition", "geolocation.watchPosition()")}}
-
Utilizado para asignar un manejador para dar seguimiento a cualquier cambio de ubicación.
-
{{domxref("geolocation.clearWatch", "geolocation.clearWatch()")}}
-
Utilizado para eliminar un manejador asignado a los cambios de ubicación.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Especificación inicial
- -

Compatibilidad en navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatGeckoDesktop("1.9.1")}}910.60
- {{CompatNo}} 15.0
- 16.0		5
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.150{{CompatGeckoMobile("4")}}1010.603.2
-
- -

Ver también

- - diff --git a/files/es/web/api/navigatorgeolocation/index.html b/files/es/web/api/navigatorgeolocation/index.html deleted file mode 100644 index 0f8895b7b8..0000000000 --- a/files/es/web/api/navigatorgeolocation/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: NavigatorGeolocation -slug: Web/API/NavigatorGeolocation -tags: - - API -translation_of: Web/API/Geolocation -translation_of_original: Web/API/NavigatorGeolocation ---- -

{{APIRef("Geolocation API")}}

- -

NavigatorGeolocation  contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.

- -

There is no object of type NavigatorGeolocation, but some interfaces, like {{domxref("Navigator")}} implements it.

- -

Properties

- -

The NavigatorGeolocation interface doesn't inherit any property.

- -
-
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
-
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
-
- -

Methods

- -

The NavigatorGeolocation interface neither implements, nor inherit any method.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}{{Spec2('Geolocation')}}Initial specification.
- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatGeckoDesktop("1.9.1")}}910.60
- Removed in 15.0
- Reintroduced in 16.0		5
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatGeckoMobile("4")}}{{CompatUnknown()}}10.60{{CompatUnknown()}}
-
- -

See also

- - - -

 

diff --git a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html deleted file mode 100644 index d4f8a77824..0000000000 --- a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Eventos online y offline -slug: Web/API/NavigatorOnLine/Eventos_online_y_offline -tags: - - AJAX - - DOM - - Desarrollo_Web - - Todas_las_Categorías -translation_of: Web/API/NavigatorOnLine/Online_and_offline_events ---- -

{{ Fx_minversion_header(3) }} -Firefox 3 implementa eventos Online/Offline de la especificacióbn WHATWG Web Applications 1.0. -

-

Descripción

-

Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: -

-
  1. Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. -
  2. Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. -
-

Es este proceso el que los eventos online/offline ayudan a trivializar. -

Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos LINK en tu sección HEAD de la siguiente manera: -

-
<link rel="offline-resource" href="mi_recurso>
-
-

Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. -

-

API

- -

navigator.onLine es una propiedad que mantiene un valor true/false (true para online, false para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). -

Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: -

-
-El atributo navigator.onLine debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... -
-

Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. -

Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. -

-

eventos "online" y "offline"

-

Firefox 3 introduce dos nuevos eventos: "online" y "offline". Estos dos eventos son iniciados en el <body> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde document.body a document, terminando en window. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). -

Puedes registrar listeners para estos eventos de varias maneras habituales: -

- -

Ejemplo:

-

Hay una prueba sencilla que puedes ejecutar para verificar que los eventos están funcionando. -

-

-
 <!doctype html>
- <html>
- <head>
-   <script>
-     function updateOnlineStatus(msg) {
-       var status = document.getElementById("status");
-       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
-       status.setAttribute("class", condition);
-       var state = document.getElementById("state");
-       state.innerHTML = condition;
-       var log = document.getElementById("log");
-       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
-     }
-     function loaded() {
-       updateOnlineStatus("load");
-       document.body.addEventListener("offline", function () {
-         updateOnlineStatus("offline")
-       }, false);
-       document.body.addEventListener("online", function () {
-         updateOnlineStatus("online")
-       }, false);
-     }
-   </script>
-   <style>...</style>
- </head>
- <body onload="loaded()">
-   <div id="status"><p id="state"></p></div>
-   <div id="log"></div>
- </body>
- </html>
-
-

Referencias

- -


-

-
-
-{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/es/web/api/navigatoronline/online_and_offline_events/index.html b/files/es/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..d4f8a77824 --- /dev/null +++ b/files/es/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,91 @@ +--- +title: Eventos online y offline +slug: Web/API/NavigatorOnLine/Eventos_online_y_offline +tags: + - AJAX + - DOM + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

{{ Fx_minversion_header(3) }} +Firefox 3 implementa eventos Online/Offline de la especificacióbn WHATWG Web Applications 1.0. +

+

Descripción

+

Para poder construir una aplicación web offline-funcional, necesitas conocer cuándo está tu aplicación realmente offline. Además, también necesitas conocer cuándo vuelve la aplicación al estado 'online' nuevamente. A efectos prácticos, los requisitos son los siguientes: +

+
  1. Necesitas conocer cuándo el usuario vuelve a estar online, para que puedas re-sincronizar con el servidor. +
  2. Necesitas conocer cuándo el usuario está offline, para así estar seguro de poner en cola las peticiones al servidor para más tarde. +
+

Es este proceso el que los eventos online/offline ayudan a trivializar. +

Tu aplicación web quizás necesite establecer que ciertos documentos se mantengan en la caché de recursos offline. Para hacerlo, incluye elementos LINK en tu sección HEAD de la siguiente manera: +

+
<link rel="offline-resource" href="mi_recurso>
+
+

Cuando Firefox 3 o superiores procesan el HTML, esto causará que el recurso referenciado se mantenga en caché para su uso offline en un recurso especial de la caché. +

+

API

+ +

navigator.onLine es una propiedad que mantiene un valor true/false (true para online, false para offline). Esta propiedad se actualiza siempre que el usuario cambia hacia "Modo sin conexión" seleccionando el menú correspondiente (Archivo -> Trabajar sin conexión en Firefox). +

Además, esta propiedad se debería actualizar siempre que el navegador no sea capaz de conectarse a la red. De acuerdo con la especificación: +

+
+El atributo navigator.onLine debe devolver false si el agente de usuario no contactará con la red cuando el usuario siga los enlaces o cuando un script solicite una página remota (o sepa que intentarlo fallaría)... +
+

Firefox 2 actualiza esta propiedad cuando cambia desde/hacia el modo offline del navegador, y cuando pierde/recupera la conectividad de la red en Windows y Linux. +

Esta propiedad existía en versiones más antiguas de Firefox e Internet Explorer (la especificación surgió a partir estas implementaciones previas), así que puedes comenzar a usarla inmediatamente. La detección automática del estado de la red se implementó en Firefox 2. +

+

eventos "online" y "offline"

+

Firefox 3 introduce dos nuevos eventos: "online" y "offline". Estos dos eventos son iniciados en el <body> de cada página cuando el usuario cambia de modo online a offline. Además, los eventos emergen desde document.body a document, terminando en window. Ambos eventos son no-cancelables (no se puede evitar que el usuario pase a modo online u offline). +

Puedes registrar listeners para estos eventos de varias maneras habituales: +

+ +

Ejemplo:

+

Hay una prueba sencilla que puedes ejecutar para verificar que los eventos están funcionando. +

+

+
 <!doctype html>
+ <html>
+ <head>
+   <script>
+     function updateOnlineStatus(msg) {
+       var status = document.getElementById("status");
+       var condition = navigator.onLine ? "ONLINE" : "OFFLINE";
+       status.setAttribute("class", condition);
+       var state = document.getElementById("state");
+       state.innerHTML = condition;
+       var log = document.getElementById("log");
+       log.appendChild(document.createTextNode("Event: " + msg + "; status=" + condition + "\n"));
+     }
+     function loaded() {
+       updateOnlineStatus("load");
+       document.body.addEventListener("offline", function () {
+         updateOnlineStatus("offline")
+       }, false);
+       document.body.addEventListener("online", function () {
+         updateOnlineStatus("online")
+       }, false);
+     }
+   </script>
+   <style>...</style>
+ </head>
+ <body onload="loaded()">
+   <div id="status"><p id="state"></p></div>
+   <div id="log"></div>
+ </body>
+ </html>
+
+

Referencias

+ +


+

+
+
+{{ languages( { "en": "en/Online_and_offline_events", "fr": "fr/\u00c9v\u00e8nements_online_et_offline", "ja": "ja/Online_and_offline_events", "pl": "pl/Zdarzenia_online_i_offline", "pt": "pt/Eventos_online_e_offline" } ) }} diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/elementopadre/index.html deleted file mode 100644 index 2a2e947a8d..0000000000 --- a/files/es/web/api/node/elementopadre/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Node.parentElement -slug: Web/API/Node/elementoPadre -tags: - - API - - DOM - - NecesitaCompatiblidadNavegador - - Nodo - - Propiedad -translation_of: Web/API/Node/parentElement ---- -
-
{{APIRef("DOM")}}
-
- -

La propiedad de sólo lectura de Nodo.parentElement devuelve el nodo padre del DOM {{domxref("Element")}}, o null, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .

- -

Sintaxis

- -
elementoPadre = node.parentElement
- -

El elementoPadre es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o null.

- -

Ejemplo

- -
if (node.parentElement) {
-    node.parentElement.style.color = "red";
-}
- -

Compatibilidad en navegadores

- -

En algunos navegadores, la propiedad elementoPadre es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.

- -

{{Compat("api.Node.parentElement")}}

- -

Especificación

- - - -

Ver también

- - diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertarantes/index.html deleted file mode 100644 index 102d4dfbdd..0000000000 --- a/files/es/web/api/node/insertarantes/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Node.insertBefore() -slug: Web/API/Node/insertarAntes -tags: - - API - - DOM - - Nodo - - Referencia - - metodo -translation_of: Web/API/Node/insertBefore ---- -
{{APIRef("DOM")}}
- -

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

- -

Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con cloneNode() no se mantendrán sincronizadas automáticamente.

- -

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

- -

Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

- -

Sintaxis

- -
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
-
- - - -

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

- -
-

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

-
- -

Valor devuelto

- -

El valor devuelto es el hijo añadido excepto cuando newNode es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.

- -

Ejemplo

- -

Ejemplo 1

- -
<div id="parentElement">
-   <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// Crear el nodo a insertar
-var newNode = document.createElement("span");
-
-// Obtener una referencia al nodo padre
-var parentDiv = document.getElementById("childElement").parentNode;
-
-// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
-var sp2 = document.getElementById("childElement");
-parentDiv.insertBefore(newNode, sp2);
-// Fin del test [ 1 ]
-
-// Comienzo del test [ 2 ] : childElement no es del tipo undefined
-var sp2 = undefined; // No existe un nodo con id "childElement"
-parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
-// Fin del test [ 2 ]
-
-// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
-var sp2 = "undefined"; // No existe un nodo con id "childElement"
-parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
-// Fin del test [ 3 ]
-</script>
-
- -

Ejemplo 2

- -
<div id="parentElement">
-  <span id="childElement">foo bar</span>
-</div>
-
-<script>
-// Crea un nuevo, elemento <span>
-var sp1 = document.createElement("span");
-
-// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
-var sp2 = document.getElementById("childElement");
-// Obtener una referencia al nodo padre
-var parentDiv = sp2.parentNode;
-
-// Inserta un nuevo elemento en el DOM antes de sp2
-parentDiv.insertBefore(sp1, sp2);
-</script>
-
- -

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.

- -

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

- -
parentDiv.insertBefore(sp1, sp2.nextSibling);
- -

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

- -

Ejemplo 3

- -

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

- -
// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
-var parentElement = document.getElementById('parentElement');
-// Obtener una referencia al primer hijo
-var theFirstChild = parentElement.firstChild;
-
-// Crear un nuevo elemento
-var newElement = document.createElement("div");
-
-// Insertar el nuevo elemento antes que el primer hijo
-parentElement.insertBefore(newElement, theFirstChild);
-
- -

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.

- -

Compatibilidad en navegadores

- -

{{Compat("api.Node.insertBefore")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige errores en el algoritmo de inserción
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describe el algoritmo con mayor detalle
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Sin cambios notables
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Sin cambios notables
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Introducido
- -

Ver también

- - diff --git a/files/es/web/api/node/insertbefore/index.html b/files/es/web/api/node/insertbefore/index.html new file mode 100644 index 0000000000..102d4dfbdd --- /dev/null +++ b/files/es/web/api/node/insertbefore/index.html @@ -0,0 +1,172 @@ +--- +title: Node.insertBefore() +slug: Web/API/Node/insertarAntes +tags: + - API + - DOM + - Nodo + - Referencia + - metodo +translation_of: Web/API/Node/insertBefore +--- +
{{APIRef("DOM")}}
+ +

El método Node.insertBefore() inserta un nodo antes del nodo de referencia como hijo de un nodo padre indicado. Si el nodo hijo es una referencia a un nodo ya existente en el documento, insertBefore() lo mueve de la posición actual a la nueva posición (no hay necesidad de eliminar el nodo de su nodo padre antes de agregarlo al algún nodo nuevo).

+ +

Esto significa que el nodo no puede estar en dos puntos del documento al simultáneamente. Por lo que si el nodo ya tiene un padre, primero se elimina el nodo, y luego se inserta en la nueva posición. {{domxref("Node.cloneNode()")}} puede utilizarse para hacer una copia de un nodo antes de insertarlo en un nuevo padre. Ten en cuenta que las copias hechas con cloneNode() no se mantendrán sincronizadas automáticamente.

+ +

Si el nodo de referencia es null, el nodo indicado se añadirá al final de la lista de hijos del nodo padre especificado.

+ +

Si el hijo proporcionado es un {{domxref("DocumentFragment")}}, el contenido completo del DocumentFragment se moverá a la lista de hijos del nodo padre indicado.

+ +

Sintaxis

+ +
var insertedNode = parentNode.insertBefore(newNode, referenceNode);
+
+ + + +

Si referenceNode es null, el newNode se insertará al final de la lista de nodos hijos.

+ +
+

referenceNode no es un parámetro opcional -- debes pasar explícitamente un Node o null. No proporcionándolo o pasando valores no válidos podría provocar un comportamiento distinto en diferentes versiones de navegadores.

+
+ +

Valor devuelto

+ +

El valor devuelto es el hijo añadido excepto cuando newNode es un {{domxref("DocumentFragment")}}, en cuyo caso se devuelve un {{domxref("DocumentFragment")}}.

+ +

Ejemplo

+ +

Ejemplo 1

+ +
<div id="parentElement">
+   <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crear el nodo a insertar
+var newNode = document.createElement("span");
+
+// Obtener una referencia al nodo padre
+var parentDiv = document.getElementById("childElement").parentNode;
+
+// Comienzo del test [ 1 ] : Existe un childElement --> Todo funciona correctamente
+var sp2 = document.getElementById("childElement");
+parentDiv.insertBefore(newNode, sp2);
+// Fin del test [ 1 ]
+
+// Comienzo del test [ 2 ] : childElement no es del tipo undefined
+var sp2 = undefined; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
+// Fin del test [ 2 ]
+
+// Comienzo del test [ 3 ] : childElement es de Tipo "undefined" ( string )
+var sp2 = "undefined"; // No existe un nodo con id "childElement"
+parentDiv.insertBefore(newNode, sp2); // Genera "Type Error: Invalid Argument"
+// Fin del test [ 3 ]
+</script>
+
+ +

Ejemplo 2

+ +
<div id="parentElement">
+  <span id="childElement">foo bar</span>
+</div>
+
+<script>
+// Crea un nuevo, elemento <span>
+var sp1 = document.createElement("span");
+
+// Obtener una referencia al elemento, antes de donde queremos insertar el elemento
+var sp2 = document.getElementById("childElement");
+// Obtener una referencia al nodo padre
+var parentDiv = sp2.parentNode;
+
+// Inserta un nuevo elemento en el DOM antes de sp2
+parentDiv.insertBefore(sp1, sp2);
+</script>
+
+ +

No existe el método insertAfter().  Puede ser emulado mediante la combinación del método con {{domxref("Node.nextSibling()")}}.

+ +

En el ejemplo anterior, sp1 podría insertarse después de sp2 usando:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+ +

Si sp2 no tiene ningún hermano depués de él, entonces debe ser el último hijo — sp2.nextSibling devuelve null, y sp1 se inserta al final de la lista de nodos hijos (inmediatamente después de sp2).

+ +

Ejemplo 3

+ +

Inserta un elemento antes del primer elemento hijo, utilizando la propiedad firstChild.

+ +
// Obtener una referencia al elemento en el que se quiere insertar un nuevo nodo
+var parentElement = document.getElementById('parentElement');
+// Obtener una referencia al primer hijo
+var theFirstChild = parentElement.firstChild;
+
+// Crear un nuevo elemento
+var newElement = document.createElement("div");
+
+// Insertar el nuevo elemento antes que el primer hijo
+parentElement.insertBefore(newElement, theFirstChild);
+
+ +

Cuando el elemento no tiene ub primer hijo, entonces firstChild es null. Aun así, el elemento se añade al padre después del último hijo. Puesto que el elemento padre no tenía primer hijo, tampoco tiene último hijo. Por tanto, el nuevo elemento es el único elemento después de ser insertado.

+ +

Compatibilidad en navegadores

+ +

{{Compat("api.Node.insertBefore")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM WHATWG')}}Corrige errores en el algoritmo de inserción
{{SpecName('DOM4','#dom-node-insertbefore','Node.insertBefore')}}{{Spec2('DOM4')}}Describe el algoritmo con mayor detalle
{{SpecName('DOM3 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM3 Core')}}Sin cambios notables
{{SpecName('DOM2 Core','core.html#ID-952280727','Node.insertBefore')}}{{Spec2('DOM2 Core')}}Sin cambios notables
{{SpecName('DOM1','level-one-core.html#method-insertBefore','Node.insertBefore')}}{{Spec2('DOM1')}}Introducido
+ +

Ver también

+ + diff --git a/files/es/web/api/node/nodoprincipal/index.html b/files/es/web/api/node/nodoprincipal/index.html deleted file mode 100644 index f6faf58631..0000000000 --- a/files/es/web/api/node/nodoprincipal/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Nodo.nodoPrincipal -slug: Web/API/Node/nodoPrincipal -tags: - - API - - DOM - - Gecko - - Propiedad -translation_of: Web/API/Node -translation_of_original: Web/API/Node/nodePrincipal ---- -
-
{{APIRef("DOM")}}
-{{Non-standard_header}} - -

La propiedad de solo loctura de Nodo.nodePrincipal devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.

- -

{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}

- -

Sintaxis

- -
principalObj = element.nodePrincipal
-
- -

Notas

- -

Esta propiedad es de solo lectura; Si intentamos editarla nos lanzará una excepción. Además, esta propiedad tan solo debería ser accesible desde código privilegiado

- -

Especificación

- -

No hay especificaciones.

-
- -

 

diff --git a/files/es/web/api/node/parentelement/index.html b/files/es/web/api/node/parentelement/index.html new file mode 100644 index 0000000000..2a2e947a8d --- /dev/null +++ b/files/es/web/api/node/parentelement/index.html @@ -0,0 +1,46 @@ +--- +title: Node.parentElement +slug: Web/API/Node/elementoPadre +tags: + - API + - DOM + - NecesitaCompatiblidadNavegador + - Nodo + - Propiedad +translation_of: Web/API/Node/parentElement +--- +
+
{{APIRef("DOM")}}
+
+ +

La propiedad de sólo lectura de Nodo.parentElement devuelve el nodo padre del DOM {{domxref("Element")}}, o null, si el nodo no tiene padre o si el padre no es un {{domxref("Element")}} DOM .

+ +

Sintaxis

+ +
elementoPadre = node.parentElement
+ +

El elementoPadre es el padre del nodo actual. Esto es siempre un objecto {{domxref("Element")}} DOM, o null.

+ +

Ejemplo

+ +
if (node.parentElement) {
+    node.parentElement.style.color = "red";
+}
+ +

Compatibilidad en navegadores

+ +

En algunos navegadores, la propiedad elementoPadre es solo definida en nodos que ellos mismos son {{domxref("Element")}}. En particular, esto no está definido en nodos de texto.

+ +

{{Compat("api.Node.parentElement")}}

+ +

Especificación

+ + + +

Ver también

+ + diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html deleted file mode 100644 index 8220534f63..0000000000 --- a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html +++ /dev/null @@ -1,294 +0,0 @@ ---- -title: Usando la API de Notificaciones -slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones -tags: - - API - - Notificaciones - - Tutorial -translation_of: Web/API/Notifications_API/Using_the_Notifications_API ---- -

{{APIRef("Web Notifications")}}

- -

La API de Notificaciones permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.

- -

{{AvailableInWorkers}}

- -

Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.

- -

- -

El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.

- -

Ejemplos

- -
-
-

Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en Slack.

- -

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

- -
    -
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • -
  • Emogotchi: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • -
-
- -
-

.

-
-
- -

Pidiendo permiso

- -

Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.

- -

Comprobando el permiso actual

- -

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

- -
-
default
-
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
-
granted
-
El usuario ha permitido las notificaciones de la app.
-
denied
-
El usuario ha denegado las notificaciones de la app.
-
- -

Obteniendo permiso

- -

Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

- -
Notification.requestPermission().then(function(result) {
-  console.log(result);
-});
- -

Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:

- -
Notification.requestPermission();
- -

La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo else ... if abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver To-do List Notifications):

- -
function notifyMe() {
-  // Comprobamos si el navegador soporta las notificaciones
-  if (!("Notification" in window)) {
-    alert("Este navegador no soporta las notificaciones del sistema");
-  }
-
-  // Comprobamos si ya nos habían dado permiso
-  else if (Notification.permission === "granted") {
-    // Si esta correcto lanzamos la notificación
-    var notification = new Notification("Holiwis :D");
-  }
-
-  // Si no, tendremos que pedir permiso al usuario
-  else if (Notification.permission !== 'denied') {
-    Notification.requestPermission(function (permission) {
-      // Si el usuario acepta, lanzamos la notificación
-      if (permission === "granted") {
-        var notification = new Notification("Gracias majo!");
-      }
-    });
-  }
-
-  // Finalmente, si el usuario te ha denegado el permiso y
-  // quieres ser respetuoso no hay necesidad molestar más.
-}
- -
-

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

-
- -

Permisos en Firefox OS manifest

- -

Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

- -
"permissions": {
-  "desktop-notification": {
-    "description": "Needed for creating system notifications."
-  }
-},
-"messages": [{"notification": "path/to/your/index.html"}]
-
-
- -
-

Nota: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.

-
- -

Creando una notificación

- -

Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.

- -

Por ejemplo, en el Ejemplo de Emogotchi tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:

- -
function spawnNotification(theBody,theIcon,theTitle) {
-  var options = {
-      body: theBody,
-      icon: theIcon
-  }
-  var n = new Notification(theTitle,options);
-  setTimeout(n.close.bind(n), 5000);
-}
-
-function randomNotification() {
-  var randomQuote = quoteChooser();
-  var options = {
-      body: randomQuote,
-      icon: 'img/sad_head.png',
-  }
-
-  var n = new Notification('Emogotchi says',options);
-  setTimeout(n.close.bind(n), 5000);
-}
- -

Cerrando las notificaciones

- -

Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de bind() para asegurarnos de que la función close() está asociada a la notificación.

- -
setTimeout(n.close.bind(n), 5000);
-
- -
-

Nota: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".

-
- -

Eventos de Notificación

- -

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

- -
-
{{event("click")}}
-
Lanzado cuando el usuario hace click en la notificación.
-
{{event("error")}}
-
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
-
- -

Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.

- -

También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:

- -
-
{{event("close")}}
-
Lanzado cuándo la notificación se cierra.
-
{{event("show")}}
-
Lanzado cuándo la notificación se muestra al usuario.
-
- -

Reemplazando notificaciones existentes

- -

Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.

- -

Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.

- -

Ejemplo de etiquta

- -

Teniendo el siguiente código HTML:

- -
<button>Notifícame!</button>
- -

Es posible controlar múltiples notificaciones de la siguiente forma:

- -
window.addEventListener('load', function () {
-  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
-  // Si no lo tenemos, lo pedimos
-  if (window.Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
-
-  var button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // Si el usuario ha dado permiso
-    // le intentamos enviar 10 notificaciones
-    if (window.Notification && Notification.permission === "granted") {
-      var i = 0;
-      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
-      var interval = window.setInterval(function () {
-        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
-        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
-        if (i++ == 9) {
-          window.clearInterval(interval);
-        }
-      }, 200);
-    }
-
-    // Si el usuario no ha dicho si quiere notificaciones
-    // Nota: en Chrome no estamos seguros de si la propiedad permission
-    // esta asignada, por lo que es inseguro comprobar el valor "default".
-    else if (window.Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        // Si el usuario acepta
-        if (status === "granted") {
-          var i = 0;
-          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
-          var interval = window.setInterval(function () {
-          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
-            if (i++ == 9) {
-              window.clearInterval(interval);
-            }
-          }, 200);
-        }
-
-        // Otherwise, we can fallback to a regular modal alert
-        else {
-          alert("Hi!");
-        }
-      });
-    }
-
-    // If the user refuses to get notified
-    else {
-      // We can fallback to a regular modal alert
-      alert("Hi!");
-    }
-  });
-});
- -

Comprueba el ejemplo en directo abajo:

- -

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

- -

Receiving notification of clicks on app notifications

- -

When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:

- -
    -
  1. A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.
    2. -
  2. A system message otherwise.
    3. -
- -

See this code snippet for an example of how to deal with this.

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
- -

Compatibilidad de navegadores

- -

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

- -

Ver también

- - diff --git a/files/es/web/api/notifications_api/using_the_notifications_api/index.html b/files/es/web/api/notifications_api/using_the_notifications_api/index.html new file mode 100644 index 0000000000..8220534f63 --- /dev/null +++ b/files/es/web/api/notifications_api/using_the_notifications_api/index.html @@ -0,0 +1,294 @@ +--- +title: Usando la API de Notificaciones +slug: Web/API/Notifications_API/Usando_la_API_de_Notificaciones +tags: + - API + - Notificaciones + - Tutorial +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}

+ +

La API de Notificaciones permite a una página web enviar notificaciones que se mostrarán fuera de la web al nivel del sistema. Esto permite a las aplicaciones web enviar información al usuario aunque estas estén de fondo.

+ +

{{AvailableInWorkers}}

+ +

Para comenzar, tenemos que saber qué son las notificaciones y cómo se muestran. En la imagen de abajo se puede ver un ejemplo de notificaciones en android.

+ +

+ +

El sistema de notificaciones variará según el navegador y la plataforma en la que estemos, pero esto no va a suponer ningún problema. La API de notificaciones está escrita de manera que sea compatible con la gran mayoría de sistemas.

+ +

Ejemplos

+ +
+
+

Un ejemplo claro de uso de notificaciones web puede ser un mail basado en web o una aplicación IRC que nos notificará cada vez que nos llegue un nuevo mensaje, aunque estemos fuera de la aplicación. Un ejemplo de esto lo podemos ver en Slack.

+ +

Hemos escrito un par de ejemplos del mundo real para dar una idea más clara de cómo podemos usar las notificaciones web:

+ +
    +
  • Lista de pendientes: Esto es una app sencilla que almacena las tareas pendientes localmente usando IndexedDB y avisa al usuario cuándo hay que realizar las tareas mediante notificaciones. Descarga el código, o echa un vistazo al ejemplo en tiempo real.
    • +
  • Emogotchi: Una parodia absurda de Tamagotchi, en la que tienes que mantener a tu Emo miserable o perderás el juego. Esto usa las notificaciones del sistema para indicarte cómo lo estás haciendo y para quejarse de ti, TODO EL RATO. Descarga el código de Emogotchi, o echa un vistazo a la versión en tiempo real.
    • +
+
+ +
+

.

+
+
+ +

Pidiendo permiso

+ +

Antes de que una app pueda lanzar una notificación, el usuario tiene que darle permiso para ello. Esto es un requisito común cuando una API intenta interactuar con algo fuera de una página web — al menos una vez, el usuario tendrá que permitir a la aplicación mostrar notificaciones, de esta forma, el usuario decide qué aplicaciones le pueden mostrar notificaciones y cuáles no.

+ +

Comprobando el permiso actual

+ +

Puedes comprobar si ya tienes permiso comprobando la propiedad {{domxref("Notification.permission")}} de solo lectura. Esta puede tener uno de los siguientes valores:

+ +
+
default
+
No se le ha pedido permiso al usuario aún, por lo que la app no tiene permisos.
+
granted
+
El usuario ha permitido las notificaciones de la app.
+
denied
+
El usuario ha denegado las notificaciones de la app.
+
+ +

Obteniendo permiso

+ +

Si la aplicación aún no tiene permiso para mostrar notificaciones, tendremos que hacer uso de {{domxref("Notification.requestPermission()")}} para pedir permiso al usuario. En su manera más simple, tal y como se usa en la Demo de Emogotchi (código fuente), solo tenemos que incluir lo siguiente:

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

Esto usa la versión promise del método, que está soportada en las versiones recientes (p.ej. Firefox 47). Si quieres soportar versiones más antiguas tendrás que usar la versión de callback, que es la siguiente:

+ +
Notification.requestPermission();
+ +

La versión de callback acepta de forma opcional una función callback que será ejecutada cuando el usuario responda a si quiere notificaciones o no (tal y como se ve en el segundo else ... if abajo). Por lo general, pedirás permiso para mostrar notificaciones una vez que hayas inicializado la app, y antes de lanzar una notificación. Si quieres ser muy cuidadoso puedes usar lo siguiente (ver To-do List Notifications):

+ +
function notifyMe() {
+  // Comprobamos si el navegador soporta las notificaciones
+  if (!("Notification" in window)) {
+    alert("Este navegador no soporta las notificaciones del sistema");
+  }
+
+  // Comprobamos si ya nos habían dado permiso
+  else if (Notification.permission === "granted") {
+    // Si esta correcto lanzamos la notificación
+    var notification = new Notification("Holiwis :D");
+  }
+
+  // Si no, tendremos que pedir permiso al usuario
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // Si el usuario acepta, lanzamos la notificación
+      if (permission === "granted") {
+        var notification = new Notification("Gracias majo!");
+      }
+    });
+  }
+
+  // Finalmente, si el usuario te ha denegado el permiso y
+  // quieres ser respetuoso no hay necesidad molestar más.
+}
+ +
+

Nota: Antes de la versión 37, Chrome no te deja llamar a {{domxref("Notification.requestPermission()")}} en manejador de eventos load (ver problema 274284).

+
+ +

Permisos en Firefox OS manifest

+ +

Ten en cuenta que mientras la API de Notificaciones no esté {{Glossary("privileged")}} o {{Glossary("certified")}}, deberías seguir inculyendo una entrada en tu archivo manifest.webapp cuando vayas a usarlo en una app en Firefox OS:

+ +
"permissions": {
+  "desktop-notification": {
+    "description": "Needed for creating system notifications."
+  }
+},
+"messages": [{"notification": "path/to/your/index.html"}]
+
+
+ +
+

Nota: Cuándo una aplicación es instalada, no deberías de necesitar {{anch("Getting permission","explicitly request permission")}}, pero vas a seguir necesitando los permisos y las entradas de texto de arriba para poder lanzar las notificaciones.

+
+ +

Creando una notificación

+ +

Crear una notificación es fácil, simplemente usa el constructor {{domxref("Notification")}}. Este constructor espera un título que mostrar en la notificación y otras opciones para mejorar la notificación, como un {{domxref("Notification.icon","icon")}} o un texto {{domxref("Notification.body","body")}}.

+ +

Por ejemplo, en el Ejemplo de Emogotchi tenemos dos funciones que pueden ser llamadas cuando hay que lanzar una notificación; el uso de una u otra depende de si queremos establecer el contenido de la notificación, o si queremos una notificación con contenido aleatorio:

+ +
function spawnNotification(theBody,theIcon,theTitle) {
+  var options = {
+      body: theBody,
+      icon: theIcon
+  }
+  var n = new Notification(theTitle,options);
+  setTimeout(n.close.bind(n), 5000);
+}
+
+function randomNotification() {
+  var randomQuote = quoteChooser();
+  var options = {
+      body: randomQuote,
+      icon: 'img/sad_head.png',
+  }
+
+  var n = new Notification('Emogotchi says',options);
+  setTimeout(n.close.bind(n), 5000);
+}
+ +

Cerrando las notificaciones

+ +

Firefox y Safari cierran las notificaciones automáticamente tras cierto tiempo (unos 4 segundos). Esto también puede suceder a nivel de sistema operativo (en Windows duran 7 segundos por defecto). En cambio, en algunos navegadores no se cierran automáticamente, como en Chrome, por ejemplo. Para asegurarnos de que las notificaciones se cierran en todos los navegadores, al final de las funciones de arriba, llamamos a la función {domxref("Notification.close")}}  dentro de {{domxref("WindowTimers.setTimeout","setTimeout()")}} para cerrar la notificación tras 5 segundos. Date cuenta también del uso que hacemos de bind() para asegurarnos de que la función close() está asociada a la notificación.

+ +
setTimeout(n.close.bind(n), 5000);
+
+ +
+

Nota: Cuándo recibes un evento "close", no hay ninguna garantía de que haya sido el usuario quién ha cerrado la notificación. Esto coincide con la especificación que dice: "Cuando una notificación es cerrada, sea por la misma plataforma o por el usuario, se deben lanzar los pasos de cierre para la misma".

+
+ +

Eventos de Notificación

+ +

Las especificaciones de la API de notificaciones listan cuatro eventos que pueden ser lanzados en la instancia {{domxref("Notification")}}:

+ +
+
{{event("click")}}
+
Lanzado cuando el usuario hace click en la notificación.
+
{{event("error")}}
+
Lanzado cuando algo falla en la notificación; habitualmente es porque la notificación no se ha podido mostrar por algún motivo.
+
+ +

Estos eventos se pueden monitorizar usando los manejadores {{domxref("Notification.onclick","onclick")}} y {{domxref("Notification.onerror","onerror")}}. Como {{domxref("Notification")}} también hereda de {{domxref("EventTarget")}}, es posible usar el método {{domxref("EventTarget.addEventListener","addEventListener()")}} en ella.

+ +

También hay otros dos eventos que estaban listados en la especificación, pero que han sido eliminados recientemente. Estos puede que sigan funcionando en los navegadores por ahora, pero deberían tratarse como obsoletos y evitar su uso:

+ +
+
{{event("close")}}
+
Lanzado cuándo la notificación se cierra.
+
{{event("show")}}
+
Lanzado cuándo la notificación se muestra al usuario.
+
+ +

Reemplazando notificaciones existentes

+ +

Normalmente los usuario no quieren recibir muchas notificaciones en poco tiempo — por ejemplo, una aplicación de mensajería que te notifica cada mensaje que te llegue, y te llegan un montón. Para evitar el spam de notificaciones, se puede modificar la cola de notificaciones, reemplazando una o varias notificaciones pendientes, por una nueva notificación.

+ +

Para hacer esto, se puede añadir una etiqueta a cualquier nueva notificación. Si ya hay una notificación con la misma etiqueta y aún no se ha mostrado, la nueva reemplazará a la anterior. Si la notificación con la misma etiqueta ya ha sido mostrada, se cerrará la anterior y se mostrará la nueva.

+ +

Ejemplo de etiquta

+ +

Teniendo el siguiente código HTML:

+ +
<button>Notifícame!</button>
+ +

Es posible controlar múltiples notificaciones de la siguiente forma:

+ +
window.addEventListener('load', function () {
+  // Primero, comprobamos si tenemos permiso para lanzar notificaciones
+  // Si no lo tenemos, lo pedimos
+  if (window.Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // Si el usuario ha dado permiso
+    // le intentamos enviar 10 notificaciones
+    if (window.Notification && Notification.permission === "granted") {
+      var i = 0;
+      // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+      var interval = window.setInterval(function () {
+        // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9"
+        var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // Si el usuario no ha dicho si quiere notificaciones
+    // Nota: en Chrome no estamos seguros de si la propiedad permission
+    // esta asignada, por lo que es inseguro comprobar el valor "default".
+    else if (window.Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // Si el usuario acepta
+        if (status === "granted") {
+          var i = 0;
+          // Usamos un inteval porque algunos navegadores (Firefox incluído) bloquean las notificaciones si se envían demasiadas en cierto tiempo.
+          var interval = window.setInterval(function () {
+          // Gracias a la etiqueta, deberíamos de ver sólo la notificación "Holiws! 9" var n = new Notification("Holiwis! " + i, {tag: 'soManyNotification'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // Otherwise, we can fallback to a regular modal alert
+        else {
+          alert("Hi!");
+        }
+      });
+    }
+
+    // If the user refuses to get notified
+    else {
+      // We can fallback to a regular modal alert
+      alert("Hi!");
+    }
+  });
+});
+ +

Comprueba el ejemplo en directo abajo:

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

Receiving notification of clicks on app notifications

+ +

When a user clicks on a notification generated by an app, you will be notified of this event in two different ways, depending on the circumstance:

+ +
    +
  1. A click event if your app has not closed or been put in the background between the time you create the notification and the time the user clicks on it.
    2. +
  2. A system message otherwise.
    3. +
+ +

See this code snippet for an example of how to deal with this.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Living standard
+ +

Compatibilidad de navegadores

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

Ver también

+ + diff --git a/files/es/web/api/pointer_lock_api/index.html b/files/es/web/api/pointer_lock_api/index.html new file mode 100644 index 0000000000..13a27d6d48 --- /dev/null +++ b/files/es/web/api/pointer_lock_api/index.html @@ -0,0 +1,284 @@ +--- +title: API Pointer Lock +slug: WebAPI/Pointer_Lock +translation_of: Web/API/Pointer_Lock_API +--- +

 

+ +

Pointer Lock (antes llamado Bloqueo del Mouse)  proporciona métodos de entrada basados ​​en el movimiento del ratón a traves del tiempo (es decir, deltas), no sólo la posición absoluta del cursor del mouse. Te da acceso al movimiento puro del mouse, bloquea el objetivo de los eventos del mouse a un solo elemento, elimina límites en cuanto a  que tan lejos puedes mover el mouse en una sola dirección, y quita el cursor de la vista.

+ +

Esta API es útil para aplicaciones que requieren bastantes acciones para controlar los movimientos del mouse, rotar objetos y cambiar las entradas. Es especialmente importante para aplicaciones altamente visuales, tales como los que utilizan la perspectiva en primera persona, así como vistas en 3D y modelado.

+ +

Por ejemplo, puedes crear aplicaciones que permiten a los usuarios controlar el ángulo de visión con sólo mover el mouse sin ningún clic, permitiendo liberar los clics para otras acciones. Este tipo de entrada del mouse es muy útil para ver mapas, imágenes de satélite, o escenas en primera persona (como en un juego o un vídeo embebido).

+ +

Pointer Lock te permite acceder a los eventos del mouse incluso cuando el cursor pasa por el límite de la pantalla del navegador. Por ejemplo, los usuarios pueden seguir girando o manipular un modelo 3D moviendo el mouse sin fin. Sin Pointer Lock, la rotación o la manipulación se detiene en el momento en que el cursor alcanza el borde de la pantalla del navegador. Los jugadores se verán particularmente encantados con esta característica, ya que anciosamente pueden hacer clic en los botones y arrastrar el cursor del mouse de un lado a otro sin tener que preocuparse por salir de la zona de juego ni de cliquear accidentalmente otra aplicación que podría llevar al mouse fuera del juego. Una tragedia!

+ +

Conceptos Básicos

+ +

Pointer Lock está relacionado con la mouse capture. mouse capture proporciona la entrega continua de eventos a un elemento de destino, mientras que el mouse se arrastra, pero se detiene cuando se suelta el clic. Pointer Lock es diferente de mouse capture en las siguientes maneras:

+ + + +

Ejemplo

+ +

El siguiente es un ejemplo de cómo se puede configurar Pointer Lock en su página web.

+ +
<button onclick="lockPointer();">Lock it!</button>
+<div id="pointer-lock-element"></div>
+<script>
+// Nota: Al momento de escribir esto, sólo Mozilla y WebKit apoyan Pointer Lock.
+
+// El elemento que servirá para pantalla completa y pointer lock.
+var elem;
+
+document.addEventListener("mousemove", function(e) {
+  var movementX = e.movementX       ||
+                  e.mozMovementX    ||
+                  e.webkitMovementX ||
+                  0,
+      movementY = e.movementY       ||
+                  e.mozMovementY    ||
+                  e.webkitMovementY ||
+                  0;
+
+  // Imprime los valores delta del movimiento del mouse
+  console.log("movementX=" + movementX, "movementY=" + movementY);
+}, false);
+
+function fullscreenChange() {
+  if (document.webkitFullscreenElement === elem ||
+      document.mozFullscreenElement === elem ||
+      document.mozFullScreenElement === elem) { // Older API upper case 'S'.
+    // El elemento esta en pantalla completa, ahora podemos hacer el request de pointer lock
+    elem.requestPointerLock = elem.requestPointerLock    ||
+                              elem.mozRequestPointerLock ||
+                              elem.webkitRequestPointerLock;
+    elem.requestPointerLock();
+  }
+}
+
+document.addEventListener('fullscreenchange', fullscreenChange, false);
+document.addEventListener('mozfullscreenchange', fullscreenChange, false);
+document.addEventListener('webkitfullscreenchange', fullscreenChange, false);
+
+function pointerLockChange() {
+  if (document.mozPointerLockElement === elem ||
+      document.webkitPointerLockElement === elem) {
+    console.log("Pointer Lock was successful.");
+  } else {
+    console.log("Pointer Lock was lost.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+function pointerLockError() {
+  console.log("Error while locking pointer.");
+}
+
+document.addEventListener('pointerlockerror', pointerLockError, false);
+document.addEventListener('mozpointerlockerror', pointerLockError, false);
+document.addEventListener('webkitpointerlockerror', pointerLockError, false);
+
+function lockPointer() {
+  elem = document.getElementById("pointer-lock-element");
+  // Start by going fullscreen with the element.  Current implementations
+  // require the element to be in fullscreen before requesting pointer
+  // lock--something that will likely change in the future.
+  elem.requestFullscreen = elem.requestFullscreen    ||
+                           elem.mozRequestFullscreen ||
+                           elem.mozRequestFullScreen || // Older API upper case 'S'.
+                           elem.webkitRequestFullscreen;
+  elem.requestFullscreen();
+}
+</script>
+
+ +

Propiedades/Métodos

+ +

La API de bloque de puntero ,similar a la API de Fullscreen,extiende del elemento DOM agregando un nuevo método, requestPointerLock, la cual es dependiente del vendedor(del navegador). Puede escribirse como:

+ +
element.webkitRequestPointerLock(); // para Chrome
+
+element.mozRequestPointerLock(); // para Firefox
+
+ +

Current implementations of requestPointerLock are tightly bound to requestFullScreen and the Fullscreen API. Before an element can be pointer locked, it must first enter the fullscreen state. As demonstrated above, the process of locking the pointer is asynchronous, with events (pointerlockchange, pointerlockerror) indicating the success or failure of the request. This matches how the Fullscreen API works, with its requestFullScreen method and fullscreenchange and fullscreenerror events.

+ +

The Pointer lock API also extends the document interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named pointerLockElement, which is vendor-prefixed for now. The new method on document is exitPointerLock and, as the name implies, it is used to exit Pointer lock.

+ +

The pointerLockElement property is useful for determining if any element is currently pointer locked (e.g., for doing a boolean check) and also for obtaining a reference to the locked element, if any. Here is an example of both uses:

+ +
document.pointerLockElement = document.pointerLockElement    ||
+                              document.mozPointerLockElement ||
+                              document.webkitPointerLockElement;
+
+// 1) Used as a boolean check--are we pointer locked?
+if (!!document.pointerLockElement) {
+  // pointer is locked
+} else {
+  // pointer is not locked
+}
+
+// 2) Used to access the pointer locked element
+if (document.pointerLockElement === someElement) {
+  // someElement is currently pointer locked
+}
+
+ +

The document's exitPointerLock method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the pointerlockchange and pointerlockerror events:

+ +
document.exitPointerLock = document.exitPointerLock    ||
+                           document.mozExitPointerLock ||
+                           document.webkitExitPointerLock;
+
+function pointerLockChange() {
+  document.pointerLockElement = document.pointerLockElement    ||
+                                document.mozPointerLockElement ||
+                                document.webkitPointerLockElement;
+
+  if (!!document.pointerLockElement) {
+    console.log("Still locked.");
+  } else {
+    console.log("Exited lock.");
+  }
+}
+
+document.addEventListener('pointerlockchange', pointerLockChange, false);
+document.addEventListener('mozpointerlockchange', pointerLockChange, false);
+document.addEventListener('webkitpointerlockchange', pointerLockChange, false);
+
+// Attempt to unlock
+document.exitPointerLock();
+
+ +

pointerlockchange event

+ +

When the Pointer lock state changes—for example, when calling requestPointerLock, exitPointerLock, the user pressing the ESC key, etc.—the pointerlockchange event is dispatched to the document. This is a simple event and contains no extra data.

+ +
This event is currently prefixed as mozpointerlockchange in Firefox and webkitpointerlockchange in Chrome. 
+ +

pointerlockerror event

+ +

When there is an error caused by calling requestPointerLock or exitPointerLock, the pointerlockerror event is dispatched to the document. This is a simple event and contains no extra data.

+ +
This event is currently prefixed as mozpointerlockerror in Firefox and webkitpointerlockerror in Chrome. 
+ +

Extensions to mouse events

+ +

The Pointer lock API extends the normal MouseEvent with movement attributes.

+ +
partial interface MouseEvent {
+    readonly attribute long movementX;
+    readonly attribute long movementY;
+};
+ +
The movement attributes are currently prefixed as .mozMovementX and .mozMovementY in Firefox, and.webkitMovementX and .webkitMovementY in Chrome.
+ +

Two new parameters to mouse events—movementX and movementY—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of MouseEvent properties, screenX and screenY, which are stored in two subsequent mousemove events, eNow and ePrevious. In other words, the Pointer lock parameter movementX = eNow.screenX - ePrevious.screenX.

+ +

Locked state

+ +

When Pointer lock is enabled, the standard MouseEvent properties clientX, clientY, screenX, and screenY are held constant, as if the mouse is not moving. The movementX and movementY properties continue to provide the mouse's change in position. There is no limit to movementX and movementY values if the mouse is continuously moving in a single direction. The concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge.

+ +

Unlocked state

+ +

The parameters movementX and movementY are valid regardless of the mouse lock state, and are available even when unlocked for convenience.

+ +

When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, movementX and movementY could be set to zero.

+ +

iframe limitations

+ +

Pointer lock can only lock one iframe at a time. If you lock one iframe, you cannot try to lock another iframe and transfer the target to it; Pointer lock will error out. To avoid this limitation, first unlock the locked iframe, and then lock the other.

+ +

While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <iframe sandbox="allow-pointer-lock">, is expected to appear in Chrome soon.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock')}}{{Spec2('Pointer Lock')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

Targeting 23{{ property_prefix("webkit") }}*

+ +

See CR/72574

+ 		+

{{ CompatGeckoDesktop("14.0") }}

+ +

{{bug("633602") }}

+ 		{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +

* Requires the feature be enabled in about:flags or Chrome started with the --enable-pointer-lock flag.

+ +

See also

+ +

MouseEvent

diff --git a/files/es/web/api/push_api/using_the_push_api/index.html b/files/es/web/api/push_api/using_the_push_api/index.html deleted file mode 100644 index 05d101e5fa..0000000000 --- a/files/es/web/api/push_api/using_the_push_api/index.html +++ /dev/null @@ -1,433 +0,0 @@ ---- -title: Usando la API Push -slug: Web/API/Push_API/Using_the_Push_API -translation_of: Web/API/Push_API -translation_of_original: Web/API/Push_API/Using_the_Push_API ---- -

La W3C Push API offers some exciting new functionality for developers to use in web applications: this article provides an introduction to getting Push notifications setup and running, with a simple demo.

- -

La habilidad de enviar mensajes o notificaciones de un servidor a un cliente en cualquier momento —si la aplicación está activa en su sitema o no—es algo que ha sido disfrutado por las plataformas nativas durante algún tiempo, y esta finalmente llega a la web! el soporte para muchos push está ahora disponible en Firefox 43+ y Chrome 42+ en escritorio, esperamos seguir pronto con las plataformas moviles. {{domxref("PushMessageData")}} actualmente solo es soportada experimentalmente en Firefox (44+), y la implementación está sujeta a cambios.

- -
-

Note: Early versions of Firefox OS used a proprietary version of this API called Simple Push. This is being rendered obsolete by the Push API standard.

-
- -

Demo: las bases de una simple app de servidor de chat

- -

La demo que hemos creado proporciona los principios de una simple app de chat. Esta presenta un formulario para que ingreses un identificador de chat y un boton que al presionar se suscriba a los mensajes push.

- -

En este punto, el nombre de los nuevos suscriptores aparecerá en la lista de suscriptores, junto con un campo de texto y un botón de envío para permitir al suscriptor enviar mensajes.

- -

At this point, the new subscriber's name will appear in the subscriber's list, along with a text field and submit button to allow the subscriber to send messages.

- -

- -

Para correr la demo, siga las instrucciones de push-api-demo README. Tenga en cuenta que el componente server-side aún nesecita un poco de trabajo para que funcione en chrome y se ejecute de una manera más rezonable. Pero los aspectos de push pueden ser explicados a fondo; Nos sumergiremos en ella después de revisar las tecnologías en juego.

- -

Visión de la tecnología

- -

Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.

- -

Los mensajes web push hacen parte de la familia tecnológica service workers; en particular, se requiere que un service worker esté activo en la página para recibir mensajes push. el service worker recibe el mensaje push, y acontinuación depende de usted cómo notificar a la página. Usted puede:

- -

Web Push messages are part of the service workers technology family; in particular, a service worker is required to be active on the page for it to receive push messages. The service worker receives the push message, and then it is up to you how to then notify the page. You can:

- - - -

A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.

- -
-

Nota: Usted necesita algún tipo de código que se ejecute en el servidor para manejar el cifrado de punto final/datos y enviar las solicitudes de notificaciones push. En nuestra demostración hemos creado un servidor  quick-and-dirty usando NodeJS.

-
- -

El service worker también tiene que suscribirse al servicio de mensajería psuh. Cada sesión recibe su propio punto final único cuando se suscribe al servicio de mensajería. Este punto final es obtenido desde la propiedad  ({{domxref("PushSubscription.endpoint")}}) en el objeto de suscripción. Este punto final se puede enviar a su servidor y se utiliza para enviar un mensaje al service worker asctivo en esta sesión. Cada navegador tiene su propio servidor de mensajería push para manejar el envío del mensaje push.

- -

Encryption

- -
-

Note: For an interactive walkthrough, try JR Conlin's Web Push Data Encryption Test Page.

-
- -

To send data via a push message, it needs to be encrypted. This requires a public key created using the {{domxref("PushSubscription.getKey()")}} method, which relies upon some complex encryption mechanisms that are run server-side; read Message Encryption for Web Push for more details. As time goes on, libraries will appear to handle key generation and encryption/decryption of push messages; for this demo we used Marco Castelluccio's NodeJS web-push library.

- -
-

Note: There is also another library to handle the encryption with a Node and Python version available, see encrypted-content-encoding.

-
- -

Push workflow summary

- -

To summarize, here is what is needed to implement push messaging. You can find more details about specific parts of the demo code in subsequent sections.

- -
    -
  1. Request permission for web notifications, or anything else you are using that requires permissions.
    2. -
  2. Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.
    3. -
  3. Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.
    4. -
  4. Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that getKey() is currently experimental and Firefox only.)
    5. -
  5. Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use Fetch.
    6. -
  6. If you are using the Channel Messaging API to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send port2 over to the service worker by calling {{domxref("Worker.postMessage()")}} on the service worker, in order to open up the communication channel. You should also set up a listener to respond to messages sent back from the service worker.
    7. -
  7. On the server side, store the endpoint and any other required details so they are available when a push message needs to be sent to a push subscriber (we are using a simple text file, but you could use a database or whatever you like). In a production app, make sure you keep these details hidden, so malicious parties can't steal endpoints and spam subscribers with push messages.
    8. -
  8. To send a push message, you need to send an HTTP POST to the endpoint URL. The request must include a TTL header that limits how long the message should be queued if the user is not online. To include payload data in your request, you must encrypt it (which involves the client public key). In our demo, we are using the web-push module, which handles all the hard work for you.
    9. -
  9. Over in your service worker, set up a push event handler to respond to push messages being received. -
      -
    1. If you want to respond by sending a channel message back to the main context (see Step 6) you need to first get a reference to the port2 we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the onmessage handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the ports property, index 0. Once this is done, you can send a message back to port1, using {{domxref("MessagePort.postMessage()")}}.
      2. -
    2. If you want to respond by firing a system notification, you can do this by calling {{domxref("ServiceWorkerRegistration.showNotification()")}}. Note that in our code we have run this inside an {{domxref("ExtendableEvent.waitUntil()")}} method — this extends the lifetime of the event until after the notification has been fired, so we can make sure everything has happened that we want to happen.
      3. -
    -
    10. -
- -

Construyendo la demo

- -

Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.

- - - -

No hay nada destacalbe sobre el HTML y el CSS para la demo; el HTML inicialmente contiene un simple formulario que permite introducir un udentificador para la sala de chat, un boton que al hacer click se suscribe a las notificaciones push, y dos listas con los suscriptores y los mensajes. Una vez suscrito, aparecerán controles adicionales para permitir al usuario actual escribir mensajes en el chat.

- -

El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.

- - - -

El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.

- -

Variables y configuración inicial

- -

Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:

- -
var isPushEnabled = false;
-var useNotifications = false;
-
-var subBtn = document.querySelector('.subscribe');
-var sendBtn;
-var sendInput;
-
-var controlsBlock = document.querySelector('.controls');
-var subscribersList = document.querySelector('.subscribers ul');
-var messagesList = document.querySelector('.messages ul');
-
-var nameForm = document.querySelector('#form');
-var nameInput = document.querySelector('#name-input');
-nameForm.onsubmit = function(e) {
-  e.preventDefault()
-};
-nameInput.value = 'Bob';
- -

Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.

- -

A continuación, tomamos una referencia al suscrito/no-suscrito {{htmlelement("button")}}, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)

- -

Las siguientes variables toman referencia a los trés elementos principales {{htmlelement("div")}} en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón envíar el mensaje de chat o el mensaje de chat aparezca en la lista de mensajes.)

- -

Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento {{htmlelement("input")}}, damos a la entrada un valor por defecto, y usamos preventDefault() para detener el envío del formulario cuando este es enviado pulsando return.

- -

A continuación, pedimos permiso para enviar las notificaciones web, usando {{domxref("Notification.requestPermission","requestPermission()")}}:

- -
Notification.requestPermission();
- -

Ahora ejecutamos una sección de código cuando se dispara el onload, para empezar el proceso de inicialización de la app cuando se carga pro primera vez. En primer lugar añadimos un detector de eventos de clik al botón  Sucribirse/unsubscribe que ejecuta nuestra funcion unsubscribe() si actualmente estamos suscritos (isPushEnabled is true), y subscribe() de la otra manera:

- -
window.addEventListener('load', function() {
-  subBtn.addEventListener('click', function() {
-    if (isPushEnabled) {
-      unsubscribe();
-    } else {
-      subscribe();
-    }
-  });
- -

A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando {{domxref("ServiceWorkerContainer.register()")}}, y ejecutando nuestra función initialiseState(). Si no es así, entregamos un mensaje de error a la consola.

- -
  // Check that service workers are supported, if so, progressively
-  // enhance and add push messaging support, otherwise continue without it.
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.register('sw.js').then(function(reg) {
-      if(reg.installing) {
-        console.log('Service worker installing');
-      } else if(reg.waiting) {
-        console.log('Service worker installed');
-      } else if(reg.active) {
-        console.log('Service worker active');
-      }
-
-      initialiseState(reg);
-    });
-  } else {
-    console.log('Service workers aren\'t supported in this browser.');
-  }
-});
-
- -

La siguiente cosa en el código es la función initialiseState() — para el codigo completo comentado, mira en initialiseState() source on Github (no lo estamos repitiendo aquí por brevedad.)

- -

initialiseState() primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable  useNotifications a verdadero. A continuación comprueba si dichas notificaciones están permitidas por el usuario y si los mensajes push están soportados, y reacciona deacuerdo a cada uno.

- -

Finalmente, se usa {{domxref("ServiceWorkerContainer.ready()")}} para esperar a que el service worker esté activo y listo para hacer las cosas. Una vez se revuelva el promise, recuperamos nuestra suscripsión para enviar los mensajes push usando la propiedad {{domxref("ServiceWorkerRegistration.pushManager")}}, que devuelve un objeto {{domxref("PushManager")}} cuando llamamos a {{domxref("PushManager.getSubscription()")}}. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (subBtn.disabled = false;), y verificamos que tenemos un objeto suscripsión para trabajar.

- -

Si lo hacemos, entonces ya estamos suscritos. Esto es posible cuando la app no está abierta en el navegador; el service worker aun puede ser activado en segundo plano. si estamos suscritos, actualizamos la UI para mostrar que estamos suscritos por la actualizacion del label en el botón, entonces establecemos isPushEnabled to true, toma el punto final de suscripsión desde {{domxref("PushSubscription.endpoint")}}, genera una public key usando {{domxref("PushSubscription.getKey()")}}, y ejecutando nuestra función updateStatus(), que como verá más adelante se comunica con el servidor.

- -

Como un bonus añadido, configuramos un nuevo {{domxref("MessageChannel")}} usando el constructor {{domxref("MessageChannel.MessageChannel()")}}, toma una referencia al service worker activo usando {{domxref("ServiceworkerRegistration.active")}}, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando {{domxref("Worker.postMessage()")}}. El contexto del navegador recive mensajes en {{domxref("MessageChannel.port1")}}; Cuando esto suceda, ejecutamos la función handleChannelMessage() para decidir que hacer con esos datos (mirar la sección {{anch("Handling channel messages sent from the service worker")}} ).

- -

Subscribing and unsubscribing

- -

Ahora regresamos la atención a las funciones subscribe() y unsubscribe() usadas para subscribe/unsubscribe al servicion de notificaciones push.

- -

In the case of subscription, we again check that our service worker is active and ready by calling {{domxref("ServiceWorkerContainer.ready()")}}. When the promise resolves, we subscribe to the service using {{domxref("PushManager.subscribe()")}}. If the subscription is successful, we get a {{domxref("PushSubscription")}} object, extract the subscription endpoint from this and generate a public key (again, {{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}), and pass them to our updateStatus() function along with the update type (subscribe) to send the necessary details to the server.

- -

We also make the necessary updates to the app state (set isPushEnabled to true) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)

- -

The unsubscribe() function is pretty similar in structure, but it basically does the opposite; the most notable difference is that it gets the current subscription using {{domxref("PushManager.getSubscription()")}}, and when that promise resolves it unsubscribes using {{domxref("PushSubscription.unsubscribe()")}}.

- -

Appropriate error handling is also provided in both functions.  

- -

We only show the subscribe() code below, for brevity; see the full subscribe/unsubscribe code on Github.

- -
function subscribe() {
-  // Disable the button so it can't be changed while
-  // we process the permission request
-
-  subBtn.disabled = true;
-
-  navigator.serviceWorker.ready.then(function(reg) {
-    reg.pushManager.subscribe({userVisibleOnly: true})
-      .then(function(subscription) {
-        // The subscription was successful
-        isPushEnabled = true;
-        subBtn.textContent = 'Unsubscribe from Push Messaging';
-        subBtn.disabled = false;
-
-        // Update status to subscribe current user on server, and to let
-        // other users know this user has subscribed
-        var endpoint = subscription.endpoint;
-        var key = subscription.getKey('p256dh');
-        updateStatus(endpoint,key,'subscribe');
-      })
-      .catch(function(e) {
-        if (Notification.permission === 'denied') {
-          // The user denied the notification permission which
-          // means we failed to subscribe and the user will need
-          // to manually change the notification permission to
-          // subscribe to push messages
-          console.log('Permission for Notifications was denied');
-
-        } else {
-          // A problem occurred with the subscription, this can
-          // often be down to an issue or lack of the gcm_sender_id
-          // and / or gcm_user_visible_only
-          console.log('Unable to subscribe to push.', e);
-          subBtn.disabled = false;
-          subBtn.textContent = 'Subscribe to Push Messaging';
-        }
-      });
-  });
-}
- -

Updating the status in the app and server

- -

The next function in our main JavaScript is updateStatus(), which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.

- -

The function does one of three different things, depending on the value of the statusType parameter passed into it:

- - - -

Again, we have not included the entire function listing for brevity. Examine the full updateStatus() code on Github.

- -

Handling channel messages sent from the service worker

- -

As mentioned earlier, when a channel message is received from the service worker, our handleChannelMessage() function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:

- -
channel.port1.onmessage = function(e) {
-  handleChannelMessage(e.data);
-}
- -

This occurs when the service worker sends a channel message over.

- -

The handleChannelMessage() function looks like this:

- -
function handleChannelMessage(data) {
-  if(data.action === 'subscribe' || data.action === 'init') {
-    var listItem = document.createElement('li');
-    listItem.textContent = data.name;
-    subscribersList.appendChild(listItem);
-  } else if(data.action === 'unsubscribe') {
-    for(i = 0; i < subscribersList.children.length; i++) {
-      if(subscribersList.children[i].textContent === data.name) {
-        subscribersList.children[i].parentNode.removeChild(subscribersList.children[i]);
-      }
-    }
-    nameInput.disabled = false;
-  } else if(data.action === 'chatMsg') {
-    var listItem = document.createElement('li');
-    listItem.textContent = data.name + ": " + data.msg;
-    messagesList.appendChild(listItem);
-    sendInput.value = '';
-  }
-}
- -

What happens here depends on what the action property on the data object is set to:

- - - -
-

Note: We have to pass the data back to the main context before we do DOM updates because service workers don't have access to the DOM. You should be aware of the limitations of service workers before attemping to ue them. Read Using Service Workers for more details.

-
- -

Sending chat messages

- -

When the Send Chat Message button is clicked, the content of the associated text field is sent as a chat message. This is handled by the sendChatMessage() function (again, not shown in full for brevity). This works in a similar way to the different parts of the updateStatus() function (see {{anch("Updating the status in the app and server")}}) — we retrieve an endpoint and public key via a {{domxref("PushSubscription")}} object, which is itself retrieved via {{domxref("ServiceWorkerContainer.ready()")}} and {{domxref("PushManager.subscribe()")}}. These are sent to the server via {{domxref("XMLHttpRequest")}} in a message object, along with the name of the subscribed user, the chat message to send, and a statusType of chatMsg.

- -

The server

- -

As mentioned above, we need a server-side component in our app, to handle storing subscription details, and send out push messages when updates occur. We've hacked together a quick-and-dirty server using NodeJS (server.js), which handles the XHR requests sent by our client-side JavaScript code.

- -

It uses a text file (endpoint.txt) to store subscription details; this file starts out empty. There are four different types of request, marked by the statusType property of the object sent over in the request; these are the same as those understood client-side, and perform the required server actions for that same situation. Here's what each means in the context of the server:

- - - -

A couple more things to note:

- - - -

The service worker

- -

Now let's have a look at the service worker code (sw.js), which responds to the push messages, represented by {{Event("push")}} events. These are handled on the service worker's scope by the ({{domxref("ServiceWorkerGlobalScope.onpush")}}) event handler; its job is to work out what to do in response to each received message. We first convert the received message back into an object by calling {{domxref("PushMessageData.json()")}}. Next, we check what type of push message it is, by looking at the object's action property:

- - - -
self.addEventListener('push', function(event) {
-  var obj = event.data.json();
-
-  if(obj.action === 'subscribe' || obj.action === 'unsubscribe') {
-    fireNotification(obj, event);
-    port.postMessage(obj);
-  } else if(obj.action === 'init' || obj.action === 'chatMsg') {
-    port.postMessage(obj);
-  }
-});
- -

Next, let's look at the fireNotification() function (which is blissfully pretty simple).

- -
function fireNotification(obj, event) {
-  var title = 'Subscription change';
-  var body = obj.name + ' has ' + obj.action + 'd.';
-  var icon = 'push-icon.png';
-  var tag = 'push';
-
-  event.waitUntil(self.registration.showNotification(title, {
-    body: body,
-    icon: icon,
-    tag: tag
-  }));
-}
- -

Here we assemble the assets needed by the notification box: the title, body, and icon. Then we send a notification via the {{domxref("ServiceWorkerRegistration.showNotification()")}} method, providing that information as well as the tag "push", which we can use to identify this notification among any other notifications we might be using. When the notification is successfully sent, it manifests as a system notification dialog on the users computers/devices in whatever style system notifications look like on those systems (the following image shows a Mac OSX system notification.)

- -

- -

Note that we do this from inside an {{domxref("ExtendableEvent.waitUntil()")}} method; this is to make sure the service worker remains active until the notification has been sent. waitUntil() will extend the life cycle of the service worker until everything inside this method has completed.

- -
-

Note: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as Clients.openWindow()) is properly implemented (see {{bug(1203324)}} for more details.)

-
- -

Handling premature subscription expiration

- -

Sometimes push subscriptions expire prematurely, without {{domxref("PushSubscription.unsubscribe()")}} being called. This can happen when the server gets overloaded, or if you are offline for a long time, for example.  This is highly server-dependent, so the exact behavior is difficult to predict. In any case, you can handle this problem by watching for the {{Event("pushsubscriptionchange")}} event, which you can listen for by providing a {{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}} event handler; this event is fired only in this specific case.

- -
self.addEventListener('pushsubscriptionchange', function() {
-  // do something, usually resubscribe to push and
-  // send the new subscription details back to the
-  // server via XHR or Fetch
-});
- -

Note that we don't cover this case in our demo, as a subscription ending is not a big deal for a simple chat server. But for a more complex example you'd probably want to resubscribe the user.

- -

Extra steps for Chrome support

- -

To get the app working on Chrome, we need a few extra steps, as Chrome currently relies on Google's Cloud Messaging service to work.

- -

Setting up Google Cloud Messaging

- -

To get this set up, follow these steps:

- -
    -
  1. Navigate to the Google Developers Console  and set up a new project.
    2. -
  2. Go to your project's homepage (ours is at https://console.developers.google.com/project/push-project-978, for example), then -
      -
    1. Select the Enable Google APIs for use in your apps option.
      2. -
    2. In the next screen, click Cloud Messaging for Android under the Mobile APIs section.
      3. -
    3. Click the Enable API button.
      4. -
    -
    3. -
  3. Now you need to make a note of your project number and API key because you'll need them later. To find them: -
      -
    1. Project number: click Home on the left; the project number is clearly marked at the top of your project's home page.
      2. -
    2. API key: click Credentials on the left hand menu; the API key can be found on that screen.
      3. -
    -
    4. -
- -

manifest.json

- -

You need to include a Google app-style manifest.json file in your app, which references the project number you made a note of earlier in the gcm_sender_id parameter. Here is our simple example manifest.json:

- -
{
-  "name": "Push Demo",
-  "short_name": "Push Demo",
-  "icons": [{
-        "src": "push-icon.png",
-        "sizes": "111x111",
-        "type": "image/png"
-      }],
-  "start_url": "/index.html",
-  "display": "standalone",
-  "gcm_sender_id": "224273183921"
-}
- -

You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:

- -
<link rel="manifest" href="manifest.json">
- -

userVisibleOnly

- -

Chrome requires you to set the userVisibleOnly parameter to true when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be seen in action in our subscribe() function.

- -

See also

- - - -
-

Note: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in Push Notifications on the Open Web. Thanks for the awesome work, Matt!

-
diff --git a/files/es/web/api/randomsource/index.html b/files/es/web/api/randomsource/index.html deleted file mode 100644 index 76e8d7fdc2..0000000000 --- a/files/es/web/api/randomsource/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: RandomSource -slug: Web/API/RandomSource -tags: - - API - - Interface - - NeedsTranslation - - RandomSource - - Reference - - TopicStub - - Web Crypto API -translation_of: Web/API/Crypto/getRandomValues -translation_of_original: Web/API/RandomSource ---- -

{{APIRef("Web Crypto API")}}

- -

RandomSource represents a source of cryptographically secure random numbers. It is available via the {{domxref("Crypto")}} object of the global object: {{domxref("Window.crypto")}} on Web pages, {{domxref("WorkerGlobalScope.crypto")}} in workers.

- -

RandomSource is a not an interface and no object of this type can be created.

- -

Properties

- -

RandomSource neither defines nor inherits any property.

- -
-
- -

Methods

- -
-
{{ domxref("RandomSource.getRandomValues()") }}
-
Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.
-
- -

Specification

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Web Crypto API', '#dfn-RandomSource')}}{{Spec2('Web Crypto API')}}Initial definition
- -

Browser Compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support11.0 {{ webkitbug("22049") }}{{CompatGeckoDesktop(21)}} [1]11.015.03.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}23{{CompatGeckoMobile(21)}}{{ CompatNo() }}{{ CompatNo() }}6
-
- -

[1] Although the transparent RandomSource is only available since Firefox 26, the feature was available in Firefox 21.

- -

See also

- - diff --git a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html b/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html deleted file mode 100644 index b6e09439a9..0000000000 --- a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Crypto.getRandomValues() -slug: Web/API/RandomSource/Obtenervaloresaleatorios -tags: - - API - - Criptografía - - Referencia - - metodo -translation_of: Web/API/Crypto/getRandomValues ---- -

{{APIRef("Web Crypto API")}}

- -

El método Crypto.getRandomValues() permite obtener valores aleatorios criptográficamente fuertes. El array que se pasa como parámetro se rellena con números aleatorios (entiéndase aleatorios en el sentido criptográfico).

- -

Con el fin de garantizar un rendimiento razonable, las distintas implementaciones no utilizan un generador de numeros aleatorios puro, sino que utilizan un generador numérico pseudo-aleatorio, sembrado con un valor con suficiente entropía. Los generadores numéricos pseudo-aleatorios utilizados difieren entre {{Glossary("user agent", "user agents")}}, pero son adecuados para usos criptográficos. Se require también que las distintas implementaciones usen una semilla con suficiente entropía, como una fuente de entropía a nivel de sistema.

- -

Sintaxis

- -
cryptoObj.getRandomValues(typedArray);
- -

Parámetros

- -
-
typedArray
-
Es un entero {{jsxref("TypedArray")}}, que puede ser un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Int16Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, o un {{jsxref("Uint32Array")}}. Todos los elementos dentro del array seran sobreescritos con números aleatorios.
-
- -

Excepciones

- - - -

Ejemplo

- -
/* Asumiendo que window.crypto.getRandomValues está disponible */
-
-var array = new Uint32Array(10);
-window.crypto.getRandomValues(array);
-
-console.log("Tus numeros de la suerte:");
-for (var i = 0; i < array.length; i++) {
-    console.log(array[i]);
-}
-
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#RandomSource-method-getRandomValues')}}{{Spec2('Web Crypto API')}}Definición Inicial
- -

Compatibilidad del navegador

- -

La tabla de compatibilidad de esta página se genera a partir de datos estructurados. Si desea contribuir a los datos, por favor, compruebe https://github.com/mdn/browser-compat-data y envianos un pull request.

- -

{{Compat("api.Crypto.getRandomValues")}}

- -

Ver también

- - diff --git a/files/es/web/api/server-sent_events/index.html b/files/es/web/api/server-sent_events/index.html new file mode 100644 index 0000000000..9b22801732 --- /dev/null +++ b/files/es/web/api/server-sent_events/index.html @@ -0,0 +1,99 @@ +--- +title: Server-sent events +slug: Server-sent_events +tags: + - NeedsTranslation + - Server-sent events + - TopicStub +translation_of: Web/API/Server-sent_events +--- +

Traditionally, a web page has to send a request to the server to receive new data; that is, the page requests data from the server. With server-sent events, it's possible for a server to send new data to a web page at any time, by pushing messages to the web page. These incoming messages can be treated as Events + data inside the web page.

+ + + + + + + +
+

Documentation

+
+
+ Using server-sent events
+
+ A tutorial guide to writing both server and client side part of a server-sent events app.
+
+ EventSource reference
+
+ A reference to the client-side EventSource API.
+
+

View All...

+ 		+

Tools

+ + + +
+

See also

+ +

Specification

+ +

Browser compatibility

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{CompatGeckoDesktop("6.0")}}{{CompatUnknown}}115
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/es/web/api/server-sent_events/using_server-sent_events/index.html b/files/es/web/api/server-sent_events/using_server-sent_events/index.html new file mode 100644 index 0000000000..81a2f5dacc --- /dev/null +++ b/files/es/web/api/server-sent_events/using_server-sent_events/index.html @@ -0,0 +1,231 @@ +--- +title: Utilizando eventos enviados por el servidor (server-sent event) +slug: Server-sent_events/utilizando_server_sent_events_sse +translation_of: Web/API/Server-sent_events/Using_server-sent_events +--- +

Desarrollar una aplicación web que utilice server-sent events es muy fácil. Solo necesitas un pequeño código del lado del servidor para transmitir los eventos a la aplicación web, pero del lado de la aplicacion web se trabaja prácticamente igual que con cualquier otro tipo de eventos.

+ +

Puedes ver un ejemplo aqui (actualmente no funciona).

+ +

ejemplo2

+ +

Recibiendo eventos desde el servidor

+ +

El server-sent event API está contenido en la interfaz EventSource; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new EventSource, especificando el URI de un script que genera los eventos, Por ejemplo:

+ +
var evtSource = new EventSource("ssedemo.php");
+
+ +
Nota: Aunque todavía no es parte de la norma, EventSource es soportado por Firefox 11 y posteriores. Se espera que pronto forme parte del estándar.
+ +

Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:

+ +
evtSource.onmessage = function(e) {
+  var newElement = document.createElement("li");
+
+  newElement.innerHTML = "message: " + e.data;
+  eventList.appendChild(newElement);
+}
+
+ +

Este codigo escucha todos los mensajes entrantes (Es decir, todos los avisos del servidor, que no tienen un campo de eventos en ellos) y anexa texto del mensaje a la lista en el documento HTML.

+ +

También puedes escuchar eventos, usando addEventListener():

+ +
evtSource.addEventListener("ping", function(e) {
+  var newElement = document.createElement("li");
+
+  var obj = JSON.parse(e.data);
+  newElement.innerHTML = "ping at " + obj.time;
+  eventList.appendChild(newElement);
+}, false);
+
+ +

Este código es similar,  excepto que este se activa cada vez que el servidor envia un mensaje con el campo de evento "ping"; entonces se analiza el JSON en el campo de datos y retorna esa informacion.

+ +

Enviando eventos desde el servidor

+ +

El script del servidor que envia los datos tiene que responder con el tipo MIME text/event-stream. Cada notificación se envia con un bloque de texto terminado en un par de saltos de línea, para mas detalles sobre el formato sobre la secuencia de evetos, ver {{ anch("Event stream format") }},

+ +

El codigo PHP para este ejemplo que estamos utilizando:

+ +
date_default_timezone_set("America/New_York");
+header("Content-Type: text/event-stream\n\n");
+
+$counter = rand(1, 10);
+while (1) {
+  // Every second, sent a "ping" event.
+
+  echo "event: ping\n";
+  $curDate = date(DATE_ISO8601);
+  echo 'data: {"time": "' . $curDate . '"}';
+  echo "\n\n";
+
+  // Send a simple message at random intervals.
+
+  $counter--;
+
+  if (!$counter) {
+    echo 'data: This is a message at time ' . $curDate . "\n\n";
+    $counter = rand(1, 10);
+  }
+
+  ob_flush();
+  flush();
+  sleep(1);
+}
+
+ +

Se genera un evento cada segundo, con el evento "ping". Los datos de cada evento es un objeto JSON que contiene, en este caso, solo la fecha en formato ISO 8601 correspondiente a la hora en que se generó el evento. A intervalos aleatorios, se envia un mensaje simple (sin ningún tipo de evento)

+ +

Gestion de errores

+ +

Cuando se producen problemas (como un tiempo de espera o problemas relacionados con el control de acceso), se genera un evento de error. Puedes tomar acción sobre esto al implementar una devolución de llamada al objeto EventSource:

+ +
evtSource.onerror = function(e) {
+  alert("EventSource failed.");
+};
+
+ +

En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.

+ +

Cerrando flujo de eventos

+ +

Por defecto, si la conexión entre el cliente y el servidor se cierra, la conexión es reiniciada. Podemos terminar la conexión con el método .close()

+ +
evtSource.close();
+ +
 
+ +

Formato de flujo de eventos (formato stream)

+ +

El flujo de eventos es una corriente sencilla de datos de texto, que deben ser codificados usando UTF-8. Los mensajes en el flujo de eventos están separados por un par de caracteres de salto de línea. Si hay un símbolo de dos puntos como primer caracter de una línea, se entiende que es un comentario y es ignorado. 

+ +
Nota: La línea de comentario se puede usar para prevenir que la conexión se agote por tiempo (timeout); un sevidor puede enviar periódicamente un comentario para mantener viva la conexión.
+ +

Cada mensaje consiste en una o más líneas de texto que enumeran los campos para ese mensaje. Cada campo está representado por el nombre del campo, seguido por los datos de texto para el valor de ese campo.

+ +

Campos

+ +

Los siguientes nombres de campo son definidos por la especificación:

+ +

event

+ +

El tipo de evento. Si se especifica, un evento se enviará al navegador a la escucha para el nombre del evento especificado, el sitio web usaria addEventLister() para escuchar eventos nombrados. El controlador onmessage se llama si no se especifica el nombre del evento para un mensaje.

+ +

data

+ +

El campo de datos  para el mensaje. Cuando el EventSource recibe múltiples lineas con "data:", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final [VERIFICAR].

+ +

id

+ +

  El ID del evento que establecerá el último ID del objeto EventSource.

+ +

Retry

+ +

El tiempo de reconexión para usar al intentar enviar el evento. [Qué código maneja esto?] Este debe ser un número entero, que especifica el tiempo de reconexion en milisegundos. Si se especifica un valor no entero, el campo se ignora.  

+ +

Se omiten todos los demas nombres de campo.

+ +
Nota: Si una línea no contiene dos puntos, la línea entera se tratara como un nombre de campo, con una cadena de valor vacio.
+ +

Ejemplos

+ +

Mensajes con datos únicamente

+ +

En el siguiente ejemplo, hay tres mensajes enviados. El primero es solo un comentario, debido a que empieza con dos puntos. Como se mencionó anteriormente, esto puede ser útil para mantener la conexión viva si los mensajes no son enviados regularmente.

+ +

The second message contains a data field with the value "some text". The third message contains a data field with the value "another message\nwith two lines". Note the newline in the value.

+ +

El segundo mensaje contiene un campo de datos con el valor "some text". El tercer mensaje contiene un campo de datos con el valor "another message\nwith two lines". Nota la nueva línea en el valor.

+ +
: this is a test stream
+
+data: some text
+
+data: another message
+data: with two lines
+
+ +

Eventos nombrados

+ +

Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo event, y un campo data cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo data, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+event: userdisconnect
+data: {"username": "bobby", "time": "02:34:23"}
+
+event: usermessage
+data: {"username": "sean", "time": "02:34:36", "text": "Bye, bobby."}
+
+ +

Mezclando y emparejando

+ +

No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.

+ +
event: userconnect
+data: {"username": "bobby", "time": "02:33:48"}
+
+data: Here's a system message of some kind that will get used
+data: to accomplish some task.
+
+event: usermessage
+data: {"username": "bobby", "time": "02:34:11", "text": "Hi everyone."}
+
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
EventSource support9{{ CompatGeckoDesktop("6.0") }}{{ CompatNo() }}115
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroid-and-MeegoFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
EventSource support6 a 24 b1.0{{ CompatUnknown() }}11.14
+
+ +

 

diff --git a/files/es/web/api/storage/localstorage/index.html b/files/es/web/api/storage/localstorage/index.html deleted file mode 100644 index 5c46cb9559..0000000000 --- a/files/es/web/api/storage/localstorage/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: LocalStorage -slug: Web/API/Storage/LocalStorage -tags: - - Almacenamiento en Navegador - - Almacenamiento local -translation_of: Web/API/Window/localStorage -translation_of_original: Web/API/Web_Storage_API/Local_storage ---- -

localStorage (almacenamiento local) es lo mismo que sessionStorage (almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. localStorage se introdujo en la version Firefox 3.5.

- -
Nota: Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar datos de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.
- -
// Guardar datos al almacenamiento local actual
-localStorage.setItem("nombredeusuario", "John");
-
-// Acceder a datos almacenados
-alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));
- -

La persistencia de localStorage lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en este tutorial en Codepen.

- -

Compatibilidad

- -

Los objetos de Storage (almacenamiento) son una adición reciente al estándar, por lo que pueden no estar presentes en todos los navegadores. Esto se puede solucionar si introduce uno de los dos códigos al principio de sus scripts, permitiendo el uso de el objeto localStorage en implementaciones que no lo soportan de forma nativa.

- -

Este algoritmo es una imitación exacta del objeto localStorage, pero hace uso de cookies.

- -
if (!window.localStorage) {
-  Object.defineProperty(window, "localStorage", new (function () {
-    var aKeys = [], oStorage = {};
-    Object.defineProperty(oStorage, "getItem", {
-      value: function (sKey) { return sKey ? this[sKey] : null; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "key", {
-      value: function (nKeyId) { return aKeys[nKeyId]; },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "setItem", {
-      value: function (sKey, sValue) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "length", {
-      get: function () { return aKeys.length; },
-      configurable: false,
-      enumerable: false
-    });
-    Object.defineProperty(oStorage, "removeItem", {
-      value: function (sKey) {
-        if(!sKey) { return; }
-        document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      },
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    this.get = function () {
-      var iThisIndx;
-      for (var sKey in oStorage) {
-        iThisIndx = aKeys.indexOf(sKey);
-        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
-        else { aKeys.splice(iThisIndx, 1); }
-        delete oStorage[sKey];
-      }
-      for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
-      for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) {
-        aCouple = aCouples[nIdx].split(/\s*=\s*/);
-        if (aCouple.length > 1) {
-          oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]);
-          aKeys.push(iKey);
-        }
-      }
-      return oStorage;
-    };
-    this.configurable = false;
-    this.enumerable = true;
-  })());
-}
-
- -
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
- -
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se pasará a ser un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
- -

Esta es otra imitación menos exacta de el objeto localStorage, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (probado y funcional incluso en Internet Explorer 6). También hace uso de cookies.

- -
if (!window.localStorage) {
-  window.localStorage = {
-    getItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
-      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
-    },
-    key: function (nKeyId) {
-      return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]);
-    },
-    setItem: function (sKey, sValue) {
-      if(!sKey) { return; }
-      document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/";
-      this.length = document.cookie.match(/\=/g).length;
-    },
-    length: 0,
-    removeItem: function (sKey) {
-      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
-      document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
-      this.length--;
-    },
-    hasOwnProperty: function (sKey) {
-      return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
-    }
-  };
-  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
-}
-
- -
Nota: El tamaño máximo de datos que se puede guardar está muy restringido por el uso de cookies. Con este algoritmo, utilize las funciones localStorage.getItem(), localStorage.setItem(), y localStorage.removeItem() para agregar, cambiar, o quitar una clave. El uso del método localStorage.suClave para obtener, establecer, o borrar una clave no está permitido con este código. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.
- -
Nota: Al cambiar la cadena "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/" a: "; path=/" (y al cambiar el nombre del objeto), esto se volverá un sessionStorage polyfill en vez de un localStorage polyfill. Sin embargo, esta implementación compartirá valores almacenados a través de pestañas y ventanas del navegador (y sólo se borrará cuando todas las ventanas del navegador hayan sido cerradas), mientras que una implementación  sessionStorage completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.
- -

Compatibilidad y relación con globalStorage

- -

localStorage es lo mismo que globalStorage[location.hostname], con la excepción de que tiene un ámbito de origen HTML5 (esquema + nombre del host + puerto no estandar), y localStorage es una instancia de Storage, al contrario que globalStorage[location.hostname], que es una instancia de StorageObsolete, como se explica más adelante. Por ejemplo, http://ejemplo.com no puede acceder al mismo objeto localStorage que https://ejemplo.com, pero los dos pueden acceder al mismo elemento de globalStorage. --localStorage es una interfaz estándar mientras que globalStorage no lo es, así que no se debe depender de ella.

- -

Nótese que al establecer una propiedad en globalStorage[location.hostname] no la establece en localStorage, y al extender Storage.prototype no afecta a los elementos de globalStorage; sólo al extender StorageObsolete.prototype los afecta.

- -

El formato de Storage

- -

Las claves y valores de Storage se guardan en el formato UTF-16 DOMString, que usa 2 bytes por carácter.

diff --git a/files/es/web/api/subtlecrypto/encrypt/index.html b/files/es/web/api/subtlecrypto/encrypt/index.html deleted file mode 100644 index 8f35030d35..0000000000 --- a/files/es/web/api/subtlecrypto/encrypt/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: SubtleCrypto.digest() -slug: Web/API/SubtleCrypto/encrypt -tags: - - API - - Encriptación - - Referencia - - SubtleCrypto - - Web Crypto API - - encrypt -translation_of: Web/HTTP/Headers/Digest ---- -
{{APIRef("Web Crypto API")}}
- -

El método digest() de la interfaz {{domxref("SubtleCrypto")}} genera un digest de los datos proveidos. Un {{domxref("digest")}} es un valor corto de longitud fija derivado de alguna entrada de longitud variable. Los digest criptográficos deben mostrar resistencia a colisiones, lo que significa que es difícil encontrar dos entradas diferentes que tengan el mismo valor de digest.

- -

Toma como argumento un identificador para el algoritmo digest a utilizar y los datos a codificar. Devuelve un Promise que se completará con el digest.

- -

Sintaxis

- -
const digest = crypto.subtle.digest(algorithm, data);
-
- -

Parámetros

- - - -

Valor de retorno

- - - -

Algoritmos soportados

- -

Los argoritmos digest, también conocidos como funciones criptográficas hash, transforman un bloque de datos arbitrariamente grande en una salida de tamaño fijo, normalmente mucho más corta que la entrada. Tienen una variedad de aplicaciones en criptografía.

- -

SHA-1

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.1, y produce una salida de 160 bits de largo.

- -
-

Advertencia: Este algoritmo se considera ahora vulnerable y no debe utilizarse para aplicaciones criptográficas.

-
- -

SHA-256

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.2, y produce una salida de 256 bits de largo.

- -

SHA-384

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.5, y produce una salida de 384 bits de largo.

- -

SHA-512

- -

Este algoritmo se especifica en FIPS 180-4, sección 6.4, y produce una salida de 512 bits de largo.

- -
-

Sugerencia: Si estás buscando aquí cómo crear un código de autenticación de mensajes "keyed-hash" (HMAC), necesitas usar SubtleCrypto.sign() en su lugar.

-
- -

Ejemplos

- -

Ejemplo básico

- -

Este ejemplo codifica un mensaje, luego calcula su digest SHA-256 y muestra la longitud del mismo:

- -
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
-
-async function digestMessage(message) {
-  const encoder = new TextEncoder();
-  const data = encoder.encode(message);
-  const hash = await crypto.subtle.digest('SHA-256', data);
-  return hash;
-}
-
-const digestBuffer = await digestMessage(text);
-console.log(digestBuffer.byteLength);
-
- -

Convirtiendo un digest a una cadena hexadecimal

- -

El resumen se devuelve como un ArrayBuffer, pero para la comparación y visualización los digests se representan a menudo como cadenas hexadecimales. Este ejemplo calcula un digest, y luego convierte el ArrayBuffer a un string hexadecimal:

- -
const text = 'An obscure body in the S-K System, your majesty. The inhabitants refer to it as the planet Earth.';
-
-async function digestMessage(message) {
-  const msgUint8 = new TextEncoder().encode(message);                           // encode as (utf-8) Uint8Array
-  const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);           // hash the message
-  const hashArray = Array.from(new Uint8Array(hashBuffer));                     // convert buffer to byte array
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convert bytes to hex string
-  return hashHex;
-}
-
-const digestHex = await digestMessage(text);
-console.log(digestHex);
-
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Web Crypto API', '#dfn-SubtleCrypto-method-digest', 'SubtleCrypto.digest()')}}{{Spec2('Web Crypto API')}}Definición inicial.
- -

Compatibilidad del navegador

- - - -

{{Compat("api.SubtleCrypto.digest")}}

- -
-

En Chrome 60, se añadió una característica que deshabilita crypto.subtle para conexiones no TLS.

-
- -

Ver también

- - diff --git a/files/es/web/api/touch_events/index.html b/files/es/web/api/touch_events/index.html new file mode 100644 index 0000000000..02a4a4eacb --- /dev/null +++ b/files/es/web/api/touch_events/index.html @@ -0,0 +1,292 @@ +--- +title: Eventos de toque +slug: DOM/Touch_events +tags: + - DOM + - Event + - Mobile + - NeedsMobileBrowserCompatTable + - eventos +translation_of: Web/API/Touch_events +--- +

Con el fin de proporcionar soporte de calidad para usuarios de interfaces táctiles, los eventos táctiles dan la posibilidad de interpretar la actividad de los dedos en pantallas táctiles o trackpads.

+ +

Definiciones

+ +
+
Superficie
+
La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.
+
+ +
+
Punto de toque
+
Un punto de contacto con la superficie. Esto podría ser un dedo (o un codo, oreja, nariz, o lo que sea, pero probablemente un dedo) o un stylus.
+
+ +

Interfaces

+ +
+
{{ domxref("TouchEvent") }}
+
Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.
+
{{ domxref("Touch") }}
+
Represeta un único punto de contacto entre el usuario y la superficie táctil.
+
{{ domxref("TouchList") }}
+
Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.
+
{{ domxref("DocumentTouch") }}
+
Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.
+
+ +

Ejemplo

+ +

Este ejemplo muestra múltiples puntos de toques al mismo tiempo, permitiendo al usuario dibujar en un {{ HTMLElement("canvas") }} con más de un dedo a la vez. Esto funciona solamente en un navegador que soporte eventos táctiles.

+ +
Nota: El texto de abajo usa el término "dedo" cuando describe el contacto con la superficie, pero esto podría ser, por supuesto, también un stylus u otro método de contacto.
+ +

Configurando los eventos de manipulación

+ +

Cuando la página carga, la función startup() mostrada a continuación es llamada por nuestro atributo onload del elemento {{ HTMLElement("body") }}.

+ +
function startup() {
+  var el = document.getElementsByTagName("canvas")[0];
+  el.addEventListener("touchstart", handleStart, false);
+  el.addEventListener("touchend", handleEnd, false);
+  el.addEventListener("touchcancel", handleCancel, false);
+  el.addEventListener("touchleave", handleLeave, false);
+  el.addEventListener("touchmove", handleMove, false);
+}
+
+ +

Esto simplemente configura todos los detectores de eventos para nuestro elemento {{ HTMLElement("canvas") }}, por lo que podremos manejar todos los eventos de toque cuando se produzcan.

+ +

Seguimiento de nuevos toques

+ +

Cuando un evento touchstart ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función handleStart() de a continuación es llamada.

+ +
function handleStart(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.push(touches[i]);
+    var color = colorForTouch(touches[i]);
+    ctx.fillStyle = color;
+    ctx.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
+  }
+}
+
+ +

Esto llama a {{ domxref("event.preventDefault()") }} para mantener al navegador procesando el evento de toque (esto también previene que un evento del ratón o mouse sea entregado). Entonces obtenemos el contexto y lanzamos la lista de puntos de contacto cambiados de la propiedad {{ domxref("TouchEvent.changedTouches") }} del evento.

+ +

Después de ello, iteramos sobre todos los objetos {{ domxref("Touch") }} de la lista, insertándolo en una matriz de puntos de toque activos y dibujando el punto de inicio como un pequeño rectángulo; estamos usando una línea de 4 pixeles de ancho, por tanto estamos dibujando un cuadrado de 4 por 4 píxeles como punto de consistencia.

+ +

Dibujando mientras los eventos de toque se mueven

+ +

Cada vez que uno o más dedos se mueven, un evento touchmove es entregado, resultando en una llamada a nuestra función handleMove(). Su responsabilidad en este ejemplo es actualizar la información de toque cacheada y dibujar una línea desde la posición previa a la posición actual en cada toque.

+ +
function handleMove(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[idx].pageX, ongoingTouches[idx].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ctx.closePath();
+    ctx.stroke();
+    ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
+  }
+}
+
+ +

Esto se repite también en los toques cambiados, pero mira en nuestra matriz de información de toques cacheados la información previa de cada toque con el fin de determinar los puntos de inicio para cada nuevo segmento de línea de toques que será dibujada. Esto se hace mirando cada propiedad de los toques de {{ domxref("Touch.identifier") }} . Esta propiedad es un único entero para cada toque, y sigue siendo consistente para cada evento durante la duración del contacto de cada dedo con la superficie.

+ +

Esto nos permite conseguir las coordenadas de la posición previa de cada toque y usar el método apropiado de contexto para dibujar un segmento de línea uniendo dos posiciones a la vez.

+ +

Después de dibujar la línea, llamamos a  Array.splice() para reemplazar la información previa sobre el punto de toque con la información actual de la matriz ongoingTouches.

+ +

Manejando el final de un toque

+ +

Cuando el usuario levanta un dedo de la superficie, un evento touchend es enviado.  De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento touchleave. Manejamos ambos casos de la misma manera: llamando a la función handleEnd() de abajo. Su trabajo es dibujar el último segmento de línea para cada toque que ha finalizado y remueve el punto de toque de la lista de toques en marcha.

+ +
function handleEnd(evt) {
+  evt.preventDefault();
+  var el = document.getElementsByTagName("canvas")[0];
+  var ctx = el.getContext("2d");
+  var touches = evt.changedTouches;
+
+  ctx.lineWidth = 4;
+
+  for (var i=0; i<touches.length; i++) {
+    var color = colorForTouch(touches[i]);
+    var idx = ongoingTouchIndexById(touches[i].identifier);
+
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.moveTo(ongoingTouches[i].pageX, ongoingTouches[i].pageY);
+    ctx.lineTo(touches[i].pageX, touches[i].pageY);
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a  Array.splice(), simplemente remueve la antigua entrada de la lista de toques en marcha, sin añadir la información actualizada. El resultado es que detenemos el seguimiento del punto de toque.

+ +

Manejando los toques cancelados

+ +

Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento touchcancel es enviado, y llamamos a la función handleCancel() abajo.

+ +
function handleCancel(evt) {
+  evt.preventDefault();
+  var touches = evt.changedTouches;
+
+  for (var i=0; i<touches.length; i++) {
+    ongoingTouches.splice(i, 1);  // remove it; we're done
+  }
+}
+
+ +

Dado que la idea es cancelar el toque inmediatamente, simplemente lo removemos de la lista de toques en marcha sin dibujar un segmento de línea final.

+ +

Funciones de conveniencia

+ +

Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.

+ +

Seleccionando un color para cada toque

+ +

Con el fin de hacer que cada dibujo de toque se vea diferente, la función  colorForTouch() es usada para elegir un color basado en el identificador único de toque. Este identificador estará siempre entre 0 y un valor menos que el número de toques activos. Puesto que es muy improbable que alguna persona con más de 16 dedos use este demo, convertimos estos directamente en colores de escalas grises.

+ +
function colorForTouch(touch) {
+  var id = touch.identifier;
+  id = id.toString(16); // make it a hex digit
+  return "#" + id + id + id;
+}
+
+ +

El resultado de esta función es un string o cadena que puede ser usada cuando se llame a funciones {{ HTMLElement("canvas") }} para configurar los colores de dibujos. Por ejemplo, para un valor {{ domxref("Touch.identifier") }}  de 10, el resultado string o cadena es "#aaa".

+ +

Encontrando un toque continuo

+ +

La función ongoingTouchIndexById() abajo explora mediante la matriz ongoingTouches para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.

+ +
function ongoingTouchIndexById(idToFind) {
+  for (var i=0; i<ongoingTouches.length; i++) {
+    var id = ongoingTouches[i].identifier;
+
+    if (id == idToFind) {
+      return i;
+    }
+  }
+  return -1;    // not found
+}
+
+ +

Ver ejemplo en vivo

+ +

Consejos adicionales

+ +

Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.

+ +

Manejando los clics

+ +

Ya que la llamada preventDefault() en un touchstart o el primer evento touchmove de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a preventDefault() en touchmove en lugar de touchstart. De esta manera, los eventos del ratón pueden todavía ser disparados y cosas como enlaces siguen funcionando. Alternativamente, algunos frameworks tienen que referirse a eventos de toque como eventos de ratón para este mismo propósito. (Este ejemplo es muy simplificado y podria resultar en un extraño comportamiento. Solo se diseñó como guía).

+ +
function onTouch(evt) {
+  evt.preventDefault();
+  if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0))
+    return;
+
+  var newEvt = document.createEvent("MouseEvents");
+  var type = null;
+  var touch = null;
+  switch (event.type) {
+    case "touchstart": type = "mousedown"; touch = event.changedTouches[[0];
+    case "touchmove":  type = "mousemove"; touch = event.changedTouches[[0];
+    case "touchend":   type = "mouseup"; touch = event.changedTouches[0];
+  }
+  newEvt.initMouseEvent(type, true, true, event.originalTarget.ownerDocument.defaultView, 0,
+    touch.screenX, touch.screenY, touch.clientX, touch.clientY,
+    evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null);
+  event.originalTarget.dispatchEvent(newEvt);
+}
+
+ +

Llamando a preventDefault() solo en un segundo toque

+ +

Una cosa para prevenir cosas como pinchZoom en una página es llamar a preventDefault() en el segundo toque de una serie. Este comportamiento no está bien definido en los eventos de toque, y resulta en diferentes comportamientos en diferentes navegadores (osea iOS evitará el zoom o acercamiento pero permitirá vista panorámica con ambos dedos. Android permitirá zoom o acercamiento pero no una panorámica. Opera and Firefox actualmente evita panorámica y zoom o acercamiento). Actualmente, no se recomienda depender de ningún comportamiento en particular en este caso, si no mas bien depender de una meta vista para evitar el zoom.

+ +
+
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatChrome("22.0") }}{{ CompatGeckoDesktop("18.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatGeckoMobile("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

Notas de Gecko

+ +

La preferencia dom.w3c_touch_events.enabled puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.

+ +
+

{{ gecko_callout_heading("12.0") }}

+ +

Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.

+
+ +
Note: Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una API de eventos de toque propietaria. Está API está obsoleta actualmente; deberías cambiar a esta."
diff --git a/files/es/web/api/vibration_api/index.html b/files/es/web/api/vibration_api/index.html new file mode 100644 index 0000000000..8c9c7b5f06 --- /dev/null +++ b/files/es/web/api/vibration_api/index.html @@ -0,0 +1,155 @@ +--- +title: Vibración API +slug: Web/Guide/API/Vibration +tags: + - API + - Firefox OS + - Mobile + - Principiante + - Vibración + - Vibrado + - Vibrar + - WebAPI +translation_of: Web/API/Vibration_API +--- +

La mayoría de los dispositivos modernos pueden vibrar a través del hardware, esto permite que a través del código de software se pueda emitir estas vibraciones. La Vibration API  ofrece a las aplicaciones web la capacidad de acceder a este hardware en caso este lo soporte, caso contrario el dispositivo no hace nada.

+ +

Describiendo vibraciones

+ +

Vibración se puede describir como un patrón de prender y apagar pulsos, los cuales pueden variar en longitud. El patrón puede consistir de un sólo número que indica cuantos milisegundos vibrará, o un arreglo de enteros describiendo un patrón de vibraciones y pausas. La vibración es controlada por un solo método:

+ +

{{domxref("window.navigator.vibrate()")}}.

+ +

Vibración simple

+ +

Puedes iniciar una sola vibración del hardware pasando como argumento un sólo número, o un arreglo de un sólo número:

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

Ambos ejemplos hacen vibrar el dispositivo por 200 ms.

+ +

Patrones de vibración

+ +

Un arreglo de valores describen que las vibraciones serán por períodos alternados, es decir, el dispositivo vibrará luego no lo hará, así según la secuencia definida. Cada valor en el arreglo es convertido a entero para luego ser interpretado alternadamente como el tiempo que el dispositivo debe vibrar y el tiempo que no debe vibrar. Ejemplo:

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

Según este ejemplo el dispositivo vibrará por 200ms, luego se detiene por 100ms y luego vibra 200ms.

+ +

Puedes especificar cuantas vibraciones/pausas desees, y el arreglo puede tener un tamaño par o impar. No importa que agregues una pausa como el último valor del arreglo, ya que el celular dejará de vibrar de todas formas al final de cada vibración.

+ +

Cancelar vibraciones existentes

+ +

Llamar {{domxref("window.navigator.vibrate()")}} con un valor de 0, arreglo vació, o arreglo que contenga 0's detendrá cualquier vibración en curso.

+ +

Vibraciones continuas

+ +

Algunas básicas acciones son setInterval y clearInterval que nos permitirán crear vibraciones persistentes:

+ +
var intervaloDeVibrado;
+
+// Iniciar la vibración
+function iniciarVibrado(duracion) {
+	navigator.vibrate(duracion);
+}
+
+// Detiene la vibración
+function detenerVibrado() {
+	// Limpiar el intervalo y detener las vibraciones existentes
+	if(intervaloDeVibrado) clearInterval(intervaloDeVibrado);
+	navigator.vibrate(0);
+}
+
+// Iniciar las vibraciones con una determinado tiempo e intervalo
+// Asumir que el valor recibido es un entero
+function iniciarVibradoPersistente(duracion, intervalo) {
+	intervaloDeVibrado = setInterval(function() {
+		iniciarVibrado(duracion);
+	}, intervalo);
+}
+ +

Claro que el código de arriba no toma en cuenta el método de utilizar un arreglo de vibración, utilizar un arreglo para vibración persistente necesitaría recalcular la suma de los elementos del arregloo y crear un intervalo basado en esos números (agregando adicionalmente las pausas)

+ +

¿Por qué utilizar Vibration API?

+ +

Esta API es claramente accesible a través de dispositivos móbiles. Vibration API puede servir para alertas en las aplicaciones web del celular, y sería es asombrosa cuando se utiliza en juegos o en aplicaciones pesadas. Imagínate mirando un video en tu celular y durante la escena de explosión,tu teléfono vibra un poco. O la sensación que tendría tu usuario al sentir el estallido de una bomba en el juego Bomberman.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Especificación inicial.
+ +

Compatibilidad entre navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteŕisticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}
+ 16 (no prefix)		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver También

+ + diff --git a/files/es/web/api/web_audio_api/index.html b/files/es/web/api/web_audio_api/index.html new file mode 100644 index 0000000000..e7cb54d803 --- /dev/null +++ b/files/es/web/api/web_audio_api/index.html @@ -0,0 +1,510 @@ +--- +title: Web Audio API +slug: Web_Audio_API +translation_of: Web/API/Web_Audio_API +--- +
{{apiref("Web Audio API")}}
+ +

La API de Audio Web provee un sistema poderoso y versatil para controlar audio en la Web, permitiendo a los desarrolladores escoger fuentes de audio, agregar efectos al audio, crear visualizaciones de audios, aplicar efectos espaciales (como paneo) y mucho más.

+ +

Conceptos y uso de audio Web

+ +

La API de Audio Web involucra manejar operaciones de audio dentro de un contexto de audio, y ha sido diseñada para permitir enrutamiento modular. Las operaciones de audio básicas son realizadas con nodos de audio, que están enlazados juntos para formar un gráfico de enrutamiento de audio. Muchas fuentes — con diferentes tipos de diseño de canales — están soportadas incluso dentro de un único contexto. Este diseño modular provee flexibilidad para crear funciones de audio complejas con efectos dinámicos.

+ +

Los nodos de audio están enlazados en cadenas y redes simples por sus entradas y salidas. Éstos típicamente empiezan con una o más fuentes. Las fuentes provee matrices de intensidades de sonidos (muestras) en segmentos de tiempo muy pequeños, a menudo decenas de miles de éstos por segundo.  Éstos podrían ser calculados matemáticamente (como  {{domxref("OscillatorNode")}}), o pueden ser grabaciones de archivos de audio o video (como {{domxref("AudioBufferSourceNode")}} y {{domxref("MediaElementAudioSourceNode")}}) y transmisiones de audio ({{domxref("MediaStreamAudioSourceNode")}}). De hecho, los archivos de sonido son sólo grabaciones de intensidades de sonido, que vienen desde micrófonos o instrumentos eléctricos, y mezclados en una onda única y complicada.

+ +

Los resultados de éstos nodos podrían ser enlazados a las entradas de otros, que mezclan o modifican estas transmisiones de muestras de audio en diferentes transmisiones. Una modificación común es multiplicar las muestras por un valor para hacerlas más fuertes o silenciosas (como es el caso con {{domxref("GainNode")}}). Una vez que el sonido ha sido lo suficientemente procesado por el efecto necesario, puede ser enlazados a la entrada de un destino({{domxref("AudioContext.destination")}}), que enviá el sonido a los altavoces o auriculares. Esta última conexión sólo es necesaria si el usuario debe escuchar el audio.

+ +

Un diagrama de flujo simple y típico para el audio web se vería algo como esto:

+ +
    +
  1. Crear contexto de audio
    2. +
  2. Dentro del contexto, crear fuentes — como <audio>, oscillator, stream
    3. +
  3. Crear nodos de efectos, tales como reverberación, filtro biquad, panner, compresor
    4. +
  4. Ecoge el destino final del audio, por ejemplo tu sistema de altavoces
    5. +
  5. Conecta las fuentes a los efectos, y los efectos al destino.
    6. +
+ +

A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information.

+ +

El tiempo es controlado con alta precisión baja latencia, permitiendo a los desarrolladores escribir código que responda con precisión a los eventos y sea capaz de apuntar a muestras específicas, incluso en una alta frecuencia de muestreo. Por lo tanto, las aplicaciones como las cajas de ritmos y los secuenciadores están a su alcance.

+ +

El API de Audio Web también nos permite controlar cómo el audio es espacializado. Usando un sistema basado en un modelo fuente-oyente, esto permite controlar el modeo de paneo y que se ocupa de la atenuación inducida por distancia o desplazamiento doppler inducido por una fuente en movimiento (o un oyente en movimiento).

+ +
+

Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo Conceptos Básicos detrás del API de Audio Web.

+
+ +

Interfaces del API de Audio Web

+ +

La API de Audio Web tiene un número de interfaces y eventos asociados, que han sido divididos en nueve categorias de funcionalidad.

+ +

Definición general del gráfico de audio

+ +

Contenedores y definiciones generales que dan forma a los gráficos de audio en el uso de Web Audio API.

+ +
+
{{domxref("AudioContext")}}
+
La interfaz AudioContext representa un gráfico de procesamiento de audio construido de módulos de audio enlazados juntos, cada uno representado por un {{domxref("AudioNode")}}. Un contexto de audio controla la creación de los nodos que contiene y la ejecución del procesamiento del audio, or decoding. Necesitas crear un AudioContext antes de hacer cualquier cosa,  ya que todo pasa dentro de un contexto de audio.
+
{{domxref("AudioNode")}}
+
La interfaz AudioNode representa un módulo de procesamiento de audio como una fuente de audio (por ejemplo un ejemplo HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}}), destino de audio, módulo de procesamiento intermedio (por ejemplo un filtro como {{domxref("BiquadFilterNode")}}, o control de volumen como {{domxref("GainNode")}}).
+
{{domxref("AudioParam")}}
+
La interfaz AudioParam representa un parámetro relacionado al audio, como uno de un {{domxref("AudioNode")}}. Esto puede ser establecido a un valor específico o un cambio de valor, y puede ser agendado para que ocurra en un momento específico y siguiendo un patrón específico.
+
{{domxref("AudioParamMap")}}
+
Provee una interfaz como para mapear a un grupo de interfaces {{domxref("AudioParam")}}, lo que significa que proporciona los métodos forEach(), get(), has(), keys(), y values(), como también una propiedad size.
+
{{domxref("BaseAudioContext")}}
+
La interfaz BaseAudioContext actúa como una definición base para procesamiento de gráficos de audio en y fuera de línea, como lo representa {{domxref("AudioContext")}} y {{domxref("OfflineAudioContext")}} resepectivamente. No tendrás que usar BaseAudioContext directamente — tendrás que usar sus características a través de una de éstas dos interfaces heredadas.
+
El evento {{event("ended")}}
+
El evento ended es lanzado cuando la reproducción se detiene porque se alcanzó el fin del archivo de medio.
+
+ +

Definiendo fuentes de audio

+ +

Las interfaces que definen fuentes de audio para usar en la API de Web.

+ +
+
{{domxref("AudioScheduledSourceNode")}}
+
La interfaz AudioScheduledSourceNode es una interfaz padre para muchos tipos de interfaces de nodos de fuentes de audio. Es un {{domxref("AudioNode")}}.
+
+ +
+
{{domxref("OscillatorNode")}}
+
La interfaz OscillatorNode representa una forma de onda periódica, como una onda sinusoidal o triangular. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que causa que se cree una frecuencia de onda determinada.
+
{{domxref("AudioBuffer")}}
+
La interfaz AudioBuffer representa un recurso de audio corto que reside en la memoria, creado desde un archivo de audio usando el método {{ domxref("AudioContext.decodeAudioData()") }}, o creado con datos sin procesar usando {{ domxref("AudioContext.createBuffer()") }}. Una vez decodificado en esta forma, el audio puede ser colocado en un {{ domxref("AudioBufferSourceNode") }}.
+
{{domxref("AudioBufferSourceNode")}}
+
La interfaz AudioBufferSourceNode representa una fuente de audio que consiste en una datos de audio en la memoria, almacenada en un {{domxref("AudioBuffer")}}. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.
+
{{domxref("MediaElementAudioSourceNode")}}
+
La interfaz MediaElementAudioSourceNode representa una fuente de audio que consiste en un elemento {{ htmlelement("audio") }} o {{ htmlelement("video") }} de HTML5. Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.
+
{{domxref("MediaStreamAudioSourceNode")}}
+
La interfaz MediaStreamAudioSourceNode representa una fuente de audio que consiste en un {{domxref("MediaStream")}} de WebRTC (como una cámara web, micrófono, o una transmisión siendo enviada a una computadora remota). Es un {{domxref("AudioNode")}} que actúa como una fuente de audio.
+
+ +

Definiendo filtros de efectos de audio

+ +

Interfaces para definir efectos que quieras aplicar a tus fuentes de audio.

+ +
+
{{domxref("BiquadFilterNode")}}
+
La interfaz BiquadFilterNode representa una filtro de bajo orden sencillo. Es un {{domxref("AudioNode")}} que puede representar diferentes tipos de filtros, dispositivos de control de tono, o ecualizadores gráficos. Un BiquadFilterNode siempre tiene exactamente una entrada y una salida.
+
{{domxref("ConvolverNode")}}
+
La interfaz ConvolverNode es un {{domxref("AudioNode")}} que realiza una Convolución Lineal en un {{domxref("AudioBuffer")}} determinado, y es usado a menudo para lograr un efecto de reverberación.
+
{{domxref("DelayNode")}}
+
La interfaz DelayNode representa una línea de detardo; un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa un retardo entre la llegada de una entrada de datos y su propagación a la salida.
+
{{domxref("DynamicsCompressorNode")}}
+
La intefaz DynamicsCompressorNode proporciona un efecto de compresión, que reduce el volumen de las partes más ruidosas de la señal para ayudar a evitar el recorte y la distorsión que pueden ocurrir cuando se reproducen y multiplexan múltiples sonidos a la vez.
+
{{domxref("GainNode")}}
+
La intefaz GainNode representa un cambio de volumen. Es un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa que una ganancia determinada para ser aplicada a la entrada de datos antes de su propacación a la salida.
+
{{domxref("WaveShaperNode")}}
+
La interfaz WaveShaperNode representa un la interfaz representa un distorsionador no lineal. Es un {{domxref("AudioNode")}} que usa una curva para aplicar una distorsión en forma de onda a la señal. Además de los obvios efectos de distorsión, a menudo se usa para agregar una sensación cálida a la señal.
+
{{domxref("PeriodicWave")}}
+
Describe una forma de onda periódica que puede ser usada para dar forma a la salida de un {{ domxref("OscillatorNode") }}.
+
{{domxref("IIRFilterNode")}}
+
Implementa un filtro de respuesta de pulso infinito (IIR) general; este tipo de filtro se puede usar para implementar dispositivos de control de tono y ecualizadores gráficos también.
+
+ +

Definición de destinos de audio

+ +

Una vez que haya terminado de procesar su audio, estas interfaces definen dónde emitirlo.

+ +
+
{{domxref("AudioDestinationNode")}}
+
La interfaz AudioDestinationNode representa el destino final de una fuente de audio en contexto determinado — usualmente los altavoces de tu dispositivo.
+
{{domxref("MediaStreamAudioDestinationNode")}}
+
La interfaz MediaStreamAudioDestinationNode representa un destino de audio que consiste en un {{domxref("MediaStream")}} de WebRTC con un AudioMediaStreamTrack sencillo, que puede ser usado de una manera similiar a un {{domxref("MediaStream")}} obtenido desde {{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}. Es un {{domxref("AudioNode")}} que actúa como un destino de audio.
+
+ +

Análisis y visualización de datos

+ +

Si quieres extraer el tiempo, frecuencia, y otros datos de tu audio, AnalyserNode es lo que necesitas.

+ +
+
{{domxref("AnalyserNode")}}
+
La interfaz AnalyserNode representa un nodo capáz de proveer la frecuencia en tiempo real y la información del análisis del dominio de tiempo, para propósitos de análisis y visualización de datos.
+
+ +

División y fusión de canales de audio

+ +

Para dividir y fusionar canales de audio, deberás usar estas interfaces.

+ +
+
{{domxref("ChannelSplitterNode")}}
+
La interfaz ChannelSplitterNode separa los diferentes canales de una fuente de audio enn un conjunto de salidas mono.
+
{{domxref("ChannelMergerNode")}}
+
La interfaz ChannelMergerNode reune las diferentes salidas mono en una sola salida. Cada entrada deberá ser usada para llenar un canal de la salida.
+
+ +

Espacialización de audio

+ +

Estas interfaces te permiten agregar efectos de paneo de especialización de audio a tus fuentes de audio.

+ +
+
{{domxref("AudioListener")}}
+
La interfaz AudioListener representa la posición y orientación de la única persona escuchando la escena de audio usada en la espacialización de audio.
+
{{domxref("PannerNode")}}
+
La interfaz PannerNode representa la posición y comportamiento de una señal de fuente de audio en un espacio 3D, permitiéndote crear efectos de paneo complejos.
+
{{domxref("StereoPannerNode")}}
+
La interfaz StereoPannerNode representa un nodo de panner estéreo simple que se puede usar para panoramizar un flujo de audio hacia la izquierda o hacia la derecha.
+
+ +

Proccesamiento de audio en JavaScript

+ +

Usando worklets de audio (pequeñas tareas), puedes definir nodos personalizados de audio escritos en JavaScript o WebAssembly. Los worklets de audios implementan la interfaz {{domxref("Worklet")}}, una versión ligera de la interfaz {{domxref("Worker")}}. A partir del enero de 2018, los worklets de audio están disponibles en Chrome 64 detrás de un identificador.

+ +
+
{{domxref("AudioWorklet")}} {{experimental_inline}}
+
La interfaz AudioWorklet está disponible a través de {{domxref("BaseAudioContext.audioWorklet")}} y te permite agregar nuevos móduloss al worklet de audio.
+
{{domxref("AudioWorkletNode")}} {{experimental_inline}}
+
La intefaz AudioWorkletNode representa un {{domxref("AudioNode")}} que está insertada en un gráfico de audio y puede pasar mensajes a la AudioWorkletProcessor.
+
{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}
+
La interfaz AudioWorkletProcessor representa código de procesamiento de audio que se ejecuta en un AudioWorkletGlobalScope que genera, procesa, o analiza audio directamente, y puede pasar mensajes al AudioWorkletNode.
+
{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}
+
La interfaz AudioWorkletGlobalScope es un objeto derivado de WorkletGlobalScope que representa un contexto del worker en el que se ejecuta un script de procesamiento de audio; está diseñado para permitir la generación, procesamiento, y análisis de datos de audio directamente usando JavaScript en un hilo worklet.
+
+ +

Antes de que se definieran los worklets de audio, la API de Web Audio usó  ScriptProcessorNode {{deprecated_inline}} para procesamiento de audio basado en JavaScript. Como el código se ejecuta en el hilo principal, tuvo un mal rendimiento. ScriptProcessorNode se mantiene por razones históricas pero está marcada como obsoleta y será removida en una versión futura de la especificación.

+ +
+
{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}
+
La interfaz ScriptProcessorNode permite la generación, procesamiento, o análisis de audio usando JavaScript. Es un módulo de procesamiento de audio {{domxref("AudioNode")}} que está enlazado a dos buffers, uno conteniendo la actual entrada, uno conteniendo la salida. Un evento, implementando la interfaz {{domxref("AudioProcessingEvent")}}, es enviado al objeto cada vez que el buffer de entrada contiene nuevos datos, y el manejador del evento termina cuando ha llenado el buffer de salida con datos.
+
{{event("audioprocess")}} (event) {{deprecated_inline}}
+
El evento audioprocess es lanzado cuando un buffer de entrada de un {{domxref("ScriptProcessorNode")}} del API del Audio Web está listo para ser procesado.
+
{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}
+
El evento AudioProcessingEvent del API de Audio Web representa los eventos que ocurren cuando un buffer de entrada {{domxref("ScriptProcessorNode")}} está listo para ser procesado.
+
+ +

Procesamiento de audio offline/en segundo plano

+ +

Es posible procesar/renderizar un gráfico de muy rápidamente en segundo plano — renderizándolo en un {{domxref("AudioBuffer")}} en lugar de hacerlo a los altavoces del equipo — con lo siguiente.

+ +
+
{{domxref("OfflineAudioContext")}}
+
La interfaz OfflineAudioContext es una interfaz {{domxref("AudioContext")}} representando un gráfico de procesamiento de audio construido a partir de varios {{domxref("AudioNode")}} enlazados juntos. En contraste con un AudioContext estándar, un OfflineAudioContext realmente no procesa el audio sino que lo genera, lo más rápido que puede, en un buffer.
+
{{event("complete")}} (event)
+
El evento complete es lanzado cuando el renderizado de un {{domxref("OfflineAudioContext")}} está terminado.
+
{{domxref("OfflineAudioCompletionEvent")}}
+
La interfaz OfflineAudioCompletionEvent representa los eventos que ocurren cuando procesamiento de un {{domxref("OfflineAudioContext")}} is terminado. El evento {{event("complete")}} implementa esta interfaz.
+
+ +

Interfaces obsoletas

+ +

Las siguientes interfaces fueron definidas en versiones antiguas de la especificación del API de Audio Web, pero ahora están obsoletas y han sido reemplazadas por otras interfaces.

+ +
+
{{domxref("JavaScriptNode")}}
+
Usada para dirigir procesamiento de audio a través de JavaScript. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("ScriptProcessorNode")}}.
+
{{domxref("WaveTableNode")}}
+
Usada para definir una forma de onda periórica. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("PeriodicWave")}}.
+
+ +

Ejemplo

+ +

Este ejemplo muestra una amplia variedad de funciones del API de Audio Web siendo usadas. Puedes ver este código en acción en la demostración de Voice-change-o-matic (también revisa el código completo en Github) — este es un demo experimental de juguete cambiador de voz; manten tus parlantes en bajo volumen cuando lo uses ¡Al menos al comenzar!

+ +

Las líneas del API de Audio Web están resaltadas; si quieres saber más sobre lo que hacen los diferentes métodos, etc., busca en las páginas de referencia.

+ +
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // definir contexto de audio
+// los navegadores Webkit/blink necesitan prefijo, Safari no funcionará sin window.
+
+var voiceSelect = document.getElementById("voice"); // caja de selección para la selección de opciones de efectos de voz
+var visualSelect = document.getElementById("visual"); // caja de selección para la selección de opciones de visualización de audio
+var mute = document.querySelector('.mute'); // botón de silencio
+var drawVisual; // requestAnimationFrame
+
+var analyser = audioCtx.createAnalyser();
+var distortion = audioCtx.createWaveShaper();
+var gainNode = audioCtx.createGain();
+var biquadFilter = audioCtx.createBiquadFilter();
+
+function makeDistortionCurve(amount) { // función para hacer que la forma de curva para distorsión / nodo modificador de onda para usar
+  var k = typeof amount === 'number' ? amount : 50,
+    n_samples = 44100,
+    curve = new Float32Array(n_samples),
+    deg = Math.PI / 180,
+    i = 0,
+    x;
+  for ( ; i < n_samples; ++i ) {
+    x = i * 2 / n_samples - 1;
+    curve[i] = ( 3 + k ) * x * 20 * deg / ( Math.PI + k * Math.abs(x) );
+  }
+  return curve;
+};
+
+navigator.getUserMedia (
+  // restricciones - solo el audio es necesario para esta aplicación
+  {
+    audio: true
+  },
+
+  // Retrollamada de éxito
+  function(stream) {
+    source = audioCtx.createMediaStreamSource(stream);
+    source.connect(analyser);
+    analyser.connect(distortion);
+    distortion.connect(biquadFilter);
+    biquadFilter.connect(gainNode);
+    gainNode.connect(audioCtx.destination); // conectando los diferentes nodos de grafo de audio juntos
+
+    visualize(stream);
+    voiceChange();
+
+  },
+
+  // Retrollamada de error
+  function(err) {
+    console.log('Se produjo el siguiente error gUM: ' + err);
+  }
+);
+
+function visualize(stream) {
+  WIDTH = canvas.width;
+  HEIGHT = canvas.height;
+
+  var visualSetting = visualSelect.value;
+  console.log(visualSetting);
+
+  if(visualSetting == "sinewave") {
+    analyser.fftSize = 2048;
+    var bufferLength = analyser.frequencyBinCount; // la mitad del valor de FFT
+    var dataArray = new Uint8Array(bufferLength); // crear una matriz para almacenar los datos
+
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+
+    function draw() {
+
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteTimeDomainData(dataArray); // obtener datos de forma de onda y ponerlo en la matriz creada arriba
+
+      canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dibujar onda con canvas
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+
+      canvasCtx.lineWidth = 2;
+      canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+
+      canvasCtx.beginPath();
+
+      var sliceWidth = WIDTH * 1.0 / bufferLength;
+      var x = 0;
+
+      for(var i = 0; i < bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }
+
+      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };
+
+    draw();
+
+  } else if(visualSetting == "off") {
+    canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    canvasCtx.fillStyle = "red";
+    canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);
+  }
+
+}
+
+function voiceChange() {
+  distortion.curve = new Float32Array;
+  biquadFilter.gain.value = 0; // restablecer los efectos cada vez que se ejecuta la función VoiceChange
+
+  var voiceSetting = voiceSelect.value;
+  console.log(voiceSetting);
+
+  if(voiceSetting == "distortion") {
+    distortion.curve = makeDistortionCurve(400); // aplicar distorsión al sonido usando el nodo waveshaper
+  } else if(voiceSetting == "biquad") {
+    biquadFilter.type = "lowshelf";
+    biquadFilter.frequency.value = 1000;
+    biquadFilter.gain.value = 25; // aplicar el filtro lowshelf a los sonidos usando biquad
+  } else if(voiceSetting == "off") {
+    console.log("Voice settings turned off"); // no hacer nada, ya que se eligió la opción de apagado
+  }
+
+}
+
+// oyentes de eventos para cambiar la visualización y la configuración de voz
+
+visualSelect.onchange = function() {
+  window.cancelAnimationFrame(drawVisual);
+  visualize(stream);
+}
+
+voiceSelect.onchange = function() {
+  voiceChange();
+}
+
+mute.onclick = voiceMute;
+
+function voiceMute() { // alternar para silenciar y activar el sonido
+  if(mute.id == "") {
+    gainNode.gain.value = 0; // ganancia establecida en 0 para silenciar el sonido
+    mute.id = "activated";
+    mute.innerHTML = "Unmute";
+  } else {
+    gainNode.gain.value = 1; // ganancia establecida en 1 para activar el sonido
+    mute.id = "";
+    mute.innerHTML = "Mute";
+  }
+}
+
+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Audio API')}}{{Spec2('Web Audio API')}} 
+ +

Compatibilidad en navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico14 {{property_prefix("webkit")}}{{CompatVersionUnknown}}23{{CompatNo}}15 {{property_prefix("webkit")}}
+ 22 (unprefixed)		6 {{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}28 {{property_prefix("webkit")}}{{CompatVersionUnknown}}251.2{{CompatNo}}{{CompatNo}}6 {{property_prefix("webkit")}}
+
+ +

También ver

+ + + +

Enlaces rápidos

+ +
    +
  1. Guíass + +
      +
    1. Conceptos básicos detrás del API de Audio Web
      2. +
    2. Usando el API de Audio Web
      3. +
    3. Visualizaciones con el API de Audio Web
      4. +
    4. Bases de la espacialización de audio Web
      5. +
    5. Portando código de webkitAudioContext a estándares basados en AudioContext
      6. +
    +
    2. +
  2. Ejemplos +
      +
    1. Teclado sintetizador sencillo
      2. +
    2. Voice-change-O-matic
      3. +
    3. Violent Theremin
      4. +
    +
    3. +
  3. Interfaces +
      +
    1. {{domxref("AnalyserNode")}}
      2. +
    2. {{domxref("AudioBuffer")}}
      3. +
    3. {{domxref("AudioScheduledSourceNode")}}
      4. +
    4. {{domxref("AudioBufferSourceNode")}}
      5. +
    5. {{domxref("AudioContext")}}
      6. +
    6. {{domxref("AudioDestinationNode")}}
      7. +
    7. {{domxref("AudioListener")}}
      8. +
    8. {{domxref("AudioNode")}}
      9. +
    9. {{domxref("AudioParam")}}
      10. +
    10. {{event("audioprocess")}} (event)
      11. +
    11. {{domxref("AudioProcessingEvent")}}
      12. +
    12. {{domxref("BiquadFilterNode")}}
      13. +
    13. {{domxref("ChannelMergerNode")}}
      14. +
    14. {{domxref("ChannelSplitterNode")}}
      15. +
    15. {{event("complete")}} (event)
      16. +
    16. {{domxref("ConvolverNode")}}
      17. +
    17. {{domxref("DelayNode")}}
      18. +
    18. {{domxref("DynamicsCompressorNode")}}
      19. +
    19. {{event("ended_(Web_Audio)", "ended")}} (event)
      20. +
    20. {{domxref("GainNode")}}
      21. +
    21. {{domxref("MediaElementAudioSourceNode")}}
      22. +
    22. {{domxref("MediaStreamAudioDestinationNode")}}
      23. +
    23. {{domxref("MediaStreamAudioSourceNode")}}
      24. +
    24. {{domxref("OfflineAudioCompletionEvent")}}
      25. +
    25. {{domxref("OfflineAudioContext")}}
      26. +
    26. {{domxref("OscillatorNode")}}
      27. +
    27. {{domxref("PannerNode")}}
      28. +
    28. {{domxref("PeriodicWave")}}
      29. +
    29. {{domxref("ScriptProcessorNode")}}
      30. +
    30. {{domxref("WaveShaperNode")}}
      31. +
    +
    4. +
diff --git a/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html b/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html deleted file mode 100644 index f2e2ef65fd..0000000000 --- a/files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Verificando la autenticidad usando contraseña -slug: Web/API/Web_Crypto_API/Checking_authenticity_with_password -translation_of: Web/API/Web_Crypto_API/Checking_authenticity_with_password ---- -

{{APIRef("Web Crypto API")}}{{draft}}

- -

La autenticidad del mensaje puede ser verificada usando el API Crypto Web. En este artículo mostrarémos como crear y controlar una firma digital utilizando una contraseña y una función hash.

- -

Un algoritmo HMAC toma una llave y genera un código digerido de la llave y los datos a firmar. Posteriormente, cualquiera con la llave puede volver a generar el mismo código digerido para verificar si los datos han sido alterados.  Además, mediante el conocimiento de una clave secreta, permite almacenar juntos el código digerido y los datos: un atacante no podrá generar un código digerido sobre datos manipulados si no conoce la clave secreta.

- -

Note that this algorithm doesn't carry any information about the person owning the data, nor its unicity: the mere knowledge of the key is enough to alter the data.

- -

Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use localforage.js a small library wrapping the different storages capabilities of a browser in the same interface. This library is not an essential component of this use case and is used here for convenience, to keep focused on what really matter, the cryptographic part.

- -

The data we want to access is of the form:

- -

 

- -

where data is the information to guarantee the integrity and signature the information used to verify it.

- -

Cryptographic keys can't be remembered by heart by human, and passwords, or passphrases, make bad, that is unsecure, cryptographic key. To solve this problem, cryptographers have designed algorithms generating cryptographically-sound keys from password. Knowing the password allowed to regenerate the same key and to use it.

- -

We ask the user for a password, and we use it to generate the key:

- -
 
- -

With that key, we will be able to compute the mac of the data.

- -
 
diff --git a/files/es/web/api/web_speech_api/using_the_web_speech_api/index.html b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.html new file mode 100644 index 0000000000..407de0e10d --- /dev/null +++ b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.html @@ -0,0 +1,301 @@ +--- +title: Uso de la Web Speech API +slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API +translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API +--- +

La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.

+ +

Reconocimiento de voz

+ +

El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.

+ +

La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.

+ +
+

Note: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.

+
+ +

Demo

+ +

Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada Speech color changer. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.

+ +

The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo webkitSpeechRecognition.

+ +

HTML y CSS

+ +

El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.

+ +
<h1>Speech color changer</h1>
+<p>Tap/click then say a color to change the background color of the app.</p>
+<div>
+  <p class="output"><em>...diagnostic messages</em></p>
+</div>
+ +

El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.

+ +

JavaScript

+ +

Miremos el JavaScript con un poco más de detalle.

+ +

Compatibilidad con Chrome 

+ +

Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':

+ +
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
+var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
+var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
+ +

La gramática -grammar-

+ +

Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:

+ +
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
+var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
+ +

El formato usado para 'grammar' es JSpeech Grammar Format (JSGF) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:

+ + + +

Conectando la gramática a nuestro reconocimiento de voz

+ +

Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.

+ +
var recognition = new SpeechRecognition();
+var speechRecognitionList = new SpeechGrammarList();
+ +

Añadimos nuestra  grammar  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.

+ +
speechRecognitionList.addFromString(grammar, 1);
+ +

Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:

+ + + +
recognition.grammars = speechRecognitionList;
+recognition.continuous = false;
+recognition.lang = 'en-US';
+recognition.interimResults = false;
+recognition.maxAlternatives = 1;
+ +

Comenzando el reconocimiento de voz

+ +

Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método forEach() se usa para visualizar indicadores de colores que muestran qué colores intenta decir.

+ +
var diagnostic = document.querySelector('.output');
+var bg = document.querySelector('html');
+var hints = document.querySelector('.hints');
+
+var colorHTML= '';
+colors.forEach(function(v, i, a){
+  console.log(v, i);
+  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
+});
+hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
+
+document.body.onclick = function() {
+  recognition.start();
+  console.log('Ready to receive a color command.');
+}
+ +

Recepción y manejo de resultados

+ +

Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver SpeechRecognition event handlers list.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:

+ +
recognition.onresult = function(event) {
+  var color = event.results[0][0].transcript;
+  diagnostic.textContent = 'Result received: ' + color + '.';
+  bg.style.backgroundColor = color;
+  console.log('Confidence: ' + event.results[0][0].confidence);
+}
+ +

La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer [0] devuelve el SpeechRecognitionResult en la posición 0. Cada objeto SpeechRecognitionResult contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo [0] devuelve SpeechRecognitionAlternative en la posición 0. Luego devolvemos su propiedad transcript para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.

+ +

También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:

+ +
recognition.onspeechend = function() {
+  recognition.stop();
+}
+ +

Manejo de errores y voz no reconocida

+ +

Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:

+ +
recognition.onnomatch = function(event) {
+  diagnostic.textContent = 'I didnt recognise that color.';
+}
+ +

{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:

+ +
recognition.onerror = function(event) {
+  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
+}
+ +

Síntesis de voz

+ +

La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.

+ +

La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.

+ +

Demo

+ +

Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada Speak easy synthesis. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar Enter/Return para escucharlo.

+ +

UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

+ +

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

+ +

Compatibilidad de navegadores

+ +

El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:

+ + + +

HTML y CSS

+ +

El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)

+ +
<h1>Speech synthesiser</h1>
+
+<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
+
+<form>
+  <input type="text" class="txt">
+  <div>
+    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
+    <div class="rate-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <div>
+    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
+    <div class="pitch-value">1</div>
+    <div class="clearfix"></div>
+  </div>
+  <select>
+
+  </select>
+</form>
+ +

JavaScript

+ +

Analicemos el JavaScript usado en esta app.

+ +

Configurar variables

+ +

En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+ +

Rellenar el elemento select 

+ +

Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función populateVoiceList(). Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y -- DEFAULT si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve true.)

+ +

Para cada opción también creamos atributos data-, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.

+ +
function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+ +

Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.

+ +
populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+ +

Reproduciendo el texto introducido

+ +

A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador onsubmit en el formulario para que la acción ocurra cuando se presione Enter/Return. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.

+ +

A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} selectedOptions para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento data-name, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.

+ +

Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.

+ +
inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+ +

Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.

+ +
   utterThis.onpause = function(event) {
+    var char = event.utterance.text.charAt(event.charIndex);
+    console.log('Speech paused at character ' + event.charIndex + ' of "' +
+    event.utterance.text + '", which is "' + char + '".');
+  }
+ +

Por último, llamamos a blur() en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.

+ +
  inputTxt.blur();
+}
+ +

Actualizando los valores de tono y velocidad mostrados

+ +

La última parte del código simplemente actualiza los valores pitch/rate mostrados en la IU, cada vez que el slider cambia de posición.

+ +
pitch.onchange = function() {
+  pitchValue.textContent = pitch.value;
+}
+
+rate.onchange = function() {
+  rateValue.textContent = rate.value;
+}
diff --git a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html b/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html deleted file mode 100644 index 407de0e10d..0000000000 --- a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Uso de la Web Speech API -slug: Web/API/Web_Speech_API/Uso_de_la_Web_Speech_API -translation_of: Web/API/Web_Speech_API/Using_the_Web_Speech_API ---- -

La API Web Speech API proporciona dos funcionalidades distintas — reconocimiento de voz, y síntesis de voz (también conocido como texto a voz o tts) — lo que nos ofrece nuevas e interesantes posibilidades para accesibilidad y otros mecanismos. Este artículo ofrece una breve introducción en las dos áreas, así como unas demos.

- -

Reconocimiento de voz

- -

El reconocimiento de voz implica recibir voz a través del micrófono de un dispositivo, luego es verificado por un servicio de reconocimiento de voz contra una lista de palabras o frases 'grammar' (esta lista básicamente es el vocabulario a reconocer en una app particular). Cuando se reconoce con éxito una palabra o frase, esta se devuelve como una cadena de texto y así poder iniciar otras acciones.

- -

La API Web Speech tiene una interfaz principal de control para el - {{domxref ("SpeechRecognition")}} -, además de una serie de interfaces estrechamente relacionadas para representar la gramática, los resultados, etc. Normalmente, el sistema de reconocimiento de voz predeterminado que dispone el dispositivo se utilizará para el reconocimiento de voz: la mayoría de los sistemas operativos modernos tienen un sistema de reconocimiento de voz para emitir comandos de voz. Piense en Dictado en macOS, Siri en iOS, Cortana en Windows 10, Android Speech, etc.

- -
-

Note: En algunos navegadores como Chrome, el uso del reconocimiento de voz implica el uso de un motor de reconocimiento basado en un servidor. Tu audio se envía a un servicio de reconocimiento web para ser procesado, por lo que no funcionará offline.

-
- -

Demo

- -

Para mostrar un uso sencillo del reconocimiento de voz Web, hemos escrito una demo llamada Speech color changer. Cuando se toca o hace click en la pantalla, se puede decir un color HTML, y el color de fondo de la aplicación cambiará a ese color.

- -

The UI of an app titled Speech Color changer. It invites the user to tap the screen and say a color, and then it turns the background of the app that colour. In this case it has turned the background red.

- -

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

- -

Compatibilidad de navegadores

- -

Actualmente, la compatibilidad de la Web Speech API para el reconocimiento de voz se limita a Chrome para escritorio y Android — Chrome tiene soporte desde la versión 33 pero con interfaces 'prefixed', por lo que se deben incluir ese tipo de interfaces 'prefixed', por ejemplo webkitSpeechRecognition.

- -

HTML y CSS

- -

El HTML y el CSS para esta app no son importantes. Solo tenemos un título, instrucciones en un párrafo, y un div dentro del cual visualizaremos los mensajes de diagnósticos.

- -
<h1>Speech color changer</h1>
-<p>Tap/click then say a color to change the background color of the app.</p>
-<div>
-  <p class="output"><em>...diagnostic messages</em></p>
-</div>
- -

El CSS proporciona un estilo responsive muy simple para que se visualice bien en todos los dispositivos.

- -

JavaScript

- -

Miremos el JavaScript con un poco más de detalle.

- -

Compatibilidad con Chrome 

- -

Como se ha mencionado anteriormente, Chrome actualmente admite el reconocimiento de voz con propiedades 'prefixed', por lo tanto, al principio de nuestro código incluiremos las siguientes líneas para usar los objetos que correspondan a Chrome, y así cualquier implementación en el futuro pueda admitir estas características sin ningún 'prefixed':

- -
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
-var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList
-var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
- -

La gramática -grammar-

- -

Las siguientes líneas de código definen la gramática que queremos que reconozca nuestra app. Se define una variable para contener nuestra gramática:

- -
var colors = [ 'aqua' , 'azure' , 'beige', 'bisque', 'black', 'blue', 'brown', 'chocolate', 'coral' ... ];
-var grammar = '#JSGF V1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;'
- -

El formato usado para 'grammar' es JSpeech Grammar Format (JSGF) — Se puede encontrar más sobre las especificaciones de este formato en el anterior enlace. Sin embargo y por ahora vamos a echarle un vistazo rápidamente:

- - - -

Conectando la gramática a nuestro reconocimiento de voz

- -

Lo siguiente que tenemos que hacer es definir una instancia de reconocimiento de voz para el control en nuestra aplicación. Esto se hace usando el constructor {{domxref("SpeechRecognition.SpeechRecognition()", "SpeechRecognition()")}}. También creamos una lista de gramática de voz para contener nuestra gramática usando el constructor {{domxref("SpeechGrammarList.SpeechGrammarList()","SpeechGrammarList()")}}.

- -
var recognition = new SpeechRecognition();
-var speechRecognitionList = new SpeechGrammarList();
- -

Añadimos nuestra  grammar  a la lista anterior usando el método {{domxref("SpeechGrammarList.addFromString()")}}. Este método acepta como parámetro la cadena que queremos añadir, así como opcionalmente, un valor que especifique la importancia de esta gramática en relación a otras gramáticas disponibles en la lista (el rango del valor va desde 0 hasta 1 inclusive). La gramática agregada está disponible en la lista como una instancia del objeto {{domxref("SpeechGrammar")}}.

- -
speechRecognitionList.addFromString(grammar, 1);
- -

Después añadimos la lista {{domxref("SpeechGrammarList")}} a la instancia del reconocimiento de voz estableciéndola en la propiedad {{domxref("SpeechRecognition.grammars")}}. También establecemos algunas otras propiedades a la instancia de reconocimiento antes de continuar:

- - - -
recognition.grammars = speechRecognitionList;
-recognition.continuous = false;
-recognition.lang = 'en-US';
-recognition.interimResults = false;
-recognition.maxAlternatives = 1;
- -

Comenzando el reconocimiento de voz

- -

Tomamos las referencias de la salida {{htmlelement("div")}} y del elemento HTML (para que podamos enviar mensajes de diagnostico y actualizar el color de fondo de la aplicación más adelante), e implementamos un manejador onclick para que cuando se haga click o se toque la pantalla, se inicie el reconocimiento de voz. Esto se logra llamando al método {{domxref("SpeechRecognition.start()")}}. El método forEach() se usa para visualizar indicadores de colores que muestran qué colores intenta decir.

- -
var diagnostic = document.querySelector('.output');
-var bg = document.querySelector('html');
-var hints = document.querySelector('.hints');
-
-var colorHTML= '';
-colors.forEach(function(v, i, a){
-  console.log(v, i);
-  colorHTML += '<span style="background-color:' + v + ';"> ' + v + ' </span>';
-});
-hints.innerHTML = 'Tap/click then say a color to change the background color of the app. Try ' + colorHTML + '.';
-
-document.body.onclick = function() {
-  recognition.start();
-  console.log('Ready to receive a color command.');
-}
- -

Recepción y manejo de resultados

- -

Una vez que comienza el reconocimiento de voz, hay muchos manejadores de eventos que se pueden usar para recuperar los resultados, así como otros elementos de información adicional (ver SpeechRecognition event handlers list.) El más común que probablemente usarás es {{domxref("SpeechRecognition.onresult")}}, el cual es lanzado cuando se recibe el resultado con éxito:

- -
recognition.onresult = function(event) {
-  var color = event.results[0][0].transcript;
-  diagnostic.textContent = 'Result received: ' + color + '.';
-  bg.style.backgroundColor = color;
-  console.log('Confidence: ' + event.results[0][0].confidence);
-}
- -

La tercera línea es un poco más compleja, así que vamos a explicarla paso a paso. La propiedad {{domxref("SpeechRecognitionEvent.results")}} devuelve un objeto {{domxref("SpeechRecognitionResultList")}} que contiene los objetos {{domxref("SpeechRecognitionResult")}}. Tiene un getter para que pueda ser accesible como si fuera un array — así el primer [0] devuelve el SpeechRecognitionResult en la posición 0. Cada objeto SpeechRecognitionResult contiene objetos {{domxref("SpeechRecognitionAlternative")}} que contienen palabras individuales reconocidas. Estos también tienen getters para que se puedan acceder a ellos como arrays — por lo tanto el segundo [0] devuelve SpeechRecognitionAlternative en la posición 0. Luego devolvemos su propiedad transcript para obtener una cadena que contenga  el resultado individual reconocido como un string, estableciendo el color de fondo a ese color, e informando del color reconocido como un mensaje de diagnóstico en el IU.

- -

También usamos el manejador {{domxref("SpeechRecognition.onspeechend")}} para parar el servicio de reconocimiento de voz (usando {{domxref("SpeechRecognition.stop()")}}) cuando se ha reconocido una sola palabra y se ha finalizado de hablar:

- -
recognition.onspeechend = function() {
-  recognition.stop();
-}
- -

Manejo de errores y voz no reconocida

- -

Los dos últimos manejadores son para controlar los casos donde no se reconoce ninguna de las palabras definidas en la gramática, o cuando ocurre un error. {{domxref("SpeechRecognition.onnomatch")}} maneja el primer caso mencionado, pero tenga en cuenta que de momento no parece que se dispare correctamente; solo devuelve lo que ha reconocido:

- -
recognition.onnomatch = function(event) {
-  diagnostic.textContent = 'I didnt recognise that color.';
-}
- -

{{domxref("SpeechRecognition.onerror")}} maneja los casos donde se ha producido en error en el reconocimiento  — la propiedad {{domxref("SpeechRecognitionError.error")}} contiene el error devuelto:

- -
recognition.onerror = function(event) {
-  diagnostic.textContent = 'Error occurred in recognition: ' + event.error;
-}
- -

Síntesis de voz

- -

La síntesis de voz (también  conocida como texto a voz o tts) implica recibir  contenido en forma de texto dentro de una aplicación y convertirla en voz a través del altavoz del dispositivo o de la conexión de salida del audio.

- -

La Web Speech API tiene una interface principal controladora — {{domxref("SpeechSynthesis")}} — además de una serie de interfaces estrechamente relacionadas para representar  el texto que se va a sintetizar (conocido como dictados 'utterances'), voces que se usarán para los dictados, etc. De nuevo, la mayoría de sistemas operativos disponen de algún sistema de síntesis de voz que pueden serán usados por la API si están disponibles.

- -

Demo

- -

Para mostrar un uso sencillo de la síntesis de voz Web, tenemos la demo llamada Speak easy synthesis. Esta incluye un juego de controles de formulario para introducir texto a sintetizar, configurar el tono, velocidad de reproducción y la voz a usar cuando el texto sea pronunciado.  Después de introducir el texto se puede presionar Enter/Return para escucharlo.

- -

UI of an app called speak easy synthesis. It has an input field in which to input text to be synthesised, slider controls to change the rate and pitch of the speech, and a drop down menu to choose between different voices.

- -

Para ejecutar la demo, se puede clonar (o directamente descargar) el repositorio Github donde se encuentra, abrir el fichero index HTML en un navegador de escritorio compatible, o navegar a través del enlace live demo URL en un navegador de móvil compatible como Chrome.

- -

Compatibilidad de navegadores

- -

El soporte para la síntesis de voz Web Speech API solo ha llegado a los navegadores más importantes  y actualmente se limita a los siguientes:

- - - -

HTML y CSS

- -

El HTML y CSS de nuevo no son fundamentales, simplemente contiene un titulo, algunas instrucciones de uso y un formulario con algunos controles sencillos. El elemento {{htmlelement("select")}} inicialmente está vacío pero se rellena con {{htmlelement("option")}} mediante JavaScript (ver más adelante.)

- -
<h1>Speech synthesiser</h1>
-
-<p>Enter some text in the input below and press return to hear it. change voices using the dropdown menu.</p>
-
-<form>
-  <input type="text" class="txt">
-  <div>
-    <label for="rate">Rate</label><input type="range" min="0.5" max="2" value="1" step="0.1" id="rate">
-    <div class="rate-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <div>
-    <label for="pitch">Pitch</label><input type="range" min="0" max="2" value="1" step="0.1" id="pitch">
-    <div class="pitch-value">1</div>
-    <div class="clearfix"></div>
-  </div>
-  <select>
-
-  </select>
-</form>
- -

JavaScript

- -

Analicemos el JavaScript usado en esta app.

- -

Configurar variables

- -

En primer lugar, capturamos las referencias de todos los elementos DOM involucrados en la IU, pero lo más importante es capturar una referencia a  {{domxref("Window.speechSynthesis")}}. Este es el punto de entrada a la API — devuelve una instancia a {{domxref("SpeechSynthesis")}}, la interface controladora para la síntesis de voz en la web.

- -
var synth = window.speechSynthesis;
-
-var inputForm = document.querySelector('form');
-var inputTxt = document.querySelector('.txt');
-var voiceSelect = document.querySelector('select');
-
-var pitch = document.querySelector('#pitch');
-var pitchValue = document.querySelector('.pitch-value');
-var rate = document.querySelector('#rate');
-var rateValue = document.querySelector('.rate-value');
-
-var voices = [];
-
- -

Rellenar el elemento select 

- -

Para rellenar el elemento {{htmlelement("select")}} con las diferentes opciones de voz del que dispone el dispositivo, hemos escrito la función populateVoiceList(). Primero invocamos {{domxref("SpeechSynthesis.getVoices()")}}, que devuelve una lista de todas las voces disponibles representadas por objetos {{domxref("SpeechSynthesisVoice")}}. Después recorremos esa lista — para cada voz creamos un elemento {{htmlelement("option")}}, establecemos su contenido con el nombre de la voz (desde {{domxref("SpeechSynthesisVoice.name")}}), y el lenguaje de la misma (desde {{domxref("SpeechSynthesisVoice.lang")}}), y -- DEFAULT si la voz es la predeterminada para el motor de síntesis (verificando si {{domxref("SpeechSynthesisVoice.default")}} devuelve true.)

- -

Para cada opción también creamos atributos data-, conteniendo el nombre y lenguaje de la voz asociada, para que más tarde podamos usarlos fácilmente, y después añadimos las opciones 'option' como hijos del select.

- -
function populateVoiceList() {
-  voices = synth.getVoices();
-
-  for(i = 0; i < voices.length ; i++) {
-    var option = document.createElement('option');
-    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
-
-    if(voices[i].default) {
-      option.textContent += ' -- DEFAULT';
-    }
-
-    option.setAttribute('data-lang', voices[i].lang);
-    option.setAttribute('data-name', voices[i].name);
-    voiceSelect.appendChild(option);
-  }
-}
- -

Cuando vamos a ejecutar la función hacemos lo siguiente debido a que Firefox no soporta {{domxref("SpeechSynthesis.onvoiceschanged")}}, y sólo devolverá una lista de voces cuando se ejecute {{domxref("SpeechSynthesis.getVoices()")}}. Sin embargo con Chrome solo hay que esperar a que se active el evento antes de rellenar la lista, de ahí la siguiente parte de código.

- -
populateVoiceList();
-if (speechSynthesis.onvoiceschanged !== undefined) {
-  speechSynthesis.onvoiceschanged = populateVoiceList;
-}
- -

Reproduciendo el texto introducido

- -

A continuación, creamos un manejador de eventos para comenzar a reproducir el texto introducido en el campo de texto. Usamos un manejador onsubmit en el formulario para que la acción ocurra cuando se presione Enter/Return. Primero creamos una nueva instancia de  {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "SpeechSynthesisUtterance()")}} usando su constructor — a este se le pasa el valor de la entrada de texto como parámetro.

- -

A continuación, debemos obtener la voz que queremos utilizar. Usamos la propiedad {{domxref("HTMLSelectElement")}} selectedOptions para devolver el elemento seleccionado {{htmlelement("option")}}. Entonces usamos el atributo de este elemento data-name, encontrando el objeto {{domxref("SpeechSynthesisVoice")}} cuyo nombre coincida con el valor del atributo. Y configuramos la propiedad de {{domxref("SpeechSynthesisUtterance.voice")}} con el valor que coincida con la opción seleccionada.

- -

Por último, configuramos {{domxref("SpeechSynthesisUtterance.pitch")}} y {{domxref("SpeechSynthesisUtterance.rate")}} con los valores de los elementos del formulario correspondientes. Entonces y ya configurado todo lo necesario, comenzamos la reproducción invocando  {{domxref("SpeechSynthesis.speak()")}}, y pasándolo a la instancia {{domxref("SpeechSynthesisUtterance")}} como parámetro.

- -
inputForm.onsubmit = function(event) {
-  event.preventDefault();
-
-  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
-  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
-  for(i = 0; i < voices.length ; i++) {
-    if(voices[i].name === selectedOption) {
-      utterThis.voice = voices[i];
-    }
-  }
-  utterThis.pitch = pitch.value;
-  utterThis.rate = rate.value;
-  synth.speak(utterThis);
- -

Al final del manejador incluimos un manejador {{domxref("SpeechSynthesisUtterance.onpause")}} para mostrar cómo usar {{domxref("SpeechSynthesisEvent")}}. Cuando se invoca a  {{domxref("SpeechSynthesis.pause()")}},este devuelve un mensaje informando del número y nombre del carácter en el que se detuvo la reproducción.

- -
   utterThis.onpause = function(event) {
-    var char = event.utterance.text.charAt(event.charIndex);
-    console.log('Speech paused at character ' + event.charIndex + ' of "' +
-    event.utterance.text + '", which is "' + char + '".');
-  }
- -

Por último, llamamos a blur() en la entrada de texto. Esto permite ocultar la entrada de texto en Firefox OS.

- -
  inputTxt.blur();
-}
- -

Actualizando los valores de tono y velocidad mostrados

- -

La última parte del código simplemente actualiza los valores pitch/rate mostrados en la IU, cada vez que el slider cambia de posición.

- -
pitch.onchange = function() {
-  pitchValue.textContent = pitch.value;
-}
-
-rate.onchange = function() {
-  rateValue.textContent = rate.value;
-}
diff --git a/files/es/web/api/web_storage_api/index.html b/files/es/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..26a858d254 --- /dev/null +++ b/files/es/web/api/web_storage_api/index.html @@ -0,0 +1,146 @@ +--- +title: API de almacenamiento web +slug: Web/API/API_de_almacenamiento_web +tags: + - API + - API de almacenamiento web + - Almacenamiento web + - Storage + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

+ +

Almacenamiento web, conceptos y uso

+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ + + +

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

+ +
+

Nota: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene deshabilitadas las cookies de terceros (Firefox implementa este comportamiento a partir de la versión 43).

+
+ +
+

Nota: El almacenamiento web no es lo mismo que mozStorage (interfaces Mozilla's XPCOM para SQLite) o la Session store API (una utilidad de almacenamiento XPCOM usada por extensiones).

+
+ +

Interfaces de almacenamiento web

+ +
+
{{domxref("Storage")}}
+
Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.
+
{{domxref("Window")}}
+
La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).
+
{{domxref("StorageEvent")}}
+
El evento storage se dispara en el objeto Window de un documento cuando un área de la memoria cambia.
+
+ +

Ejemplos

+ +

Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado Demo de almacenamiento web. La página de inicio proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

+ +

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

+ +
+

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ + + +

La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.

+ +

La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.

+ +

Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a esta entrada de blog WHATWG que trata específicamente con este tema.

+ +

Ver también

+ + diff --git a/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html new file mode 100644 index 0000000000..086af18610 --- /dev/null +++ b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -0,0 +1,272 @@ +--- +title: Usando la API de almacenamiento web +slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web +tags: + - API + - API de almacenamiento web + - Guía + - localStorage + - sessionStorage +translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API +--- +
{{DefaultAPISidebar("Web Storage API")}}
+ +
+

La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.

+ +

Este artículo proporciona una guía general de cómo usar esta tecnología.

+
+ +

Conceptos básicos

+ +

Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:

+ +
localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');
+ +
+

Nota: Se recomiendo usar la API de almacenamiento web (setItem, getItem, removeItem, key, length) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.

+
+ +

Los dos mecanismos en el almacenamiento web son los siguientes:

+ + + +

Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y  Window.localStorage (dicho con más precisión, en navegadores con soporte, el objeto Window implementa los objetos  WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage). Al invocar uno de éstos, se creará una instancia del objeto Storage, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.

+ +

Así que, por ejemplo, si en un inicio se llama a localStorage en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a sessionStorage en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.

+ +

Detectar la característica localStorage

+ +

Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.

+ +

Probar la disponibilidad

+ +
+

Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.

+
+ +

Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede soportar localStorage, pero puede no hacerlo disponible para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, disponible. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.

+ +

Esta función detecta si localStorage tiene soporte y está disponible:

+ +
function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException && (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}
+ +

Y aquí se muestra cómo usarla:

+ +
if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}
+ +

También puedes probar sessionStorage invocando storageAvailable('sessionStorage').

+ +

Aquí puedes ver una breve historia de la detección de la característica localStorage.

+ +

Ejemplo

+ +

Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos Demo de almacenamiento web. La página de inicio proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:

+ +

Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en localStorage, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.

+ +

También creamos una página de salida del evento — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.

+ +

+ +
+

Nota: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes ver el código fuente.

+
+ +

Probar si la memoria tiene valores

+ +

En el inicio de main.js, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}
+ +

El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato bgcolor existe; si no, corremos populateStorage() para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos setStyles() para actualizar el estilo de la página con los valores almacenados.

+ +

Nota: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.

+ +

Obtener valores de la memoria

+ +

Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +

Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.

+ +

Guardar valores en la memoria

+ +

{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}
+ +

La función populateStorage() define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función setStyles() para actualizar el estilo de la página, etc.

+ +

También incluimos un manejador onchange para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:

+ +
bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;
+ +

Responder a cambios en la memoria con el evento StorageEvent

+ +

El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.

+ +

En la página de eventos (ver events.js) el único JavaScript es el siguiente:

+ +
window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});
+ +

Aquí añadimos un detector de evento al objeto window que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).

+ +

Borrar registros

+ +

El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:

+ + + +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}{{Spec2('HTML WHATWG')}}
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.

+ +
+

Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.

+
+ +

Ver también

+ + diff --git a/files/es/web/api/web_workers_api/using_web_workers/index.html b/files/es/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..db4dbc07e3 --- /dev/null +++ b/files/es/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,633 @@ +--- +title: Usando Web Workers +slug: Web/Guide/Performance/Usando_web_workers +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +

Los Web Workers dedicados proveen un medio sencillo para que el contenido web ejecute scripts en hilos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea creada mediante envio de mensajes al manejador de eventos especificado por el creador. Sin embargo, los workers trabajan dentro de un contexto global diferente de la ventana actual (usar el atajo  {{ domxref("window") }} en lugar de {{ domxref("window.self","self") }} con el fin de obtener el scope actual dentro de un {{ domxref("Worker") }} retornaría, de hecho, un error).

+ +

El hilo worker puede realizar tareas sin interferir con la interfaz de usuario. Ademas, pueden realizar I/O usando XMLHttpRequest (aunque el responseXML y los atributos channel son siempre null).

+ +

Para documentacion de referencia acerca de workers busca {{ domxref("Worker") }} ; este articulo complementa ese ofreciendo ejemplos y detalles adicionales. Para una lista de las funciones disponibles sobre workers, visita  Functions and interfaces available to workers.

+ +

Acerca de seguridad de hilos

+ +

La interfaz  {{ domxref("Worker") }} crea hilos a nivel de SO reales, y la concurrencia puede causar effectos interesantes en tu código si no eres cuidadoso. Sin embargo, en el caso de los web workers, el control cuidadoso de los puntos de comunicacion con otros hilos indica que es realmente muy dificil causar problemas de concurrencia. No existe acceso a componentes no-hilo seguros o al DOM y debes pasar la informacion entrante o saliente del hilo a traves de objetos serializados. Así que debes poner esfuerzo para causar problemas en tu código.

+ +

Creando un web worker

+ +

Crear un nuevo worker es simple.  Sólo tienes que llamar el constructor {{ domxref("Worker.Worker", "Worker()") }}, especificando la URI de un script a ejecutar en el hilo del worker (worker thread), y, si deseas poder recibir notificaciones del worker, establece la propiedad  {{domxref("Worker.onmessage")}} del worker a una función de manejo de eventos apropiada.

+ +
+
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Called back by the worker!\n");
+};
+
+ +

Alternativamente, puedes usar addEventListener() :

+ +
+
var myWorker = new Worker("my_task.js");
+
+myWorker.addEventListener("message", function (oEvent) {
+  console.log("Called back by the worker!\n");
+}, false);
+
+myWorker.postMessage(""); // start the worker.
+
+ +

La Línea 1 en  este ejemplo crea un nuevo worker (worker thread). La Línea 3 configura un manejador de eventos (listener) para encargarse de los eventos message del worker. Este manejador de eventos se llamará cuando el worker llame a su propia función {{domxref("Worker.postMessage()")}}. Finalmente, la Linea 7 inicia el worker (worker thread).

+ +
Nota : La URI pasada como parámetro del constructor de Worker debe obedecer la política same-origin policy . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.
+ +

Pasando datos

+ +

Los datos pasan entre la página principal y los workers son copiados, no compartidos. Los objetos se serializan a medida que se entregan al worker, y posteriormente, se deserializan en el otro extremo. La página y el worker no comparten la misma instancia, por lo que el resultado final es que un duplicado es creado en cada extremo. La mayoría de los navegadores implementan esta característica como structured cloning.

+ +

Antes de continuar, vamos a crear con fines didácticos una función llamada emulateMessage() que simulará el comportamiento de un valor el cual es clonado y no compartido durante el paso desde un worker a la página principal o viceversa:

+ +
function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+alert(typeof example1); // object
+alert(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+alert(typeof example2); // boolean
+alert(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+alert(typeof example3); // object
+alert(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+alert(typeof example4); // object
+alert(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object
+ +

A Un valor que es clonado y no compartido se denomina mensaje. De vuelta con los workers, los mensajes pueden ser enviados hacia y desde el hilo principal empleando postMessage(). Los eventos de mensaje {{domxref("MessageEvent.data", "data")}} atributo contienen datos devueltos desde el worker.

+ +

example.html: (la página principal):

+ +
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");
+ +

my_task.js (el worker):

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};
+ +
Note: Como siempre, los hilos en segundo plano -incluyendo workers- no pueden manipular el DOM. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.
+ +

The structured cloning algorithm can accept JSON and a few things that JSON can't like circular references.

+ +

Ejemplos pasando datos

+ +

Example #1: Crear un "eval() asíncrono" genérico

+ +

El siguiente ejemplo muestra como usar un worker para ejecutar asíncronamente cualquier tipo de código en Javascript a traves de eval dentro del worker:

+ +
// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+
+})();
+ +

Ejemplo de uso:

+ +
// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+ +

Ejemplo #2: Paso avanzado de JSON Data y creación de un sistema de conmutación

+ +

Si tiene que pasar datos complejos y tienes que llamar a muchas funciones diferentes tanto en la página principal como en el Worker, puede crear un sistema como el siguiente.

+ +

example.html (the main page):

+ +
<!doctype html>
+<html>
+<head>
+<meta charset="UTF-8"  />
+<title>MDN Example - Queryable worker</title>
+<script type="text/javascript">
+  /*
+    QueryableWorker instances methods:
+     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+     * terminate(): terminates the Worker
+     * addListener(name, function): adds a listener
+     * removeListener(name): removes a listener
+    QueryableWorker instances properties:
+     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+  */
+  function QueryableWorker (sURL, fDefListener, fOnError) {
+    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
+    this.defaultListener = fDefListener || function () {};
+    oWorker.onmessage = function (oEvent) {
+      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
+        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
+      } else {
+        this.defaultListener.call(oInstance, oEvent.data);
+      }
+    };
+    if (fOnError) { oWorker.onerror = fOnError; }
+    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
+      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
+      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
+    };
+    this.postMessage = function (vMsg) {
+      //I just think there is no need to use call() method
+      //how about just oWorker.postMessage(vMsg);
+      //the same situation with terminate
+      //well,just a little faster,no search up the prototye chain
+      Worker.prototype.postMessage.call(oWorker, vMsg);
+    };
+    this.terminate = function () {
+      Worker.prototype.terminate.call(oWorker);
+    };
+    this.addListener = function (sName, fListener) {
+      oListeners[sName] = fListener;
+    };
+    this.removeListener = function (sName) {
+      delete oListeners[sName];
+    };
+  };
+
+  // your custom "queryable" worker
+  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
+
+  // your custom "listeners"
+
+  oMyTask.addListener("printSomething", function (nResult) {
+    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
+  });
+
+  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
+    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
+  });
+</script>
+</head>
+<body>
+  <ul>
+    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
+    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
+  </ul>
+</body>
+</html>
+ +

my_task.js (el worker):

+ +
// your custom PRIVATE functions
+
+function myPrivateFunc1 () {
+  // do something
+}
+
+function myPrivateFunc2 () {
+  // do something
+}
+
+// etc. etc.
+
+// your custom PUBLIC functions (i.e. queryable from the main page)
+
+var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomething: function () {
+      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultQuery (vMsg) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
+  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
+    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
+  } else {
+    defaultQuery(oEvent.data);
+  }
+};
+ +

Es un método posible para conmutar el contenido de cada mensaje de cada mainpage-worker y viceversa.

+ +

Pasando datos mediante transferencia de propiedades (objetos transferibles)

+ +

Google Chrome 17 y Firefox 18 implementan un método adicional para enviar ciertos tipos de objetos desde o hacia el worker con un mejor rendimiento. Estos objetos se denominan objetos transferibles (transferable objects), es decir, objetos que implementan la interfaz {{domxref("Transferable")}}. Los objetos transferibles se transfieren de un contexto a otro con una operación "zero-copy". Esto supone una gran mejora de rendimiento al enviar grandes cantidades de datos. Piensa en ello como un paso por referencia si vienes del mundo de C/C++.  Sin embargo, a diferecia del paso por referencia, la "versión" original no queda disponible una vez transferida. Su contenido es transferido al nuevo contexto. Por ejemplo, cuando se transfiere un {{domxref("ArrayBuffer")}} de tu aplicacion al Worker, el contenido del {{domxref("ArrayBuffer")}} original se vacía y no se puede utilizar posteriormente. Su contenido es (literalmente) transferido al contexto del Worker.

+ +
// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+
+ +

Para más información sobre los objetos transferibles, visita HTML5Rocks .

+ +

Spawning subworkers

+ +

Workers may spawn more workers if they wish.  So-called subworkers must be hosted within the same origin as the parent page.  Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page.  This makes it easier for workers to keep track of where their dependencies are.

+ +

Subworkers are currently not supported in Chrome. See crbug.com/31666 .

+ +

Embedded workers

+ +

There is not an "official" way to embed the code of a worker within a web page as for the {{ HTMLElement("script") }} elements. But a {{ HTMLElement("script") }} element which does not have a src attribute and has a type attribute that does not identify an executable mime-type will be considered a data block element, that JavaScript could use.  "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example - Embedded worker</title>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

The embedded worker is now nested into a new custom document.worker property.

+ +

Tiempos fuera e intervalos

+ +

Los trabajadores pueden usar tiempos fuera e intervalos de la misma forma que el "hilo principal".  Esto puede ser útil, por ejemplo, si quieres tener a tu hilo trabajador corriendo codigo periodicamente en lugar de sin parar.

+ +

Ver setTimeout() , clearTimeout() , setInterval() , y clearInterval() para más detalles. Ver también: JavaScript Timers.

+ +

Terminating a worker

+ +

If you need to immediately terminate a running worker, you can do so by calling the worker's terminate() method:

+ +
myWorker.terminate();
+ +

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

+ +

Workers may close themselves by calling their own {{ ifmethod("nsIWorkerScope", "close") }} method:

+ +
self.close();
+ +

Manejo de errores

+ +

When a runtime error occurs in worker, its onerror event handler is called.  It receives an event named error which implements the ErrorEvent interface.  The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

+ +

The error event has the following three fields that are of interest:

+ +
+
message
+
A human-readable error message.
+
filename
+
The name of the script file in which the error occurred.
+
lineno
+
The line number of the script file on which the error occurred.
+
+ +

Accediendo al objeto navigator

+ +

Los workers pueden acceder al objeto navigator, el cuál está disponible dentro de su scope actual. Este contiene los siguientes strings que pueden ser usados para identificar el navegador, al igual que puede realizarse usando scripts normales:

+ + + +

Importing scripts and libraries

+ +

Worker threads have access to a global function, importScripts() , which lets them import scripts or libraries into their scope.  It accepts as parameters zero or more URIs to resources to import; all of the following examples are valid:

+ +
importScripts();                        /* imports nothing */
+importScripts('foo.js');                /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');      /* imports two scripts */
+
+ +

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{ domxref("window.setTimeout()") }}) will still be functional though. Function declarations after the importScripts() method are also kept, since these are always evaluated before the rest of the code.

+ +
Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() .  This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
+ +

Examples

+ +

This section provides several examples of how to use DOM workers.

+ +

Performing computations in the background

+ +

One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread.  In this example, a worker is used to calculate Fibonacci numbers.

+ +

The JavaScript code

+ +

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

+ +
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+ +

The worker sets the property onmessage  to a function which will receive messages sent when the worker object's  postMessage() is called.  (Note that this differs from defining a global variable of that name, or defining a function with that name.   var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the  web page that created the worker.)  This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

+ +

The HTML code

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  </script>
+  </body>
+</html>
+
+ +

The web page creates a div element with the ID  result , which gets used to display the result, then spawns the worker.  After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

+ +

Finally, a message is sent to the worker to start it.

+ +

Try this example .

+ +

Performing web I/O in the background

+ +

You can find an example of this in the article Using workers in extensions .

+ +

Dividing tasks among multiple workers

+ +

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

+ +

example coming soon

+ +

Creating workers from within workers

+ +

The Fibonacci example shown previously demonstrates that workers can in fact spawn additional workers.  This makes it easy to create recursive routines.

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dedicated workers{{CompatChrome(3)}}{{CompatGeckoDesktop(1.9.1)}}{{CompatIE(10)}}{{CompatOpera(10.60)}}{{CompatSafari(4)}}
Shared workers{{CompatChrome(3)}}{{CompatNo}}{{CompatNo}}{{CompatOpera(10.60)}}{{CompatSafari(5)}}
Passing data using structured cloning . {{CompatChrome(13)}}{{CompatGeckoDesktop(8)}}{{CompatIE(10)}}{{CompatOpera(11.50)}}{{CompatSafari(5.1)}}
Passing data using  transferable objects17 {{ property_prefix("webkit") }}
+ {{CompatChrome(21)}}		{{CompatGeckoDesktop(18)}}{{CompatNo}}{{CompatOpera(15)}}{{CompatSafari(6)}}
Global {{ domxref("window.URL", "URL") }}10 as webkitURL
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}6 as webkitURL
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Dedicated workers---0.163.5 (1.9.1)---115
Shared workers---{{ CompatNo() }}------------
Passing data using structured cloning . ---0.168---------
Passing data using  transferable objects---18---------
+
+ +

See also

+ + diff --git a/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html new file mode 100644 index 0000000000..91e6bf3d37 --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html @@ -0,0 +1,133 @@ +--- +title: Creación de objetos 3D utilizando WebGL +slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL +tags: + - Cubo 3D + - Objetos 3D + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

+ +

Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

+ +

Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.

+ +

Definir la posición de los vértices del cubo

+ +

Primero, construiremos el buffer para la posición de los vértices actualizando el código en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):

+ +
var vertices = [
+  // Cara delantera
+  -1.0, -1.0,  1.0,
+   1.0, -1.0,  1.0,
+   1.0,  1.0,  1.0,
+  -1.0,  1.0,  1.0,
+
+  // Cara trasera
+  -1.0, -1.0, -1.0,
+  -1.0,  1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0, -1.0, -1.0,
+
+  // Top face
+  -1.0,  1.0, -1.0,
+  -1.0,  1.0,  1.0,
+   1.0,  1.0,  1.0,
+   1.0,  1.0, -1.0,
+
+  // Bottom face
+  -1.0, -1.0, -1.0,
+   1.0, -1.0, -1.0,
+   1.0, -1.0,  1.0,
+  -1.0, -1.0,  1.0,
+
+  // Right face
+   1.0, -1.0, -1.0,
+   1.0,  1.0, -1.0,
+   1.0,  1.0,  1.0,
+   1.0, -1.0,  1.0,
+
+  // Left face
+  -1.0, -1.0, -1.0,
+  -1.0, -1.0,  1.0,
+  -1.0,  1.0,  1.0,
+  -1.0,  1.0, -1.0
+];
+
+ +

Definir los colores de los vértices

+ +

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.

+ +
var colors = [
+  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
+  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
+  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
+  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
+  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
+  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
+];
+
+var generatedColors = [];
+
+for (j=0; j<6; j++) {
+  var c = colors[j];
+
+  for (var i=0; i<4; i++) {
+    generatedColors = generatedColors.concat(c);
+  }
+}
+
+var cubeVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
+
+ +

Definir el elemento arreglo

+ +

Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.

+ +
var cubeVerticesIndexBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+// Este arrelgo define cada cara como 2 triángulos utilizando
+// los índices dentro de cada arreglo de vértices
+// para especificar cada posición en los tríangulos.
+
+var cubeVertexIndices = [
+  0,  1,  2,      0,  2,  3,    // enfrente
+  4,  5,  6,      4,  6,  7,    // atrás
+  8,  9,  10,     8,  10, 11,   // arriba
+  12, 13, 14,     12, 14, 15,   // fondo
+  16, 17, 18,     16, 18, 19,   // derecha
+  20, 21, 22,     20, 22, 23    // izquierda
+];
+
+// Ahora enviamos el elemento arreglo a  GL
+
+gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

El arreglo cubeVertexIndices define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. 

+ +

Dibujando el cubo

+ +

Para continuar necesitaremos agregar el código a nuestra función drawScene() esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:

+ +
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+setMatrixUniforms();
+gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.

+ +

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

+ +

Ver el Código completo | Abrir esta demostración en una página nueva

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html b/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html deleted file mode 100644 index 91e6bf3d37..0000000000 --- a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Creación de objetos 3D utilizando WebGL -slug: Web/API/WebGL_API/Tutorial/Objetos_3D_utilizando_WebGL -tags: - - Cubo 3D - - Objetos 3D - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

- -

Vamos a llevar nuestro cuadrado hacia la tercera dimensión agregando cinco caras más para crear el cubo. Para hacer esto de manera eficiente, vamos a cambiar el dibujado por medio de vertices utilizando el método {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} por el uso de un arreglo de vértices como tabla, esto por medio del llamado hacia   {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.

- -

Considerar: cada cara cuatro vértices para su definición, pero cada vértice es compartido por 3 caras. Realizando una lista con los 24 vértices es como nosotros haremos un menor intercambio de datos, después haremos referencia hacia cada vértic por medio se su índice en la lista en lugar de pasar el juego entero de coordenadas. Si te preguntas por qué necesitamos 24 vértices, y no solo 8, es porque cada esquina pertenece a tres caras de diferente color, y un solo vértice necesita tener un solo color específico, por lo tanto crearemos 3 copias de cada vértice en tres colores diferentes, uno por cada cara.

- -

Definir la posición de los vértices del cubo

- -

Primero, construiremos el buffer para la posición de los vértices actualizando el código en initBuffers(). Esto es muy parecido a lo como si fuera para el cuadraro, pero más lardo debido a que ahora son 24 vértices (4 por lado):

- -
var vertices = [
-  // Cara delantera
-  -1.0, -1.0,  1.0,
-   1.0, -1.0,  1.0,
-   1.0,  1.0,  1.0,
-  -1.0,  1.0,  1.0,
-
-  // Cara trasera
-  -1.0, -1.0, -1.0,
-  -1.0,  1.0, -1.0,
-   1.0,  1.0, -1.0,
-   1.0, -1.0, -1.0,
-
-  // Top face
-  -1.0,  1.0, -1.0,
-  -1.0,  1.0,  1.0,
-   1.0,  1.0,  1.0,
-   1.0,  1.0, -1.0,
-
-  // Bottom face
-  -1.0, -1.0, -1.0,
-   1.0, -1.0, -1.0,
-   1.0, -1.0,  1.0,
-  -1.0, -1.0,  1.0,
-
-  // Right face
-   1.0, -1.0, -1.0,
-   1.0,  1.0, -1.0,
-   1.0,  1.0,  1.0,
-   1.0, -1.0,  1.0,
-
-  // Left face
-  -1.0, -1.0, -1.0,
-  -1.0, -1.0,  1.0,
-  -1.0,  1.0,  1.0,
-  -1.0,  1.0, -1.0
-];
-
- -

Definir los colores de los vértices

- -

Necesitamos construir un arreglo de colores por cada uno de los 24 vertices. Este código comienza por definir un color para cada cara, después utiliza un ciclo para ensamblar el arreglo de colores por cada uno de los vértices.

- -
var colors = [
-  [1.0,  1.0,  1.0,  1.0],    // Cara delantera: blanco
-  [1.0,  0.0,  0.0,  1.0],    // Cara trasera: rojo
-  [0.0,  1.0,  0.0,  1.0],    // Cara superior: verde
-  [0.0,  0.0,  1.0,  1.0],    // Cara inferior: azul
-  [1.0,  1.0,  0.0,  1.0],    // Cara derecha: amarillo
-  [1.0,  0.0,  1.0,  1.0]     // Cara izquierda: morado
-];
-
-var generatedColors = [];
-
-for (j=0; j<6; j++) {
-  var c = colors[j];
-
-  for (var i=0; i<4; i++) {
-    generatedColors = generatedColors.concat(c);
-  }
-}
-
-var cubeVerticesColorBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);
-
- -

Definir el elemento arreglo

- -

Una ves que el vértice es generado, nosotros necesitamos contruir el elemento arreglo.

- -
var cubeVerticesIndexBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-
-// Este arrelgo define cada cara como 2 triángulos utilizando
-// los índices dentro de cada arreglo de vértices
-// para especificar cada posición en los tríangulos.
-
-var cubeVertexIndices = [
-  0,  1,  2,      0,  2,  3,    // enfrente
-  4,  5,  6,      4,  6,  7,    // atrás
-  8,  9,  10,     8,  10, 11,   // arriba
-  12, 13, 14,     12, 14, 15,   // fondo
-  16, 17, 18,     16, 18, 19,   // derecha
-  20, 21, 22,     20, 22, 23    // izquierda
-];
-
-// Ahora enviamos el elemento arreglo a  GL
-
-gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
-
- -

El arreglo cubeVertexIndices define cada cara como un par de triángulos, especificando cada vértice del triángulo como un índice dentro del arreglo de vértices en el cubo. Así el cubo es descrito como una colección de 12 triángulos. 

- -

Dibujando el cubo

- -

Para continuar necesitaremos agregar el código a nuestra función drawScene() esto para poder dibujar utilizando el buffer índice del cubo, agregaremos un nuevo llamado a  {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}}  y {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}como se muestra a continuación:

- -
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
-setMatrixUniforms();
-gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
-
- -

Desde que cada cara de nuestro cubo está compuesto de dos triángulos, tenemos 6 vértices en el cubo, se podría pensar que algunos de ellos son duplicados. Sin embargo, desde que nuestro arreglo índice se encuentra compuesto de enteros simples, esto no es una cantidad excesiva de intercambio de datos para pasar por cada cuadro de la animación.

- -

En este punto ahora tenemos un cubo animado rebotando y rotando, cuenta con seis caras coloreadas vívidamente.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }}

- -

Ver el Código completo | Abrir esta demostración en una página nueva

- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..9d2be2d61b --- /dev/null +++ b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,209 @@ +--- +title: Utilizando texturas en WebGL +slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL +tags: + - Texturas + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

+ +

Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.

+ +

Cargando texturas

+ +

La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.

+ +
Note: Es importante señalar que la carga de texturas sigue reglas de dominio-cruzado; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
+ +

El codigo que carga la textura se ve como esto:

+ +
function initTextures() {
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = 'cubetexture.png';
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

La rutina initTextures() comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina handleTextureLoaded() corre cuando la textura ha terminado de cargar.

+ +

Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.

+ +
Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: "Texturas no potencia de dos", a continuación.
+ +

Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.

+ +

Texturas no potencia-de-dos

+ +

Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.

+ +

Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.

+ +

Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).

+ +

Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.

+ +

Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.

+ +
// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+// Prevents s-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+// Prevents t-coordinate wrapping (repeating).
+gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+ +

Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).

+ +

Mapeando la textura en las caras

+ +

A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().

+ +
cubeVerticesTextureCoordBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+var textureCoordinates = [
+  // Front
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Back
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Top
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Bottom
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Right
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0,
+  // Left
+  0.0,  0.0,
+  1.0,  0.0,
+  1.0,  1.0,
+  0.0,  1.0
+];
+
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
+              gl.STATIC_DRAW);
+
+ +

Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.

+ +

El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.

+ +

Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.

+ +

Actualizando los shaders

+ +

El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.

+ +

Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():

+ +
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
+gl.enableVertexAttribArray(textureCoordAttribute);
+gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
+
+ +

Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.

+ +

El vertex shader

+ +

A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec2 aTextureCoord;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying highp vec2 vTextureCoord;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vTextureCoord = aTextureCoord;
+  }
+</script>
+
+ +

El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.

+ +

El fragment shader

+ +

El fragment shader también debe actualizarse:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying highp vec2 vTextureCoord;
+
+  uniform sampler2D uSampler;
+
+  void main(void) {
+    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+  }
+</script>
+
+ +

En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.

+ +

Dibujando el cubo texturado

+ +

El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).

+ +

El código para mapear colores a la textura se ha ido, sustituido por esto:

+ +
gl.activeTexture(gl.TEXTURE0);
+gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
+
+ +

GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.

+ +

En este punto, el cubo giratorio debe estar listo.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

+ +

Ver el código completo | Abrir esta demo en una nueva pestaña

+ +

Texturas entre dominios

+ +

La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver control de acceso HTTP para mas detalles sobre CORS.

+ +

Ver este articulo hacks.mozilla.org para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un ejemplo auto-contenido.

+ +
+

Nota: El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.

+
+ +

Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.

+ +
+

Nota: El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. 

+
+ +
+

Nota: El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.

+
+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html b/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html deleted file mode 100644 index 9d2be2d61b..0000000000 --- a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html +++ /dev/null @@ -1,209 +0,0 @@ ---- -title: Utilizando texturas en WebGL -slug: Web/API/WebGL_API/Tutorial/Wtilizando_texturas_en_WebGL -tags: - - Texturas - - Tutorial - - WebGL -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL ---- -

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

- -

Ahora que nuestro programa de prueba tiene un cubo, asignemos una textura en lugar de tener sus caras de un color solido.

- -

Cargando texturas

- -

La primera cosa que debemos hacer es añadir el codigo para cargar nuestra textura. en nuestro caso, estaremos usando una unica textura, asignada en las seis caras de nuestro cubo rotador, pero la misma tecnica puede ser utilizada para cualquier cantidad de texturas.

- -
Note: Es importante señalar que la carga de texturas sigue reglas de dominio-cruzado; Es decir, sólo puede cargar texturas de sitios para los que su contenido tiene aprobación de CORS. Vea las texturas entre dominios a continuación para más detalles.
- -

El codigo que carga la textura se ve como esto:

- -
function initTextures() {
-  cubeTexture = gl.createTexture();
-  cubeImage = new Image();
-  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
-  cubeImage.src = 'cubetexture.png';
-}
-
-function handleTextureLoaded(image, texture) {
-  gl.bindTexture(gl.TEXTURE_2D, texture);
-  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
-  gl.generateMipmap(gl.TEXTURE_2D);
-  gl.bindTexture(gl.TEXTURE_2D, null);
-}
-
- -

La rutina initTextures() comienza por crear el GL texture cubeTexture llamando la rutina GL {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Para cargar la textura desde un archivo de imagen, este luego crea un Objeto Imagen y carga en él el archivo de imagen que deseamos utilizar como nuestra textura. La rutina handleTextureLoaded() corre cuando la textura ha terminado de cargar.

- -

Para realmente crear la textura, especificamos que la nueva textura es la textura actual en la que queremos operar vinculándola a gl.TEXTURE_2D. Despues de esto, la imagen cargada es pasada a  {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}} para escribir la informacion de la imagen en la textura.

- -
Nota: El alto y hancho de las texturas deben, en la mayoría de las circunstancias, ser una potencia de dos píxeles (es decir, 1, 2, 4, 8, 16, etc.) en cada dimensión. Para la excepción, vea la sección: "Texturas no potencia de dos", a continuación.
- -

Las siguientes dos líneas setean el filtrado para la textura; Esto controla cómo se filtra la imagen mientras se escala. En este caso estamos usando linear filtering cuando escala la imagen, y mipmap cuando se hace mas pequeña. Entonces el mipmap es generado llamando {{domxref("WebGLRenderingContext.generateMipMap()", "generateMipMap()")}}, Y terminamos diciéndole a WebGL que hemos terminado de manipular la textura vinculando null a gl.TEXTURE_2D.

- -

Texturas no potencia-de-dos

- -

Generalmente hablando, Utilizar texturas cuyos lados son una potencia de dos es ideal. Están almacenadas eficientemente en la memoria de video y no están restringidas en cómo podrían ser utilizadas. Las texturas creadas por el artista deben ser escaladas hacia arriba o hacia abajo a una potencia cercana a dos y, realmente, debería haber sido creada en potencia-de-dos para empezar. Cada lado debe ser: 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024 ó 2048 píxeles. Muchos dispositivos, pero no todos, pueden soportar 4096 píxeles; Algunos pueden soportar 8192 e incluso más.

- -

Ocasionalmente, es difícil utilizar texturas en potencia-de-dos dada una circunstancia especifica. Si la fuente es alguna tercera parte, A menudo los mejores resultados vienen de modificar las imágenes usando canvas HTML5 en tamaños de potencia-de-dos antes de que se pasen a WebGL; Las coordenadas UV también pueden requerir ajuste si el estiramiento es notorio.

- -

Pero, Si tiene que tener una textura no-potencia-de-dos (NPOT = no-power-of-two), WebGL incluye un limitado soporte nativo. Las texturas NPOT son en su mayoría útiles si las dimensiones de la textura debe ser la misma resolución que otra cosa, como la resolución de tu monitor, o si no vale la pena molestarse por las sugerencias anteriores. Resumiendo: estas texturas no se pueden usar con mipmapping y no deben repetirse (tile o wrap).

- -

Un ejemplo de una textura es tilear una imagen de unos ladrillos para cubrir una pared de ladrillos.

- -

Mipmapping y "UV tiling" pueden ser desactivados utilizando {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}} y cuando creas tu textura utilizando {{domxref("WebGLRenderingContext.bindTexture()", "bindTexture()")}}. Ésto permitirá las texturas NPOT a expensas de mipmapping, UV wrapping, UV tiling, y tu control sobre cómo el dispositivo procederá a manejar tu textura.

- -
// gl.NEAREST is also allowed, instead of gl.LINEAR, as neither mipmap.
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-// Prevents s-coordinate wrapping (repeating).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-// Prevents t-coordinate wrapping (repeating).
-gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
- -

Una vez más, con estos parámetros, los dispositivos compatibles con WebGL aceptarán automáticamente cualquier resolución para esa textura (hasta sus dimensiones máximas). Sin realizar la configuración anterior, WebGL requiere que todas las muestras de texturas NPOT fallen al devolver el color "negro sólido": rgba (0,0,0,1).

- -

Mapeando la textura en las caras

- -

A este punto, la textura esta cargada y lista para usar. pero antes de utilizarla, Necesitamos asignar el mapeo de las coordenadas de textura a los vértices de las caras de nuestro cubo. Esto reemplaza todo el código previamente existente para configurar colores para cada una de las caras del cubo en initBuffers().

- -
cubeVerticesTextureCoordBuffer = gl.createBuffer();
-gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
-
-var textureCoordinates = [
-  // Front
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Back
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Top
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Bottom
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Right
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0,
-  // Left
-  0.0,  0.0,
-  1.0,  0.0,
-  1.0,  1.0,
-  0.0,  1.0
-];
-
-gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
-              gl.STATIC_DRAW);
-
- -

Primeramente, este codigo crea un GL buffer en el cual almacenaremos las coordenadas de la textura para cada cara, luego enlazamos ese buffer como el array en el cual escribiremos.

- -

El array textureCoordinates define las coordenadas de textura correspondientes a cada vértice de cada cara. Tenga en cuenta que las coordenadas de textura van de 0,0 a 1,0; Las dimensiones de las texturas se normalizan a un rango de 0,0 a 1,0 independientemente de su tamaño real, con el propósito de mapeo de textura.

- -

Una vez que hemos seteado la matriz de mapeo de textura, pasamos la matriz al búfer, de modo que GL tiene esos datos listos para su uso.

- -

Actualizando los shaders

- -

El shader -- y el código que inicializa los shaders -- también necesita ser actualizado para utilizar la textura en vez de un color solido.

- -

Primero, echemos un vistazo a un cambio muy sencillo que se necesita en initShaders():

- -
textureCoordAttribute = gl.getAttribLocation(shaderProgram, 'aTextureCoord');
-gl.enableVertexAttribArray(textureCoordAttribute);
-gl.vertexAttribPointer(texCoordAttribute, 2, gl.FLOAT, false, 0, 0);
-
- -

Esto reemplaza el código que setea el atributo "vertex color" (color del vertice) con uno que contiene la coordenada de textura para cada vértice.

- -

El vertex shader

- -

A continuación, necesitamos reemplazar el "vertex shader" de modo que en lugar de buscar datos de color, busque los datos de coordenadas de textura.

- -
<script id="shader-vs" type="x-shader/x-vertex">
-  attribute vec3 aVertexPosition;
-  attribute vec2 aTextureCoord;
-
-  uniform mat4 uMVMatrix;
-  uniform mat4 uPMatrix;
-
-  varying highp vec2 vTextureCoord;
-
-  void main(void) {
-    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
-    vTextureCoord = aTextureCoord;
-  }
-</script>
-
- -

El cambio clave aquí es que en lugar de buscar el color del vértice (vertex color), estamos estableciendo las coordenadas de textura; Esto indicará la ubicación dentro de la textura correspondiente al vértice.

- -

El fragment shader

- -

El fragment shader también debe actualizarse:

- -
<script id="shader-fs" type="x-shader/x-fragment">
-  varying highp vec2 vTextureCoord;
-
-  uniform sampler2D uSampler;
-
-  void main(void) {
-    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
-  }
-</script>
-
- -

En lugar de asignar un valor de color al fragment color, el fragment color se calcula recolectando el texel (es decir, el píxel dentro de la textura) que el muestreador dice que se corresponde mejor con la posición del fragment.

- -

Dibujando el cubo texturado

- -

El cambio a la función drawScene() es simple (excepto que por razones de claridad, he eliminado el código que hace que el cubo se traslade a través del espacio mientras se anima, en vez de eso, solo gira).

- -

El código para mapear colores a la textura se ha ido, sustituido por esto:

- -
gl.activeTexture(gl.TEXTURE0);
-gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
-gl.uniform1i(gl.getUniformLocation(shaderProgram, 'uSampler'), 0);
-
- -

GL proporciona 32 registros de textura; La primera de ellas es gl.TEXTURE0. Vincularemos nuestra textura previamente cargada a ese registro, a continuación, establecremos el shader sampler uSampler (especificado en el shader) para utilizar esa textura.

- -

En este punto, el cubo giratorio debe estar listo.

- -

{{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }}

- -

Ver el código completo | Abrir esta demo en una nueva pestaña

- -

Texturas entre dominios

- -

La carga de texturas WebGL esta sujeta a controles de acceso entre dominios. Para que su contenido cargue una textura de otro dominio, La aprobacion CORS debe ser obtenida. Ver control de acceso HTTP para mas detalles sobre CORS.

- -

Ver este articulo hacks.mozilla.org para una explicacion de como usar imágenes CORS-approved como texturas WebGL , con un ejemplo auto-contenido.

- -
-

Nota: El soporte CORS para texturas WebGL y el atributo crossOrigin para elementos de imagen se implementan en {{Gecko ("8.0")}}.

-
- -

Canvas 2D contaminados (Solo lectura) no pueden ser utilizados como texturas WebGL. una 2D {{ HTMLElement("canvas") }} se convierte en contaminada, por ejemplo, cuando una imagen de dominio cruzado (cross-domain) es dibujada en el.

- -
-

Nota: El soporte de CORS para Canvas 2D drawImage se implementa en {{Gecko ("9.0")}}. Esto significa que el uso de una imagen de dominio cruzado con aprobación de CORS ya no pinta el lienzo 2D, por lo que el lienzo 2D sigue siendo utilizable como fuente de una textura WebGL. 

-
- -
-

Nota: El soporte de CORS para videos de dominio cruzado y el atributo de crossorigin para elementos {{HTMLElement("video")}} se implementa en {{Gecko ("12.0")}}.

-
- -

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

diff --git a/files/es/web/api/webrtc_api/session_lifetime/index.html b/files/es/web/api/webrtc_api/session_lifetime/index.html new file mode 100644 index 0000000000..2529f32085 --- /dev/null +++ b/files/es/web/api/webrtc_api/session_lifetime/index.html @@ -0,0 +1,21 @@ +--- +title: WebRTC Introduction +slug: WebRTC/Introduction +translation_of: Web/API/WebRTC_API/Session_lifetime +--- +
+

WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.

+
+

Estableciendo la conexión

+

La conexión inicial entre pares debe ser establecida a través de un servidor de aplicaciones que proporcione descubrimiento de usuarios, comunicación y traducción de direcciones de red (NAT) con transmisión de datos.

+

Señalización

+

Señalización es el mecanismo por el cual los pares se envían mensajes de control entre sí con el propósito de establecer el protocolo, canal, y método de comunicación. Estos no están especifiados en el standar WebRTC. En su lugar, el desarrollador puede elegir cualquier protocolo de mensajería (como SIP o XMPP), y cualquier canal de comunicación bidirecional (como WebSocket o XMLHttpRequest) en conjunción con un servidor con un API de  conexión permanente (como  el Google Channel API) para AppEngine.

+

Transmisión

+

getUserMedia

+

LocalMediaStream object

+

Recepción

+

El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a about:config y establce 'media.navigator.enabled' a 'true'.

+
+

Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: dom/media/tests/local_video_test.html. Por favor, prueba también lademo de servicio de llamadas, la página de su código, y el código de su servidor.

+
+

 

diff --git a/files/es/web/api/webrtc_api/taking_still_photos/index.html b/files/es/web/api/webrtc_api/taking_still_photos/index.html new file mode 100644 index 0000000000..143b2ee72f --- /dev/null +++ b/files/es/web/api/webrtc_api/taking_still_photos/index.html @@ -0,0 +1,159 @@ +--- +title: Capturar fotografías con la cámara web +slug: WebRTC/Taking_webcam_photos +tags: + - Canvas + - WebRTC + - cámara web + - getusermedia +translation_of: Web/API/WebRTC_API/Taking_still_photos +--- +

Introducción y demostración

+

Este es un tutorial rápido de cómo acceder a la cámara de tu laptop y capturar una foto con ella. Puedes observar el código final en acción en este JSFiddle. También existe una versión más avanzada en JavaScript para cargar fotos a imgur disponible como código en GitHub o como demo.

+

El formato HTML

+

Lo primero que necesitas para acceder a la cámara web utilizando WebRTC es un elemento {{HTMLElement("video")}} y un elemento {{HTMLElement("canvas")}} en la página. El elemento de video recibe la secuencia desde WebRTC y el elemento canvas es utilizado para agarrar la imagen desde el video. También añadimos una imagen de relleno que luego será reemplazada con la toma capturada por la cámara web.

+
<video id="video"></video>
+<button id="startbutton">Take photo</button>
+<canvas id="canvas"></canvas>
+<img src="http://placekitten.com/g/320/261" id="photo" alt="photo">
+
+

El script completo

+

Aquí se muestra completamente el código JavaScript. Más abajo, explicaremos gradualmente cada sección con más detalle.

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+
+  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+
+  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+
+  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+
+  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+
+})();
+

Explicando paso a paso

+

Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.

+

Función Anónima

+
(function() {
+
+  var streaming = false,
+      video        = document.querySelector('#video'),
+      canvas       = document.querySelector('#canvas'),
+      photo        = document.querySelector('#photo'),
+      startbutton  = document.querySelector('#startbutton'),
+      width = 320,
+      height = 0;
+

Empezamos por encerrar el script entero en una función anónima para evitar las variables globales. Tomamos los elementos HTML que necesitamos y definimos el ancho (width) del video a 320 y la altura (height) a 0, ya que calcularemos la altura apropiada posteriormente.

+
+

En estos momentos existe una diferencia entre los tamaños de video proporcionados por getUserMedia. Firefox Nightly utiliza una resolución de 352x288 y Opera y Chrome utiliza una resolución de 640x400. Esto cambiará en el futuro, pero cambiando el tamaño con la proporción que usaremos más abajo, nos aseguraremos de no obtener sorpresas desagradables.

+
+

Obtener el video

+

Ahora necesitamos obtener el video desde la cámara web. Actualmente esto está predeterminado para los diferentes navegadores, así que necesitamos comprobar cuál es compatible:

+
  navigator.getMedia = ( navigator.getUserMedia ||
+                         navigator.webkitGetUserMedia ||
+                         navigator.mozGetUserMedia ||
+                         navigator.msGetUserMedia);
+

Le solicitamos al navegador que nos dé un video sin audio y obtenemos una secuencia (stream) en la función de retrollamada:

+
  navigator.getMedia(
+    {
+      video: true,
+      audio: false
+    },
+    function(stream) {
+      if (navigator.mozGetUserMedia) {
+        video.mozSrcObject = stream;
+      } else {
+        var vendorURL = window.URL || window.webkitURL;
+        video.src = vendorURL.createObjectURL(stream);
+      }
+      video.play();
+    },
+    function(err) {
+      console.log("An error occured! " + err);
+    }
+  );
+

En estos momentos Firefox Nightly necesita que tu configures la propiedad de mozSrcObject del elemento del video con el fin de reproducirlo; para otros navegadores, configura el atributo src. Mientras que Firefox puede utilizar la secuencia de video directamente, Webkit y Opera necesitan crear un objeto URL desde ella. Todo esto será estandarizado en un futuro cercano.

+

Redefinir el tamaño del video

+

Luego necesitamos configurar el tamaño del video a las dimensiones deseadas.

+
  video.addEventListener('canplay', function(ev){
+    if (!streaming) {
+      height = video.videoHeight / (video.videoWidth/width);
+      video.setAttribute('width', width);
+      video.setAttribute('height', height);
+      canvas.setAttribute('width', width);
+      canvas.setAttribute('height', height);
+      streaming = true;
+    }
+  }, false);
+

Nos subscribimos al evento canplay del video y leemos sus dimensiones utilizando videoHeight y videoWidth. Estas no están disponible realmente hasta que el evento sea iniciado. Establecemos streaming a verdadero (true) para que compruebe esto solo una vez, mientras que el evento canplay  siga en actividad.

+

Esto es todo lo que se necesita para que inicie el video.

+

Capturar una imagen

+

Ahora necesitamos capturar una imagen utilizando un lienzo (canvas). Asignamos un manejador de eventos al botón de inicio para llamar a la función de takepicture.

+
  startbutton.addEventListener('click', function(ev){
+      takepicture();
+    ev.preventDefault();
+  }, false);
+

En esta función, reestablecemos el tamaño del lienzo (canvas) a las dimensiones del video, el cual lo sustituye y tenemos un marco del video, el cual se copia al canvas. Luego necesitamos convertir los datos del canvas en datos tipo URL con un encabezado PNG, y establecer el src de la fotografía a este mismo url.

+
  function takepicture() {
+    canvas.width = width;
+    canvas.height = height;
+    canvas.getContext('2d').drawImage(video, 0, 0, width, height);
+    var data = canvas.toDataURL('image/png');
+    photo.setAttribute('src', data);
+  }
+
+})();
+

Eso es todo lo que se necesita para mostrar la secuencia de la cámara web y capturar una imagen fija de ella, a través de Chrome, Opera y Firefox.

+

Compatibilidad

+

Actualmente utilizar WebRTC para acceder a la cámara es compatible en Chrome, Opera y Firefox Nightly 18. Para habilitar WebRTC en Firefox Nightly requiere que establezcas un indicador en la configuración:

+ diff --git a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html deleted file mode 100644 index 333e8e8830..0000000000 --- a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Escribiendo un servidor WebSocket en C# -slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket -tags: - - HTML5 - - Tutorial - - WebSockets -translation_of: Web/API/WebSockets_API/Writing_WebSocket_server ---- -

Introducción

- -

Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft.

- -

Este servidor se ajusta a RFC 6455 por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.

- -

Primeros pasos

- -

WebSocket se comunica a través de conexiones TCP (Transmission Control Protocol), afortunadamente C# tiene una clase TcpListener la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace System.Net.Sockets.

- -
-

Es una buena idea usar la instrucción using para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.

-
- -

TcpListener

- -

Constructor:

- -
TcpListener(System.Net.IPAddress localaddr, int port)
- -

localaddr especifica la IP a escuchar y port especifica el puerto.

- -
-

Para crear un objeto IPAddress desde un string, usa el método estático Parse de IPAddres.

-
- -

Métodos:

- - - -

Aquí está como utilizar lo que hemos aprendido:

- -
​using System.Net.Sockets;
-using System.Net;
-using System;
-
-class Server {
-    public static void Main() {
-        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
-
-        server.Start();
-        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
-
-        TcpClient client = server.AcceptTcpClient();
-
-        Console.WriteLine("Un cliente conectado.");
-    }
-}
-
- -

TcpClient

- -

Métodos:

- - - -

Propiedades:

- - - -

NetworkStream

- -

Métodos:

- -
Write(Byte[] buffer, int offset, int size)
- -

Escribe bytes desde el buffer; el offset y el size determinan la longitud del mensaje.

- -
Read(Byte[] buffer, int offset, int size)
- -

Lee bytes al buffer; el offset y el size determinan la longitud del mensaje.

- -

Ampliemos nuestro ejemplo anterior.

- -
TcpClient client = server.AcceptTcpClient();
-
-Console.WriteLine("Un cliente conectado.");
-
-NetworkStream stream = client.GetStream();
-
-//enter to an infinite cycle to be able to handle every change in stream
-while (true) {
-    while (!stream.DataAvailable);
-
-    Byte[] bytes = new Byte[client.Available];
-
-    stream.Read(bytes, 0, bytes.Length);
-}
- -

Handshaking

- -

Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como handshaking.

- -

Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.

- -
using System.Text;
-using System.Text.RegularExpressions;
-
-while(client.Available < 3)
-{
-   // wait for enough bytes to be available
-}
-
-Byte[] bytes = new Byte[client.Available];
-
-stream.Read(bytes, 0, bytes.Length);
-
-//translate bytes of request to string
-String data = Encoding.UTF8.GetString(bytes);
-
-if (Regex.IsMatch(data, "^GET")) {
-
-} else {
-
-}
- -

Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del handshake al servidor puede encontrarse en  RFC 6455, section 4.2.2. Para nuestros propósitos, solo construiremos una respuesta simple.

- -

Debes:

- -
    -
  1. Obtener el valor de "Sec-WebSocket-Key" sin espacios iniciales ni finales de el encabezado de la solicitud
    2. -
  2. Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    3. -
  3. Calcular el código SHA-1 y Base64
    4. -
  4. Escribe el valor Sec-WebSocket-Accept en el encabezado como parte de la respuesta HTTP.
    5. -
- -
if (new Regex("^GET").IsMatch(data)) {
-    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
-        + "Connection: Upgrade" + Environment.NewLine
-        + "Upgrade: websocket" + Environment.NewLine
-        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
-            SHA1.Create().ComputeHash (
-                Encoding.UTF8.GetBytes (
-                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
-                )
-            )
-        ) + Environment.NewLine
-        + Environment.NewLine);
-
-    stream.Write(response, 0, response.Length);
-}
-
- -

Decoding messages

- -

Luego de un handshake exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.

- -

Si nosotros enviamos "MDN", obtendremos estos bytes:

- - - - - - - - - - - - - - - -
129131618435611216109
- -

- 129:

- - - - - - - - - - - - - - - - - - - - -
FIN (¿Es el mensaje completo?)RSV1RSV2RSV3Opcode
10000x1=0001
- -

FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.
- Opcode 0x1 significa que es un texto. Lista completa de Opcodes

- -

- 131:

- -

Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.

- -
-

Puedo tomar 128, porque el primer bit siempre es 1.

-
- -

- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.

- -

- Los bytes codificados restantes son el mensaje.

- -

Algoritmo de decodificación

- -

byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave

- -

Ejemplo en C#:

- -
Byte[] decoded = new Byte[3];
-Byte[] encoded = new Byte[3] {112, 16, 109};
-Byte[] key = Byte[4] {61, 84, 35, 6};
-
-for (int i = 0; i < encoded.Length; i++) {
-    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
-}
- -

Relacionado

- - - -
 
diff --git a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html b/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html deleted file mode 100644 index 1261f75bec..0000000000 --- a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Escribir servidores WebSocket -slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers ---- -

{{gecko_minversion_header("2")}}

- -

Introducción

- -

Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.

- -

Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte Berkeley Sockets, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.
-
- Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.

- -
-

Lea las últimas especificaciones oficiales de WebSocket RFC 6455. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.

-
- -

Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un Reverse Proxy (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
-  

- -

Paso 1: El Handshake del WebSocket

- -

Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.

- -
-

Advertencia: El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). 

-
- -

El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.

- -

Petición de Handshake en el cliente

- -

A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):

- -
GET /chat HTTP/1.1
-Host: example.com:8000
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
-
-
- -

El cliente puede solicitar aquí extensiones y/o sub protocolos; vea Misceláneos para más detalles. También, cabeceras comunes como User-Agent, Referer, Cookie, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.

- -

Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "400 Bad Request" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el handshake en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera Sec-WebSocket-Version que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, Sec-WebSocket-Key.

- -
-

Tip: Todos los navegadores deben enviar una cabecera Origin. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un 403 Forbidden si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso Origin.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.

-
- -
-

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

-
- -
-

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

-
- -

Respuesta de Handshake del servidor

- -

Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):

- -
HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
-
-
- -

Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver Miscelláneos para más detalles). La cabecera Sec-WebSocket-Accept es interesante. El servidor debe derivarla a partir de la cabecera Sec-WebSocket-Key enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente Sec-WebSocket-Key y el string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es un "magic string"), calcular el hash SHA-1 del resultado y devolver el string codificado en base64 de este hash.

- -
-

FYI: Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.

-
- -

Así, si la cabecera Sec-WebSocket-Key era "dGhlIHNhbXBsZSBub25jZQ==", la correspondiente respuesta Sec-WebSocket-Accept será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.

- -
-

El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.

-
- -

Llevando registro de los clientes

- -

Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques ataques DoS).

- -

Paso 2: Intercambiando Data Frames

- -

Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el cifrado XOR (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.

- -

Formato

- -

Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:

- -
 0                   1                   2                   3
- 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
-+-+-+-+-+-------+-+-------------+-------------------------------+
-|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-|N|V|V|V|       |S|             |   (if payload len==126/127)   |
-| |1|2|3|       |K|             |                               |
-+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
-|     Extended payload length continued, if payload len == 127  |
-+ - - - - - - - - - - - - - - - +-------------------------------+
-|                               |Masking-key, if MASK set to 1  |
-+-------------------------------+-------------------------------+
-| Masking-key (continued)       |          Payload Data         |
-+-------------------------------- - - - - - - - - - - - - - - - +
-:                     Payload Data continued ...                :
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|                     Payload Data continued ...                |
-+---------------------------------------------------------------+
- -

Los RSV1-3 se pueden ignorar, son para las extensiones.

- -

El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la sección 5.1 de las espeficicaciones  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.

- -

El campo opcode define cómo interpretar los datos de la carga útil:0x0 para continuar, 0x1 para texto (que siempre se codifica con UTF-8), 0x2 para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de 0x3 a 0x7 y de 0xB a 0xF no tienen significado.

- -

El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.

- -

Decoding Payload Length

- -

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

- -
    -
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. -
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. -
  3. Read the next 64 bits and interpret those as an unsigned integer. You're done.
    4. -
- -

Reading and Unmasking the Data

- -

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

- -
var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}
- -

Now you can figure out what DECODED means depending on your application.

- -

Message Fragmentation

- -

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

- -

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

- -
Client: FIN=1, opcode=0x1, msg="hello"
-Server: (process complete message immediately) Hi.
-Client: FIN=0, opcode=0x1, msg="and a"
-Server: (listening, new message containing text started)
-Client: FIN=0, opcode=0x0, msg="happy new"
-Server: (listening, payload concatenated to previous message)
-Client: FIN=1, opcode=0x0, msg="year!"
-Server: (process complete message) Happy new year to you too!
- -

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

- -

Pings and Pongs: The Heartbeat of WebSockets

- -

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

- -

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

- -
-

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

-
- -

Step 4: Closing the connection

- -

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

- -

Miscellaneous

- -
-

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

-
- -

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

- -

Extensions

- -
-

This section needs expansion. Please edit if you are equipped to do so.

-
- -

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

- -
-

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

-
- -

TODO

- -

Subprotocols

- -

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

- -
-

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

-
- -

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

- -
GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-
-
- -

or, equivalently:

- -
...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-
-
- -

Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

- -
Sec-WebSocket-Protocol: soap
-
-
- -
-

The server can't send more than one Sec-Websocket-Protocol header.
- If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect.
- The client may close the connection if it doesn't get the subprotocol it wants.

-
- -

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

- -
-

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

-
- - - - diff --git a/files/es/web/api/websockets_api/writing_websocket_server/index.html b/files/es/web/api/websockets_api/writing_websocket_server/index.html new file mode 100644 index 0000000000..333e8e8830 --- /dev/null +++ b/files/es/web/api/websockets_api/writing_websocket_server/index.html @@ -0,0 +1,244 @@ +--- +title: Escribiendo un servidor WebSocket en C# +slug: Web/API/WebSockets_API/Escribiendo_servidor_WebSocket +tags: + - HTML5 + - Tutorial + - WebSockets +translation_of: Web/API/WebSockets_API/Writing_WebSocket_server +--- +

Introducción

+ +

Si deseas utilizar la API WebSocket, es conveniente si tienes un servidor. En este artículo te mostraré como puedes escribir uno en C#. Tú puedes hacer esto en cualquier lenguaje del lado del servidor, pero para mantener las cosas simples y más comprensibles, elegí el lenguaje de Microsoft.

+ +

Este servidor se ajusta a RFC 6455 por lo que solo manejará las conexiones de Chrome version 16, Firefox 11, IE 10 and superiores.

+ +

Primeros pasos

+ +

WebSocket se comunica a través de conexiones TCP (Transmission Control Protocol), afortunadamente C# tiene una clase TcpListener la cual hace lo que su nombre sugiere. Esta se encuentra en el namespace System.Net.Sockets.

+ +
+

Es una buena idea usar la instrucción using para escribir menos. Eso significa que no tendrás que re escribir el namespace de nuevo en cada ocasión.

+
+ +

TcpListener

+ +

Constructor:

+ +
TcpListener(System.Net.IPAddress localaddr, int port)
+ +

localaddr especifica la IP a escuchar y port especifica el puerto.

+ +
+

Para crear un objeto IPAddress desde un string, usa el método estático Parse de IPAddres.

+
+ +

Métodos:

+ + + +

Aquí está como utilizar lo que hemos aprendido:

+ +
​using System.Net.Sockets;
+using System.Net;
+using System;
+
+class Server {
+    public static void Main() {
+        TcpListener server = new TcpListener(IPAddress.Parse("127.0.0.1"), 80);
+
+        server.Start();
+        Console.WriteLine("El server se ha iniciado en 127.0.0.1:80.{0}Esperando una conexión...", Environment.NewLine);
+
+        TcpClient client = server.AcceptTcpClient();
+
+        Console.WriteLine("Un cliente conectado.");
+    }
+}
+
+ +

TcpClient

+ +

Métodos:

+ + + +

Propiedades:

+ + + +

NetworkStream

+ +

Métodos:

+ +
Write(Byte[] buffer, int offset, int size)
+ +

Escribe bytes desde el buffer; el offset y el size determinan la longitud del mensaje.

+ +
Read(Byte[] buffer, int offset, int size)
+ +

Lee bytes al buffer; el offset y el size determinan la longitud del mensaje.

+ +

Ampliemos nuestro ejemplo anterior.

+ +
TcpClient client = server.AcceptTcpClient();
+
+Console.WriteLine("Un cliente conectado.");
+
+NetworkStream stream = client.GetStream();
+
+//enter to an infinite cycle to be able to handle every change in stream
+while (true) {
+    while (!stream.DataAvailable);
+
+    Byte[] bytes = new Byte[client.Available];
+
+    stream.Read(bytes, 0, bytes.Length);
+}
+ +

Handshaking

+ +

Cuando un cliente se conecta al servidor, envía una solicitud GET para actualizar la conexión al WebSocket desde una simple petición HTTP. Esto es conocido como handshaking.

+ +

Este código de ejemplo detecta el GET desde el cliente. Nota que esto bloqueará hasta los 3 primeros bytes del mensaje disponible. Soluciones alternativas deben ser investigadas para ambientes de producción.

+ +
using System.Text;
+using System.Text.RegularExpressions;
+
+while(client.Available < 3)
+{
+   // wait for enough bytes to be available
+}
+
+Byte[] bytes = new Byte[client.Available];
+
+stream.Read(bytes, 0, bytes.Length);
+
+//translate bytes of request to string
+String data = Encoding.UTF8.GetString(bytes);
+
+if (Regex.IsMatch(data, "^GET")) {
+
+} else {
+
+}
+ +

Esta respuesta es fácil de construir, pero puede ser un poco díficil de entender. La explicación completa del handshake al servidor puede encontrarse en  RFC 6455, section 4.2.2. Para nuestros propósitos, solo construiremos una respuesta simple.

+ +

Debes:

+ +
    +
  1. Obtener el valor de "Sec-WebSocket-Key" sin espacios iniciales ni finales de el encabezado de la solicitud
    2. +
  2. Concatenarlo con "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
    3. +
  3. Calcular el código SHA-1 y Base64
    4. +
  4. Escribe el valor Sec-WebSocket-Accept en el encabezado como parte de la respuesta HTTP.
    5. +
+ +
if (new Regex("^GET").IsMatch(data)) {
+    Byte[] response = Encoding.UTF8.GetBytes("HTTP/1.1 101 Switching Protocols" + Environment.NewLine
+        + "Connection: Upgrade" + Environment.NewLine
+        + "Upgrade: websocket" + Environment.NewLine
+        + "Sec-WebSocket-Accept: " + Convert.ToBase64String (
+            SHA1.Create().ComputeHash (
+                Encoding.UTF8.GetBytes (
+                    new Regex("Sec-WebSocket-Key: (.*)").Match(data).Groups[1].Value.Trim() + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"
+                )
+            )
+        ) + Environment.NewLine
+        + Environment.NewLine);
+
+    stream.Write(response, 0, response.Length);
+}
+
+ +

Decoding messages

+ +

Luego de un handshake exitoso el cliente puede enviar mensajes al servidor, pero estos serán codificados.

+ +

Si nosotros enviamos "MDN", obtendremos estos bytes:

+ + + + + + + + + + + + + + + +
129131618435611216109
+ +

- 129:

+ + + + + + + + + + + + + + + + + + + + +
FIN (¿Es el mensaje completo?)RSV1RSV2RSV3Opcode
10000x1=0001
+ +

FIN: Puedes enviar tu mensaje en marcos, pero ahora debe mantener las cosas simples.
+ Opcode 0x1 significa que es un texto. Lista completa de Opcodes

+ +

- 131:

+ +

Si el segundo byte menos 128 se encuentra entre 0 y 125, esta es la longitud del mensaje. Si es 126, los siguientes 2 bytes (entero sin signo de 16 bits), si es 127, los siguientes 8 bytes (entero sin signo de 64 bits) son la longitud.

+ +
+

Puedo tomar 128, porque el primer bit siempre es 1.

+
+ +

- 61, 84, 35 y 6 son los bytes de la clave a decodificar. Cambian en cada oportunidad.

+ +

- Los bytes codificados restantes son el mensaje.

+ +

Algoritmo de decodificación

+ +

byte decodificado = byte codificado XOR (posición del byte codificado Mod 4) byte de la clave

+ +

Ejemplo en C#:

+ +
Byte[] decoded = new Byte[3];
+Byte[] encoded = new Byte[3] {112, 16, 109};
+Byte[] key = Byte[4] {61, 84, 35, 6};
+
+for (int i = 0; i < encoded.Length; i++) {
+    decoded[i] = (Byte)(encoded[i] ^ key[i % 4]);
+}
+ +

Relacionado

+ + + +
 
diff --git a/files/es/web/api/websockets_api/writing_websocket_servers/index.html b/files/es/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..1261f75bec --- /dev/null +++ b/files/es/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,246 @@ +--- +title: Escribir servidores WebSocket +slug: Web/API/WebSockets_API/Escribiendo_servidores_con_WebSocket +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

{{gecko_minversion_header("2")}}

+ +

Introducción

+ +

Un servidor WebSocket es simplemente una aplicación TCP que escucha en cualquier puerto de un servidor que sigue un protocolo específico. La tarea de crear un servidor propio personalizado suele asustar a los desarrolladores, sin embargo puede resultar muy fácil implementar un servidor WebSocket en la plataforma que elijas.

+ +

Un servidor WebSocket puede ser escrito en cualquier lenguaje de programación Server-Side que sea soporte Berkeley Sockets, como por ejemplo C++ o Python o inclusive PHP y JavaScript para servidores. Este no va a ser un tutorial para ningún lenguaje espefícamente sino que te ayudará a escribir tu propio servidor.
+
+ Necesitarás conocer como trabaja el protocolo HTTP y una experiencia intermedia en programación. Dependiendo de las capacidades de tu lenguaje puede ser necesario tener conocimientos en sockets TCP. Esta guía te dará el conocimiento necesario para escribir un servidor con WebSocket.

+ +
+

Lea las últimas especificaciones oficiales de WebSocket RFC 6455. Las secciones 1 y 4-7 son especialmente interesantes para personas que deseen implementar servidores. La sección 10 abarca temas de seguridad y definitivamente deberías leerla antes de exponer tu servidor a la red.

+
+ +

Un servidor WebSocket es explicado a un muy bajo nivel aquí. Los servidores WebSocket usualmente estan separados y especializados (por una cuestión de balance de cargas y otra razones prácticas), por lo tanto deberías usar un Reverse Proxy (semejante a un servidor HTTP común) casi siempre para detectar los Handshakes de WebSocket, preprocesarlos, y reenviar los datos de los clientes al servidor WebSocket real.
+  

+ +

Paso 1: El Handshake del WebSocket

+ +

Antes que nada, el servidor debe escuchar las conexiones entrantes usando un socket TCP estandar. Dependiendo de tu plataforma, esto puede ser manejado por tí. Por ejemplo asumamos que tu servidor esta escuchando la dirección example.com en el puerto 8000, y tu socket en el servidor responde a la petición GET con /chat.

+ +
+

Advertencia: El servidor puede escuchar cualquier puerto que elijas, pero si elijes un puerto diferente al 80 o 443 podría haber problemas con los firewalls y proxies. Suele suceder con el puerto 443 tambien pero para eso se necesita un conexión segura (TLS/SSL). También se debe aclarar que la mayoría de los navegadores (como Firefox 8 o superiores) no permiten conexiones a servidores WebSocket sin seguridad que se realicen desde páginas web con seguridad (HTTPS). 

+
+ +

El Handshake es el puente desde HTTP a WS. En el Handshake se negocian los detalles de la conexión y cualquier de las partes pueden abandonar el proceso antes de completar dicha conexión si los términos no son favorables. El servidor debe ser cuidadoso al analizar lo que el cliente pide, de lo contrario podrían introducirse problemas de seguridad.

+ +

Petición de Handshake en el cliente

+ +

A pesar de que estamos creando un servidor, un cliente es quien tiene que comenzar el proceso de Handshake de WebSocket. Entonces tú tienes que saber cómo interpretar la petición del cliente. El cliente enviará una linda petición HTTP estandar que lucirá algo asi (la versión del HTTP debe ser 1.1 o mayor y el método debe ser GET):

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

El cliente puede solicitar aquí extensiones y/o sub protocolos; vea Misceláneos para más detalles. También, cabeceras comunes como User-Agent, Referer, Cookie, or cabeceras de autenticación podrían ser incluidos. Haz lo que quieras con ellos; no pertencen a WebSocket. También puedes ignorarlos. En muchas configuraciones comunes, un proxy inverso ya ha tratado con ellos.

+ +

Si alguna cabecera no se entiende o posee un valor incorrecto, el servidor debe responder "400 Bad Request" e inmediatamente cerrar la conexión. Normalmente, también puede dar la razón porque falló el handshake en el cuerpo de la respuesta HTTP, pero el mensaje podría no ser mostrado (el browser no lo muestra). Si el servidor no comprende que la versión del WebSockets, debería enviar una cabecera Sec-WebSocket-Version que contenga la(s) versión(es) no entendidas. (Esta guía explica v13, la más nueva). Ahora, vamos a ver la cabecera más curiosa, Sec-WebSocket-Key.

+ +
+

Tip: Todos los navegadores deben enviar una cabecera Origin. Tu puedes usar esta cabecera por seguridad (revisando por el mismo origen, listas blancas/ listas negras, etc.) y enviar un 403 Forbidden si no te gusta lo que ves. Sin embargo, se advierte que los agentes no navegadores pueden enviar un falso Origin.  La mayoría de las aplicaciones rechazaran las solicitudes sin esta cabecera.

+
+ +
+

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

+
+ +
+

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

+
+ +

Respuesta de Handshake del servidor

+ +

Después de la petición, el servidor debería enviar una linda respuesta (aunque todavía en formato HTTP) que se verá asi (hay que recordar que la cabecera termina con \r \n y agrega un \r \n extra después del último):

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Adicionalmente, el servidor puede decidir respecto de las solicitudes "extension/subprotocol" en este punto (ver Miscelláneos para más detalles). La cabecera Sec-WebSocket-Accept es interesante. El servidor debe derivarla a partir de la cabecera Sec-WebSocket-Key enviada anteriormente por el cliente. Para lograr esto se deben concatenar la cabecera del cliente Sec-WebSocket-Key y el string "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es un "magic string"), calcular el hash SHA-1 del resultado y devolver el string codificado en base64 de este hash.

+ +
+

FYI: Este aparentemente complicado e innecesario proceso se realiza de manera que sea obvio para el cliente si el servidor soporta o noWebSockets. Esto es importante de realizar, ya que podrían crearse problemas de seguridad si el servidor acepta conexiones WebSockets pero interpreta los datos como solicitudes HTTP.

+
+ +

Así, si la cabecera Sec-WebSocket-Key era "dGhlIHNhbXBsZSBub25jZQ==", la correspondiente respuesta Sec-WebSocket-Accept será "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Una vez que el servidor envía estas cabeceras, el "handshake" se considera completo y puedes comenzar a intercambiar datos.

+ +
+

El servidor puede enviar otras cabeceras como Set-Cookie, o solicitar autenticación o redirigir mediante otros status codes antes de responder al handshake.

+
+ +

Llevando registro de los clientes

+ +

Esto no está directamente relacionado con el protocolo WebSocket, pero no está de más mencionarlo: tu servidor debe llevar el registro de los sockets de los clientes, de manera de no realizar handshakes constantemente con los clientes que ya han completado este proceso. La misma dirección IP cliente puede intentar conectarse múltiples veces (pero el servidor puede denegar la conexión si se intentan demasiadas conexiones con el objetivo de evitar ataques ataques DoS).

+ +

Paso 2: Intercambiando Data Frames

+ +

Tanto el cliente como el servidor puede decidir enviar un mensaje en cualquier momento — ese es el encanto de los WebSockets. Sin embargo, extraer información de esos denominados "frames" o tramas de datos no es una experiencia muy mágica. Aunque todos los frames siguen el mismo formato específico, los datos que van del cliente al servidor se enmascaran utilizando el cifrado XOR (con una clave de 32 bits). La sección 5 de la especificación describe esto en detalle.

+ +

Formato

+ +

Cada trama de datos (desde el cliente al servidor o viceversa) sigue este mismo formato:

+ +
 0                   1                   2                   3
+ 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

Los RSV1-3 se pueden ignorar, son para las extensiones.

+ +

El bit MASK simplemente indica si el mensaje está codificado. Los mensajes del cliente deben estar enmascarados, por lo que tu servidor debe esperar que valga 1. (De hecho, la sección 5.1 de las espeficicaciones  dice que tu servidor debe desconectarse de un cliente si ese cliente envía un mensaje sin enmascarar). Cuando se envía una trama al cliente, no lo ocultes y no pongas el bit de la máscara. Te explicaremos el enmascaramiento más tarde. Nota: Tienes que enmascarar los mensajes incluso cuando uses un socket seguro.

+ +

El campo opcode define cómo interpretar los datos de la carga útil:0x0 para continuar, 0x1 para texto (que siempre se codifica con UTF-8), 0x2 para datos binarios, otros llamados "códigos de control" se explican más tarde. En esta versión de WebSockets, de 0x3 a 0x7 y de 0xB a 0xF no tienen significado.

+ +

El bit FIN indica si este es el último mensaje de una serie. Si es 0, el servidor seguirá escuchando más partes del mensaje; de lo contrario, el servidor debería considerar el mensaje entregado. Más sobre esto después.

+ +

Decoding Payload Length

+ +

To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:

+ +
    +
  1. Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're done. If it's 126, go to step 2. If it's 127, go to step 3.
    2. +
  2. Read the next 16 bits and interpret those as an unsigned integer. You're done.
    3. +
  3. Read the next 64 bits and interpret those as an unsigned integer. You're done.
    4. +
+ +

Reading and Unmasking the Data

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

Now you can figure out what DECODED means depending on your application.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Step 4: Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

Subprotocols

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

A client has to ask for a specific subprotocol. To do so, it will send something like this as part of the original handshake:

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

or, equivalently:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

Now the server must pick one of the protocols that the client suggested and it supports. If there are more than one, send the first one the client sent. Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

The server can't send more than one Sec-Websocket-Protocol header.
+ If the server doesn't want to use any subprotocol, it shouldn't send any Sec-WebSocket-Protocol header. Sending a blank header is incorrect.
+ The client may close the connection if it doesn't get the subprotocol it wants.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ + + + diff --git a/files/es/web/api/window/beforeunload_event/index.html b/files/es/web/api/window/beforeunload_event/index.html new file mode 100644 index 0000000000..98fb747ae9 --- /dev/null +++ b/files/es/web/api/window/beforeunload_event/index.html @@ -0,0 +1,215 @@ +--- +title: beforeunload +slug: Web/Events/beforeunload +translation_of: Web/API/Window/beforeunload_event +--- +
El evento beforeunload es disparado cuando la ventana, el documento y sus recursos estan a punto de ser descargados. El documento todavia es visible y el evento todavia es cancelable en este punto.
+ +
 
+ +

Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo).  Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.

+ +
+

Nota:Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.

+
+ + + + + + + + + + + + + + + + + + + + +
BurbujasNo
CancelableSi
Objetos de destinodefaultView
Interfaz{{domxref("Event")}}
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripcion
target {{readOnlyInline}}{{domxref("EventTarget")}}El evento objetivo(el objetivo superior en el arbol del DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}El evento normalmente burbujea?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}Es posible cancelar el evento?
returnValue{{domxref("DOMString")}}El valor actual devuelto por el evento (el mensaje que se le mostrara al usuario).
+ +

Ejemplos

+ +
window.addEventListener("beforeunload", function (event) {
+  event.returnValue = "\o/";
+});
+
+// es equivalente a
+window.addEventListener("beforeunload", function (event) {
+  event.preventDefault();
+});
+ +

Navegadores basados en WebKit no siguen las especificaciones para la caja de dialogos. Un ejemplo que funcione con distintos navegadores seria similar al siguiente:

+ +
window.addEventListener("beforeunload", function (e) {
+  var confirmationMessage = "\o/";
+
+  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
+  return confirmationMessage;              // Gecko, WebKit, Chrome <34
+});
+ +

Notas

+ +

A partir del 25 de Mayo del 2011, la especificion HTML5 establece que llamadas a los metodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, y {{domxref("window.prompt()")}}pueden ser ignoradas durante este evento.Mire las especificaciones de HTML5 para mas detalles.

+ +

Varios navegadores ignoran el resultado del evento y no le preguntan al usuario por confirmacion en absoluto. El documento siempre se descargara automaticamente. Firefox tiene un switch llamado dom.disable_beforeunload en about:config  para habilitar este comportamiento.

+ +

Usando este manejador de evento tu pagina previene que Firefox cambie el cache de la pagina a uno en memoria bfcache. Mire Usando el almacenamiento en cache Firefox 1.5 para detalles.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentario
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Definicion inicial
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{CompatChrome(1.0)}}{{CompatVersionUnknown}}14123
Texto personalizado soporte removido{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}} 389.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracteristicaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}(no) defect{{CompatVersionUnknown}}
Texto personalizado soporte removido{{CompatUnknown}}{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}   {{CompatChrome(51.0)}}
+
+ +

Mire tambien

+ + diff --git a/files/es/web/api/window/domcontentloaded_event/index.html b/files/es/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..ffbf3accbc --- /dev/null +++ b/files/es/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,148 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +translation_of: Web/API/Window/DOMContentLoaded_event +--- +

El evento DOMContentLoaded es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para  finalizar la carga. Un evento muy diferente - load - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar load cuando DOMContentLoaded sería mucho más apropiado, así que úsalo con cuidado.

+ +

JavaScript síncrono pausa el parseo del DOM.

+ +

También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.

+ +

Speeding up

+ +

If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.

+ +

General info

+ +
+
Specification
+
HTML5
+
Interface
+
Event
+
Bubbles
+
Yes
+
Cancelable
+
Yes (although specified as a simple event that isn't cancelable)
+
Target
+
Document
+
Default Action
+
None.
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Example

+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+</script>
+
+ +
<script>
+  document.addEventListener("DOMContentLoaded", function(event) {
+    console.log("DOM fully loaded and parsed");
+  });
+
+for(var i=0; i<1000000000; i++)
+{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
+</script>
+
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

+ +

[2] Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

+ + + + diff --git a/files/es/web/api/window/load_event/index.html b/files/es/web/api/window/load_event/index.html new file mode 100644 index 0000000000..f38e214839 --- /dev/null +++ b/files/es/web/api/window/load_event/index.html @@ -0,0 +1,125 @@ +--- +title: load +slug: Web/Events/load +tags: + - Evento +translation_of: Web/API/Window/load_event +--- +

El evento load se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.

+ +

 

+ +

Ejemplos

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("'Todos los recursos terminaron de cargar!");
+  });
+</script>
+ +

Elemento script

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script terminó de cargarse y ejecutarse");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

Información general

+ +
+
Especificación
+
DOM L3
+
Interfaz
+
UIEvent
+
Propagación
+
No
+
Cancelable
+
No
+
Objetivo
+
Window,Document,Element
+
Por defecto Acción
+
None.
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}El objetivo del evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si el elemento normalmente se propaga (bubbles) o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si el evento es cancelable o no.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0.
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Esto enlaza con la sección en los pasos que se llevan a cabo al final de cargar un documento. Los eventos 'load' también se disparan a muchos elementos. Y tenga en cuenta que hay muchos lugares en la especificación que hacen referencia a cosas que pueden "retrasar el evento de carga".
+ +

Eventos relacionados

+ + diff --git a/files/es/web/api/window/url/index.html b/files/es/web/api/window/url/index.html deleted file mode 100644 index 6ca15914a4..0000000000 --- a/files/es/web/api/window/url/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Window.URL -slug: Web/API/Window/URL -tags: - - API - - DOM - - Propiedad - - Referencia - - Referência DOM - - WebAPI -translation_of: Web/API/URL -translation_of_original: Web/API/Window/URL ---- -

{{ApiRef("Window")}}{{SeeCompatTable}}

- -

La propiedad Window.URL devuelve un objeto que proporciona métodos estáticos usados para crear y gestionar objetos de URLs. Además puede ser llamado como un constructor para construir objetos {{domxref("URL")}}.

- -

{{AvailableInWorkers}}

- -

Sintaxis

- -

Llamando a un método estático:

- -
img.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(blob);
- -

Construyendo un nuevo objeto:

- -
var url = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");
- -

Especificación

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('URL', '#dom-url', 'URL')}}{{Spec2('URL')}}Definición inicial
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico8.0[2]{{CompatGeckoDesktop("2.0")}}[1]
- {{CompatGeckoDesktop("19.0")}}		10.015.0[2]6.0[2]
- 7.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}[2]{{CompatGeckoMobile("14.0")}}[1]
- {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0[2]6.0[2]
-
- -

[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar nsIDOMMozURLProperty. En la práctica, esto no hace ninguna diferencia.

- -

[2] Implementado bajo el nombre no estandar webkitURL.

diff --git a/files/es/web/api/windowbase64/atob/index.html b/files/es/web/api/windowbase64/atob/index.html deleted file mode 100644 index aa9eeead07..0000000000 --- a/files/es/web/api/windowbase64/atob/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: WindowBase64.atob() -slug: Web/API/WindowBase64/atob -translation_of: Web/API/WindowOrWorkerGlobalScope/atob ---- -

{{APIRef}}

- -

La función WindowBase64.atob() descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

- -

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding and this note at window.btoa().

- -

Syntax

- -
var decodedData = window.atob(encodedData);
- -

Example

- -
var encodedData = window.btoa("Hello, world"); // encode a string
-var decodedData = window.atob(encodedData); // decode the string
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

- -

[2] Starting with Firefox 27, this atob() method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})

- -

See also

- - diff --git a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html b/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html deleted file mode 100644 index c8747777cd..0000000000 --- a/files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Base64 codificando y decodificando -slug: Web/API/WindowBase64/Base64_codificando_y_decodificando -translation_of: Glossary/Base64 ---- -

Base64 es un grupo de esquemas de codificación de binario a texto que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término Base64 se origina de un sistema de codificación de transmisión de contenido MIME específico.

- -

Los esquemas de codificación Base64 son comúnmente usados cuando se necesita codificar datos binarios para que sean almacenados y transferidos sobre un medio diseñado para tratar con datos textuales. Esto es para asegurar que los datos se mantienen intactos y sin modificaciones durante la transmisión. Base64 es comúnmente usado en muchas aplicaciones, incluyendo la escritura de emails vía MIME y el almacenamiento de datos complejos en XML.

- -

En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:

- - - -

La función atob() decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función btoa() crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.

- -

Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con ArrayBuffers, lea este párrafo.

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

Documentación

- -
-
data URIs
-
Los URIs de datos, definidos por RFC 2397, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.
-
Base64
-
Artículo en Wikipedia sobre el sistema de codificación Base64.
-
{{domxref("WindowBase64.atob","atob()")}}
-
Decodifica una cadena de datos que ha sido codificada utilizando base-64.
-
{{domxref("WindowBase64.btoa","btoa()")}}
-
Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.
-
The "Unicode Problem"
-
En la mayoría de navegadores, llamar a btoa() con una cadena Unicode causará una excepción Character Out Of Range. Este párrafo muestra algunas soluciones.
-
URIScheme
-
Lista de esquemas URI soportados por Mozilla.
-
StringView
-
En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:
-
-
    -
  • crear una interfaz al estilo de C para cadenas (es decir, arrays de códigos de caracteres — ArrayBufferView en JavaScript) basada en la interfaz  ArrayBuffer de JavaScript.
    • -
  • crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, stringViews) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.
    • -
  • trabajar con otras codificaciones Unicode diferentes de las DOMStrings UTF-16 por defecto de JavaScript.
    • -
-
-
- -

Ver todo...

- 		-

Herramientas

- - - - - - -
- - - -

El "Problema Unicode"

- -

Como las DOMStrings son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a window.btoa sobre una cadena Unicode resultará en una excepción Character Out Of Range si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:

- - - -

Aquí están los dos posibles métodos:

- -

Solución #1 – escapar la cadena antes de codificarla

- -
function utf8_to_b64( str ) {
-  return window.btoa(unescape(encodeURIComponent( str )));
-}
-
-function b64_to_utf8( str ) {
-  return decodeURIComponent(escape(window.atob( str )));
-}
-
-// Uso:
-utf8_to_b64('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-b64_to_utf8('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"
- -

Esta solución ha sido propuesta por Johan Sundström.

- -

Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.

- -
function b64EncodeUnicode(str) {
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function(match, p1) {
-        return String.fromCharCode('0x' + p1);
-    }));
-}
- b64EncodeUnicode('✓ à la mode'); // "4pyTIMOgIGxhIG1vZGU="
-
- -

Solución #2 – reescribir atob() y btoa() usando TypedArrays y UTF-8

- -
Nota: El siguiente código también es útil para obtener un ArrayBuffer a partir de una cadena Base64 y/o viceversa (véase abajo). Para una librería completa de arrays tipados, vea este artículo.
- -
"use strict";
-
-/*\
-|*|
-|*|  Base64 / binary data / UTF-8 strings utilities
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Base64_encoding_and_decoding
-|*|
-\*/
-
-/* Decodificación de cadena base64 en array de bytes */
-
-function b64ToUint6 (nChr) {
-
-  return nChr > 64 && nChr < 91 ?
-      nChr - 65
-    : nChr > 96 && nChr < 123 ?
-      nChr - 71
-    : nChr > 47 && nChr < 58 ?
-      nChr + 4
-    : nChr === 43 ?
-      62
-    : nChr === 47 ?
-      63
-    :
-      0;
-
-}
-
-function base64DecToArr (sBase64, nBlocksSize) {
-
-  var
-    sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length,
-    nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen);
-
-  for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) {
-    nMod4 = nInIdx & 3;
-    nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4;
-    if (nMod4 === 3 || nInLen - nInIdx === 1) {
-      for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) {
-        taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255;
-      }
-      nUint24 = 0;
-
-    }
-  }
-
-  return taBytes;
-}
-
-/* Codificación de array en una cadena Base64 */
-
-function uint6ToB64 (nUint6) {
-
-  return nUint6 < 26 ?
-      nUint6 + 65
-    : nUint6 < 52 ?
-      nUint6 + 71
-    : nUint6 < 62 ?
-      nUint6 - 4
-    : nUint6 === 62 ?
-      43
-    : nUint6 === 63 ?
-      47
-    :
-      65;
-
-}
-
-function base64EncArr (aBytes) {
-
-  var nMod3 = 2, sB64Enc = "";
-
-  for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) {
-    nMod3 = nIdx % 3;
-    if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; }
-    nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24);
-    if (nMod3 === 2 || aBytes.length - nIdx === 1) {
-      sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63));
-      nUint24 = 0;
-    }
-  }
-
-  return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '==');
-
-}
-
-/* De array UTF-8 a DOMString y viceversa */
-
-function UTF8ArrToStr (aBytes) {
-
-  var sView = "";
-
-  for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) {
-    nPart = aBytes[nIdx];
-    sView += String.fromCharCode(
-      nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */
-        /* (nPart - 252 << 30) may be not so safe in ECMAScript! So...: */
-        (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */
-        (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */
-        (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */
-        (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128
-      : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */
-        (nPart - 192 << 6) + aBytes[++nIdx] - 128
-      : /* nPart < 127 ? */ /* one byte */
-        nPart
-    );
-  }
-
-  return sView;
-
-}
-
-function strToUTF8Arr (sDOMStr) {
-
-  var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0;
-
-  /* mapeando... */
-
-  for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) {
-    nChr = sDOMStr.charCodeAt(nMapIdx);
-    nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6;
-  }
-
-  aBytes = new Uint8Array(nArrLen);
-
-  /* transcripción... */
-
-  for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) {
-    nChr = sDOMStr.charCodeAt(nChrIdx);
-    if (nChr < 128) {
-      /* un byte */
-      aBytes[nIdx++] = nChr;
-    } else if (nChr < 0x800) {
-      /* dos bytes */
-      aBytes[nIdx++] = 192 + (nChr >>> 6);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x10000) {
-      /* tres bytes */
-      aBytes[nIdx++] = 224 + (nChr >>> 12);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x200000) {
-      /* cuatro bytes */
-      aBytes[nIdx++] = 240 + (nChr >>> 18);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else if (nChr < 0x4000000) {
-      /* cinco bytes */
-      aBytes[nIdx++] = 248 + (nChr >>> 24);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    } else /* if (nChr <= 0x7fffffff) */ {
-      /* seis bytes */
-      aBytes[nIdx++] = 252 + (nChr >>> 30);
-      aBytes[nIdx++] = 128 + (nChr >>> 24 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 18 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 12 & 63);
-      aBytes[nIdx++] = 128 + (nChr >>> 6 & 63);
-      aBytes[nIdx++] = 128 + (nChr & 63);
-    }
-  }
-
-  return aBytes;
-
-}
-
- -

Tests

- -
/* Tests */
-
-var sMyInput = "Base 64 \u2014 Mozilla Developer Network";
-
-var aMyUTF8Input = strToUTF8Arr(sMyInput);
-
-var sMyBase64 = base64EncArr(aMyUTF8Input);
-
-alert(sMyBase64);
-
-var aMyUTF8Output = base64DecToArr(sMyBase64);
-
-var sMyOutput = UTF8ArrToStr(aMyUTF8Output);
-
-alert(sMyOutput);
- -

Apéndice: Decodificar una cadena Base64 en Uint8Array o ArrayBuffer

- -

Estas funciones nos permiten crear también uint8Arrays o arrayBuffers a partir de cadenas codificadas en base 64:

- -
var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network"
-
-var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network"
-
-alert(myBuffer.byteLength);
- -
Nota: La función base64DecToArr(sBase64[, nBlocksSize]) devuelve un uint8Array de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento nBlocksSize, que es el número de bytes de los que la propiedad uint8Array.buffer.bytesLength debe devolver un múltiplo (1 u omitido para ASCII, cadenas binarias o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).
- -

Para una librería más completa, véase StringView, una representación parecida a C de cadenas basadas en arrays tipados.

- -

Véase también

- - diff --git a/files/es/web/api/windowbase64/index.html b/files/es/web/api/windowbase64/index.html deleted file mode 100644 index 2607e635fa..0000000000 --- a/files/es/web/api/windowbase64/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: WindowBase64 -slug: Web/API/WindowBase64 -tags: - - API - - HTML-DOM - - Helper - - NeedsTranslation - - TopicStub - - WindowBase64 -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowBase64 ---- -

{{APIRef}}

-

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

-

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

-

Properties

-

This helper neither defines nor inherits any properties.

-

Methods

-

This helper does not inherit any methods.

-
-
- {{domxref("WindowBase64.atob()")}}
-
- Decodes a string of data which has been encoded using base-64 encoding.
-
- {{domxref("WindowBase64.btoa()")}}
-
- Creates a base-64 encoded ASCII string from a string of binary data.
-
-

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
-

Browser compatibility

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
-

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

-

See also

- diff --git a/files/es/web/api/windoweventhandlers/onunload/index.html b/files/es/web/api/windoweventhandlers/onunload/index.html new file mode 100644 index 0000000000..a665fc2027 --- /dev/null +++ b/files/es/web/api/windoweventhandlers/onunload/index.html @@ -0,0 +1,45 @@ +--- +title: window.onunload +slug: Web/API/GlobalEventHandlers/onunload +translation_of: Web/API/WindowEventHandlers/onunload +--- +

{{ ApiRef() }}

+

Test Summary

+

The unload event is raised when the document is unloaded.

+

Syntax

+
window.onunload = funcRef;
+
+ +

Example

+
<html>
+<head>
+
+<title>onunload test</title>
+
+<script type="text/javascript">
+
+window.onunload = unloadPage;
+
+function unloadPage()
+{
+ alert("unload event detected!");
+}
+</script>
+</head>
+
+<body>
+<p>Reload a new page into the browser<br />
+ to fire the unload event for this page.</p>
+<p>You can also use the back or forward buttons<br />
+ to load a new page and fire this event.</p>
+</body>
+</html>
+
+

Notes

+

Note that using this event handler in your page prevents Firefox 1.5 from caching the page in the in-memory bfcache. See Using Firefox 1.5 caching for details.

+

Browsers equipped with pop-up window blockers will ignore all window.open() method calls in onunload event handler functions.

+

Specification

+

{{ DOM0() }}

+

{{ languages( {"zh-cn": "zh-cn/DOM/window.onunload" } ) }}

diff --git a/files/es/web/api/windoworworkerglobalscope/atob/index.html b/files/es/web/api/windoworworkerglobalscope/atob/index.html new file mode 100644 index 0000000000..aa9eeead07 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/atob/index.html @@ -0,0 +1,111 @@ +--- +title: WindowBase64.atob() +slug: Web/API/WindowBase64/atob +translation_of: Web/API/WindowOrWorkerGlobalScope/atob +--- +

{{APIRef}}

+ +

La función WindowBase64.atob() descodifica una cadena de datos que ha sido codificada utilizando la codificación en base-64. Puedes utilizar el método {{domxref("window.btoa()")}} para codificar y transmitir datos que, de otro modo podrían generar problemas de comunicación. Luego de ser transmitidos se puede usar el método window.atob() para decodificar los datos de nuevo. Por ejemplo, puedes codificar, transmitir y decodificar los caracteres de control como valores ASCII 0 a 31.

+ +

For use with Unicode or UTF-8 strings, see this note at Base64 encoding and decoding and this note at window.btoa().

+ +

Syntax

+ +
var decodedData = window.atob(encodedData);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // encode a string
+var decodedData = window.atob(encodedData); // decode the string
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1][2]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

[2] Starting with Firefox 27, this atob() method ignores all space characters in the argument to comply with the latest HTML5 spec. ({{ bug(711180) }})

+ +

See also

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html new file mode 100644 index 0000000000..14a1b0d1b8 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html @@ -0,0 +1,43 @@ +--- +title: WindowTimers.clearInterval() +slug: Web/API/WindowTimers/clearInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.

+ +

Sintaxis

+ +
window.clearInterval(intervalID)
+
+ +

intervalID es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de setInterval().

+ +

Ejemplo

+ +

Vea el ejemplo de setInterval().

+ +

Especificación

+ + + + + + + + +
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
+ +

Vea también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html new file mode 100644 index 0000000000..0df5242672 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html @@ -0,0 +1,63 @@ +--- +title: window.clearTimeout +slug: Web/API/WindowTimers/clearTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +--- +
{{ApiRef}}
+ +

Resumen

+ +

Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.

+ +

Sintaxis

+ +
window.clearTimeout(timeoutID)
+
+ + + +

Ejemplo

+ +

Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.

+ +
var alarm = {
+  remind: function(aMessage) {
+    alert(aMessage);
+    delete this.timeoutID;
+  },
+
+  setup: function() {
+    this.cancel();
+    var self = this;
+    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
+  },
+
+  cancel: function() {
+    if(typeof this.timeoutID == "number") {
+      window.clearTimeout(this.timeoutID);
+      delete this.timeoutID;
+    }
+  }
+};
+window.onclick = function() { alarm.setup() };
+ +

Notas

+ +

Pasar un ID inválido a clearTimeout no tiene ningún efecto (y no lanza una excepción).

+ +

Especificación

+ +

DOM Nivel 0. Especificado en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/setinterval/index.html b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html new file mode 100644 index 0000000000..fe41612dd6 --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html @@ -0,0 +1,692 @@ +--- +title: WindowTimers.setInterval() +slug: Web/API/WindowTimers/setInterval +tags: + - API + - DOM + - Gecko + - Intervalos + - Method + - Temporizadores + - Temporizadores de JavaScript + - WindowTimers + - setInterval +translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +--- +
{{APIRef("HTML DOM")}}
+ +
Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.
+ +
+ +

Sintaxis

+ +
var procesoID = window.setInterval(función, intervaloDeTiempo[, parámetro1, parámetro2, ... , parámetroN]);
+var procesoID = window.setInterval(código, intervaloDeTiempo);
+
+ +

Parámetros

+ +
+
función
+
La {{jsxref("function")}} que será ejecutada cada intervaloDeTiempo milisegundos.
+
código
+
Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada intervaloDeTiempo milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.
+
intervaloDeTiempo
+
El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.
+
+
El parámetro intervaloDeTiempo es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.
+
+
parámetro1, ..., parámetroN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función a ejecutar.
+
+ +
+

En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección Callback arguments).

+
+ +

Valor de Retorno

+ +

El valor de retorno procesoID es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar setInterval(); este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones setInterval() y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos clearInterval() y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.

+ +
+

Nota: El argumento intervaloDeTiempo se convierte aun entero con signo de 32 bits. Esto limita efectivamente al intervaloDeTiempo a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.

+
+ +

Ejemplos

+ +

Ejemplo 1: Sintaxis básica

+ +

El siguiente ejemplo muestra la sintaxis básica.

+ +
var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
+
+function miFuncion(a,b) {
+  // Aquí va tu código
+  // Los parámetros son opcionales completamente
+  console.log(a);
+  console.log(b);
+}
+
+ +

Ejemplo 2: Alternando dos colores

+ +

El siguiente ejemplo se llama a la función flashtext() una vez por segundo hasta que se presiona el botón Detener.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Ejemplo de setInterval/clearInterval</title>
+  <script>
+     var nIntervId;
+
+     function cambiaDeColor() {
+        nIntervId = setInterval(flasheaTexto, 1000);
+     }
+
+     function flasheaTexto() {
+        var oElem = document.getElementById('mi_mensaje');
+        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
+        //oElem.style.color ... es un operador ternario o condicional
+     }
+
+     function detenerCambioDeColor() {
+        clearInterval(nIntervId);
+     }
+  </script>
+</head>
+<body onload="cambiaDeColor();">
+  <div id="mi_mensaje">
+    <p>¡Hola mundo!</p>
+  </div>
+  <button onclick="detenerCambioDeColor();">Detener</button>
+</body>
+</html>
+
+ +

Ejemplo 3: Simulando una máquina de escribir

+ +

El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (NodeList) que coinciden con un grupo de selectores y después lo escribe lentamente.

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>Máquina de Escribir con JavaScript</title>
+<script>
+  function maquinaEscribir (sSelector, nRate) {
+
+      function limpiar () {
+        clearInterval(nIntervId);
+        bTyping = false;
+        bStart = true;
+        oCurrent = null;
+        aSheets.length = nIdx = 0;
+      }
+
+      function desplazarse (oSheet, nPos, bEraseAndStop) {
+        if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
+
+        var oRel, bExit = false;
+
+        if (aMap.length === nPos) { aMap.push(0); }
+
+        while (aMap[nPos] < oSheet.parts.length) {
+          oRel = oSheet.parts[aMap[nPos]];
+
+          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
+
+          if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
+            bExit = true;
+            oCurrent = oRel.ref;
+            sPart = oCurrent.nodeValue;
+            oCurrent.nodeValue = "";
+          }
+
+          oSheet.ref.appendChild(oRel.ref);
+          if (bExit) { return false; }
+        }
+
+        aMap.length--;
+        return true;
+      }
+
+      function mecanografear () {
+        if (sPart.length === 0 && desplazarse(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { limpiar(); return; }
+
+        oCurrent.nodeValue += sPart.charAt(0);
+        sPart = sPart.slice(1);
+      }
+
+      function Hoja (oNode) {
+        this.ref = oNode;
+        if (!oNode.hasChildNodes()) { return; }
+        this.parts = Array.prototype.slice.call(oNode.childNodes);
+
+        for (var nChild = 0; nChild < this.parts.length; nChild++) {
+          oNode.removeChild(this.parts[nChild]);
+          this.parts[nChild] = new Hoja(this.parts[nChild]);
+        }
+      }
+
+      var
+        nIntervId, oCurrent = null, bTyping = false, bStart = true,
+        nIdx = 0, sPart = "", aSheets = [], aMap = [];
+
+      this.rate = nRate || 100;
+
+      this.ejecuta = function () {
+        if (bTyping) { return; }
+        if (bStart) {
+          var aItems = document.querySelectorAll(sSelector);
+
+          if (aItems.length === 0) { return; }
+          for (var nItem = 0; nItem < aItems.length; nItem++) {
+            aSheets.push(new Hoja(aItems[nItem]));
+            /* Uncomment the following line if you have previously hidden your elements via CSS: */
+            // aItems[nItem].style.visibility = "visible";
+          }
+
+          bStart = false;
+        }
+
+        nIntervId = setInterval(mecanografear, this.rate);
+        bTyping = true;
+      };
+
+      this.pausa = function () {
+        clearInterval(nIntervId);
+        bTyping = false;
+      };
+
+      this.finaliza = function () {
+        oCurrent.nodeValue += sPart;
+        sPart = "";
+        for (nIdx; nIdx < aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
+        limpiar();
+      };
+  }
+
+    /* usage: */
+    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
+
+    /* default frame rate is 100: */
+    var oTWExample2 = new maquinaEscribir("#controls");
+
+    /* you can also change the frame rate value modifying the "rate" property; for example: */
+    // oTWExample2.rate = 150;
+
+    onload = function () {
+      oTWExample1.ejecuta();
+      oTWExample2.ejecuta();
+    };
+</script>
+<style type="text/css">
+span.intLink, a, a:visited {
+  cursor: pointer;
+  color: #000000;
+  text-decoration: underline;
+}
+
+#info {
+  width: 180px;
+  height: 150px;
+  float: right;
+  background-color: #eeeeff;
+  padding: 4px;
+  overflow: auto;
+  font-size: 12px;
+  margin: 4px;
+  border-radius: 5px;
+  /* visibility: hidden; */
+}
+</style>
+</head>
+
+<body>
+
+<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
+<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.ejecuta();">Ejecutar</span> | <span class="intLink" onclick="oTWExample1.pausa();">Pausar</span> | <span class="intLink" onclick="oTWExample1.finaliza();">Terminar</span>&nbsp;]</p>
+<div id="info">
+Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
+</div>
+<h1>Maquina de Escribir en JavaScript </h1>
+
+<div id="article">
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
+<form>
+<p>Phasellus ac nisl lorem: <input type="text" /><br />
+<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
+<p><input type="submit" value="Send" />
+</form>
+<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
+<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
+</div>
+</body>
+</html>
+
+ +

Observa este ejemplo en acción. Ver más: clearInterval().

+ +

Argumentos de Callback

+ +

Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en setTimeout() ni en setInterval(). El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.

+ +
/*\
+|*|
+|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
+|*|  callback functions of javascript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:

+ +
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
+ +

También puedes hacer uso de function's bind. Ejemplo:

+ +
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
+ +

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

+ +

A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.

+ +

Problemas usando "this"

+ +

Cuando pasas el método de un objeto a la función setInterval() éste es invocado fuera de su contexto. Esto puede crear un valor de this que puede no ser el esperado. Este problema es abordado en detalle en JavaScript reference.

+ +

Explicación

+ +

Cuando setInterval() o setTimeOut() ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave this se le asigna el valor del objeto window (o el objeto global), no es igual que usar this dentro de una fuinción que invoque a setTimeOut(). Observa el siguiente ejemplo (que utiliza setTimeOut() en lugar de setInterval() – el problema, de hecho, es el mismo para ambos temporizadores):

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sPropiedad) {
+    alert(arguments.length > 0 ? this[sPropiedad] : this);
+};
+
+miArreglo.miMetodo(); // imprime "cero,uno,dos"
+miArreglo.miMetodo(1); // imprime "uno"
+setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
+setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
+// tratemos de pasar el objeto 'this'
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función de Callback en la versión anterior de JavaScript.

+ +

Una posible solución

+ +

Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas setTimeout() y setInterval() con las siguientes funciones no nativas que permiten su ejecución a través del método Function.prototype.call. El siguiente ejemplo muestra una posible sustitución:

+ +
// Permite el pase del objeto 'this' a través de temporizadores JavaScript
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+ +
Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) no estándar. Para más información vea callback arguments paragraph.
+ +

Prueba de nueva funcionalidad:

+ +
miArreglo = ["cero", "uno", "dos"];
+
+miArreglo.miMetodo = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
+setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
+
+ +

Otra solución más compleja está en la siguiente liga de framework.

+ +
JavaScript 1.8.5 introduce el método Function.prototype.bind(), el cual permite especificar el valor de this para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra this. También, ES2015 soporta arrow functions, dentro del lenguaje nos permite escribir cosas como setInterval( () => this.myMethod) si estamos dentro del método de miArreglo .
+ +

MiniDaemon - Un framework para administrar temporizadores

+ +

En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto this a la función de Callback (observa la sección Problemas usando "this" para más detalles). Puedes consultar también el siguiente código en GitHub.

+ +
Para una versión más modular de este (Daemon)puedes verlo en JavaScript Daemons Management. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor Daemon. Éste constructor no es más que un clon del  MiniDaemon con soporte para las funciones init y onstart declarables durante la instanciación del mismo. Por esto el MiniDaemon framework se mantiene como el camino recomendado para realizar animaciones simples.
+ +

minidaemon.js

+ +
/*\
+|*|
+|*|  :: MiniDaemon ::
+|*|
+|*|  Revision #2 - September 26, 2014
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
+|*|  https://developer.mozilla.org/User:fusionchess
+|*|  https://github.com/madmurphy/minidaemon.js
+|*|
+|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
+|*|  http://www.gnu.org/licenses/lgpl-3.0.html
+|*|
+\*/
+
+function MiniDaemon (oOwner, fTask, nRate, nLen) {
+  if (!(this && this instanceof MiniDaemon)) { return; }
+  if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
+  if (oOwner) { this.owner = oOwner; }
+  this.task = fTask;
+  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
+  if (nLen > 0) { this.length = Math.floor(nLen); }
+}
+
+MiniDaemon.prototype.owner = null;
+MiniDaemon.prototype.task = null;
+MiniDaemon.prototype.rate = 100;
+MiniDaemon.prototype.length = Infinity;
+
+  /* These properties should be read-only */
+
+MiniDaemon.prototype.SESSION = -1;
+MiniDaemon.prototype.INDEX = 0;
+MiniDaemon.prototype.PAUSED = true;
+MiniDaemon.prototype.BACKW = true;
+
+  /* Global methods */
+
+MiniDaemon.forceCall = function (oDmn) {
+  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
+  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
+  return true;
+};
+
+  /* Instances methods */
+
+MiniDaemon.prototype.isAtEnd = function () {
+  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
+};
+
+MiniDaemon.prototype.synchronize = function () {
+  if (this.PAUSED) { return; }
+  clearInterval(this.SESSION);
+  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
+};
+
+MiniDaemon.prototype.pause = function () {
+  clearInterval(this.SESSION);
+  this.PAUSED = true;
+};
+
+MiniDaemon.prototype.start = function (bReverse) {
+  var bBackw = Boolean(bReverse);
+  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
+  this.BACKW = bBackw;
+  this.PAUSED = false;
+  this.synchronize();
+};
+
+ +
MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.
+ +

Sintaxis

+ +

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

+ +

Descripción

+ +

Regresa un Objecto que contiene la información necesaria para una animación (como el objeto this, la función de Callback, la duración y el frame-rate).

+ +

Parámetros

+ +
+
thisObject
+
El valor de la palabra this sobre el cual funcionará la función de Callback. Puede ser un objecto o null.
+
callback
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
rate (optional)
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.
+
length (optional)
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omisión es Infinity.
+
+ +

Propiedades de la intancia MiniDaemon 

+ +
+
myDaemon.owner
+
El objeto this sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un objecto o null.
+
myDaemon.task
+
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
+
myDaemon.rate
+
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).
+
myDaemon.length
+
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omición es Infinity (lectura/escritura).
+
+ +

MiniDaemon instances methods

+ +
+
myDaemon.isAtEnd()
+
Regresa un valor boleano que expresa cuando el daemon está en posición de inicio/fin o no.
+
myDaemon.synchronize()
+
Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.
+
myDaemon.pause()
+
Pausa el deamon.
+
myDaemon.start([reverse])
+
Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).
+
+ +

Métodos del objeto global del MiniDaemon

+ +
+
MiniDaemon.forceCall(minidaemon)
+
Fuerza una sola función callback a la función minidaemon.task  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.
+
+ +

Ejemplo de uso

+ +

Tu página HTML:

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>MiniDaemin Example - MDN</title>
+  <script type="text/javascript" src="minidaemon.js"></script>
+  <style type="text/css">
+    #sample_div {
+      visibility: hidden;
+    }
+  </style>
+</head>
+
+<body>
+  <p>
+    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
+    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
+    <input type="button" onclick="fadeInOut.pause();" value="pause" />
+  </p>
+
+  <div id="sample_div">Some text here</div>
+
+  <script type="text/javascript">
+    function opacity (nIndex, nLength, bBackwards) {
+      this.style.opacity = nIndex / nLength;
+      if (bBackwards ? nIndex === 0 : nIndex === 1) {
+        this.style.visibility = bBackwards ? "hidden" : "visible";
+      }
+    }
+
+    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
+  </script>
+</body>
+</html>
+ +

Prueba este ejemplo

+ +

Notas

+ +

La función setInterval() es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.

+ +

Puedes cancelar el ciclo iniciado por un setInterval() usando el comando window.clearInterval().

+ +

Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función window.setTimeout().

+ +

Asegúrate que el tiempo de ejecución sea menor que la frecuencia

+ +

Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando window.setTimeout. Por ejemplo, si usas setInterval para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.

+ +

En estos casos llamadas con un patrón de setTimeout() recursivo es preferible:

+ +
(function loop(){
+   setTimeout(function() {
+      // Your logic here
+
+      loop();
+  }, delay);
+})();
+
+ +

En este fragmento de código, la función loop() es declarada y es ejecutada inmediatamente. La función loop() es invocada de forma recursiva dentro de setTimeout() despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. 

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificacionesEstatusComentarios
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Definición inicial (DOM Level 0)
+ +

Compatibilidad

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)[2]Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Soporta parámetros para callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Soporta parámetros para callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Whether it supports the optional parameters when in its first form or not.

+ +

[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.

+ +

Ver más

+ + diff --git a/files/es/web/api/windoworworkerglobalscope/settimeout/index.html b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..1180d9f8af --- /dev/null +++ b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,340 @@ +--- +title: WindowOrWorkerGlobalScope.setTimeout +slug: Web/API/WindowTimers/setTimeout +tags: + - API + - HTML DOM + - WindowOrWorkerGlobalScope + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

El método setTimeout() del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.

+ + +

Sintaxis

+ +
var idTemporizador = scope.setTimeout(funcion[, retraso, parametro1, parametro2, ...]);
+var idTimeout = scope.setTimeout(funcion[, retraso]);
+var idTimeout = scope.setTimeout(codigo[, retraso]);
+
+ +

Parámetros

+ +
+
funcion
+
Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.
+
codigo
+
Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis no se recomienda por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.
+
retraso {{optional_inline}}
+
Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.
+
param1, ..., paramN {{optional_inline}}
+
Parámetros adicionales que se pasan a la función especificada por  func una vez el temporizador expira.
+
+ +
Nota: Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección Callback arguments).
+ +

Valor retornado

+ +

El valor retornado IDtemporizador es númerico y no es cero; identifica el temporizador creado con la llamada a setTimeout(); este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.

+ +

Puede ser útil advertir que  setTimeout() y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto clearTimeout() como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.

+ +

Ejemplo

+ +

El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas setTimeout() y clearTimeout(). Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con clearTimeout(). Opcionalmente puede cancelar este temporizador presionando el segundo botón.

+ +

Contenido HTML

+ +
<p>Ejemplo funcional</p>
+<button onclick="delayedAlert();">Muestra una caja de alerta después de dos segundos</button>
+<p></p>
+<button onclick="clearAlert();">Cancela la alerta antes de que ocurra</button>
+
+ +

Contenido JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

{{ EmbedLiveSample('Example') }}

+ +

Vea también clearTimeout() example.

+ +

Callback arguments

+ +

Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con setTimeout() o setInterval()) usted puede incluir este código de compatibilidad IE-specific que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.

+ +
/*\
+|*|
+|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+if (document.all && !window.setTimeout.isPolyfill) {
+  var __nativeST__ = window.setTimeout;
+  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeST__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setTimeout.isPolyfill = true;
+}
+
+if (document.all && !window.setInterval.isPolyfill) {
+  var __nativeSI__ = window.setInterval;
+  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+    var aArgs = Array.prototype.slice.call(arguments, 2);
+    return __nativeSI__(vCallback instanceof Function ? function () {
+      vCallback.apply(null, aArgs);
+    } : vCallback, nDelay);
+  };
+  window.setInterval.isPolyfill = true;
+}
+
+ +

Arreglo solo para IE

+ +

Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 6)
+  (function(f){
+     window.setTimeout =f(window.setTimeout);
+     window.setInterval =f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
+  @end
+@*/
+
+ +

O usar un enfoque más limpio basado en el condicional para IE de HTML:

+ +
<!--[if lt IE 9]><script>
+(function(f){
+window.setTimeout =f(window.setTimeout);
+window.setInterval =f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
+});
+</script><![endif]-->
+
+ +

Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:

+ +
var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
+
+ +

Sin embargo, otra posibilidad es usar function's bind. Ejemplo:

+ +
setTimeout(function(arg1){}.bind(undefined, 10));
+
+ +

El problema "this"

+ +

Cuando pasa un método a setTimeout() (o cualquier otra función , por el estilo), podría ser invocada con el valor de this equivocado. Este problema es explicado en detalle en la referencia de JavaScript.

+ +

Explicación

+ +

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave this para la función llamada será asignado al objeto window (o global); no tendrá el mismo valor del this de la función que llamó al setTimeout. Vea el siguiente ejemplo:

+ +
myArray = ["cero", "uno", "dos"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // imprime "cero,uno,dos"
+myArray.myMethod(1); // imprime "uno"
+setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
+setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
+// intentemos pasar el objeto 'this'
+setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error
+ +

Como puedes ver no hay forma de pasar el objeto this a la función callback.

+ +

Una posible solución

+ +

Una posible forma de resolver el problema del "this" es reemplazar las dos funciones globales nativas setTimeout() or setInterval()por dos no-nativas  que permitan su invocación a través del método Function.prototype.call. El siguiente ejemplo muestra un posible reemplazo:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Nota: Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo Callback arguments.
+ +

Prueba de la nueva característica:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +

No hay soluciones nativas ad hoc a este problema.

+ +
Nota: JavaScript 1.8.5 introduce el método Function.prototype.bind(, que permite especificar el valor que debería usarse como this para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.
+ +

Notas

+ +

Puede cancelar el temporizador usando window.clearTimeout(). Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar window.setInterval().

+ +

Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó setTimeout()haya terminado.

+ +

Pasando cadenas literales

+ +

Pasando una cadena en vez de una función a setTimeout()pasa lo mismo que al usar eval.

+ +
// Correcto
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrecto
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde setTimeout() fue llamado no estarán disponibles cuando la cadena es evaluada como código.

+ +

Minimum/ maximum delay and timeout nesting

+ +

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

+ +

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

+ +

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

+ +

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

+ +

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

+ +

Inactive tabs

+ +

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
Soporta parámetros para callback*1{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}10.0{{ CompatVersionUnknown }}{{ CompatUnknown }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
Soporta parámetros para callback*1{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
+
+ +

*1 Whether it supports the optional parameters when in its first form or not.

+ +

Especificación

+ +

Parte del DOM nivel 0, como se especifica en HTML5.

+ +

Vea también

+ + diff --git a/files/es/web/api/windowtimers/clearinterval/index.html b/files/es/web/api/windowtimers/clearinterval/index.html deleted file mode 100644 index 14a1b0d1b8..0000000000 --- a/files/es/web/api/windowtimers/clearinterval/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: WindowTimers.clearInterval() -slug: Web/API/WindowTimers/clearInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/clearInterval ---- -
-
{{APIRef("HTML DOM")}}
-
- -

Cancela una acción reiterativa que se inició mediante una llamada a {{domxref("window.setInterval", "setInterval")}}.

- -

Sintaxis

- -
window.clearInterval(intervalID)
-
- -

intervalID es el identificador de la acción reiterativa que se desea cancelar. Este ID se obtiene a partir de setInterval().

- -

Ejemplo

- -

Vea el ejemplo de setInterval().

- -

Especificación

- - - - - - - - -
{{SpecName('HTML WHATWG', 'timers.html#timers', 'clearInterval')}}{{Spec2('HTML WHATWG')}}
- -

Vea también

- - diff --git a/files/es/web/api/windowtimers/cleartimeout/index.html b/files/es/web/api/windowtimers/cleartimeout/index.html deleted file mode 100644 index 0df5242672..0000000000 --- a/files/es/web/api/windowtimers/cleartimeout/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: window.clearTimeout -slug: Web/API/WindowTimers/clearTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout ---- -
{{ApiRef}}
- -

Resumen

- -

Borra el retraso asignado por {{domxref("window.setTimeout","window.setTimeout()")}}.

- -

Sintaxis

- -
window.clearTimeout(timeoutID)
-
- - - -

Ejemplo

- -

Ejecute el script de abajo en el contexto de una página web y haga clic en la página una vez. Verá un mensaje emergente en un segundo. Si permanece haciendo clic en la página cada segundo, la alerta nunca aparece.

- -
var alarm = {
-  remind: function(aMessage) {
-    alert(aMessage);
-    delete this.timeoutID;
-  },
-
-  setup: function() {
-    this.cancel();
-    var self = this;
-    this.timeoutID = window.setTimeout(function(msg) {self.remind(msg);}, 1000, "Wake up!");
-  },
-
-  cancel: function() {
-    if(typeof this.timeoutID == "number") {
-      window.clearTimeout(this.timeoutID);
-      delete this.timeoutID;
-    }
-  }
-};
-window.onclick = function() { alarm.setup() };
- -

Notas

- -

Pasar un ID inválido a clearTimeout no tiene ningún efecto (y no lanza una excepción).

- -

Especificación

- -

DOM Nivel 0. Especificado en HTML5.

- -

Vea también

- - diff --git a/files/es/web/api/windowtimers/index.html b/files/es/web/api/windowtimers/index.html deleted file mode 100644 index 549969232f..0000000000 --- a/files/es/web/api/windowtimers/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -
{{APIRef("HTML DOM")}}
- -

WindowTimers contains utility methods to set and clear timers.

- -

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

- -

Properties

- -

This interface do not define any property, nor inherit any.

- -

Methods

- -

This interface do not inherit any method.

- -
-
{{domxref("WindowTimers.clearInterval()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
-
{{domxref("WindowTimers.clearTimeout()")}}
-
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
-
{{domxref("WindowTimers.setInterval()")}}
-
Schedules the execution of a function each X milliseconds.
-
{{domxref("WindowTimers.setTimeout()")}}
-
Sets a delay for executing a function.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

See also

- - diff --git a/files/es/web/api/windowtimers/setinterval/index.html b/files/es/web/api/windowtimers/setinterval/index.html deleted file mode 100644 index fe41612dd6..0000000000 --- a/files/es/web/api/windowtimers/setinterval/index.html +++ /dev/null @@ -1,692 +0,0 @@ ---- -title: WindowTimers.setInterval() -slug: Web/API/WindowTimers/setInterval -tags: - - API - - DOM - - Gecko - - Intervalos - - Method - - Temporizadores - - Temporizadores de JavaScript - - WindowTimers - - setInterval -translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval ---- -
{{APIRef("HTML DOM")}}
- -
Ejecuta una función o un fragmento de código de forma repetitiva cada vez que termina el periodo de tiempo determinado. Devuelve un ID de proceso.
- -
- -

Sintaxis

- -
var procesoID = window.setInterval(función, intervaloDeTiempo[, parámetro1, parámetro2, ... , parámetroN]);
-var procesoID = window.setInterval(código, intervaloDeTiempo);
-
- -

Parámetros

- -
-
función
-
La {{jsxref("function")}} que será ejecutada cada intervaloDeTiempo milisegundos.
-
código
-
Una sintaxis opcional permite introducir una cadena en lugar de una función, la cual es evaluada y ejecutada cada intervaloDeTiempo milisegundos. Se recomienda evitar esta sintaxis por la misma razón por la que el comando {{jsxref("eval", "eval()")}} conlleva problemas de seguridad.
-
intervaloDeTiempo
-
El tiempo en milisegundos (1/1000 de segundo, ms) que se debe esperar entre cada ejecución de la función o del código. Si el valor es menor que 10, se usará 10 en su lugar. El tiempo entre cada ejecución puede ser mayor al que indicamos, para mayor información puedes revisar el siguiente artículo: {{SectionOnPage("/en-US/docs/Web/API/WindowTimers/setTimeout", "Reasons for delays longer than specified")}}.
-
-
El parámetro intervaloDeTiempo es convertido en un entero de 32 bits con signo en el IDL, por lo que el valor más grande que puede tener es 2,147,483,647 milisegundos, aproximadamente 24.8 días.
-
-
parámetro1, ..., parámetroN {{optional_inline}}
-
Parámetros adicionales que se pasan a la función a ejecutar.
-
- -
-

En Internet Explorer 9 y anteriores no es posible pasar más parámetros mediante esta sintaxis. Si quieres activar esta funcionalidad en dichos navegadores deberás usar un polyfill (entra en la sección Callback arguments).

-
- -

Valor de Retorno

- -

El valor de retorno procesoID es un valor numérico distinto de cero que identifica al temporizador que fue creado al llamar setInterval(); este valor puede ser usado como parámetro en la función {{domxref("Window.clearInterval()")}} para detener el temporizador. Las funciones setInterval() y {{domxref("WindowTimers.setTimeout", "setTimeout()")}} comparten la misma pila de IDs, por lo que, técnicamente, los comandos clearInterval() y {{domxref("WindowTimers.clearTimeout", "clearTimeout()")}} pueden usarse indiscriminadamente. Sin embargo, por motivos de claridad y mantenimiento, es importante usarlos como corresponde.

- -
-

Nota: El argumento intervaloDeTiempo se convierte aun entero con signo de 32 bits. Esto limita efectivamente al intervaloDeTiempo a valores de 2147483647 ms, ya que se especifica como entero con signo en el IDL.

-
- -

Ejemplos

- -

Ejemplo 1: Sintaxis básica

- -

El siguiente ejemplo muestra la sintaxis básica.

- -
var intervalID = window.setInterval(miFuncion, 500, 'Parametro 1', 'Parametro 2');
-
-function miFuncion(a,b) {
-  // Aquí va tu código
-  // Los parámetros son opcionales completamente
-  console.log(a);
-  console.log(b);
-}
-
- -

Ejemplo 2: Alternando dos colores

- -

El siguiente ejemplo se llama a la función flashtext() una vez por segundo hasta que se presiona el botón Detener.

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title>Ejemplo de setInterval/clearInterval</title>
-  <script>
-     var nIntervId;
-
-     function cambiaDeColor() {
-        nIntervId = setInterval(flasheaTexto, 1000);
-     }
-
-     function flasheaTexto() {
-        var oElem = document.getElementById('mi_mensaje');
-        oElem.style.color = oElem.style.color == 'red' ? 'blue' : 'red';
-        //oElem.style.color ... es un operador ternario o condicional
-     }
-
-     function detenerCambioDeColor() {
-        clearInterval(nIntervId);
-     }
-  </script>
-</head>
-<body onload="cambiaDeColor();">
-  <div id="mi_mensaje">
-    <p>¡Hola mundo!</p>
-  </div>
-  <button onclick="detenerCambioDeColor();">Detener</button>
-</body>
-</html>
-
- -

Ejemplo 3: Simulando una máquina de escribir

- -

El siguiente ejemplo simula una máquina de escribir, primero borra el contenido de una lista de nodos (NodeList) que coinciden con un grupo de selectores y después lo escribe lentamente.

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>Máquina de Escribir con JavaScript</title>
-<script>
-  function maquinaEscribir (sSelector, nRate) {
-
-      function limpiar () {
-        clearInterval(nIntervId);
-        bTyping = false;
-        bStart = true;
-        oCurrent = null;
-        aSheets.length = nIdx = 0;
-      }
-
-      function desplazarse (oSheet, nPos, bEraseAndStop) {
-        if (!oSheet.hasOwnProperty("parts") || aMap.length < nPos) { return true; }
-
-        var oRel, bExit = false;
-
-        if (aMap.length === nPos) { aMap.push(0); }
-
-        while (aMap[nPos] < oSheet.parts.length) {
-          oRel = oSheet.parts[aMap[nPos]];
-
-          desplazarse(oRel, nPos + 1, bEraseAndStop) ? aMap[nPos]++ : bExit = true;
-
-          if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) {
-            bExit = true;
-            oCurrent = oRel.ref;
-            sPart = oCurrent.nodeValue;
-            oCurrent.nodeValue = "";
-          }
-
-          oSheet.ref.appendChild(oRel.ref);
-          if (bExit) { return false; }
-        }
-
-        aMap.length--;
-        return true;
-      }
-
-      function mecanografear () {
-        if (sPart.length === 0 && desplazarse(aSheets[nIdx], 0, true) && nIdx++ === aSheets.length - 1) { limpiar(); return; }
-
-        oCurrent.nodeValue += sPart.charAt(0);
-        sPart = sPart.slice(1);
-      }
-
-      function Hoja (oNode) {
-        this.ref = oNode;
-        if (!oNode.hasChildNodes()) { return; }
-        this.parts = Array.prototype.slice.call(oNode.childNodes);
-
-        for (var nChild = 0; nChild < this.parts.length; nChild++) {
-          oNode.removeChild(this.parts[nChild]);
-          this.parts[nChild] = new Hoja(this.parts[nChild]);
-        }
-      }
-
-      var
-        nIntervId, oCurrent = null, bTyping = false, bStart = true,
-        nIdx = 0, sPart = "", aSheets = [], aMap = [];
-
-      this.rate = nRate || 100;
-
-      this.ejecuta = function () {
-        if (bTyping) { return; }
-        if (bStart) {
-          var aItems = document.querySelectorAll(sSelector);
-
-          if (aItems.length === 0) { return; }
-          for (var nItem = 0; nItem < aItems.length; nItem++) {
-            aSheets.push(new Hoja(aItems[nItem]));
-            /* Uncomment the following line if you have previously hidden your elements via CSS: */
-            // aItems[nItem].style.visibility = "visible";
-          }
-
-          bStart = false;
-        }
-
-        nIntervId = setInterval(mecanografear, this.rate);
-        bTyping = true;
-      };
-
-      this.pausa = function () {
-        clearInterval(nIntervId);
-        bTyping = false;
-      };
-
-      this.finaliza = function () {
-        oCurrent.nodeValue += sPart;
-        sPart = "";
-        for (nIdx; nIdx < aSheets.length; desplazarse(aSheets[nIdx++], 0, false));
-        limpiar();
-      };
-  }
-
-    /* usage: */
-    var oTWExample1 = new maquinaEscribir(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15);
-
-    /* default frame rate is 100: */
-    var oTWExample2 = new maquinaEscribir("#controls");
-
-    /* you can also change the frame rate value modifying the "rate" property; for example: */
-    // oTWExample2.rate = 150;
-
-    onload = function () {
-      oTWExample1.ejecuta();
-      oTWExample2.ejecuta();
-    };
-</script>
-<style type="text/css">
-span.intLink, a, a:visited {
-  cursor: pointer;
-  color: #000000;
-  text-decoration: underline;
-}
-
-#info {
-  width: 180px;
-  height: 150px;
-  float: right;
-  background-color: #eeeeff;
-  padding: 4px;
-  overflow: auto;
-  font-size: 12px;
-  margin: 4px;
-  border-radius: 5px;
-  /* visibility: hidden; */
-}
-</style>
-</head>
-
-<body>
-
-<p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">CopyLeft 2012 by <a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a></p>
-<p id="controls" style="text-align: center;">[&nbsp;<span class="intLink" onclick="oTWExample1.ejecuta();">Ejecutar</span> | <span class="intLink" onclick="oTWExample1.pausa();">Pausar</span> | <span class="intLink" onclick="oTWExample1.finaliza();">Terminar</span>&nbsp;]</p>
-<div id="info">
-Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.
-</div>
-<h1>Maquina de Escribir en JavaScript </h1>
-
-<div id="article">
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p>
-<form>
-<p>Phasellus ac nisl lorem: <input type="text" /><br />
-<textarea style="width: 400px; height: 200px;">Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.</textarea></p>
-<p><input type="submit" value="Send" />
-</form>
-<p>Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida nec. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.</p>
-<p>Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.</p>
-</div>
-</body>
-</html>
-
- -

Observa este ejemplo en acción. Ver más: clearInterval().

- -

Argumentos de Callback

- -

Como se mencionó previamente Internet Explorer version 9 y anteriores no soportan el pasar argumentos a la función Callback en setTimeout() ni en setInterval(). El siguiente código específico de Internet Explorer muestra un método de superar esta limitante. Para usarlo basta añadir el código marcado al inicio de tu script.

- -
/*\
-|*|
-|*|  IE-specific polyfill that enables the passage of arbitrary arguments to the
-|*|  callback functions of javascript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all && !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all && !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-
- -

Otra posible solución es el usar funciones anónimas para llamar al Callback, aunque esta solución es un poco más cara. Ejemplo:

- -
var intervalID = setInterval(function() { myFunc("one", "two", "three"); }, 1000);
- -

También puedes hacer uso de function's bind. Ejemplo:

- -
var intervalID = setInterval(function(arg1) {}.bind(undefined, 10), 1000);
- -

{{h3_gecko_minversion("Inactive tabs", "5.0")}}

- -

A partir de Gecko 5.0 {{geckoRelease("5.0")}}, los intervalos no se disparan más de una vez por segundo en las pestañas inactivas.

- -

Problemas usando "this"

- -

Cuando pasas el método de un objeto a la función setInterval() éste es invocado fuera de su contexto. Esto puede crear un valor de this que puede no ser el esperado. Este problema es abordado en detalle en JavaScript reference.

- -

Explicación

- -

Cuando setInterval() o setTimeOut() ejecuta un determinado código o función, ésta corre en un contexto de ejecución separado al de la función en la que se creó dicho temporizador. Por esta razón a la palabra clave this se le asigna el valor del objeto window (o el objeto global), no es igual que usar this dentro de una fuinción que invoque a setTimeOut(). Observa el siguiente ejemplo (que utiliza setTimeOut() en lugar de setInterval() – el problema, de hecho, es el mismo para ambos temporizadores):

- -
miArreglo = ["cero", "uno", "dos"];
-
-miArreglo.miMetodo = function (sPropiedad) {
-    alert(arguments.length > 0 ? this[sPropiedad] : this);
-};
-
-miArreglo.miMetodo(); // imprime "cero,uno,dos"
-miArreglo.miMetodo(1); // imprime "uno"
-setTimeout(miArreglo.miMetodo, 1000); // imprime "[object Window]" despues de 1 segundo
-setTimeout(miArreglo.miMetodo, 1500, "1"); // imprime "undefined" despues de 1,5 segundos
-// tratemos de pasar el objeto 'this'
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // same error
- -

Como puedes ver no hay forma de pasar el objeto this a la función de Callback en la versión anterior de JavaScript.

- -

Una posible solución

- -

Una posible alternativa para resolver ésto es reemplazar las dos funciones globales nativas setTimeout() y setInterval() con las siguientes funciones no nativas que permiten su ejecución a través del método Function.prototype.call. El siguiente ejemplo muestra una posible sustitución:

- -
// Permite el pase del objeto 'this' a través de temporizadores JavaScript
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentoAPasar1, argumentuAPasar2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentoAPasar1, argumentoAPasar2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
- -
Estos dos reemplazos también permiten el camino estándar en HTML5 de pasar argumentos arbitrarios a las funciones de Callback de los temporizadores dentro de IE. Por lo tanto, pueden utilizarse como rellenos (polyfills) no estándar. Para más información vea callback arguments paragraph.
- -

Prueba de nueva funcionalidad:

- -
miArreglo = ["cero", "uno", "dos"];
-
-miArreglo.miMetodo = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hola Mundo!"); // la utilizacion estandar de setTimeout y de setInterval se mantiene, pero...
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2000); // imprime "cero,uno,dos" despues de 2 segundos
-setTimeout.call(miArreglo, miArreglo.miMetodo, 2500, 2); // imprime "dos" despues de 2,5 segundos
-
- -

Otra solución más compleja está en la siguiente liga de framework.

- -
JavaScript 1.8.5 introduce el método Function.prototype.bind(), el cual permite especificar el valor de this para todas sus llamadas en una determinada función. Esto permite sobrellevar facilmente diferentes problemas de contexto con el uso de la palabra this. También, ES2015 soporta arrow functions, dentro del lenguaje nos permite escribir cosas como setInterval( () => this.myMethod) si estamos dentro del método de miArreglo .
- -

MiniDaemon - Un framework para administrar temporizadores

- -

En proyectos que requieren muchos temporizadores puede volverse complicado el seguimiento de todos los eventos generados. Una forma de facilitar la administración de timers es guardando sus estados en un objeto. El siguiente ejemplo muestra este tipo de abstracción, la arquitectura del constructor evita explicitamente el uso de cerraduras. También ofrece un camino alternativo para pasar el objeto this a la función de Callback (observa la sección Problemas usando "this" para más detalles). Puedes consultar también el siguiente código en GitHub.

- -
Para una versión más modular de este (Daemon)puedes verlo en JavaScript Daemons Management. Aquí encontrarás una versión mas complicada que se reduce a una colección escalable de métodos para el constructor Daemon. Éste constructor no es más que un clon del  MiniDaemon con soporte para las funciones init y onstart declarables durante la instanciación del mismo. Por esto el MiniDaemon framework se mantiene como el camino recomendado para realizar animaciones simples.
- -

minidaemon.js

- -
/*\
-|*|
-|*|  :: MiniDaemon ::
-|*|
-|*|  Revision #2 - September 26, 2014
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/Web/API/window.setInterval
-|*|  https://developer.mozilla.org/User:fusionchess
-|*|  https://github.com/madmurphy/minidaemon.js
-|*|
-|*|  This framework is released under the GNU Lesser General Public License, version 3 or later.
-|*|  http://www.gnu.org/licenses/lgpl-3.0.html
-|*|
-\*/
-
-function MiniDaemon (oOwner, fTask, nRate, nLen) {
-  if (!(this && this instanceof MiniDaemon)) { return; }
-  if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); }
-  if (oOwner) { this.owner = oOwner; }
-  this.task = fTask;
-  if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); }
-  if (nLen > 0) { this.length = Math.floor(nLen); }
-}
-
-MiniDaemon.prototype.owner = null;
-MiniDaemon.prototype.task = null;
-MiniDaemon.prototype.rate = 100;
-MiniDaemon.prototype.length = Infinity;
-
-  /* These properties should be read-only */
-
-MiniDaemon.prototype.SESSION = -1;
-MiniDaemon.prototype.INDEX = 0;
-MiniDaemon.prototype.PAUSED = true;
-MiniDaemon.prototype.BACKW = true;
-
-  /* Global methods */
-
-MiniDaemon.forceCall = function (oDmn) {
-  oDmn.INDEX += oDmn.BACKW ? -1 : 1;
-  if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; }
-  return true;
-};
-
-  /* Instances methods */
-
-MiniDaemon.prototype.isAtEnd = function () {
-  return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length;
-};
-
-MiniDaemon.prototype.synchronize = function () {
-  if (this.PAUSED) { return; }
-  clearInterval(this.SESSION);
-  this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this);
-};
-
-MiniDaemon.prototype.pause = function () {
-  clearInterval(this.SESSION);
-  this.PAUSED = true;
-};
-
-MiniDaemon.prototype.start = function (bReverse) {
-  var bBackw = Boolean(bReverse);
-  if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; }
-  this.BACKW = bBackw;
-  this.PAUSED = false;
-  this.synchronize();
-};
-
- -
MiniDaemon pasa argumentos a la función callback. Si quieres trabajar con ellos en navegadores que no soportan nativamente esta característica, usa uno de los métodos propuestos arriba.
- -

Sintaxis

- -

var myDaemon = new MiniDaemon(thisObject, callback[, rate[, length]]);

- -

Descripción

- -

Regresa un Objecto que contiene la información necesaria para una animación (como el objeto this, la función de Callback, la duración y el frame-rate).

- -

Parámetros

- -
-
thisObject
-
El valor de la palabra this sobre el cual funcionará la función de Callback. Puede ser un objecto o null.
-
callback
-
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
-
rate (optional)
-
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omisión es 100.
-
length (optional)
-
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omisión es Infinity.
-
- -

Propiedades de la intancia MiniDaemon 

- -
-
myDaemon.owner
-
El objeto this sobre el cual se ejecuta el daemon (lectura/escritura). Puede ser un objecto o null.
-
myDaemon.task
-
La función que se invocará repetidas veces. Dicha función se invocará con tres parámetros: index que corresponde al valor iterativo de cada invocación, length que es el número total de invocaciones asignadas al daemon (puede ser un valor finito o Infinity) y backwards (valor booleano que expresa cuando el valor de index es creciente o decreciente). Es similar a callback.call(thisObject, index, length, backwards). Si la función de Callback regresa un valor false el deamon se detiene.
-
myDaemon.rate
-
El tiempo minimo en milisegundos que transcurre entre cada invocación. El valor por omición es 100 (lectura/escritura).
-
myDaemon.length
-
El número total de invocaciones. Puede ser un valor entero positivo o Infinity. El valor por omición es Infinity (lectura/escritura).
-
- -

MiniDaemon instances methods

- -
-
myDaemon.isAtEnd()
-
Regresa un valor boleano que expresa cuando el daemon está en posición de inicio/fin o no.
-
myDaemon.synchronize()
-
Sincroniza el tiempo de un deamon iniciado con el tiempo de su invocación.
-
myDaemon.pause()
-
Pausa el deamon.
-
myDaemon.start([reverse])
-
Inicia el daemon hacia adelante "forward" (el indice de cada invocación se incrementa) o hacia atrás "backwards" (el índice de cada invocación se decrementa).
-
- -

Métodos del objeto global del MiniDaemon

- -
-
MiniDaemon.forceCall(minidaemon)
-
Fuerza una sola función callback a la función minidaemon.task  en lugar del hecho de que se ha alcanzado el final o no. En cualquier caso la propiedad INDEX interna crece o decrece según la dirección del proceso.
-
- -

Ejemplo de uso

- -

Tu página HTML:

- -
<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8" />
-  <title>MiniDaemin Example - MDN</title>
-  <script type="text/javascript" src="minidaemon.js"></script>
-  <style type="text/css">
-    #sample_div {
-      visibility: hidden;
-    }
-  </style>
-</head>
-
-<body>
-  <p>
-    <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" />
-    <input type="button" onclick="fadeInOut.start(true);" value="fade out">
-    <input type="button" onclick="fadeInOut.pause();" value="pause" />
-  </p>
-
-  <div id="sample_div">Some text here</div>
-
-  <script type="text/javascript">
-    function opacity (nIndex, nLength, bBackwards) {
-      this.style.opacity = nIndex / nLength;
-      if (bBackwards ? nIndex === 0 : nIndex === 1) {
-        this.style.visibility = bBackwards ? "hidden" : "visible";
-      }
-    }
-
-    var fadeInOut = new MiniDaemon(document.getElementById("sample_div"), opacity, 300, 8);
-  </script>
-</body>
-</html>
- -

Prueba este ejemplo

- -

Notas

- -

La función setInterval() es usada frecuentemente para asignar una pausa para ejecutar funciones recurrentes, como por ejemplo pintar el siguiente cuadro de una animación.

- -

Puedes cancelar el ciclo iniciado por un setInterval() usando el comando window.clearInterval().

- -

Si solo deseas ejecutar el ciclo una sola vez despues de una pausa usa en su lugar la función window.setTimeout().

- -

Asegúrate que el tiempo de ejecución sea menor que la frecuencia

- -

Si existe la posibilidad de que tu función o el código a ejecutarse una y otra vez exeda el tiempo marcado en cada intervalo es recomendado que uses recursivamente el nombre de tu función usando window.setTimeout. Por ejemplo, si usas setInterval para hacer llamadas a un servidor remoto cada 5 segundos, la latencia en la red, un servidor que no responde, o cualquier otro tipo de contratiempo puede generar una pausa mayor a la que indicaste. De esta forma terminarás con solicitudes XHR apiladas que no se resolverán necesariamente en orden.

- -

En estos casos llamadas con un patrón de setTimeout() recursivo es preferible:

- -
(function loop(){
-   setTimeout(function() {
-      // Your logic here
-
-      loop();
-  }, delay);
-})();
-
- -

En este fragmento de código, la función loop() es declarada y es ejecutada inmediatamente. La función loop() es invocada de forma recursiva dentro de setTimeout() despues de cada ejecución. Si bien este patrón no garantiza una ejecución a intervalos fijos, si garantiza que nunca se ejecutará un paso sin que se haya finalizado el anterior. 

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificacionesEstatusComentarios
{{SpecName("HTML WHATWG", "webappapis.html#dom-setinterval", "WindowTimers.setInterval()")}}{{Spec2("HTML WHATWG")}}Definición inicial (DOM Level 0)
- -

Compatibilidad

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)[2]Internet ExplorerOperaSafari
Soporte básico1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Soporta parámetros para callback[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Soporta parámetros para callback[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Whether it supports the optional parameters when in its first form or not.

- -

[2] Anterior a Firefox 13, Firefox pasaba un parametro adicional al callback, indicando el "actual lateness" del timeout en milisegundos. Este parámetro no estandar dejó de usarse en versiones posteriores a Firefox 13. No es recomendable que extensiones basadas en XPCOM para Firefox usen setInterval(), ya que las actualizaciones pueden causar el que el objeto {{domxref("Window")}} se actualice perdiendo los temporizadores. Deberás usar en su lugar {{interface("nsITimer")}}.

- -

Ver más

- - diff --git a/files/es/web/api/windowtimers/settimeout/index.html b/files/es/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 1180d9f8af..0000000000 --- a/files/es/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,340 +0,0 @@ ---- -title: WindowOrWorkerGlobalScope.setTimeout -slug: Web/API/WindowTimers/setTimeout -tags: - - API - - HTML DOM - - WindowOrWorkerGlobalScope - - setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -

El método setTimeout() del mixin {{domxref("WindowOrWorkerGlobalScope")}} establece un temporizador que ejecuta una función o una porción de código después de que transcurre un tiempo establecido.

- - -

Sintaxis

- -
var idTemporizador = scope.setTimeout(funcion[, retraso, parametro1, parametro2, ...]);
-var idTimeout = scope.setTimeout(funcion[, retraso]);
-var idTimeout = scope.setTimeout(codigo[, retraso]);
-
- -

Parámetros

- -
-
funcion
-
Una {{jsxref("function")}} para ejecutar después de que expire el temporizador.
-
codigo
-
Una sintaxis opcional que le permite incluir una cadena en lugar de una función, la cual es compilada y ejecutada cuando el temporizador expira. Esta sintaxis no se recomienda por las mismas razones que hacen del uso de {{jsxref("Global_Objects/eval", "eval()")}} un riesgo de seguridad.
-
retraso {{optional_inline}}
-
Tiempo, en milisegundos  (milésimas de segundo), que el temporizador debe esperar antes de ejecutar la función o el código. Si se omite este parámetro se usa el valor 0. Tenga en cuenta que el retraso real puede ser más prolongado; ver más abajo {{anch("Reasons for delays longer than specified")}}.
-
param1, ..., paramN {{optional_inline}}
-
Parámetros adicionales que se pasan a la función especificada por  func una vez el temporizador expira.
-
- -
Nota: Pasar parámetros adicionales a la función en la primera sintaxis no funciona en Internet Explorer 9 o inferior. Si quiere habilitar esta funcionalidad en ese navegador,  debe usar un código de compatibilidad (vea la sección Callback arguments).
- -

Valor retornado

- -

El valor retornado IDtemporizador es númerico y no es cero; identifica el temporizador creado con la llamada a setTimeout(); este valor puede pasarse a {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}} para cancelar el temporizador.

- -

Puede ser útil advertir que  setTimeout() y {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} comparten la misma piscina de IDs, y que tanto clearTimeout() como {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} pueden intercambiarse.  Por claridad, sin embargo,  debe hacerlos coincidir para evitar confusiones cuando mantenga su código.

- -

Ejemplo

- -

El siguiente ejemplo establece dos botenes simples en una página web y los engancha a las rutinas setTimeout() y clearTimeout(). Presionando el primer botón establecerá un temporizador que llama un diálogo de alerta después de dos segundos y guarda el id del temporizador para usarlo con clearTimeout(). Opcionalmente puede cancelar este temporizador presionando el segundo botón.

- -

Contenido HTML

- -
<p>Ejemplo funcional</p>
-<button onclick="delayedAlert();">Muestra una caja de alerta después de dos segundos</button>
-<p></p>
-<button onclick="clearAlert();">Cancela la alerta antes de que ocurra</button>
-
- -

Contenido JavaScript

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

{{ EmbedLiveSample('Example') }}

- -

Vea también clearTimeout() example.

- -

Callback arguments

- -

Si necesita pasar un argumento a su función callback, pero necesita que funcione en Internet Explorer, que no soporta el envío de parámetros adicionales (ni con setTimeout() o setInterval()) usted puede incluir este código de compatibilidad IE-specific que habilitará la funcionalidad estándar de HTML5 para pasar los parámetros adicionales en ese navegador para ambos temporizadores solamente insertandolo al inicio de sus scripts.

- -
/*\
-|*|
-|*|  IE-specific polyfill which enables the passage of arbitrary arguments to the
-|*|  callback functions of JavaScript timers (HTML5 standard syntax).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay, [param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-if (document.all && !window.setTimeout.isPolyfill) {
-  var __nativeST__ = window.setTimeout;
-  window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeST__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setTimeout.isPolyfill = true;
-}
-
-if (document.all && !window.setInterval.isPolyfill) {
-  var __nativeSI__ = window.setInterval;
-  window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-    var aArgs = Array.prototype.slice.call(arguments, 2);
-    return __nativeSI__(vCallback instanceof Function ? function () {
-      vCallback.apply(null, aArgs);
-    } : vCallback, nDelay);
-  };
-  window.setInterval.isPolyfill = true;
-}
-
- -

Arreglo solo para IE

- -

Si quiere una solución completamente no intrusiva con otros navegadores móviles o de escritorio, incluyendo IE 9 y superior, puede usar los comentarios condicionales de JavaScript:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 6)
-  (function(f){
-     window.setTimeout =f(window.setTimeout);
-     window.setInterval =f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}});
-  @end
-@*/
-
- -

O usar un enfoque más limpio basado en el condicional para IE de HTML:

- -
<!--[if lt IE 9]><script>
-(function(f){
-window.setTimeout =f(window.setTimeout);
-window.setInterval =f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}
-});
-</script><![endif]-->
-
- -

Otra posibilidad es usar una función anónima para llamar el callback, pero esta solución es un poco más costosa. Ejemplo:

- -
var intervalID = setTimeout(function() { myFunc("uno", "dos", "tres"); }, 1000);
-
- -

Sin embargo, otra posibilidad es usar function's bind. Ejemplo:

- -
setTimeout(function(arg1){}.bind(undefined, 10));
-
- -

El problema "this"

- -

Cuando pasa un método a setTimeout() (o cualquier otra función , por el estilo), podría ser invocada con el valor de this equivocado. Este problema es explicado en detalle en la referencia de JavaScript.

- -

Explicación

- -

El código ejecutado por setTimeout() corre en un contexto de ejecución diferente al de la función por la que fue llamado. Como consecuencia, la palabra clave this para la función llamada será asignado al objeto window (o global); no tendrá el mismo valor del this de la función que llamó al setTimeout. Vea el siguiente ejemplo:

- -
myArray = ["cero", "uno", "dos"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // imprime "cero,uno,dos"
-myArray.myMethod(1); // imprime "uno"
-setTimeout(myArray.myMethod, 1000); // imprime "[object Window]" después de 1 segundo
-setTimeout(myArray.myMethod, 1500, "1"); // imprime "undefined" después de 1.5 segundos
-// intentemos pasar el objeto 'this'
-setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // mismo error
- -

Como puedes ver no hay forma de pasar el objeto this a la función callback.

- -

Una posible solución

- -

Una posible forma de resolver el problema del "this" es reemplazar las dos funciones globales nativas setTimeout() or setInterval()por dos no-nativas  que permitan su invocación a través del método Function.prototype.call. El siguiente ejemplo muestra un posible reemplazo:

- -
// Enable the passage of the 'this' object through the JavaScript timers
-
-var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
Nota: Estos dos reemplazos habilitarán el estándar HTML5 para el paso de argumentos arbitrarios a las funciones callback de los temporizadores en IE. Pueden usarse como polyfills también. Vea el párrafo Callback arguments.
- -

Prueba de la nueva característica:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -

No hay soluciones nativas ad hoc a este problema.

- -
Nota: JavaScript 1.8.5 introduce el método Function.prototype.bind(, que permite especificar el valor que debería usarse como this para todas las llamadas a una función dada. Esto permite evitar fácilmente los problemas en los que no es claro que será, dependiendo del contexto desde el cual la función sea llamada.
- -

Notas

- -

Puede cancelar el temporizador usando window.clearTimeout(). Si desea tener una función llamada repetidamente (p.e., cada N milisegundos), considere usar window.setInterval().

- -

Es importante notar que la función o fragmento de código no puede ser ejecutado hasta que el hilo que llamó setTimeout()haya terminado.

- -

Pasando cadenas literales

- -

Pasando una cadena en vez de una función a setTimeout()pasa lo mismo que al usar eval.

- -
// Correcto
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// Incorrecto
-window.setTimeout("alert(\"Hello World!\");", 500);
-
-
- -

Las cadenas literales son evaluadas en el contexto global, así que los símbolos locales en el contexto donde setTimeout() fue llamado no estarán disponibles cuando la cadena es evaluada como código.

- -

Minimum/ maximum delay and timeout nesting

- -

Historically browsers implement setTimeout() "clamping": successive setTimeout() calls with delay smaller than the "minimum delay" limit are forced to use at least the minimum delay. The minimum delay, DOM_MIN_TIMEOUT_VALUE, is 4 ms (stored in a preference in Firefox: dom.min_timeout_value), with a DOM_CLAMP_TIMEOUT_NESTING_LEVEL of 5ms.

- -

In fact, 4ms is specified by the HTML5 spec and is consistent across browsers released in 2010 and onward. Prior to {{ geckoRelease("5.0") }}, the minimum timeout value for nested timeouts was 10 ms.

- -

In addition to "clamping", the timeout can also fire later when the page (or the OS/browser itself) is busy with other tasks.

- -

To implement a 0 ms timeout in a modern browser, you can use {{ domxref("window.postMessage()") }} as described here.

- -

Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed Integer internally. This causes an Integer overflow when using delays larger than 2147483647, resulting in the timeout being executed immediately.

- -

Inactive tabs

- -

In {{ geckoRelease("5.0") }} and Chrome 11, timeouts are clamped to firing no more often than once per second (1000ms) in inactive tabs; see {{ bug(633421) }} for more information about this in Mozilla or crbug.com/66078 for details about this in Chrome.

- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
Soporta parámetros para callback*1{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}10.0{{ CompatVersionUnknown }}{{ CompatUnknown }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
Soporta parámetros para callback*1{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}
-
- -

*1 Whether it supports the optional parameters when in its first form or not.

- -

Especificación

- -

Parte del DOM nivel 0, como se especifica en HTML5.

- -

Vea también

- - diff --git a/files/es/web/api/xmldocument/async/index.html b/files/es/web/api/xmldocument/async/index.html new file mode 100644 index 0000000000..132fd106e1 --- /dev/null +++ b/files/es/web/api/xmldocument/async/index.html @@ -0,0 +1,33 @@ +--- +title: Document.async +slug: Web/API/Document/async +translation_of: Web/API/XMLDocument/async +--- +

document.async es utilizado para indicar cuándo un llamado de  {{domxref("document.load")}} debe ser sincrónico o asincrónico. true es su valor por defecto, indicando que el documento se cargó asincrónicamente.

+ +

(Desde la versión 1.4 alpha es posible cargar documentos sincrónicamente)

+ +

Ejemplo

+ +
function loadXMLData(e) {
+  alert(new XMLSerializer().serializeToString(e.target)); // Devuelve los contenidos de querydata.xml como un string
+}
+
+var xmlDoc = document.implementation.createDocument("", "test", null);
+
+xmlDoc.async = false;
+xmlDoc.onload = loadXMLData;
+xmlDoc.load('querydata.xml');
+ +

Especificación

+ + + +

Véase también

+ + diff --git a/files/es/web/api/xmlhttprequest/formdata/index.html b/files/es/web/api/xmlhttprequest/formdata/index.html deleted file mode 100644 index 2ca830daf7..0000000000 --- a/files/es/web/api/xmlhttprequest/formdata/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: FormData -slug: Web/API/XMLHttpRequest/FormData -tags: - - API - - FormData - - Interfaz - - Referencia - - XMLHttpRequest -translation_of: Web/API/FormData ---- -

{{APIRef("XMLHttpRequest")}}

- -

La interfaz FormData proporciona una manera sencilla de construir un conjunto de parejas clave/valor que representan los campos de un formulario y sus valores, que pueden ser enviados fácilmente con el método {{domxref("XMLHttpRequest.send()")}}. Utiliza el mismo formato que usaría un formulario si el tipo de codificación fuera "multipart/form-data".

- -

También puede pasarse directamente al constructor de {{domxref("URLSearchParams")}} si se quieren generar parámetros de consulta de la misma forma en que lo haría un {{HTMLElement("form")}} si usara un envío GET simple.

- -

Un objeto que implementa FormData puede usarse directamente en una estructura {{jsxref("Statements/for...of", "for...of")}}, en lugar de {{domxref('FormData.entries()', 'entries()')}}: for (var p of myFormData) es equivalente a for (var p of myFormData.entries()).

- -
-

Nota: Esta característica está disponible en Web Workers.

-
- -

Constructor

- -
-
{{domxref("FormData.FormData","FormData()")}}
-
Crea un nuevo objeto FormData.
-
- -

Métodos

- -
-
{{domxref("FormData.append()")}}
-
Agrega un nuevo valor a una clave existente dentro de un objeto FormData, o añade la clave si aún no existe.
-
{{domxref("FormData.delete()")}}
-
Elimina una pareja clave/valor de un objeto FormData.
-
{{domxref("FormData.entries()")}}
-
Devuelve un {{jsxref("Iteration_protocols","iterator")}} que permite recorrer todas las parejas clave/valor contenidas en este objeto.
-
{{domxref("FormData.get()")}}
-
Devuelve el primer valor asociado con una clave dada en un objeto FormData.
-
{{domxref("FormData.getAll()")}}
-
Devuelve un array con todos los valores asociados con una clave dada en un objeto FormData.
-
{{domxref("FormData.has()")}}
-
Devuelve un booleano que indica si un objeto FormData contiene una clave determinada.
-
{{domxref("FormData.keys()")}}
-
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todas las claves de las parejas clave/valor contenidas en este objeto.
-
{{domxref("FormData.set()")}}
-
Establece un nuevo valor para una clave existente dentro de un objeto FormData, o agrega la clave/valor si aún no existe.
-
{{domxref("FormData.values()")}}
-
Devuelve un {{jsxref("Iteration_protocols", "iterator")}} que permite recorrer todos los valores contenidos en este objeto.
-
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definido en XHR spec
- -

Compatibilidad con navegadores

- - - -

{{Compat("api.FormData")}}

- -

Ver también

- - diff --git a/files/es/web/api/xmlhttprequest/loadend_event/index.html b/files/es/web/api/xmlhttprequest/loadend_event/index.html new file mode 100644 index 0000000000..39e528634d --- /dev/null +++ b/files/es/web/api/xmlhttprequest/loadend_event/index.html @@ -0,0 +1,91 @@ +--- +title: loadend +slug: Web/Events/loadend +tags: + - eventos +translation_of: Web/API/XMLHttpRequest/loadend_event +--- +

El evento loadend es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de {{domxref("XMLHttpRequest")}}, y al contenido de un elemento {{htmlelement("img")}} o {{htmlelement("video")}}.

+ +

Información General

+ +
+
Especificación
+
Progress
+
Interfaz
+
ProgressEvent
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
{{domxref("HTMLImageElement")}}, Por Ejemplo
+
Acción por Defecto
+
None
+
+ +

Propiedades

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
+ +

Eventos Relacionados

+ + + +

Ver También

+ + diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/-moz-box-flex/index.html deleted file mode 100644 index c7491aea2d..0000000000 --- a/files/es/web/css/-moz-box-flex/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: '-moz-box-flex' -slug: Web/CSS/-moz-box-flex -tags: - - CSS - - No estándar(2) - - Referencia CSS -translation_of: Web/CSS/box-flex ---- -
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
- -

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

- -

Resumen

- -

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una  -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Valores <number> */
--moz-box-flex: 0;
--moz-box-flex: 3;
--webkit-box-flex: 0;
--webkit-box-flex: 3;
-
-/* Valores gloables */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
-
- -

Valores

- -
-
0
-
La caja no crece.
-
> 0
-
La caja crece para rellenar un proporción del espacio disponible..
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplos

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Ejemplo de -moz-box-flex</title>
-    <style>
-      div.example {
-        display: -moz-box;
-        display: -webkit-box;
-        border: 1px solid black;
-        width: 100%;
-      }
-      div.example > p:nth-child(1) {
-        -moz-box-flex: 1;       /* Mozilla */
-        -webkit-box-flex: 1;    /* WebKit */
-        border: 1px solid black;
-      }
-      div.example > p:nth-child(2) {
-        -moz-box-flex: 0;       /* Mozilla */
-        -webkit-box-flex: 0;    /* WebKit */
-        border: 1px solid black;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="example">
-      <p>Creceré para rellenar un espacio extra</p>
-      <p>No creceré</p>
-    </div>
-  </body>
-</html>
-
- -

Notas

- -

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

- -

Los elementos dentro del contenedor que tienen 0 flex no crecen.

- -

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

- -

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

- -

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

- -

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

- -

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

- -

Especificaciones

- -

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
característicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- -

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/-moz-box-ordinal-group/index.html deleted file mode 100644 index 9f6af1c315..0000000000 --- a/files/es/web/css/-moz-box-ordinal-group/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: '-moz-box-ordinal-group' -slug: Web/CSS/-moz-box-ordinal-group -tags: - - CSS - - 'CSS: Extensiones Mozilla' - - Caja Flexible - - No estandar - - Referencia CSS -translation_of: Web/CSS/box-ordinal-group -translation_of_original: Web/CSS/-moz-box-ordinal-group ---- -

{{CSSRef}}
- {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

- -

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

- -

Resumen

- -

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

- -

Valores

- -

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

- -

Ejemplos

- -
<style type="text/css">
-  #Flexbox {
-    display: -ms-box;
-    display: -moz-box;
-    display: -webkit-box;
-  }
-
-  #text1 {
-    background: red;
-    -ms-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -webkit-box-ordinal-group: 4;
-  }
-
-  #text2 {
-    background: green;
-    -ms-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -webkit-box-ordinal-group: 3;
-  }
-
-  #text3 {
-    background: blue;
-    -ms-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -webkit-box-ordinal-group: 2;
-  }
-
-  #text4 {
-    background: orange;
-  }
-</style>
-
-<div id="Flexbox">
-  <div id="text1">text 1</div>
-  <div id="text2">text 2</div>
-  <div id="text3">text 3</div>
-  <div id="text4">text 4</div>
-</div>
-
diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/-moz-box-pack/index.html deleted file mode 100644 index 118d60287a..0000000000 --- a/files/es/web/css/-moz-box-pack/index.html +++ /dev/null @@ -1,184 +0,0 @@ ---- -title: '-moz-box-pack' -slug: Web/CSS/-moz-box-pack -tags: - - CSS - - Diseño - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/box-pack ---- -
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
- -

Ver Flexbox para más información.

- -

Resumen

- -

Las propiedades  CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

- -

La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Valores de palabras clave */
--moz-box-pack: start;
--moz-box-pack: center;
--moz-box-pack: end;
--moz-box-pack: justify;
-
-/* Valores gloables */
--moz-box-pack: inherit;
--moz-box-pack: initial;
--moz-box-pack: unset;
-
- -

Valores

- -
-
start
-
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
-
center
-
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
-
end
-
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
-
justify
-
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplos

- -
div.example {
-  border-style: solid;
-
-  display: -moz-box; /* Mozilla */
-  display: -webkit-box; /* WebKit */
-
-  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
-     para el empaquetado en la caja */
-  height: 300px;
-  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
-     centrados horizontalmente */
-  width: 300px;
-
-  /* Los hijos deberían estar orientados verticalmente */
-  -moz-box-orient: vertical; /* Mozilla */
-  -webkit-box-orient: vertical; /* WebKit */
-
-  /* Alínea los hijos con el centro horizontal de la caja */
-  -moz-box-align: center; /* Mozilla */
-  -webkit-box-align: center; /* WebKit */
-
-  /* Dispone a los hijos en el fondo de la caja */
-  -moz-box-pack: end;             /* Mozilla */
-  -webkit-box-pack: end;          /* WebKit */
-}
-
-div.example p {
-  /* hace los hijos más estrechos que el padra para que
-     haya espacio suficiente para el box-align */
-  width: 200px;
-}
-
- -
<div class="example">
-  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
-  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
-</div>
-
- -

{{EmbedLiveSample('Examples', 310, 310)}}

- -

Notas

- -

EL borde  de la caja que será tomado como start  para el empqeutado dependerá de la orientación y dirección de la caja:

- - - - - - - - - - - - - - - - - - - -
 NormalReverse
Horizontalleftright
Verticaltopbottom
- -

El borde opuesto a start será el considerado como end.

- -

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

- -

Especificaciones

- -

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox,  que a su vez ha sido sustituida para nuevas versiones de la especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- -

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/-moz-cell/index.html b/files/es/web/css/-moz-cell/index.html deleted file mode 100644 index 213b3607c0..0000000000 --- a/files/es/web/css/-moz-cell/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: '-moz-cell' -slug: Web/CSS/-moz-cell -tags: - - CSS -translation_of: Web/CSS/cursor -translation_of_original: Web/CSS/-moz-cell ---- -
{{CSSRef}}{{obsolete_header}}
- -

¡No uses este valor!Don't use this value! Usa el valor  {{cssxref("cursor#cell","cell")}} en su lugar.

diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/-moz-font-language-override/index.html deleted file mode 100644 index 1749002182..0000000000 --- a/files/es/web/css/-moz-font-language-override/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: '-moz-font-language-override' -slug: Web/CSS/-moz-font-language-override -translation_of: Web/CSS/font-language-override -translation_of_original: Web/CSS/-moz-font-language-override ---- -

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/-moz-user-modify/index.html deleted file mode 100644 index 21b9593d93..0000000000 --- a/files/es/web/css/-moz-user-modify/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: '-moz-user-modify' -slug: Web/CSS/-moz-user-modify -tags: - - CSS - - No estándar(2) - - Referencia CSS -translation_of: Web/CSS/user-modify ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La propiedad -moz-user-modify determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  user-focus , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras clave valor */
--moz-user-modify: read-only;
--moz-user-modify: read-write;
--moz-user-modify: write-only;
-
-/* Valores globales */
--moz-user-modify: inherit;
--moz-user-modify: initial;
--moz-user-modify: unset;
-
- -

Valores

- -
-
read-only
-
Valor por defecto. El contenido sólo se puede leer.
-
read-write
-
El usuario puede leer y escribir contenidos.
-
write-only
-
El usuario puede editar el contenido pero no leerlo.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplo

- -

CSS

- -
.readwrite {
-  -moz-user-modify: read-write;
-  -webkit-user-modify: read-write;
-}
-
- -

HTML

- -
<div class="readwrite">El usuario puede cambiar este texto.</div>
-
- -

Result

- -

{{EmbedLiveSample("Example", 300, 30)}}

- -

Especificaciones

- -

user-modify en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por CSS 3 UI)

- -

Compatibilidad con los distintos navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] También soporta: -webkit-user-modify: read-write-plaintext-only (Se perderá el texto enriquecido).
- Esta propiedad se llamó  -khtml-user-modify en Safari 2.0.

- -

Ver además

- - diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/-webkit-mask-clip/index.html deleted file mode 100644 index 5110c18d6c..0000000000 --- a/files/es/web/css/-webkit-mask-clip/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: '-webkit-mask-clip' -slug: Web/CSS/-webkit-mask-clip -tags: - - CSS -translation_of: Web/CSS/mask-clip -translation_of_original: Web/CSS/-webkit-mask-clip ---- -

{{ CSSRef() }}

- -

{{ Non-standard_header() }}

- -

Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

- -

{{cssinfo}}

- -

Síntaxis

- -
{{csssyntax}}
-
- -

donde:

- -
-
<clip-style>
-
border | padding | content | text
-
- -

Valores

- -
-
border
-
Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
-
padding
-
Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
-
content
-
Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
-
text
-
Si se ha especificado  text , la imagen de máscara de recorta al tamaño del texto del elemento.
-
- -

Ejemplo

- -
div {
-    -webkit-mask-image: url('images/mask.png');
-    -webkit-mask-clip: padding;
-}
-
- -

Compatibilidad con los distintos navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
-
- -

Ver además

- -

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/-webkit-mask-image/index.html deleted file mode 100644 index 60434d3e6a..0000000000 --- a/files/es/web/css/-webkit-mask-image/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: '-webkit-mask-image' -slug: Web/CSS/-webkit-mask-image -tags: - - CSS - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/mask-image -translation_of_original: Web/CSS/-webkit-mask-image ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

- -

{{cssinfo}}

- -

Sintaxis

- -
-webkit-mask-image: url(images/mymask.png);
--webkit-mask-image: url(images/foo.png), url(images/bar.png);
--webkit-mask-image: none;
-
- -

Valores

- -
-
<uri>
-
La localización del recurso imagen que será utilizado como imagen de máscara.
-
<gradient>
-
La función webkit-gradient que será usada como imagen de máscara.
-
none
-
Usado para especificar si un elemento no tiene imagen de máscara.
-
- -

Sintaxis Formal

- -
{{csssyntax}}
-
- -

Ejemplos

- -
body {
-  -webkit-mask-image: url('images/mymask.png');
-}
-
-div {
-  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
-}
-
-p {
-  -webkit-mask-image: none;
-}
-
- -

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

- -

Compatibilidad con los distintos navegadores.

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
-
- -

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

- -

Ver además

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/-webkit-mask-origin/index.html deleted file mode 100644 index 8e75d01a39..0000000000 --- a/files/es/web/css/-webkit-mask-origin/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: '-webkit-mask-origin' -slug: Web/CSS/-webkit-mask-origin -tags: - - CSS - - Referencia -translation_of: Web/CSS/mask-origin -translation_of_original: Web/CSS/-webkit-mask-origin ---- -
{{CSSRef}}{{Non-standard_header}}
- -

La propiedad  CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

- -

{{cssinfo}}

- -

Síntaxis

- -
{{csssyntax}}
- -

Valores

- -
-
padding
-
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
-
border
-
La posición de la imagen de máscara es relativa al borde.
-
content
-
La posición de la imagen de máscara es relativa al contenido.
-
- -

Ejemplos

- -
.example {
-  border: 10px double;
-  padding: 10px;
-  -webkit-mask-image: url('mask.png');
-
-  /* La imagen de máscara estará dentro del padding */
-  -webkit-mask-origin: content;
-}
-
- -
div {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-origin: padding, content;
-}
-
- -

Compatibilidad con los distintos navegadores.

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básica2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
- -

Ver además

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/-webkit-mask-position/index.html deleted file mode 100644 index 60a7231da3..0000000000 --- a/files/es/web/css/-webkit-mask-position/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: '-webkit-mask-position' -slug: Web/CSS/-webkit-mask-position -tags: - - CSS - - No estándar(2) - - Propiedad CSS - - Referencia CSS -translation_of: Web/CSS/mask-position -translation_of_original: Web/CSS/-webkit-mask-position ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Sumario

- -
la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.
- -

{{cssinfo}}

- -

Síntaxis

- -
{{csssyntax}}
- -

Valores

- -

 Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.

- - - -
-
<percentage>
-
Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.
-
<length>
-
Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.
-
top
-
Equivalente al 0% para la posición vertical.
-
right
-
Equivalente al 100% para la posición horizontal.
-
bottom
-
Equivalente al 100% para la posición vertical.
-
left
-
Equivalente al 0% para la posición horizontal.
-
center
-
Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.
-
- -

Ejemplos

- -
.exampleOne {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position: bottom right;
-}
-
-.exampleTwo {
-  -webkit-mask-image: url(mask.png);
-  -webkit-mask-position: 25%;
-}
-
- -

Especificaciones

- -

No forma parte de ninguna especificación.

- -

Compatibilidad con los distintos nevegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
-
- -

Ver tambien

- -

{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/-webkit-mask-repeat/index.html deleted file mode 100644 index 316bec182e..0000000000 --- a/files/es/web/css/-webkit-mask-repeat/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: '-webkit-mask-repeat' -slug: Web/CSS/-webkit-mask-repeat -tags: - - CSS - - No estandar - - Propiedad CSS - - Referencia - - Web -translation_of: Web/CSS/mask-repeat -translation_of_original: Web/CSS/-webkit-mask-repeat ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras clave de valor únicas */
--webkit-mask-repeat: repeat;
--webkit-mask-repeat: repeat-x;
--webkit-mask-repeat: repeat-y;
--webkit-mask-repeat: no-repeat;
-
-/* Palabras clave de valor mútiple */
--webkit-mask-repeat: repeat, repeat-x, no-repeat;
-
-/* Valores globlaes */
--webkit-mask-repeat: inherit;
--webkit-mask-repeat: initial;
--webkit-mask-repeat: unset;
-
- -

Valores

- -
-
repeat
-
La máscara de imagen se repite tanto vertical como horizontalmente.
-
repeat-x
-
La imagen de máscara de repite sólo horizontalmente.
-
repeat-y
-
La imagen de máscara de repite sólo verticalemente.
-
no-repeat
-
La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
-
- -

Ejemplos

- -
.exampleone {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat: repeat-x;
-}
-
-.exampletwo {
-  -webkit-mask-image: url('mask.png');
-  -webkit-mask-repeat: no-repeat;
-}
-
- -

Soporte para múltiples imágenes de máscara

- -

Se puede especificar, seperados por comas,  un <repeat-style> para cada una de las imágenes de máscara:

- -
.examplethree {
-  -webkit-mask-image: url('mask1.png'), url('mask2.png');
-  -webkit-mask-repeat: repeat-x, repeat-y;
-}
-
- -

Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
- -

Ver además

- -

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/-webkit-mask/index.html deleted file mode 100644 index 50dd997bb0..0000000000 --- a/files/es/web/css/-webkit-mask/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: '-webkit-mask' -slug: Web/CSS/-webkit-mask -tags: - - CSS - - No estandar - - Propiedad CSS - - Referencia -translation_of: Web/CSS/mask -translation_of_original: Web/CSS/-webkit-mask ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

- -

{{cssinfo}}

- -

Síntaxis

- -
/* Palabras clave valor */
--webkit-mask: none;
-
-/* Valores de imágene */
--webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
--webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
--webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
-
-/* Valores combinados */
--webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
--webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
--webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
--webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
--webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
-
-/* Valores globales */
--webkit-mask: inherit;
--webkit-mask: initial;
--webkit-mask: unset;
-
- -

Valores

- -
-
mask-image
-
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
-
mask-repeat
-
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
-
mask-attachment
-
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
-
mask-position
-
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
-
mask-origin
-
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
-
mask-clip
-
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
-
- -

Síntaxis Formal

- -
{{csssyntax}}
- -

Ejemplos

- -
.example {
-  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
-}
-
- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
-
- -

See also

- - diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/altura/index.html deleted file mode 100644 index 7cb29fe768..0000000000 --- a/files/es/web/css/@media/altura/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Altura -slug: Web/CSS/@media/altura -tags: - - '@media' - - CSS - - Media Queries - - Referencia - - características media -translation_of: Web/CSS/@media/height ---- -
{{cssref}}
- -

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para paged media).

- -

Sintáxis

- -

La característica height es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

- -

Ejemplo

- -

HTML

- -
<div>Watch this element as you resize your viewport's height.</div>
- -

CSS

- -
/* Altura exacta */
-@media (height: 360px) {
-  div {
-    color: red;
-  }
-}
-
-/* Altura mínima */
-@media (min-height: 25rem) {
-  div {
-    background: yellow;
-  }
-}
-
-/* Altura máxima */
-@media (max-height: 40rem) {
-  div {
-    border: 2px solid blue;
-  }
-}
-
- -

Resultado

- -

{{EmbedLiveSample('Example','90%')}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Definición inicial. El valor debe ser positivo.
- -

Compatibilidad con navegadores

- - - -

{{Compat("css.at-rules.media.height")}}

diff --git a/files/es/web/css/@media/height/index.html b/files/es/web/css/@media/height/index.html new file mode 100644 index 0000000000..7cb29fe768 --- /dev/null +++ b/files/es/web/css/@media/height/index.html @@ -0,0 +1,82 @@ +--- +title: Altura +slug: Web/CSS/@media/altura +tags: + - '@media' + - CSS + - Media Queries + - Referencia + - características media +translation_of: Web/CSS/@media/height +--- +
{{cssref}}
+ +

Las CSS media feature (consulta de medios) height puede ser usada para aplicar estilos basados en la altura del {{glossary("viewport")}} (o la caja de la página, para paged media).

+ +

Sintáxis

+ +

La característica height es especificada como un valor {{cssxref("<length>")}} representando la altura de la vista (viewport). Es una característica en rangos, lo que siginifica que puede ser prefijada con las variantes min-height y max-height para consultar valores mínimos y máximos, respectivamente.

+ +

Ejemplo

+ +

HTML

+ +
<div>Watch this element as you resize your viewport's height.</div>
+ +

CSS

+ +
/* Altura exacta */
+@media (height: 360px) {
+  div {
+    color: red;
+  }
+}
+
+/* Altura mínima */
+@media (min-height: 25rem) {
+  div {
+    background: yellow;
+  }
+}
+
+/* Altura máxima */
+@media (max-height: 40rem) {
+  div {
+    border: 2px solid blue;
+  }
+}
+
+ +

Resultado

+ +

{{EmbedLiveSample('Example','90%')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Media Queries', '#height', 'height')}}{{Spec2('CSS4 Media Queries')}}El valor ahora puede ser negativo, en cuyo caso se calcula como negativo.
{{SpecName('CSS3 Media Queries', '#height', 'height')}}{{Spec2('CSS3 Media Queries')}}Definición inicial. El valor debe ser positivo.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.at-rules.media.height")}}

diff --git "a/files/es/web/css/@media/resoluci\303\263n/index.html" "b/files/es/web/css/@media/resoluci\303\263n/index.html" deleted file mode 100644 index bd2beb4866..0000000000 --- "a/files/es/web/css/@media/resoluci\303\263n/index.html" +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Resolución -slug: Web/CSS/@media/resolución -tags: - - Referencia - - resolución -translation_of: Web/CSS/@media/resolution ---- -

resolución es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<resolution>.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
- -

Compatibilidad con navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
- - - - - - -
Característica
- 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 

diff --git a/files/es/web/css/@media/resolution/index.html b/files/es/web/css/@media/resolution/index.html new file mode 100644 index 0000000000..bd2beb4866 --- /dev/null +++ b/files/es/web/css/@media/resolution/index.html @@ -0,0 +1,88 @@ +--- +title: Resolución +slug: Web/CSS/@media/resolución +tags: + - Referencia + - resolución +translation_of: Web/CSS/@media/resolution +--- +

resolución es una función de medios de CSS cuyo valor es la densidad de píxeles del dispositivo de salida, como un CSS<resolution>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Media Queries', '#resolution', 'resolution')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad con navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
+ + + + + + +
Característica
+ 		AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

diff --git a/files/es/web/css/@viewport/height/index.html b/files/es/web/css/@viewport/height/index.html deleted file mode 100644 index bb9c54b069..0000000000 --- a/files/es/web/css/@viewport/height/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - Descriptor CSS - - Referencia -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -
{{CSSRef}}
- -

Resumen

- -

El descriptor CSS height es un descriptor de forma reducida para establecer {{cssxref("@viewport/min-height", "min-height")}} y {{cssxref("@viewport/max-height", "max-height")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, altura mínima y altura máxima, con el valor definido.

- -

Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Un valor */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* Dos valores */
-height: 320px 200px;
-
- -

Valores

- -
-
auto
-
El valor a usar es calculado con los valores de otros descriptores CSS.
-
<length>
-
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
-
<percentage>
-
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
-
- -

Sintaxis formal

- -
{{csssyntax}}
-
- -

Ejemplo

- -
@viewport {
-  height: 500px;
-}
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
diff --git a/files/es/web/css/@viewport/width/index.html b/files/es/web/css/@viewport/width/index.html deleted file mode 100644 index 2c550153bc..0000000000 --- a/files/es/web/css/@viewport/width/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: width -slug: Web/CSS/@viewport/width -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/width ---- -
{{CSSRef}}
- -

Resumen

- -

El descriptor CSS width es una forma reducida para establecer {{cssxref("@viewport/min-width", "min-width")}} y {{cssxref("@viewport/max-width", "max-width")}} en el viewport. Definiendo un valor de longitud para viewport se establecerán los dos, anchura mínima y anchura máxima, con el valor definido.

- -

Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Ejemplo con un valor de viewport: */
-@viewport {
-    width: 320px;
-}
-
-/* Ejemplo con dos valores de viewport: */
-@viewport {
-    width: 320px, 120px;
-}
-
-
- -

 

- -

Valores

- -
-
auto
-
El valor a usar es calculado con los valores de otros descriptores CSS.
-
<length>
-
Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.
-
<percentage>
-
Un valor {{cssxref("<percentage>")}} del porcentaje relativo a la anchura o altura del viewport inicial, con factor de zoom de 1.0, para longitudes verticales y horizontales respectivamente. No puede ser negativo.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}{{Spec2('CSS3 Device')}}Definición inicial
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico29 (usando una bandera){{CompatNo}}10 {{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.429{{CompatNo}}10{{property_prefix("-ms")}}11.10
- Removido en 15
- Reintroducido con una bandera en 16		{{CompatNo}}
-
- -

 

diff --git a/files/es/web/css/_colon_-moz-placeholder/index.html b/files/es/web/css/_colon_-moz-placeholder/index.html deleted file mode 100644 index c7f84a0273..0000000000 --- a/files/es/web/css/_colon_-moz-placeholder/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: ':-moz-placeholder' -slug: 'Web/CSS/:-moz-placeholder' -tags: - - CSS - - Marcador de Posición INPUT - - Marcador de posición - - No estándar(2) - - Placeholder - - Pseudo-Clase CSS - - Referencia CSS -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-moz-placeholder' ---- -
Nota: La pseudo-clase CSS :-moz-placeholder está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.
- -
Nota:  El CSSWG ha decidido introducir  :placeholder-shown. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre.  {{bug(1069012)}}
- -
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La pseudo-clase :-moz-placeholder representa a cualquier elemento que muestre un  texto del marcador de posición (placeholder). Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia del texto de los marcadores de posición (placeholders) que, por defecto, son grises. Puede que esto no funcione bien si ha cambiado el color de fondo de los campos de sus formularios a un color similar así que, puede usar esta pseudo-clase para cambiar el color del texto de los marcadores de posición (placeholders).,

- -

Ejemplo

- -

Ejemplo básico

- -

Este ejemplo le da estilo a un placeholder (marcador de posición) haciendo que el color del texto sea verde.

- -
<!doctype html>
-<html>
-<head>
-  <title>Placeholder demo</title>
-  <style type="text/css">
-    input::-moz-placeholder {
-      color: green;
-    }
-    input:-moz-placeholder {
-      color: green;
-    }
-  </style>
-</head>
-<body>
-  <input id="test" placeholder="Placeholder text!">
-</body>
-</html>
-
- -

{{EmbedLiveSample("Basic_example")}}

- -

Desbordamiento

- -

En numerosas ocasiones las cajas para las búsquedas y otros campos de los formularios son fuertemente acortados al ser mostrados en dispositivos móviles. Desafortunadamente , en algunas circunstancias, el texto del marcador de posición de los elementos INPUT no cabe y  es recortado de una manera poco afortunada y fea. Para evitar esto se puede usar la regla CSS text-overflow: ellipsis para envolverlo.

- -
input[placeholder] { text-overflow: ellipsis; }
-::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
-input:-moz-placeholder { text-overflow: ellipsis; }
-
- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementado en {{bug("457801")}}.

- -

Ver además

- - diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_-moz-ui-invalid/index.html deleted file mode 100644 index 6f12ca97a6..0000000000 --- a/files/es/web/css/_colon_-moz-ui-invalid/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: ':-moz-ui-invalid' -slug: 'Web/CSS/:-moz-ui-invalid' -tags: - - CSS - - NeedsExample - - NeedsMobileBrowserCompatibility - - No estándar(2) - - Pseudo clase - - Referencia CSS -translation_of: 'Web/CSS/:user-invalid' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La  pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::

- - - -

El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").

- -

Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- - diff --git a/files/es/web/css/_colon_-ms-input-placeholder/index.html b/files/es/web/css/_colon_-ms-input-placeholder/index.html deleted file mode 100644 index b83b72db1a..0000000000 --- a/files/es/web/css/_colon_-ms-input-placeholder/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ':-ms-input-placeholder' -slug: 'Web/CSS/:-ms-input-placeholder' -tags: - - CSS - - No estándar(2) - - Pseudo clase CSS - - Referencia -translation_of: 'Web/CSS/:placeholder-shown' -translation_of_original: 'Web/CSS/:-ms-input-placeholder' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

La  pseudo-clase propietaria y no estándar  :-ms-input-placeholder representa el  texto del marcador de posición (placeholder) de un elemento de un formulario. Esto permite personalizar el texto de los marcadores de posición (placeholders) a los desarrolladores web y a los diseñadores de temas. Sólo es soportada por los navegadores Internet Explorer y Microsoft Edge.

- -

Ejemplo

- -

El siguiente ejemplo destaca con un estilo personalizado los campos "Branch" y código "ID". El texto del marcardor de posición (placeholder) se muestra con un estilo hasta que el campo obtiene el foco, momento a partir del cual podemos escribir en él. Cuando el campo obtiene el foco vuelve a tener el estilo normal para un campo input y el texto del marcador de posición (placeholder) desaparece.

- -

HTML

- -
<form id="test">
-  <p><label>Enter Student Name: <input id="name" placeholder="Student Name"/></label></p>
-  <p><label>Enter Student Branch: <input id="branch" placeholder="Student Branch" /></label></p>
-  <p><label>Enter Student ID: <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id" /></label></p>
-  <input type="submit" />
-</form>
- -

CSS

- -
input {
-   background-color:#E8E8E8;
-   color:black; }
-/* placeholder only style */
-input.studentid:-ms-input-placeholder {
-   font-style:italic;
-   color: red;
-   background-color: yellow;
-}
- -

Resultado

- -

- -

Especificaciones

- -

No es parte de ninguna especificación aunque  Microsoft tiene una descripción en MSDN.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -

Ver además

- - diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_-webkit-autofill/index.html deleted file mode 100644 index 98c1c68215..0000000000 --- a/files/es/web/css/_colon_-webkit-autofill/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: ':-webkit-autofill' -slug: 'Web/CSS/:-webkit-autofill' -tags: - - CSS - - NeedsExample - - No estándar(2) - - Pseudo-clase - - Referencia -translation_of: 'Web/CSS/:-webkit-autofill' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

La  pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.

- -

Nota: La hoja de estilos por defecto de muchos navegadores usan !important en sus declaraciones de estilo  :-webkit-autofill , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver además

- - diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_any/index.html deleted file mode 100644 index 7fe55d57c4..0000000000 --- a/files/es/web/css/_colon_any/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: ':any' -slug: 'Web/CSS/:any' -tags: - - CSS - - Experimental - - Pseudo-Clase CSS - - Referencia -translation_of: 'Web/CSS/:is' -translation_of_original: 'Web/CSS/:any' ---- -
{{CSSRef}}{{SeeCompatTable}}
- -

Resumen

- -

La pseudo-clase :any() permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.

- -
Nota: Esta pseudo-clase está en progreso de ser estandarizada en Selectores CSS Nivel 4 bajo el nombre :matches(). Es probable que la sintaxis y el nombre de :-vendor-any() sean cambiados para reflejar el estándar en el futuro próximo.
- -

Sintaxis

- -
{{csssyntax}}
- -

Valores

- -
-
selector
-
Un selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3, y puede incluir el combinador descendiente.
-
- -
Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
- -

Ejemplos

- -

Por ejemplo, el siguiente CSS:

- -
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
-ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
-ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
-ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
-ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
-ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
-ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
-menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
-dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
-dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
-dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
-  list-style-type: square;
-}
-
- -

Puede ser reemplazado con:

- -
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
-:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
-  list-style-type: square;
-}
- -

Sin embargo, no se debe usar lo siguiente: (Véase la sección de rendimiento abajo.)

- -
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
-  list-style-type: square;
-}
- -

Notas

- -

Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().

- -

Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:

- -
/* Nivel 0 */
-h1 {
-  font-size: 30px;
-}
-/* Nivel 1 */
-section h1, article h1, aside h1, nav h1 {
-  font-size: 25px;
-}
-/* Nivelo 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1, {
-  font-size: 20px;
-}
-/* Level 3 */
-/* ... ni siquiera lo pienses*/
-
- -

Usando :-any(), en cambio, es mucho más fácil:

- -
/* Nivel 0 */
-h1 {
-  font-size: 30px;
-}
-/* Nivel 1 */
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 25px;
-}
-/* Nivel 2 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 20px;
-}
-/* Nivel 3 */
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav)
-:-moz-any(section, article, aside, nav) h1 {
-  font-size: 15px;
-}
- -

Problemas con rendimiento y especificidad

- -

Bug 561154 sigue un problema con Gecko donde la especificidad de :-moz-any() es incorrecta. La implementación hasta Firefox 12 pone a :-moz-any() en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.

- -

Por ejemplo

- -
.a > :-moz-any(.b, .c)
-
- -

es más lento que:

- -
.a > .b, .a > .c
-
- -

y lo siguiente es rápido:

- -
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
-
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
- {{property_prefix("-webkit")}}
-
diff --git a/files/es/web/css/_colon_autofill/index.html b/files/es/web/css/_colon_autofill/index.html new file mode 100644 index 0000000000..98c1c68215 --- /dev/null +++ b/files/es/web/css/_colon_autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - No estándar(2) + - Pseudo-clase + - Referencia +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-webkit-autofill CSS selecciona un elemento {{HTMLElement("input")}} cuando su valor es rellenado automáticamente por el navegador.

+ +

Nota: La hoja de estilos por defecto de muchos navegadores usan !important en sus declaraciones de estilo  :-webkit-autofill , haciendo que no puedan ser sobrescritos por páginas que no usen trucos JavaScript.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_colon_is/index.html b/files/es/web/css/_colon_is/index.html new file mode 100644 index 0000000000..7fe55d57c4 --- /dev/null +++ b/files/es/web/css/_colon_is/index.html @@ -0,0 +1,187 @@ +--- +title: ':any' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-Clase CSS + - Referencia +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Resumen

+ +

La pseudo-clase :any() permite construir rápidamente conjuntos de selectores similares estableciendo grupos desde los que cualquier elemento incluido coincidirá. Es una alternativa a tener que repetir el selector completo por uno de los elementos que va a variar.

+ +
Nota: Esta pseudo-clase está en progreso de ser estandarizada en Selectores CSS Nivel 4 bajo el nombre :matches(). Es probable que la sintaxis y el nombre de :-vendor-any() sean cambiados para reflejar el estándar en el futuro próximo.
+ +

Sintaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
selector
+
Un selector. Puede ser un selector simple o un selector múltiple, comprendido de selectores simples de CSS 3, y puede incluir el combinador descendiente.
+
+ +
Nota: Los selectores pueden no contener pseudo-elementos , y el combinador único combinador permitido es el de descendientes.
+ +

Ejemplos

+ +

Por ejemplo, el siguiente CSS:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
+ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
+ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
+ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
+ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
+ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
+menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
+dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
+dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
+dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
+  list-style-type: square;
+}
+
+ +

Puede ser reemplazado con:

+ +
/* Listas desordenadas a tres (o más) niveles de profundidad que usarán viñeta de cuadrado */
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
+:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
+  list-style-type: square;
+}
+ +

Sin embargo, no se debe usar lo siguiente: (Véase la sección de rendimiento abajo.)

+ +
:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
+  list-style-type: square;
+}
+ +

Notas

+ +

Esto es particularmente útil al tratar con secciones y encabezados de HTML5. Puesto que {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, y {{HTMLElement("nav")}} pueden ser anidados, puede ser complicado aplicar estilos sin usar :any().

+ +

Por ejemplo, sin :any(), estilizar todos los {{HTMLElement("h1")}} a diferentes niveles de profundidad podría ser muy complicado:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+section h1, article h1, aside h1, nav h1 {
+  font-size: 25px;
+}
+/* Nivelo 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1, {
+  font-size: 20px;
+}
+/* Level 3 */
+/* ... ni siquiera lo pienses*/
+
+ +

Usando :-any(), en cambio, es mucho más fácil:

+ +
/* Nivel 0 */
+h1 {
+  font-size: 30px;
+}
+/* Nivel 1 */
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 25px;
+}
+/* Nivel 2 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 20px;
+}
+/* Nivel 3 */
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav)
+:-moz-any(section, article, aside, nav) h1 {
+  font-size: 15px;
+}
+ +

Problemas con rendimiento y especificidad

+ +

Bug 561154 sigue un problema con Gecko donde la especificidad de :-moz-any() es incorrecta. La implementación hasta Firefox 12 pone a :-moz-any() en la categoría de reglas universales, por lo que usarlo como el selector más hacia la derecha será más lento que usando un ID, una clase o etiqueta como el selector a la derecha.

+ +

Por ejemplo

+ +
.a > :-moz-any(.b, .c)
+
+ +

es más lento que:

+ +
.a > .b, .a > .c
+
+ +

y lo siguiente es rápido:

+ +
:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c
+
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatGeckoDesktop("2")}}{{property_prefix("-moz")}}12.0 (534.30){{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}5
+ {{property_prefix("-webkit")}}
+
diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not()/index.html deleted file mode 100644 index 5182d83d77..0000000000 --- a/files/es/web/css/_colon_not()/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: ':not()' -slug: 'Web/CSS/:not()' -tags: - - CSS - - Diseño - - Referencia - - Web - - pseudoclase -translation_of: 'Web/CSS/:not' ---- -
{{CSSRef}}
- -

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

- -
/* Selecciona cualquier elemento que NO sea un párrafo */
-:not(p) {
-  color: blue;
-}
- -
-

Notas:

- - -
- -

Sintaxis

- -

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

- -
-

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

-
- -
{{csssyntax}}
- -

Ejemplo

- -

HTML

- -
<p>Soy un párrafo.</p>
-<p class="fancy">¡Soy muy elegante!</p>
-<div>NO soy un párrafo.</div>
-
- -

CSS

- -
.fancy {
-  text-shadow: 2px 2px 3px gold;
-}
-
-/* elementos <p> que no están en la clase `.fancy` */
-p:not(.fancy) {
-  color: green;
-}
-
-/* Elementos que no son elementos <p> */
-body :not(p) {
-  text-decoration: underline;
-}
-
-/* Elementos que no son elementos <div> o <span> */
-body :not(div):not(span) {
-  font-weight: bold;
-}
-
-/* Elementos que no son `.crazy` o `.fancy` */
-/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
-body :not(.crazy, .fancy) {
-  font-family: sans-serif;
-}
- -

Resultado

- -

{{EmbedLiveSample('Ejemplo')}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
- -

Compatibilidad con navegadores

- -
- - -

{{Compat("css.selectors.not")}}

-
diff --git a/files/es/web/css/_colon_not/index.html b/files/es/web/css/_colon_not/index.html new file mode 100644 index 0000000000..5182d83d77 --- /dev/null +++ b/files/es/web/css/_colon_not/index.html @@ -0,0 +1,112 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not()' +tags: + - CSS + - Diseño + - Referencia + - Web + - pseudoclase +translation_of: 'Web/CSS/:not' +--- +
{{CSSRef}}
+ +

La pseudoclase :not() de CSS representa elementos que no coinciden con una lista de selectores. Como evita que se seleccionen elementos específicos, se lo conoce como la pseudoclase de negación.

+ +
/* Selecciona cualquier elemento que NO sea un párrafo */
+:not(p) {
+  color: blue;
+}
+ +
+

Notas:

+ + +
+ +

Sintaxis

+ +

La pseudoclase :not() requiere una lista separada por comas de uno o más selectores como argumento. La lista no debe contener otro selector de negación o un pseudoelemento.

+ +
+

La capacidad de enumerar más de un selector es experimental y aún no es ampliamente compatible.

+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<p>Soy un párrafo.</p>
+<p class="fancy">¡Soy muy elegante!</p>
+<div>NO soy un párrafo.</div>
+
+ +

CSS

+ +
.fancy {
+  text-shadow: 2px 2px 3px gold;
+}
+
+/* elementos <p> que no están en la clase `.fancy` */
+p:not(.fancy) {
+  color: green;
+}
+
+/* Elementos que no son elementos <p> */
+body :not(p) {
+  text-decoration: underline;
+}
+
+/* Elementos que no son elementos <div> o <span> */
+body :not(div):not(span) {
+  font-weight: bold;
+}
+
+/* Elementos que no son `.crazy` o `.fancy` */
+/* Tenga en cuenta que esta sintaxis aún no está bien soportada. */
+body :not(.crazy, .fancy) {
+  font-family: sans-serif;
+}
+ +

Resultado

+ +

{{EmbedLiveSample('Ejemplo')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Extiende su argumento para permitir algunos selectores no simples.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ +
+ + +

{{Compat("css.selectors.not")}}

+
diff --git a/files/es/web/css/_colon_user-invalid/index.html b/files/es/web/css/_colon_user-invalid/index.html new file mode 100644 index 0000000000..6f12ca97a6 --- /dev/null +++ b/files/es/web/css/_colon_user-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - NeedsExample + - NeedsMobileBrowserCompatibility + - No estándar(2) + - Pseudo clase + - Referencia CSS +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La  pseudo-clase CSS :-moz-ui-invalid representa cualquier elemento de los formularios que, en determinadas circunstancias, tiene  restricciones de validación y no es válido. Esta pseudo-clase se aplica siguiendo la siguiente reglas::

+ + + +

El resultado es que si el control era válido cuando el usuario empezó a interactuar con él sólo se cambia el estilo de validación cuando el usuario cambia el foco hacia otro elemento. Sin embargo, si el usuario está corrigiendo un valor señalado anteriormente como no válido, el control muestra inmediatamente cuando el valor pasa a ser válido. A los elementos del formulario obligatorios se les aplica la pseudo-clase sólo si el usuario los cambia o si intenta enviar los datos del formulario (hacer "submit").

+ +

Por defecto Gecko aplica un estilo que crear un brillo rojo "glow" (usando la propiedad{{Cssxref("box-shadow")}} ) alrededor de los elemento a los que se les aplica esta pseudo-clase. Ver la pseudo-clase {{Cssxref(":invalid")}} para poder observar un ejemplo que muestra como evitar este estilo por defecto.

+ +

Especificaciones

+ +

No es parte de ninguna especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ + diff --git a/files/es/web/css/_doublecolon_-moz-placeholder/index.html b/files/es/web/css/_doublecolon_-moz-placeholder/index.html deleted file mode 100644 index 3c8fbb8c3a..0000000000 --- a/files/es/web/css/_doublecolon_-moz-placeholder/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' -tags: - - CSS - - No estándar(2) - - Pseudo-elemento CSS - - Referencia CSS -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-placeholder' ---- -
{{Non-standard_header}}{{CSSRef}}
- -
Nota: El pseudo-elemento ::-moz-placeholder fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.
- -

Resumen

- -

El  pseudo-elemento ::-moz-placeholder sirve para seleccionar cualquier elemento de un formulario que esté mostrando un  marcador de posición de texto (placeholder text) . Permite a los desarrolladores web y a los diseñadores de tema personalizar la apariencia de estos elementos, cuyo estilo por defecto es de color gris claro. Puede que no funcione correctamente si se cambia el color de fondo de los campos de los formularios para que sean, por ejemplo, de un color similar, así que en ese caso se puede usar este pseudo-elemento para cambiar el color del marcador de posición de texto (placeholder text).

- -

Ejemplo

- -

En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).

- -

Contenido HTML

- -
<input id="test" placeholder="Placeholder text!">
-
- -

Contenido CSS

- -
input::-moz-placeholder {
-  color: green;
-}
-
- -

Obtendremos el siguiente resultado:

- -

{{EmbedLiveSample("Example")}}

- -

Especificaciones

- -

No es parte de ninguna especificación.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] Firefox aplica un estilo por defecto de  {{cssxref("opacity")}}: 0.54 al marcador de posición del texto (placeholder). Ver {{Bug("556145")}}. La mayoría de los demás navegadores importante no comparten este estilo ni para el pseudo-elemento ni para la pseudo-clase.

- -

La implementación previa en el motor Gecko era como la pseudo-clase  {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.

- -

Ver además

- - diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html deleted file mode 100644 index 5d14e35e58..0000000000 --- a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: '::-webkit-file-upload-button' -slug: 'Web/CSS/::-webkit-file-upload-button' -tags: - - CSS - - No estándar(2) - - Pseudo-elemento - - Referencia -translation_of: 'Web/CSS/::file-selector-button' ---- -
{{CSSRef}}{{Non-standard_header}}
- -

Resumen

- -

El pseudo-elemento  CSS ::-webkit-file-upload-button  representa el botón de los elementos {{HTMLElement("input") }} con  type="file".

- -

No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo -webkit ).

- -

Síntaxis

- -
selector::-webkit-file-upload-button
-
- -

Ejemplo

- -

Contenido HTML

- -
<form>
-    <label for="fileUpload">Upload file</label><br>
-    <input type="file" id="fileUpload">
-</form>
- -

Contenido CSS

- -
input, label {
-    display: block;
-}
-
-input[type=file]::-webkit-file-upload-button {
-    border: 1px solid grey;
-    background: #FFFAAA;
-}
- -

Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. 

- -

{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}

- -

Especificaciones

- -

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html b/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html deleted file mode 100644 index 181f0a966c..0000000000 --- a/files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: '::-webkit-input-placeholder' -slug: 'Web/CSS/::-webkit-input-placeholder' -tags: - - CSS - - NeedsExample - - No estándar(2) - - Pseudo-elemento - - Pseudo-elemento CSS - - Referencia - - Referencia CSS -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-webkit-input-placeholder' ---- -
{{Non-standard_header}}{{CSSRef}}
- -

Resumen

- -

El  pseudo-elemento no estándar y propietario ::-webkit-input-placeholder representa el marcador de posición de texto (placeholder text) de un elemento formulario. Permite que desarrolladores y diseñadores de temas puedan personalizar este marcador de posición de texto (placeholder). Sólo está soportado por WebKit/Blink.

- -

Especificaciones

- -

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

Ver además

- - diff --git a/files/es/web/css/_doublecolon_file-selector-button/index.html b/files/es/web/css/_doublecolon_file-selector-button/index.html new file mode 100644 index 0000000000..5d14e35e58 --- /dev/null +++ b/files/es/web/css/_doublecolon_file-selector-button/index.html @@ -0,0 +1,100 @@ +--- +title: '::-webkit-file-upload-button' +slug: 'Web/CSS/::-webkit-file-upload-button' +tags: + - CSS + - No estándar(2) + - Pseudo-elemento + - Referencia +translation_of: 'Web/CSS/::file-selector-button' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

El pseudo-elemento  CSS ::-webkit-file-upload-button  representa el botón de los elementos {{HTMLElement("input") }} con  type="file".

+ +

No es estándar y es sólo soportado por los navegadores compatibles con WebKit/Blink como Chrome, Opera and Safari (esto queda indicado por el prefijo -webkit ).

+ +

Síntaxis

+ +
selector::-webkit-file-upload-button
+
+ +

Ejemplo

+ +

Contenido HTML

+ +
<form>
+    <label for="fileUpload">Upload file</label><br>
+    <input type="file" id="fileUpload">
+</form>
+ +

Contenido CSS

+ +
input, label {
+    display: block;
+}
+
+input[type=file]::-webkit-file-upload-button {
+    border: 1px solid grey;
+    background: #FFFAAA;
+}
+ +

Más abajo tienes un ejemplo para probar. El pantallazo a la izquierda muestra como quedaría el botón en caso de que no puedas acceder a Chrome, Opera o Safari. 

+ +

{{ EmbedLiveSample('Example', '', '', 'https://mdn.mozillademos.org/files/13400/webkit_file_upload_button_screen.png', 'Web/CSS/::-webkit-file-upload-button') }}

+ +

Especificaciones

+ +

No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/adjacent_sibling_combinator/index.html b/files/es/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..1200c4bd61 --- /dev/null +++ b/files/es/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,135 @@ +--- +title: Selectores de hermanos adyacentes +slug: Web/CSS/Selectores_hermanos_adyacentes +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

+ +

Sintaxis

+ +
elemento_anterior + elemento_afectado { estilos }
+
+ +

Ejemplo

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>Uno</li>
+  <li>Dos</li>
+  <li>Tres</li>
+</ul>
+
+ +

{{EmbedLiveSample('Example_1', 200, 100)}}

+ +

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

que coincidiría con los siguientes elementos {{HTMLElement("span")}} :

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstadoComentarios
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

+ +

Ver también

+ + diff --git a/files/es/web/css/attribute_selectors/index.html b/files/es/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..a7b59d03c6 --- /dev/null +++ b/files/es/web/css/attribute_selectors/index.html @@ -0,0 +1,241 @@ +--- +title: Selectores de atributo +slug: Web/CSS/Selectores_atributo +tags: + - Atributos + - CSS + - Selectores + - Selectores de Atributo +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

+ +
/* Elementos <a> con un atributo title */
+a[title] {
+  color: purple;
+}
+
+/* Elementos <a> con un href que coincida con "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* Elementos <a> con un href que contenga "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* Elementos <a> con un href que comience con "#" */
+a[href^="#"] {
+  color: #001978;
+}
+
+/* Elementos <a> con un href que termine en ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+
+ +
+
[attr]
+
Selecciona los elementos que tienen el atributo attr.
+
[attr=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
+
[attr~=value]
+
+

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

+
+
[attr|=value]
+
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
+
[attr^=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
+
[attr$=value]
+
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
+
[attr*=value]
+
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
+
[attr operator value i]
+
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
[attr operator value s] {{Experimental_Inline}}
+
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
+
+ +

Ejemplos

+ +

Enlaces

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Enlaces internos, comenzando con "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Enlaces con "example" en cualquier parte de la URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Enlaces con "insensitive" en cualquier parte de la URL,
+   independientemente de las mayúsculas */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Enlaces que terminan en ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Enlace interno</a></li>
+  <li><a href="http://example.com">Enlace de ejemplo</a></li>
+  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
+  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
+</ul>
+ +

Resultado

+ +

{{EmbedLiveSample('Enlaces')}}

+ +

Idiomas

+ +

CSS

+ +
/* Todos los divs con un atributo `lang` están en negrita. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* Todos los divs en inglés de EE. UU. son azules. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* Todos los divs en portugués son verdes. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* Todos los divs en chino son rojos, ya sean
+   simplificados (zh-CN) o tradicionales (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* Todos los divs con `data-lang` Traditional Chinese
+   son de color púrpura. */
+/* Nota: también puede usar atributos con guiones
+   sin comillas dobles */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Resultado

+ +

{{EmbedLiveSample('Idiomas')}}

+ +

Listas Ordenadas

+ +

{{SeeCompatTable}}

+ +

La especificación HTML requiere que el atributo {{htmlattrxref("type", "input")}} distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento {{HTMLElement("input")}}, tratando de usar selectores de atributos con el atributo {{htmlattrxref("type", "ol")}} de una {{HTMLElement("ol", "lista ordenada")}} no funciona sin el modificador de mayúsculas y minúsculas.

+ +

CSS

+ +
/*
+Los tipos de lista requieren poder distinguir entre mayúsculas
+y minúsculas debido al peculiar comportamiento que tiene HTML
+con el atributo "type"
+*/
+
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

Result

+ +

{{EmbedLiveSample("HTML_ordered_lists")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definición Inicial.
+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

Ver también

+ + diff --git a/files/es/web/css/auto/index.html b/files/es/web/css/auto/index.html deleted file mode 100644 index c380b1b891..0000000000 --- a/files/es/web/css/auto/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: auto -slug: Web/CSS/auto -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/width -translation_of_original: Web/CSS/auto ---- -

-

<< Volver -

-

Resumen

-

Un valor computado automáticamente por el 'useragent.' -

Usando el valor auto en cualquier propiedad, dejamos al navegador que calcule el valor requerido.


-FIXME -

-

Ejemplos

-
div {
-   height: 600px;
-   border: 1px solid #000;
-}
-
-
div img {
-   height: auto;
-   border: 1px solid red;
-}
-
-

Se utiliza en

- -


-

-
-

Categorías -Interwiki Languages -

-
-{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/web/css/box-flex/index.html b/files/es/web/css/box-flex/index.html new file mode 100644 index 0000000000..c7491aea2d --- /dev/null +++ b/files/es/web/css/box-flex/index.html @@ -0,0 +1,155 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles  'box-flex' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex' (que se basa en esos borradores).")}}
+ +

Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.

+ +

Resumen

+ +

Las propiedades CSS-moz-box-flex y -webkit-box-flex especifican cómo una  -moz-box o -webkit-box crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores <number> */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Valores gloables */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Valores

+ +
+
0
+
La caja no crece.
+
> 0
+
La caja crece para rellenar un proporción del espacio disponible..
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ejemplo de -moz-box-flex</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Creceré para rellenar un espacio extra</p>
+      <p>No creceré</p>
+    </div>
+  </body>
+</html>
+
+ +

Notas

+ +

La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.

+ +

Los elementos dentro del contenedor que tienen 0 flex no crecen.

+ +

Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.

+ +

Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.

+ +

Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.

+ +

Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize de la caja contenedora a always. Este atributo no tiene correspondencia con ninguna propiedad CSS.

+ +

Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1).

+ +

Especificaciones

+ +

Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex , pero ese borrador nunca ha sido sustituido.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
característicaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/es/web/css/box-ordinal-group/index.html b/files/es/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..9f6af1c315 --- /dev/null +++ b/files/es/web/css/box-ordinal-group/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - 'CSS: Extensiones Mozilla' + - Caja Flexible + - No estandar + - Referencia CSS +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}

+ +

Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.

+ +

Resumen

+ +

Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.

+ +

Valores

+ +

Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.

+ +

Ejemplos

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/es/web/css/box-pack/index.html b/files/es/web/css/box-pack/index.html new file mode 100644 index 0000000000..118d60287a --- /dev/null +++ b/files/es/web/css/box-pack/index.html @@ -0,0 +1,184 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - Diseño + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
+ +

Ver Flexbox para más información.

+ +

Resumen

+ +

Las propiedades  CSS -moz-box-pack y -webkit-box-pack especifican cómo una -moz-box o un -webkit-box empaquetan o disponen  su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.

+ +

La dirección del esquema o diseño (layout)  depende de la orientación del elemento: vertical o horizontal.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Valores de palabras clave */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Valores gloables */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Valores

+ +
+
start
+
La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
+
center
+
La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
+
end
+
La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
+
justify
+
El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Hace esta caja más alta que los hijos para que haya hueco suficiente
+     para el empaquetado en la caja */
+  height: 300px;
+  /* Hace la caja lo suficientemente ancha para mostrar los contenidos
+     centrados horizontalmente */
+  width: 300px;
+
+  /* Los hijos deberían estar orientados verticalmente */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Alínea los hijos con el centro horizontal de la caja */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Dispone a los hijos en el fondo de la caja */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* hace los hijos más estrechos que el padra para que
+     haya espacio suficiente para el box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
+  <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
+</div>
+
+ +

{{EmbedLiveSample('Examples', 310, 310)}}

+ +

Notas

+ +

EL borde  de la caja que será tomado como start  para el empqeutado dependerá de la orientación y dirección de la caja:

+ + + + + + + + + + + + + + + + + + + +
 NormalReverse
Horizontalleftright
Verticaltopbottom
+ +

El borde opuesto a start será el considerado como end.

+ +

Si el empaquetado se establece usando el atributo pack del elemento el estilo es ignorado.

+ +

Especificaciones

+ +

Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox,  que a su vez ha sido sustituida para nuevas versiones de la especificación.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/es/web/css/column-gap/index.html b/files/es/web/css/column-gap/index.html new file mode 100644 index 0000000000..e7a607a5bc --- /dev/null +++ b/files/es/web/css/column-gap/index.html @@ -0,0 +1,158 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +translation_of: Web/CSS/column-gap +translation_of_original: Web/CSS/grid-column-gap +--- +

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

+ +
/* <length> values */
+grid-column-gap: 20px;
+grid-column-gap: 1em;
+grid-column-gap: 3vmin;
+grid-column-gap: 0.5cm;
+
+/* <percentage> value */
+grid-column-gap: 10%;
+
+/* Global values */
+grid-column-gap: inherit;
+grid-column-gap: initial;
+grid-column-gap: unset;
+
+ +

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Valores

+ +
+
<length-percentage>
+
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: 100px;
+  grid-column-gap: 20px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "100px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
+ +

Compatibilidad en navegadores

+ +

 

+ + + +

{{Compat("css.properties.grid-column-gap")}}

+ +

 

+ +

Ver también

+ + + + diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/columnas_css/index.html deleted file mode 100644 index 949f2eca71..0000000000 --- a/files/es/web/css/columnas_css/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Columnas CSS -slug: Web/CSS/Columnas_CSS -tags: - - CSS - - Referencia CSS - - Visión general -translation_of: Web/CSS/CSS_Columns ---- -
{{CSSRef}}
- -

Columnas CSS es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

- -

Referencia

- -

Propiedades CSS

- -
- -
- -

Guías

- -
-
Diseños multicolumna con CSS
-
Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Definición inicial
- -

Compatibilidad en navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.10
- 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
- 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
-
diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comentarios/index.html deleted file mode 100644 index f09cac662a..0000000000 --- a/files/es/web/css/comentarios/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Comentarios -slug: Web/CSS/Comentarios -tags: - - CSS - - Principiante - - Referencia CSS -translation_of: Web/CSS/Comments ---- -
{{CSSRef}}
- -

Resumen

- -

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

- -

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

- -

Sintaxis

- -
/* Comentario */
- -

Examples

- -
/* Comentario de una sola línea */
-
-/*
-Un comentario
-que se extiende
-en varias
-líneas
-*/
-
- -

Notas

- -

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

- -

Especificaciones

- - - -

Véase también

- - diff --git a/files/es/web/css/comenzando_(tutorial_css)/index.html b/files/es/web/css/comenzando_(tutorial_css)/index.html deleted file mode 100644 index 54997a5f6e..0000000000 --- a/files/es/web/css/comenzando_(tutorial_css)/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Comenzando (tutorial CSS) -slug: Web/CSS/Comenzando_(tutorial_CSS) ---- -

 

-

Introducción

-

Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).

-

Este tutorial te guiará a través de las características básicas de CSS con ejemplos prácticos que puedes probar tu mismo desde tu computadora. Está dividido en dos partes.

- - -

Este tutorial se base en la especificación CSS 2.1

-

¿Quienes deberían usar este tutorial?

-

Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.

-

Si eres un principiante en CSS, usa la Parte I de este tutorial para entender y aprender como usar CSS. Luego usa la Parte II para entender el alcance de CSS en Mozilla.

-

Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.

-

Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.

-

¿Qué necesitas antes de empezar?

-

Para obtener el mayor provecho de este tutorial, necesitas un editor para archivos de texto, especialmente para la Parte II, un navegador de Mozilla (Firefox, Camino o SeaMonkey). También debes saber como usarlos de forma básica.

-

Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.

-

Algunas partes de este tutorial requieren otros programas de Mozilla. Estas partes son opcionales. Si no quieres descargar otros programas de Mozilla, puedes saltarte estas partes.

- -

Nota:  CSS provee formas de trabajar con color, así que partes de este tutorial dependen del color. Puedes usar estas partes del tutorial fácilmente si tienes una pantalla a color y puedes visualizar normalmente los colores.

-

Como usar este tutorial

-

Para usar este tutorial, lee las páginas cuidadosamente y en secuencia. Si te pierdes alguna página, entonces puedes tener dificultades para entender las páginas siguientes.

-

En cada página, usa la sección Información para entender como funciona CSS. Usa la sección Acción para tratar de usar CSS en tu computadora.

-

Para probar tu entendimiento, toma los retos al final de cada página. Las soluciones a los retos están enlazados bajo los mismos retos, así que no necesitas mirar las respuestas si no quieres hacerlo.

-

Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas Más detalles. Usa los enlaces allí para encontrar información de referencia acerca de CSS.

-

Tutorial Parte I

-

Una guía de CSS paso a paso.

-
  1. Que es CSS
  2. Por qué usar CSS
  3. Como funciona CSS
  4. Cascada y herencia
  5. Selectores
  6. CSS legible
  7. Estilos de texto
  8. Color
  9. Contenido 
  10. Listas
  11. Cajas
  12. Estructura
  13. Tablas
  14. Media
    15. -
-

Tutorial Parte II

-

Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.

-
  1. JavaScript
  2. Gráficos SVG
  3. Data XML
  4. XBL bindings 
  5. Interfaces de usuario XUL
    6. -
-

{{ CSSTutorialTOC() }}

-

{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/es/web/css/comments/index.html b/files/es/web/css/comments/index.html new file mode 100644 index 0000000000..f09cac662a --- /dev/null +++ b/files/es/web/css/comments/index.html @@ -0,0 +1,49 @@ +--- +title: Comentarios +slug: Web/CSS/Comentarios +tags: + - CSS + - Principiante + - Referencia CSS +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

Resumen

+ +

Los comentarios son usados para añadir notas explicatorias o prevenir que el navegador interprete partes de la hoja de estilos.

+ +

Los comentarios se pueden colocar en cualquier espacio en blanco que se permita en la hoja de estilos.

+ +

Sintaxis

+ +
/* Comentario */
+ +

Examples

+ +
/* Comentario de una sola línea */
+
+/*
+Un comentario
+que se extiende
+en varias
+líneas
+*/
+
+ +

Notas

+ +

La sintaxis de comentarios /* */ es usada para comentarios de una o múltiples líneas. No hay otra forma de especificar comentarios en hojas de estilos externas. Sin embargo, cuando se usa el elemento <style>, se puede usar <!-- --> para ocultar CSS para navegadores antiguos, aunque no es recomendable. Como en la mayoría de los lenguajes de programación que usan la sintaxis de comentarios /* */ estos no pueden ser anidados. En otras palabras, la primera instancia de */ que siga a una instancia de /* cerrará el comentario.

+ +

Especificaciones

+ + + +

Véase también

+ + diff --git a/files/es/web/css/como_iniciar/index.html b/files/es/web/css/como_iniciar/index.html deleted file mode 100644 index facb250cb3..0000000000 --- a/files/es/web/css/como_iniciar/index.html +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Como iniciar -slug: Web/CSS/Como_iniciar ---- -This page was auto-generated because a user created a sub-page to this page. diff --git a/files/es/web/css/como_iniciar/por_que_usar_css/index.html b/files/es/web/css/como_iniciar/por_que_usar_css/index.html deleted file mode 100644 index 941f96a0e5..0000000000 --- a/files/es/web/css/como_iniciar/por_que_usar_css/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Por que usar CSS -slug: Web/CSS/Como_iniciar/Por_que_usar_CSS -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

 

-

Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.

-

Esta es la segunda sección del tutorial.

-

Sección anterior: Que es CSS
- Sección siguiente: How CSS works

-

Información: ¿Por qué usar CSS?

-

CSS ayuda a mantener la información de contenido de un documento separado de los detalles de como mostrarlo. Los detalles de como se muestra el documento son conocidos como estilos. Si mantienes los estilos separados del contenido puedes:

- - - - - - - - -
- Ejemplo
-

Tu sitio web podría mostrar miles de páginas que se ven similar. Usando CSS, almacenas la información de estilos en archivos comunes que todas las páginas comparten.Cuando un usuario visualiza una página web, el navegador carga la información de estilos junto con el contenido de la página.

-

Cuando un usuario imprime una página web, podrías proveerle diferente información de estilos que hace que las páginas impresas sean fáciles de leer.

-
-

En general con HTML, usas el lenguaje de marcado para describir la información del contenido del documento, no sus estilos. Usas CSS para especificar sus estilos, no su contenido. (Más adelante en este tutorial, verás algunas excepciones a este acuerdo).

- - - - - - - -
- Más detalles
-

Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.

-

Por ejemplo en HTML puedes usar una etiqueta <b> para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <body>.

-

Cuando usas CSS, normalmente evitas usar estas características del lenguaje de marcado así toda la información de estilos de tu documento está en un solo lugar.

-
-

Acción: Creando una hoja de estilos

-
    -
  1. Crea un archivo de texto en el mismo directorio anterior.  Este archivo será tu hoja de estilos. Nombrala como: style1.css
    2. -
  2. En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:
    3. -
  3. -
    - 
    strong {color: red;}
-
    -
    -
    4. -
-

Enlazando tu documento a tu hoja de estillos

-
    -
  1. Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:
    2. -
  2. -
    - 
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <head>
-  <meta http-equiv="Content-Type" content="text/html;
-charset=iso-8859-1">
-  <title>Sample document</title>
-  <link rel="stylesheet" type="text/css" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    -
    3. -
  3. Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: - - - - - - -
    Cascading Style Sheets
    -
    4. -
- - - - - - - -
- Reto
En adición al rojo, CSS permite algunos otros nombres de colores. -

Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.

-
-

See a solution for the challenge. Ver la solución al reto.

-

¿Qué sigue?

-

Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de Discusión.

-

Ahora que tienes un archivo de ejemplo enlazado a una hoja de estilos separada, estás listo para aprender más acerca de como tu navegador combina ellos cuando muestra el documento: Como funciona CSS.

-

{{ CSSTutorialTOC() }}

-

{{ languages( { "fr": "fr/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "it": "it/Conoscere_i_CSS/Perch\u00e9_usare_i_CSS", "ja": "ja/CSS/Getting_Started/Why_use_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Po_co_u\u017cywa\u0107_CSS", "pt": "pt/CSS/Como_come\u00e7ar/Porque_usar_CSS", "es": "es/CSS/Como_iniciar/Por_que_usar_CSS", "zh-cn": "cn/CSS/Getting_Started/Why_use_CSS" } ) }}

diff --git a/files/es/web/css/como_iniciar/que_es_css/index.html b/files/es/web/css/como_iniciar/que_es_css/index.html deleted file mode 100644 index 18852f2439..0000000000 --- a/files/es/web/css/como_iniciar/que_es_css/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Que es CSS -slug: Web/CSS/Como_iniciar/Que_es_CSS -tags: - - para_revisar -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS ---- -

En esta página se explica que es CSS. Usted creará un documento simple con el cual trabajará en las próximas páginas del tutorial.

- -

Esta es la primera sección del tutorial Como iniciar.
- Siguiente sección: Por qué usar CSS

- -

Información: ¿Qué es CSS?

- -

Cascading Style Sheets (CSS), traducido literalmente al español, como Hojas de estilo en cascada, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.

- -

Un documento (document) es una colección de información que está estructurada utilizando un lenguaje de formato (markup language).

- - - - - - - - -
Ejemplos
-
    -
  • Una página web como la que estás leyendo, es un documento.
    - La información que ves en una página web usualmente está estructurada utilizando el lenguaje de formato de documentos de HiperTexto, HTML (HyperText Markup Language).
    • -
- -
    -
  • Un cuadro de diálogo en una aplicación Mozilla es un documento.
    - Los controles de interfaz de usuario que pude ver en los diálogos de control de aplicaciones Mozilla, están estructurados utilizando el lenguaje de formato XUL (XML User-interface Language - Lenguaje XML de interfaces de usuario).
    • -
-
- -

En este tutorial, los cuadros con titulo Más detalles, como el que está a continuación, contienen información adicional. Si se cuenta con poco tiempo para progresar con el tutorial, entonces pude omitir estos cuadros, quizás retorne a leerlos luego. De lo contrario léalos cuando llegue a ellos y tal vez siga los enlaces que contienen para aprender más.

- - - - - - - - -
Más detalles
-

Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.

- -

Por ejemplo, el documento esta leyendo en este momento no está almacenado en un archivo. Cuando su navegador web solicita esta página, el servidor consulta a la base de datos y genera el documento, obteniendo las partes del mismo de diferentes archivos. Sin embargo, en este tutorial se trabajará con documentos que se almacenan en archivos.

- -

Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:

- - - - - - - - - - - - - - - - - - - - -
HTMLpara páginas web
XMLpara documentos estrucurados, en general
SVGpara gráficas
XULpara interfaces de usuario de Mozilla
- -

En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.

-
- -

Presentar un documento a un usuario significa convertirlo en una forma en que el humano pueda hacer uso de el. Mozilla está diseñado para presentar documentos de manera visual—por ejemplo, en la pantalla de una computadora, en un proyector o en una impresora.

- - - - - - - - -
Más detalles
CSS no es sólo para los navegadores web, y no sólo para la presentación visual. En terminos formales CSS, el programa que presenta un documento a un usuario es llamado un agente de usuarios (UA - User Agent). Un navegador es sólo un tipo de UA. Sin embargo, en la parte I de este tutorial, se trabajará únicamente con CSS en un navegador. -

Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace Definiciones (en ingles) en la especificación CSS.

-
- -

Acción: Crear un documento

- -
    -
  1. Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. -
      -
    1. Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre doc1.html - -
      - 
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-<html>
-  <head>
-  <meta http-equiv="Content-Type" content="text/html;
-  charset=iso-8859-1">
-  <title>Sample document</title>
-  </head>
-
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-      <strong>B</strong>heets
-    </p>
-  </body>
-</html>
-
      -
      -
      2. -
    -
    2. -
  2. En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. -

    Debe observar un texto con las letras iniciales en negrita, así:

    - - - - - - - -
    Cascading Style Sheets
    - -

    Lo que ve en el navegador puede no lucir exactamente como en la imagen, debido a la configuración de su navegador web y esta wiki. Si existen algunas diferencias en el tipo de fuente, espaciado y los colores que ve, no son importantes.

    -
    3. -
- -

¿Qué sigue?

- -

Si ha tenido dificultad para entender esta página, o si tiene comentarios acerca de ella, por favor contribuya con esta en la página de Discusiones.

- -

El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: ¿Por qué utilizar CSS?

- -

{{ CSSTutorialTOC() }}

- -

{{ languages( { "fr": "fr/CSS/Premiers_pas/Pr\u00e9sentation_des_CSS", "it": "it/Conoscere_i_CSS/Che_cosa_sono_i_CSS", "ja": "ja/CSS/Getting_Started/What_is_CSS", "pl": "pl/CSS/Na_pocz\u0105tek/Czym_jest_CSS", "pt": "pt/CSS/Como_come\u00e7ar/O_que_\u00e9_CSS", "zh-cn": "cn/CSS/Getting_Started/What_is_CSS", "es": "es/CSS/Como_iniciar/Que_es_CSS" } ) }}

diff --git a/files/es/web/css/computed_value/index.html b/files/es/web/css/computed_value/index.html new file mode 100644 index 0000000000..9112bf97b5 --- /dev/null +++ b/files/es/web/css/computed_value/index.html @@ -0,0 +1,30 @@ +--- +title: Valor calculado +slug: Web/CSS/Valor_calculado +tags: + - Referencia_CSS +translation_of: Web/CSS/computed_value +--- +


+ {{ CSSRef() }}

+

Sumario

+

El valor computed value de una propiedad CSS es computado a partir de specified value de la siguiente forma:

+ +

El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.

+

Por ejemplo: si un elemento tiene un valor especificado de font-size: 16px y padding-top: 2em, el valor computado de padding-top es 32px (el doble del tamaño de la fuente).

+

Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como width, margin-right, text-indent, y top) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad line-height se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el used value.

+

El uso principal de computed value (ademas de ser un paso de transición entre specified value y used value) es inheritance, incluyendo la palabra clave inherit.

+

Notas

+

La API DOM getComputedStyle devuelve used value, en lugar de computed value.

+

Ver también

+

specified value, used value, actual value

+

 

+

 

+

 

+

 

+
+  
+

{{ languages( { "en": "en/CSS/computed_value", "fr": "fr/CSS/Valeur_calcul\u00e9e", "ja": "ja/CSS/computed_value", "pl": "pl/CSS/warto\u015b\u0107_wyliczona" } ) }}

diff --git "a/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" "b/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" deleted file mode 100644 index 11bb0c0076..0000000000 --- "a/files/es/web/css/css_animations/detectar_soporte_de_animaci\303\263n_css/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Detectar soporte de animación CSS -slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS -translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support ---- -

{{CSSRef}}

- -

Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en la publicación de Chris Heilmann, demuestra una técnica de como hacer esto.

- -

Prueba de la compatibilidad de animaciones CSS

- -

Este código comprueba si el soporte de animaciones CSS esta disponible:

- -
var animation = false,
-    animationstring = 'animation',
-    keyframeprefix = '',
-    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
-    pfx  = '',
-    elm = document.createElement('div');
-
-if( elm.style.animationName !== undefined ) { animation = true; }
-
-if( animation === false ) {
-  for( var i = 0; i < domPrefixes.length; i++ ) {
-    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
-      pfx = domPrefixes[ i ];
-      animationstring = pfx + 'Animation';
-      keyframeprefix = '-' + pfx.toLowerCase() + '-';
-      animation = true;
-      break;
-    }
-  }
-}
-
- -

Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable animation a false. Establecemos la variable animationstring a animation la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable pfx a una cadena vacía.

- -

Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable elm. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.

- -

Si el navegador no soporta animaciones sin prefijos, y animation sigue siendo false, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a AnimationName en su lugar.

- -

Una vez que el código ha terminado de ejecutarse, el valor de animation será false si el soporte de animacion CSS no esta disponible, de otro modo será true. Si es true tanto el nombre de las propiedad de animation y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será MozAnimation y el prefijo keyframe será -moz-, mientras en Chrome será WebkitAnimation y -webkit-. Tenga en cuenta que los navegadores no facilitan el cambio entre camelCase (Capitalizacion medial) y la hyphen-ation (separación).

- -

Animaciones utilizando la sintaxis correcta para diferentes navegadores

- -

Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.

- -
if( animation === false ) {
-
-  // animate in JavaScript fallback
-
-} else {
-  elm.style[ animationstring ] = 'rotate 1s linear infinite';
-
-  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
-                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
-                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
-                  '}';
-
-  if( document.styleSheets && document.styleSheets.length ) {
-
-      document.styleSheets[0].insertRule( keyframes, 0 );
-
-  } else {
-
-    var s = document.createElement( 'style' );
-    s.innerHTML = keyframes;
-    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
-
-  }
-
-}
-
- -

Este código examina el valor de animation; si es false, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.

- -

Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir keyframes es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).

- -

Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable keyframes, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.

- -

La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.

- -

Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.

- -

Ver en el JSFiddle

- -

Ver tambien

- - diff --git a/files/es/web/css/css_animations/detecting_css_animation_support/index.html b/files/es/web/css/css_animations/detecting_css_animation_support/index.html new file mode 100644 index 0000000000..11bb0c0076 --- /dev/null +++ b/files/es/web/css/css_animations/detecting_css_animation_support/index.html @@ -0,0 +1,91 @@ +--- +title: Detectar soporte de animación CSS +slug: Web/CSS/CSS_Animations/Detectar_soporte_de_animación_CSS +translation_of: Web/CSS/CSS_Animations/Detecting_CSS_animation_support +--- +

{{CSSRef}}

+ +

Las animaciones de CSS permiten realizar animaciones creativas de contenido usando nada más que CSS. Sin embargo, es posible que hayan momentos en que estas funciones no sean compatibles, y puede que desees manejar ese problema usando código JavaScript. Este artículo, basado en la publicación de Chris Heilmann, demuestra una técnica de como hacer esto.

+ +

Prueba de la compatibilidad de animaciones CSS

+ +

Este código comprueba si el soporte de animaciones CSS esta disponible:

+ +
var animation = false,
+    animationstring = 'animation',
+    keyframeprefix = '',
+    domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
+    pfx  = '',
+    elm = document.createElement('div');
+
+if( elm.style.animationName !== undefined ) { animation = true; }
+
+if( animation === false ) {
+  for( var i = 0; i < domPrefixes.length; i++ ) {
+    if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
+      pfx = domPrefixes[ i ];
+      animationstring = pfx + 'Animation';
+      keyframeprefix = '-' + pfx.toLowerCase() + '-';
+      animation = true;
+      break;
+    }
+  }
+}
+
+ +

Para empezar, hemos definido algunas variables. Asumimos que las animaciones no son compatibles al establecer la variable animation a false. Establecemos la variable animationstring a animation la cual es la propiedad que queremos establecer mas tarde. Creamos un arreglo (array) sobre los prefijos de navegadores para realizar un bucle, y establecemos la variable pfx a una cadena vacía.

+ +

Luego verificamos si la propiedad de CSS {{ cssxref("animation-name") }} esta establecida en la colección de estilo para el elemento especificado por la variable elm. Esto quiere decir que el navegador soporta animaciones CSS sin ningun prefijo, lo cual, hasta la fecha, ninguno de ellos lo hace.

+ +

Si el navegador no soporta animaciones sin prefijos, y animation sigue siendo false, iteramos todos los posibles prefijos,  ya que todos los principales navegadores estan anteponiendo esta propiedad y cambiando su nombre a AnimationName en su lugar.

+ +

Una vez que el código ha terminado de ejecutarse, el valor de animation será false si el soporte de animacion CSS no esta disponible, de otro modo será true. Si es true tanto el nombre de las propiedad de animation y el el prefijo keyframe serán los correctos. Así que si utilizas un nuevo Firefox, la propiedad será MozAnimation y el prefijo keyframe será -moz-, mientras en Chrome será WebkitAnimation y -webkit-. Tenga en cuenta que los navegadores no facilitan el cambio entre camelCase (Capitalizacion medial) y la hyphen-ation (separación).

+ +

Animaciones utilizando la sintaxis correcta para diferentes navegadores

+ +

Ahora que sabes si las animaciones CSS son compatibles o no, podemos animar.

+ +
if( animation === false ) {
+
+  // animate in JavaScript fallback
+
+} else {
+  elm.style[ animationstring ] = 'rotate 1s linear infinite';
+
+  var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+
+                    'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+
+                    'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+
+                  '}';
+
+  if( document.styleSheets && document.styleSheets.length ) {
+
+      document.styleSheets[0].insertRule( keyframes, 0 );
+
+  } else {
+
+    var s = document.createElement( 'style' );
+    s.innerHTML = keyframes;
+    document.getElementsByTagName( 'head' )[ 0 ].appendChild( s );
+
+  }
+
+}
+
+ +

Este código examina el valor de animation; si es false, sabemos que tendremos que recurrir a la alternativa de JavaScript para realizar nuestra animacion. De otra manera, podemos usar JavaScript para crear los efectos de animación CSS deseados.

+ +

Establecer las propiedades de animación es fácil; simplemente actualiza su valor en la colección de estilos. Aunque, añadir keyframes es más complicado, ya que no están definidas usando la sintaxis tradicional de CSS (lo que los hace mas flexible, pero mas difícil desde script).

+ +

Para definir nuestros keyframes usando JavaScript, necesitamos transcribirlos como una cadena CSS. Todo lo que hacemos es crear una variable keyframes, anteponiendo cada atributo tal como se construye. Esta variable, una vez construida, contiene la descripción completa de todos los keyframes necesarios por nuestra secuencia de animación.

+ +

La siguiente tarea es realmente añadir los keyframes al CSS de la página. Lo primeron que hay que hacer es mirar a ver si existe una hoja de estilo en el documento; si es así, sensillamente insertamos el keyframe descrito dentro de la hoja de estilos; esto se hace en las lineas 13-15.

+ +

Si aún no existe una hoja de estilos, se crea un nuevo elemento {{ HTMLElement("style") }} , y su contenido se incorpora al valor de los keyframes. Luego se sinerta el valor {{ HTMLElement("style") }} dentro del{{ HTMLElement("head") }} del documento, añadiendo así la nueva hoja de estilo del document.

+ +

Ver en el JSFiddle

+ +

Ver tambien

+ + diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/usando_animaciones_css/index.html deleted file mode 100644 index b9b08bbc0b..0000000000 --- a/files/es/web/css/css_animations/usando_animaciones_css/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Usando animaciones CSS -slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS -tags: - - Advanced - - CSS - - CSS Animations - - Example - - Experimental - - Guide -translation_of: Web/CSS/CSS_Animations/Using_CSS_animations ---- -

{{SeeCompatTable}}{{CSSRef}}

- -

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

- -

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

- -
    -
  1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
    2. -
  2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
    3. -
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
    4. -
- -

Configurando la animación

- -

Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .

- -

Las subpropiedades de {{ cssxref("animation") }} son:

- -
-
{{ cssxref("animation-delay") }}
-
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
-
{{ cssxref("animation-direction") }}
-
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
-
{{ cssxref("animation-duration") }}
-
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
-
{{ cssxref("animation-iteration-count") }}
-
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
-
{{ cssxref("animation-name") }}
-
Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.
-
{{ cssxref("animation-play-state") }}
-
Permite pausar y reanudar la secuencia de la animación
-
{{ cssxref("animation-timing-function") }}
-
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
-
{{ cssxref("animation-fill-mode") }}
-
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
-
- -

Definiendo la secuencia de la animación con fotogramas

- -

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

- -

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to.

- -

Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

- -

Ejemplos

- -
Nota: Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo -webkit.
- -

Haciendo que un texto se delice por la ventana del navegador

- -

Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.

- -

Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}:hidden en el contenedor.

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-}
-
-@keyframes slidein {
-  from {
-    margin-left: 100%;
-    width: 300%
-  }
-
-  to {
-    margin-left: 0%;
-    width: 100%;
-  }
-}
-
- -

El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".

- -

Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.

- -

Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias from). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.

- -

El segundo (y último) fotograma sucede en el 100% (hemos usado su alias to). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.

- -
<p>The Caterpillar and Alice looked at each other for some time in silence:
-at last the Caterpillar took the hookah out of its mouth, and addressed
-her in a languid, sleepy voice.</p>
- -

(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)

- -

{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}

- -

Añadiendo otro fotograma

- -

Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:

- -
75% {
-  font-size: 300%;
-  margin-left: 25%;
-  width: 150%;
-}
-
- - - - - -

Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.

- -

(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)

- -

{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}

- -

Haciendo que se repita

- -

Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  infinite para que la animación se repita indefinidamente:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-}
-
- - - - - -

{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}

- -

Moviendolo hacia adelante y hacia atrás

- -

Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es alternate:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
-
- - - - - -

{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}

- -

Usando la versión abreviada animation

- -

La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:

- -
p {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-}
- -

Se puede reemplazar por

- -
p {
-  animation: 3s infinite alternate slidein;
-}
- -
-

Nota: Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} 

-
- -

Estableciendo multiples valores de propiedades animation

- -

Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:

- -

En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 3s;
-animation-iteration-count: 1;
-
- -

En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo fadeInOut tiene una duración de 2.5s y 2 iteraciones, etc.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s, 1s;
-animation-iteration-count: 2, 1, 5;
- -

En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto bounce  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.

- -
animation-name: fadeInOut, moveLeft300px, bounce;
-animation-duration: 2.5s, 5s;
-animation-iteration-count: 2, 1;
- -

Usando eventos de animación

- -

Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.

- -

Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.

- -

Agregando CSS

- -

Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama slidein, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, width y margin-left son manipulados para hacer que el elemento se deslice por la pantalla.

- -
.slidein {
-  animation-duration: 3s;
-  animation-name: slidein;
-  animation-iteration-count: 3;
-  animation-direction: alternate;
-}
-
-@keyframes slidein {
-  from {
-    margin-left:100%;
-    width:300%
-  }
-
-  to {
-   margin-left:0%;
-   width:100%;
- }
-}
- -

Añadiendo detectores de eventos a la animación

- -

Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.

- -
var e = document.getElementById("watchme");
-e.addEventListener("animationstart", listener, false);
-e.addEventListener("animationend", listener, false);
-e.addEventListener("animationiteration", listener, false);
-
-e.className = "slidein";
- -

Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.

- -

La última línea pone la clase slidein al elemento para comenzar la animación. ¿Por qué?. Porque que el evento animationstart se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.

- -

Recibiendo los eventos

- -

Los eventos, al irse disparando, llamarán a la función listener().

- -
function listener(e) {
-  var l = document.createElement("li");
-  switch(e.type) {
-    case "animationstart":
-      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
-      break;
-    case "animationend":
-      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
-      break;
-    case "animationiteration":
-      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
-      break;
-  }
-  document.getElementById("output").appendChild(l);
-}
-
- -

Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.

- -

El resultado, si todo ha ido bien, será algo parecido a esto:

- - - -

Fijémonos en que despues de la iteración final de la animación, el evento animationiteration no se envía, en su lugar se lanza animationend.

- -

El HTML

- -

Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.

- -
<h1 id="watchme">Watch me move</h1>
-<p>
-  This example shows how to use CSS animations to make <code>H1</code>
-  elements move across the page.</p>
-<p>
-  In addition, we output some text each time an animation event fires,
-  so you can see them in action.
-</p>
-<ul id="output">
-</ul>
-
- -

{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}

- -

Te puede interesar también

- - diff --git a/files/es/web/css/css_animations/using_css_animations/index.html b/files/es/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..b9b08bbc0b --- /dev/null +++ b/files/es/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,351 @@ +--- +title: Usando animaciones CSS +slug: Web/CSS/CSS_Animations/Usando_animaciones_CSS +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

Las animaciones CSS3 permiten animar la transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación CSS y un conjunto de fotogramas que indican su estado inicial y final, así como posibles puntos intermedios en la misma.

+ +

Las animaciones CSS tienen tres ventajas principales sobre las técnicas tradicionales de animación basada en scripts:

+ +
    +
  1. Son muy fáciles de usar para animaciones sencillas, puedes hacerlo incluso sin tener conocimientos de Javascript.
    2. +
  2. La animación se muestra correctamente, incluso en equipos poco potentes. Animaciones simples realizadas en Javascript pueden verse mal (a menos que estén muy bien hechas). El motor de renderizado puede usar técnicas de optimización como el "frame-skipping" u otras técnicas para que la ejecución de la animación se vea tan suave como sea posible.
    3. +
  3. Al ser el navegador quien controle la secuencia de la animación, permitimos que optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la frecuencia de actualización de la animación ejecutándola en pestañas que no estén visibles.
    4. +
+ +

Configurando la animación

+ +

Para crear una secuencia de animación CSS, tú estilizarás el elemento que quieras animar con la propiedad {{ cssxref("animation") }} y sus sub-propiedades. Con ellas podemos no solo configurar el ritmo y la duración de la animación sino otros detalles sobre la secuencia de la animación. Con ellas no configuramos la apariencia actual de la animación, para ello disponemos de {{ cssxref("@keyframes") }} como describiremos más adelante .

+ +

Las subpropiedades de {{ cssxref("animation") }} son:

+ +
+
{{ cssxref("animation-delay") }}
+
Tiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
+
{{ cssxref("animation-direction") }}
+
Indica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
+
{{ cssxref("animation-duration") }}
+
Indica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
+
{{ cssxref("animation-iteration-count") }}
+
El número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
+
{{ cssxref("animation-name") }}
+
Especifica el nombre de la regla {{ cssxref("@keyframes") }} que describe los fotogramas de la animación.
+
{{ cssxref("animation-play-state") }}
+
Permite pausar y reanudar la secuencia de la animación
+
{{ cssxref("animation-timing-function") }}
+
Indica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
+
{{ cssxref("animation-fill-mode") }}
+
Especifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).
+
+ +

Definiendo la secuencia de la animación con fotogramas

+ +

Una vez configurado el tiempo de la animación, necesitamos definir su apariencia. Esto lo haremos estableciendo dos fotogramas más usando la regla {{ cssxref("@keyframes") }}. Cada fotograma describe cómo se muestra cada elemento animado en un momento dado durante la secuencia de la animación.

+ +

Desde que se define el tiempo y el ritmo de la animación, el fotograma usa {{ cssxref("percentage") }} para indicar en qué momento de la secuencia de la animación tiene lugar. 0% es el principio, 100% es el estado final de la animación. Debemos especificar estos dos momentos para que el navegador sepa dónde debe comenzar y finalizar; debido a su importancias, estos dos momentos tienen alias especiales: from y to.

+ +

Además puedes, opcionalmente, incluir fotogramas que describan pasos intermedios entre el punto inicial y final de la animación.

+ +

Ejemplos

+ +
Nota: Los siguientes ejemplos no usan ningún prefijo en las propiedades CSS de animación. Los navegadores antiguos pueden necesitarlos. Al hacer click en "Ver el ejemplo vivo" se incluye el prefijo -webkit.
+ +

Haciendo que un texto se delice por la ventana del navegador

+ +

Este sencillo ejemplo da estilos al elemento {{ HTMLElement("p") }} para que el texto se deslice por la pantalla entrando desde el borde derecho de la ventana del navegador.

+ +

Animaciones como esta pueden hacer que la página se vuelva más ancha que la ventana del navegador. Para evitar este problema, pon el elemento que será animado en un contenedor y agrega {{cssxref("overflow")}}:hidden en el contenedor.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

El estilo del elemento {{ HTMLElement("p") }} especifica, a través de la propiedad {{ cssxref("animation-duration") }}, que la animación debe durar 3 segundos desde el inicio al fin y que el nombre de los {{ cssxref("@keyframes") }} que definen los fotogramas de la secuencia de la animación es "slidein".

+ +

Si queremos añadir algún estilo personalizado sobre el elemento {{ HTMLElement("p") }} para usarlo en navegadores que no soporten animaciones CSS, también podemos incluirlos. En nuestro ejemplo, no queremos ningún otro estilo personalizado diferente al efecto de la animación.

+ +

Los fotogramas se definen usando la regla {{ cssxref("@keyframes") }}. En nuestro ejemplo, tenemos solo dos fotogramas. El primero de ellos sucede en elt 0% (hemos usado su alias from). Aqui, configuramos el margen izquierdo del elemento, poniendolo al 100%  (es decir, en el borde derecho del elemento contenedor), y su ancho al 300% (o tres veces el ancho del elemento contenedor). Esto hace que en el primer fotograma de la animación tengamos el encabezado fuera del borde derecho de la ventana del navegador.

+ +

El segundo (y último) fotograma sucede en el 100% (hemos usado su alias to). Hemos puesto el margen derecho al 0% y el ancho del elemento al 100%. Esto produce que el encabezado, al finalizar la animación, esté en el borde derecho del área de contenido.

+ +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+ +

(Recarga la página para ver la animación, o haz click en el botón CodePen para ver la animación en CodePen)

+ +

{{EmbedLiveSample("Haciendo_que_un_texto_se_delice_por_la_ventana_del_navegador","100%","250")}}

+ +

Añadiendo otro fotograma

+ +

Vamos a añadir otro fotograma a la animación de nuestro ejemplo anterior. Pongamos que queremos que el tamaño de fuente del encabezado aumente a medida que se mueve durante un tiempo y que después disminuye hasta su tamaño original. Esto es tan sencillo como añadir este fotograma:

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + + +

Esto le dice al navegador que en el 75% de la secuencia de la animación, el encabezado tiene un margen izquierdo del 25%, un tamaño de letra del 200% y un ancho del 150%.

+ +

(Recarga la página para ver la animación, o haz click al botón de CodePen para la animación en CodePen)

+ +

{{EmbedLiveSample("Añadiendo_otro_fotograma","100%","250")}}

+ +

Haciendo que se repita

+ +

Para hacer que la animación se repita, solo hay que usar la propiedad {{ cssxref("animation-iteration-count") }} e indicarle cuántas veces debe repetirse. En nuestro caso, usamos  infinite para que la animación se repita indefinidamente:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("Haciendo_que_se_repita","100%","250")}}

+ +

Moviendolo hacia adelante y hacia atrás

+ +

Hemos hecho que se repita, pero queda un poco raro que salte al inicio de la animación cada vez que ésta comienza. Queremos que se mueva hacia adelante y hacia atrás en la pantalla. Esto lo conseguimos fácilmente indicando que {{ cssxref("animation-direction") }} es alternate:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("Moviendolo_hacia_adelante_y_hacia_atrás","100%","250")}}

+ +

Usando la versión abreviada animation

+ +

La versión abreviada {{cssxref("animation")}} es usado para ahorrar espacio. Por ejemplo, la regla que hemos usado en este artículo:

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+ +

Se puede reemplazar por

+ +
p {
+  animation: 3s infinite alternate slidein;
+}
+ +
+

Nota: Puedes encontrar más detalles en la página de referencia {{cssxref("animation")}} 

+
+ +

Estableciendo multiples valores de propiedades animation

+ +

Las propiedades de la versión larga de {{cssxref("animation")}} pueden aceptar múltiples valores, separados por comas - esta característica puede ser usada cuando quieres aplicar múltiples animaciones en una solo regla, y establecer por separado duration, iteration-count, etc. para diferentes animaciones. Vamos a ver algunos ejemplos rápidos para explicar las diferentes combinaciones:

+ +

En el primer ejemplo, tenemos tres nombres de animación establecidos, pero solo una duración (duration) y número de iteraciones (iteration-count). En este caso, a las tres animaciones se les da la misma duración y número de iteraciones:

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;
+
+ +

En el segundo ejemplo, tenemos tres valores establecidos en las tres propiedades. En este caso, cada animación se ejecuta con los valores correspondientes en la misma posición en cada propiedad, así por ejemplo fadeInOut tiene una duración de 2.5s y 2 iteraciones, etc.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;
+ +

En el tercer caso, hay tres animaciones especificadas, pero solo dos duraciones y número de iteraciones. En los casos en donde no hay valores suficientes para dar un valor separado a cada animación, los valores se repiten de inicio a fin. Así por ejemplo, fadeInOut obtiene una duración de 2.5s y moveLeft300px obtiene una duración de 5s. Ahora tenemos asignados todos los valores de duracion disponibles, así que empezamos desde el inicio de nuevo - por lo tanto bounce  tiene una duración de 2.5s. El número de iteraciones (y cualquier otra propiedad que especifiques) será asignados de la misma forma.

+ +
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;
+ +

Usando eventos de animación

+ +

Podemos tener un control mayor sobre las animaciones (así como información útil sobre ellas) haciendo uso de eventos de animación. Dichos eventos, representados por el objeto {{ domxref("event/AnimationEvent", "AnimationEvent") }} , se pueden usar para detectar cuándo comienza la animación, cuándo termina y cuándo comienza una iteración. Cada evento incluye el momento en el que ocurrió, así como el nombre de la animación que lo desencadenó.

+ +

Vamos a modificar el ejemplo del texto deslizante para recoger información sobre cada evento cuando suceda y asi podremos echar un vistazo a cómo funcionan.

+ +

Agregando CSS

+ +

Empezamos creando el CSS para la animación. Esta animación durará 3 segundos, se llama slidein, se repite 3 veces, y alterna de dirección cada vez. En {{cssxref("@keyframes")}}, width y margin-left son manipulados para hacer que el elemento se deslice por la pantalla.

+ +
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+ +

Añadiendo detectores de eventos a la animación

+ +

Usaremos un poco de Javascript para escuchar los tres posibles eventos de animación. Este código configura nuestros detectores de eventos (event listeners); los llamamos cuando el documento carga por primera vez para configurar todo.

+ +
var e = document.getElementById("watchme");
+e.addEventListener("animationstart", listener, false);
+e.addEventListener("animationend", listener, false);
+e.addEventListener("animationiteration", listener, false);
+
+e.className = "slidein";
+ +

Es la forma estándar de detectar eventos en Javascript, si quieres conocer más detalles sobre cómo funciona la detección de eventos, consulta la documentación de {{ domxref("element.addEventListener()") }}.

+ +

La última línea pone la clase slidein al elemento para comenzar la animación. ¿Por qué?. Porque que el evento animationstart se dispara cuando comienza la animación y, en nuestro caso, esto sucedería antes de que nuestro código se hubiera ejecutado y no podríamos crear los detectores de eventos. Para evitarlo, creamos los detectores de eventos antes y añadimos la clase al elemento para iniciar la animación.

+ +

Recibiendo los eventos

+ +

Los eventos, al irse disparando, llamarán a la función listener().

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Iniciado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Finalizado: tiempo transcurrido " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "Nueva iteración comenzó a los " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

Este código también es muy sencillo. Miramos en {{ domxref("event.type") }} para saber qué tipo de evento se ha disparado y, en función del tipo de evento, añadimos su correspodiente texto al elemento {{ HTMLElement("ul") }} que usaremos para registrar la actividad de nuestros eventos.

+ +

El resultado, si todo ha ido bien, será algo parecido a esto:

+ + + +

Fijémonos en que despues de la iteración final de la animación, el evento animationiteration no se envía, en su lugar se lanza animationend.

+ +

El HTML

+ +

Solo nos falta mostrar el código HTML necesario para mostrar el ejemplo en la página, incluyendo la lista en la que el script irá insertando la información de los eventos que se vayan disparando.

+ +
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+
+ +

{{EmbedLiveSample('Usando_eventos_de_animación', '600', '300')}}

+ +

Te puede interesar también

+ + diff --git a/files/es/web/css/css_background_and_borders/border-image_generador/index.html b/files/es/web/css/css_background_and_borders/border-image_generador/index.html deleted file mode 100644 index 3f189b87ea..0000000000 --- a/files/es/web/css/css_background_and_borders/border-image_generador/index.html +++ /dev/null @@ -1,2615 +0,0 @@ ---- -title: Generador Border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador -tags: - - CSS - - Herramientas -translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator ---- -

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

-
-

Border Image Generator

-

HTML Content

- 
    

-
-        
-
-        

-            
-            
 Upload image 

-            
-            
 

-        

-
-        

-            
 Control Box 

-            

-            

-                
scale

-                

-                

-            

-            

-            

-                
draggable

-                

-            

-            

-                
section height

-                

-                

-            

-        

-
-        

-            

-                

-                

-                

-                

-            

-            
 

-        

-
-
-        

-
-
-            

-                
 border-image-slice 

-                

-                    
fill

-                    

-                

-            

-
-
-            

-                
 border-image-width 

-            

-
-
-            

-                
 border-image-outset 

-            

-
-
-            

-                
 aditional-properties 

-                

-                    
 repeat-x 

-                    

-                        
repeat

-                        
stretch

-                        
round

-                    

-                

-                

-                    
 repeat-y 

-                    

-                        
repeat

-                        
stretch

-                        
round

-                    

-                

-                

-                    

-                    

-                

-
-                

-                    

-                

-                

-                    

-                    

-                

-            

-
-
-            

-                
 CSS Code 

-                

-                     border-image-slice: 
-                     
-                

-                

-                     border-image-width: 
-                     
-                

-                

-                     border-image-outset: 
-                     
-                

-                

-                     border-image-repeat: 
-                     
-                

-                

-                     border-image-source: 
-                      
-                

-            

-
-        

-
-

CSS Content

- 
/*  GRID OF TWELVE
- * ========================================================================== */
-
-.span_12 {
-	width: 100%;
-}
-
-.span_11 {
-	width: 91.46%;
-}
-
-.span_10 {
-	width: 83%;
-}
-
-.span_9 {
-	width: 74.54%;
-}
-
-.span_8 {
-	width: 66.08%;
-}
-
-.span_7 {
-	width: 57.62%;
-}
-
-.span_6 {
-	width: 49.16%;
-}
-
-.span_5 {
-	width: 40.7%;
-}
-
-.span_4 {
-	width: 32.24%;
-}
-
-.span_3 {
-	width: 23.78%;
-}
-
-.span_2 {
-	width: 15.32%;
-}
-
-.span_1 {
-	width: 6.86%;
-}
-
-
-/*  SECTIONS
- * ========================================================================== */
-
-.section {
-	clear: both;
-	padding: 0px;
-	margin: 0px;
-}
-
-/*  GROUPING
- * ========================================================================== */
-
-
-.group:before, .group:after {
-    content: "";
-    display: table;
-}
-
-.group:after {
-    clear:both;
-}
-
-.group {
-    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
-}
-
-/*  GRID COLUMN SETUP
- * ========================================================================== */
-
-.col {
-	display: block;
-	float:left;
-	margin: 1% 0 1% 1.6%;
-}
-
-.col:first-child {
-	margin-left: 0;
-} /* all browsers except IE6 and lower */
-
-
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI DropDown
- */
-
-/* Dropdown */
-
-.ui-dropdown {
-	height: 2em;
-	width: 120px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 12px;
-
-	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
-	background-position: right center;
-	background-repeat: no-repeat;
-	background-color: #359740;
-
-	position: relative;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-dropdown:hover {
-	cursor: pointer;
-	background-color: #208B20;
-}
-
-/* Dropdown Select Button */
-
-.ui-dropdown-select {
-	height: inherit;
-	padding: 0 0.75em;
-	color: #FFF;
-	line-height: 2em;
-}
-
-/* Dropdown List */
-
-.ui-dropdown-list {
-	width: 100%;
-	height: 150px;
-	max-height: 150px;
-	margin: 0;
-	padding: 0 0.3em;
-
-	border: 3px solid #3490D2;
-	border-color: #208B20;
-	background: #666;
-	background-color: #EEF1F5;
-	color: #000;
-
-	position: absolute;
-	top: 2em;
-	left: 0;
-	z-index: 100;
-
-	overflow: hidden;
-	transition: all 0.3s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list:hover {
-	overflow: auto;
-}
-
-.ui-dropdown-list[data-hidden='true'] {
-	height: 0 !important;
-	opacity: 0;
-	visibility: hidden;
-}
-
-.ui-dropdown[data-position='left'] .ui-dropdown-list {
-	left: -100%;
-	top: 0;
-}
-
-.ui-dropdown[data-position='right'] .ui-dropdown-list {
-	left: 100%;
-	top: 0;
-}
-
-.ui-dropdown-list > div {
-	width: 100%;
-	height: 1.6em;
-	margin: 0.3em 0;
-	padding: 0.3em;
-	line-height: 1em;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-dropdown-list > div:hover {
-	background: #3490D2;
-	color:#FFF;
-	border-radius: 2px;
-	cursor: pointer;
-}
-
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * UI Button
- */
-
-/* Checkbox */
-
-.ui-checkbox {
-	text-align: center;
-	font-size: 16px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	line-height: 1.5em;
-	color: #FFF;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-checkbox > input {
- 	display: none;
-}
-
-.ui-checkbox > label {
-	font-size: 12px;
-	padding: 0.333em 1.666em 0.5em;
-	height: 1em;
-	line-height: 1em;
-
-	background-color: #888;
-	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
-	background-position: center center;
-	background-repeat: no-repeat;
-
-	color: #FFF;
-	border-radius: 2px;
-	font-weight: bold;
-	float: left;
-}
-
-.ui-checkbox .text {
-	padding-left: 34px;
-	background-position: center left 10px;
-}
-
-.ui-checkbox .left {
-	padding-right: 34px;
-	padding-left: 1.666em;
-	background-position: center right 10px;
-}
-
-.ui-checkbox > label:hover {
-	cursor: pointer;
-}
-
-.ui-checkbox > input:checked + label {
-	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
-	background-color: #379B4A;
-}
-
-/*************************************************************************************/
-/*************************************************************************************/
-
-/*
- * BORDER IMAGE GENERATOR TOOL
- */
-
-body {
-	width: 100%;
-	margin: 0 auto;
-	padding: 0 0 20px 0;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
-	border: 1px solid #EEE;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-body[data-move='X'] {
-	cursor: w-resize !important;
-}
-
-body[data-move='Y'] {
-	cursor: s-resize !important;
-}
-
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-[data-draggable='true']:hover {
-	cursor: move;
-}
-
-[data-draggable='true']:hover > * {
-	cursor: default;
-}
-
-
-
-/******************************************************************************/
-/******************************************************************************/
-
-/*
- * Border Image Picker
- */
-
-#gallery {
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#image-gallery {
-	width: 600px;
-	height: 100px;
-	margin: 0 auto;
-	transition: margin 0.4s;
-}
-
-#image-gallery .image {
-	height: 80px;
-	float: left;
-	margin: 10px;
-	opacity: 0.5;
-	background-color: #FFF;
-	box-shadow: 0px 0px 3px 1px #BABABA;
-}
-
-#image-gallery .image[selected="true"] {
-	box-shadow: 0px 0px 3px 1px #3BBA52;
-	opacity: 1;
-}
-
-#image-gallery .image:hover {
-	cursor: pointer;
-	box-shadow: 0px 0px 3px 1px #30ACE5;
-	opacity: 1;
-}
-
-#image-gallery[data-collapsed='true'] {
-	margin-top: -100px;
-}
-
-/* Load Menu */
-
-#load-actions {
-	margin: 10px 0;
-}
-
-#toggle-gallery {
-	width: 30px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-	background-repeat: no-repeat;
-	background-position: top 4px center;
-	background-color: #888888 !important;
-
-	border-radius: 2px;
-	float: left;
-}
-
-#toggle-gallery:hover {
-	cursor: pointer;
-}
-
-#toggle-gallery[data-action='show'] {
-	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
-	background-color: #888888 !important;
-}
-
-#toggle-gallery[data-action='hide'] {
-	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
-}
-
-.button {
-	width: 100px;
-	height: 25px;
-	margin: 10px;
-	color: #FFF;
-	text-align: center;
-	font-size: 12px;
-	line-height: 25px;
-	background-color: #379B4A;
-	border-radius: 2px;
-	float: left;
-}
-
-.button:hover {
-	cursor: pointer;
-	background-color: #3380C4;
-}
-
-#load-image {
-	float: left;
-}
-
-#load-remote {
-	width: 30px;
-	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
-	background-repeat: no-repeat;
-	background-position: center center;
-}
-
-#remote-url {
-	width: 200px;
-	height: 23px;
-	margin: 10px;
-	padding: 0 5px;
-	border: 1px solid #379B4A;
-	border-radius: 2px;
-	float: left;
-
-	transition: width 0.5s;
-}
-
-#remote-url:focus {
-	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
-	border-color: rgba(55, 155, 74, 0.5);
-	width: 450px;
-}
-
-/*
- * Visible Area
- */
-
-#preview_section {
-	position: relative;
-	min-height: 400px;
-}
-
-/* Image Control */
-
-#subject {
-	width: 300px;
-	height: 300px;
-	background-repeat: no-repeat;
-	background-size: 100%;
-	background-color: #FFF;
-	border: 1px solid #CCC;
-
-	position: absolute;
-	z-index: 10;
-	top: 15%;
-	left: 10%;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition-property: width, height;
-	transition-duration: 0.1s;
-}
-
-#subject .guideline {
-	background-color: rgba(255, 255, 255, 0.7);
-	border: 1px solid rgba(0, 0, 0, 0.3);
-	position: absolute;
-}
-
-#subject .guideline:hover {
-	background-color: #F00;
-}
-
-#subject .guideline[data-active] {
-	background-color: #F00;
-	z-index: 10;
-}
-
-#subject .guideline[data-axis='X'] {
-	width: 1px;
-	height: 100%;
-	top: -1px;
-}
-
-#subject .guideline[data-axis='Y'] {
-	width: 100%;
-	height: 1px;
-	left: -1px;
-}
-
-#subject .guideline[data-axis='X']:hover {
-	cursor: w-resize;
-}
-
-#subject .guideline[data-axis='Y']:hover {
-	cursor: s-resize;
-}
-
-
-#subject .relative {
-	position: relative;
-	font-size: 12px;
-}
-
-#subject .tooltip, #subject .tooltip2 {
-	width: 40px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 12px;
-	text-align: center;
-
-	position: absolute;
-	opacity: 0.5;
-	transition: opacity 0.25s;
-}
-
-#subject .tooltip {
-	background: #EEE;
-	border-radius: 2px;
-	border: 1px solid #CCC;
-}
-
-#subject .tooltip2{
-	color: #555;
-}
-
-#subject [data-active] > * {
-	opacity: 1;
-}
-
-#subject .tooltip[data-info='top'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip[data-info='right'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-#subject .tooltip[data-info='bottom'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip[data-info='left'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='top'] {
-	top: -10px;
-	left: -50px;
-}
-
-#subject .tooltip2[data-info='right'] {
-	top: -30px;
-	right: -20px;
-}
-
-#subject .tooltip2[data-info='bottom'] {
-	top: -10px;
-	right: -50px;
-}
-
-#subject .tooltip2[data-info='left'] {
-	bottom: -30px;
-	right: -20px;
-}
-
-/* Preview */
-
-#preview {
-	width: 30%;
-	height: 50%;
-	background-color: #FFF;
-	text-align: center;
-	overflow: hidden;
-	position: absolute;
-	z-index: 10;
-
-	left: 60%;
-	top: 15%;
-
-	border-radius: 2px;
-	border-image-width: 20px;
-	border-image-repeat: round;
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#preview .resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-#preview .resize-handle:hover {
-	cursor: nw-resize;
-}
-
-
-/*
- * General controls MENU
- */
-
-#general-controls {
-	padding: 10px 30px;
-	background-color: #FFF;
-	opacity: 0.95;
-	color: #888;
-	/*border-radius: 2px;*/
-	box-shadow: 0 0 3px 0 #BABABA;
-}
-
-#general-controls .property {
-	width: 130px;
-	float: left;
-}
-
-#general-controls .name {
-	height: 20px;
-	margin: 0 10px 0 0;
-	line-height: 100%;
-	text-align: right;
-	float: left;
-}
-
-#general-controls .right {
-	width: 200px;
-	float: right;
-}
-
-#general-controls .ui-checkbox label {
-	height: 10px;
-}
-
-#general-controls .separator {
-	height: 40px;
-	width: 1px;
-	margin: -10px 15px;
-	background-color: #EEE;
-	float: left;
-}
-
-/*
- * Controls
- */
-
-#controls {
-	color: #444;
-	margin: 10px 0 0 0;
-}
-
-#controls .category {
-	height: 190px;
-	min-width: 260px;
-	margin: 10px;
-	padding: 10px;
-	border: 1px solid #CCC;
-	border-radius: 3px;
-	float: left;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-@media (min-width: 880px) {
-	#controls .category {
-		width: 30%;
-		margin-left: 1.66%;
-		margin-right: 1.66%;
-	}
-}
-
-@media (max-width: 879px) {
-	#controls .category {
-		width: 37%;
-		margin-left: 6.5%;
-		margin-right: 6.5%;
-	}
-}
-
-#controls .category .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#controls .category:hover .title {
-	color: #777;
-}
-
-#controls .category > .group {
-	border: 1px solid #CCC;
-	border-radius: 2px;
-}
-
-
-/* property */
-
-#controls .property {
-	width: 250px;
-	height: 20px;
-	margin: 5px auto;
-}
-
-#controls .property .ui-input-slider {
-	margin: 0;
-	float: left;
-}
-
-#controls .property .ui-input-slider-info {
-	width: 60px;
-}
-
-#controls .property .ui-input-slider-left {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .ui-input-slider-right {
-	transition: opacity 0.15s;
-    opacity: 0;
-}
-
-#controls .property .name {
-	width: 60px;
-	height: 20px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	line-height: 100%;
-	float: left;
-}
-
-#controls .property .config {
-	width: 20px;
-	height: 20px;
-	float: left;
-	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
-	opacity: 0.5;
-}
-
-#controls .property .config:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-right {
-    opacity: 1;
-}
-
-#controls .ui-input-slider:hover .ui-input-slider-left {
-    opacity: 1;
-}
-
-#controls .property .ui-dropdown {
-	margin: 0 10px;
-	float: left;
-}
-
-
-#controls .property .ui-checkbox {
-	margin: 0 0 0 16px;
-	float: left;
-}
-
-#controls .property .ui-checkbox label {
-	height: 0.85em;
-	width: 10px;
-}
-
-/* dropdowns */
-#controls .ui-dropdown {
-	width: 50px;
-	height: 1.7em;
-	border-radius: 2px;
-}
-
-#controls .ui-dropdown-select {
-	line-height: 1.6em;
-}
-
-#controls .ui-dropdown-list {
-	top: 20px;
-}
-
-#controls .ui-dropdown-list {
-	border-width: 1px;
-	text-align: center;
-}
-
-#controls .ui-dropdown-list:hover {
-	overflow: hidden;
-}
-
-#controls .border-repeat {
-	margin: 0 0 0 16px !important;
-	width: 80px;
-}
-
-#controls .border-repeat .ui-dropdown-list {
-	height: 6.2em;
-	border-width: 1px;
-	text-align: center;
-}
-
-/* border-image-slice */
-
-
-#border-slice-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-/* border-image-width */
-
-#border-width-control .ui-dropdown-list {
-	height: 6.2em;
-}
-
-/* border-image-outset */
-
-#border-outset-control .ui-dropdown-list {
-	height: 4.3em;
-}
-
-#aditional-properties .property {
-	width: 200px;
-}
-
-#aditional-properties .ui-input-slider > input {
-	width: 80px !important;
-}
-
-/* unit settings panel */
-
-#unit-settings {
-	padding: 10px;
-	position: absolute;
-
-	background: #FFF;
-
-	font-size: 12px;
-	border-radius: 3px;
-	border: 1px solid #CCC;
-	text-align: center;
-	color: #555;
-
-	position: absolute;
-	z-index: 1000;
-
-	box-shadow: 0 0 3px 0 #BABABA;
-	transition: all 0.25s;
-}
-
-#unit-settings .title {
-	width: 100%;
-	margin: -5px auto 0;
-
-	color: #666;
-	font-size: 14px;
-	font-weight: bold;
-	line-height: 25px;
-	border-bottom: 1px solid #E5E5E5;
-}
-
-#unit-settings .ui-input-slider {
-	margin: 10px 0 0 0;
-}
-
-#unit-settings .ui-input-slider-info {
-	width: 50px;
-	line-height: 1.5em;
-}
-
-#unit-settings input {
-	font-size: 12px;
-	width: 40px !important;
-}
-
-#unit-settings .close {
-	width: 16px;
-	height: 16px;
-	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
-	background-size: 75%;
-
-	position: absolute;
-	top: 4px;
-	right: 4px;
-	opacity: 0.5;
-}
-
-#unit-settings .close:hover {
-	cursor: pointer;
-	opacity: 1;
-}
-
-#unit-settings[data-active='true'] {
-	opacity: 1;
-}
-
-#unit-settings[data-active='false'] {
-	opacity: 0;
-	top: -100px !important;
-}
-
-/*
- * CSS Output Code
- */
-
-#output {
-	padding: 10px;
-	border: 2px dashed #888 !important;
-	box-shadow: none !important;
-	border-radius: 3px;
-	overflow: hidden;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-	user-select: text;
-}
-
-
-@media (min-width: 880px) {
-	#output {
-		width: 63.33% !important;
-	}
-}
-
-@media (max-width: 879px) {
-	#output {
-		width: 87% !important;
-	}
-}
-
-
-#output .title {
-	width: 100%;
-	height: 30px;
-	margin: 0 0 10px 0;
-	line-height: 25px;
-
-	text-align: center;
-	color: #AAA;
-}
-
-#output .css-property {
-	width: 100%;
-	margin: 0;
-	color: #555;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-#output .css-property .name {
-	width: 30%;
-	font-weight: bold;
-	text-align: right;
-	float: left;
-}
-
-#output .css-property .value {
-	width: 65%;
-	padding: 0 2.5%;
-	word-break: break-all;
-	float: left;
-}
-
-
-

JavaScript Content

- 
'use strict';
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-/**
- * UI-DropDown Select
- */
-
-var DropDownManager = (function DropdownManager() {
-
-	var subscribers = {};
-	var dropdowns = [];
-	var active = null;
-
-	var visbility = ["hidden", "visible"];
-
-
-	var DropDown = function DropDown(node) {
-		var topic = node.getAttribute('data-topic');
-		var label = node.getAttribute('data-label');
-		var selected = node.getAttribute('data-selected') | 0;
-
-		var select = document.createElement('div');
-		var list = document.createElement('div');
-		var uval = 0;
-		var option = null;
-		var option_value = null;
-
-		list.className = 'ui-dropdown-list';
-		select.className = 'ui-dropdown-select';
-
-		while (node.firstElementChild !== null) {
-			option = node.firstElementChild;
-			option_value = option.getAttribute('data-value');
-
-			if (option_value === null)
-				option.setAttribute('data-value', uval);
-
-			list.appendChild(node.firstElementChild);
-			uval++;
-		}
-
-		node.appendChild(select);
-		node.appendChild(list);
-
-		select.onclick = this.toggle.bind(this);
-		list.onclick = this.updateValue.bind(this);
-		document.addEventListener('click', clickOut);
-
-		this.state = 0;
-		this.time = 0;
-		this.dropmenu = list;
-		this.select = select;
-		this.toggle(false);
-		this.value = {};
-		this.topic = topic;
-
-		if (label)
-			select.textContent = label;
-		else
-			this.setNodeValue(list.children[selected]);
-
-		dropdowns[topic] = this;
-
-	};
-
-	DropDown.prototype.toggle = function toggle(state) {
-		if (typeof(state) === 'boolean')
-			this.state = state === false ? 0 : 1;
-		else
-			this.state = 1 ^ this.state;
-
-		if (active !== this) {
-			if (active)
-				active.toggle(false);
-			active = this;
-		}
-
-		if (this.state === 0)
-			this.dropmenu.setAttribute('data-hidden', 'true');
-		else
-			this.dropmenu.removeAttribute('data-hidden');
-
-	};
-
-	var clickOut = function clickOut(e) {
-		if (active.state === 0 ||
-			e.target === active.dropmenu ||
-			e.target === active.select)
-			return;
-
-		active.toggle(false);
-	};
-
-	DropDown.prototype.updateValue = function updateValue(e) {
-
-		if (Date.now() - this.time < 500)
-			return;
-
-		if (e.target.className !== "ui-dropdown-list") {
-			this.setNodeValue(e.target);
-			this.toggle(false);
-		}
-
-		this.time = Date.now();
-	};
-
-	DropDown.prototype.setNodeValue = function setNodeValue(node) {
-		this.value['name'] = node.textContent;
-		this.value['value'] = node.getAttribute('data-value');
-
-		this.select.textContent = node.textContent;
-		this.select.setAttribute('data-value', this.value['value']);
-
-		notify.call(this);
-	};
-
-	var createDropDown = function createDropDown(topic, options) {
-
-		var dropdown = document.createElement('div');
-		dropdown.setAttribute('data-topic', topic);
-		dropdown.className = 'ui-dropdown';
-
-		for (var i in options) {
-			var x = document.createElement('div');
-			x.setAttribute('data-value', i);
-			x.textContent = options[i];
-			dropdown.appendChild(x);
-		}
-
-		new DropDown(dropdown);
-
-		return dropdown;
-	};
-
-	var setValue = function setValue(topic, index) {
-		if (dropdowns[topic] === undefined ||
-			index >= dropdowns[topic].dropmenu.children.length)
-			return;
-
-		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		var index = subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-
-		for (var i in subscribers[this.topic]) {
-			subscribers[this.topic][i](this.value);
-		}
-	};
-
-	var init = function init() {
-		var elem, size;
-
-		elem = document.querySelectorAll('.ui-dropdown');
-		size = elem.length;
-		for (var i = 0; i < size; i++)
-			new DropDown(elem[i]);
-
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		createDropDown : createDropDown
-	};
-
-})();
-
-
-/**
- * UI-ButtonManager
- */
-
-var ButtonManager = (function CheckBoxManager() {
-
-	var subscribers = [];
-	var buttons = [];
-
-	var CheckBox = function CheckBox(node) {
-		var topic = node.getAttribute('data-topic');
-		var state = node.getAttribute('data-state');
-		var name = node.getAttribute('data-label');
-		var align = node.getAttribute('data-text-on');
-
-		state = (state === "true");
-
-		var checkbox = document.createElement("input");
-		var label = document.createElement("label");
-
-		var id = 'checkbox-' + topic;
-		checkbox.id = id;
-		checkbox.setAttribute('type', 'checkbox');
-		checkbox.checked = state;
-
-		label.setAttribute('for', id);
-		if (name) {
-			label.className = 'text';
-			if (align)
-				label.className += ' ' + align;
-			label.textContent = name;
-		}
-
-		node.appendChild(checkbox);
-		node.appendChild(label);
-
-		this.node = node;
-		this.topic = topic;
-		this.checkbox = checkbox;
-
-		checkbox.addEventListener('change', function(e) {
-			notify.call(this);
-		}.bind(this));
-
-		buttons[topic] = this;
-	};
-
-	var getNode =  function getNode(topic) {
-		return buttons[topic].node;
-	};
-
-	var setValue = function setValue(topic, value) {
-		var obj = buttons[topic];
-		if (obj === undefined)
-			return;
-
-		obj.checkbox.checked = value;
-		notify.call(obj);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.checkbox.checked);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-checkbox');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new CheckBox(elem[i]);
-	};
-
-	return {
-		init : init,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe
-	};
-
-})();
-
-window.addEventListener("load", function() {
-	BorderImage.init();
-});
-
-var BorderImage = (function BorderImage() {
-
-	var getElemById = document.getElementById.bind(document);
-
-	var subject;
-	var preview;
-	var guidelines = [];
-	var positions = ['top', 'right', 'bottom', 'left'];
-
-	var makeDraggable = function makeDraggable(elem) {
-
-		var offsetTop;
-		var offsetLeft;
-
-		elem.setAttribute('data-draggable', 'true');
-
-		var dragStart = function dragStart(e) {
-			if (e.target.getAttribute('data-draggable') !== 'true' ||
-				e.target !== elem || e.button !== 0)
-				return;
-
-			offsetLeft = e.clientX - elem.offsetLeft;
-			offsetTop = e.clientY - elem.offsetTop;
-
-			document.addEventListener('mousemove', mouseDrag);
-			document.addEventListener('mouseup', dragEnd);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			document.removeEventListener('mouseup', dragEnd);
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-
-			elem.style.left = e.clientX - offsetLeft + 'px';
-			elem.style.top = e.clientY - offsetTop + 'px';
-		};
-
-		elem.addEventListener('mousedown', dragStart, false);
-	};
-
-	var PreviewControl = function PreviewControl() {
-
-		var dragging = false;
-		var valueX = null;
-		var valueY = null;
-
-		var dragStart = function dragStart(e) {
-			if (e.button !== 0)
-				return;
-
-			valueX = e.clientX - preview.clientWidth;
-			valueY = e.clientY - preview.clientHeight;
-			dragging = true;
-
-			document.addEventListener('mousemove', mouseDrag);
-		};
-
-		var dragEnd = function dragEnd(e) {
-			if (e.button !== 0 || dragging === false)
-				return;
-
-			document.removeEventListener('mousemove', mouseDrag);
-			dragging = false;
-		};
-
-		var mouseDrag = function mouseDrag(e) {
-			InputSliderManager.setValue('preview-width', e.clientX - valueX);
-			InputSliderManager.setValue('preview-height', e.clientY - valueY);
-		};
-
-		var init = function init() {
-
-			makeDraggable(preview);
-			makeDraggable(subject);
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			handle.addEventListener('mousedown', dragStart);
-			document.addEventListener('mouseup', dragEnd);
-
-			preview.appendChild(handle);
-
-		};
-
-		return {
-			init: init
-		};
-
-	}();
-
-	var ImageReader = (function ImageReader() {
-
-		var fReader = new FileReader();
-		var browse = document.createElement('input');
-
-		var loadImage = function loadImage(e) {
-			if (browse.files.length === 0)
-				return;
-
-			var file = browse.files[0];
-
-			if (file.type.slice(0, 5) !== 'image')
-				return;
-
-			fReader.readAsDataURL(file);
-
-			return false;
-		};
-
-		fReader.onload = function(e) {
-			ImageControl.loadRemoteImage(e.target.result);
-		};
-
-		var load = function load() {
-			browse.click();
-		};
-
-		browse.setAttribute('type', 'file');
-		browse.style.display = 'none';
-		browse.onchange = loadImage;
-
-		return {
-			load: load
-		};
-
-	})();
-
-	var ImageControl = (function ImageControl() {
-
-		var scale = 0.5;
-		var imgSource = new Image();
-		var imgState = null;
-		var selected = null;
-
-
-		var topics = ['slice', 'width', 'outset'];
-		var properties = {};
-		properties['border1'] = {
-			fill			: false,
-
-			slice_values	: [27, 27, 27, 27],
-			width_values	: [20, 20, 20, 20],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [1, 1],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border2'] = {
-			fill			: false,
-
-			slice_values	: [33, 33, 33, 33],
-			width_values	: [1.5, 1.5, 1.5, 1.5],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [1, 1, 1, 1],
-			width_units		: [2, 2, 2, 2],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border3'] = {
-			fill			: true,
-
-			slice_values	: [15, 15, 15, 15],
-			width_values	: [10, 10, 10, 10],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border4'] = {
-			fill			: false,
-
-			slice_values	: [13, 13, 13, 13],
-			width_values	: [13, 13, 13, 13],
-			outset_values	: [13, 13, 13, 13],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400
-		};
-
-		properties['border5'] = {
-			fill			: false,
-
-			slice_values	: [0, 12, 0, 12],
-			width_values	: [0, 12, 0, 12],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [0, 0],
-			size			: [300, 200],
-			preview_area	: 400,
-		};
-
-		properties['border6'] = {
-			fill			: false,
-
-			slice_values	: [42, 42, 42, 42],
-			width_values	: [42, 42, 42, 42],
-			outset_values	: [0, 0, 0, 0],
-
-			slice_units		: [0, 0, 0, 0],
-			width_units		: [0, 0, 0, 0],
-			outset_units	: [0, 0, 0, 0],
-
-			repeat			: [2, 2],
-			size			: [350, 350],
-			preview_area	: 500,
-		};
-
-
-		var loadLocalImage = function loadLocalImage(source) {
-			var location = "images/" + source;
-			imgSource.src = location;
-		};
-
-		var loadRemoteImage = function loadRemoteImage(source) {
-			imgSource.src = source;
-			if (selected)
-				selected.removeAttribute('selected');
-			Tool.setOutputCSS('source', 'url("' + source + '")');
-		};
-
-		var pickImage = function pickImage(e) {
-			if (e.target.className === 'image') {
-				selected = e.target;
-				selected.setAttribute('selected', 'true');
-				loadRemoteImage(e.target.src);
-				imgState = e.target.getAttribute('data-stateID');
-			}
-		};
-
-		var loadImageState = function loadImageState(stateID) {
-			if (properties[stateID] === undefined)
-				return;
-
-			var prop = properties[stateID];
-			var topic;
-			var unit_array;
-			var value_array;
-
-			for (var i in topics) {
-				for (var j=0; j<4; j++) {
-					topic = topics[i] + '-' + positions[j];
-					unit_array = topics[i] + '_units';
-					value_array = topics[i] + '_values';
-					InputSliderManager.setValue(topic, prop[value_array][j]);
-					DropDownManager.setValue(topic, prop[unit_array][j]);
-				}
-			}
-
-			ButtonManager.setValue('slice-fill', prop['fill']);
-			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
-			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
-			InputSliderManager.setValue('preview-width', prop['size'][0]);
-			InputSliderManager.setValue('preview-height', prop['size'][1]);
-			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
-		};
-
-		var update = function update() {
-			scale =  Math.min(300, (30000 / this.width) | 0);
-			setScale(scale);
-			InputSliderManager.setValue('scale', scale, false);
-
-			subject.style.backgroundImage = 'url("' + this.src + '")';
-			preview.style.borderImageSource = 'url("' + this.src + '")';
-
-			guidelines['slice-top'].setMax(this.height);
-			guidelines['slice-right'].setMax(this.width);
-			guidelines['slice-bottom'].setMax(this.height);
-			guidelines['slice-left'].setMax(this.width);
-
-			if (imgState)
-				loadImageState(imgState);
-		};
-
-		var setScale = function setScale(value) {
-			scale = value;
-			var w = imgSource.width * scale / 100 | 0;
-			var h = imgSource.height * scale / 100 | 0;
-			subject.style.width = w + 'px';
-			subject.style.height = h + 'px';
-
-			for (var i = 0; i < positions.length; i++)
-				guidelines['slice-' + positions[i]].updateGuidelinePos();
-		};
-
-		var getScale = function getScale() {
-			return scale/100;
-		};
-
-		var toggleGallery = function toggleGallery() {
-			var gallery = getElemById('image-gallery');
-			var button  = getElemById('toggle-gallery');
-			var state = 1;
-			button.addEventListener('click', function() {
-				state = 1 ^ state;
-				if (state === 0) {
-					gallery.setAttribute('data-collapsed', 'true');
-					button.setAttribute('data-action', 'show');
-				}
-				else {
-					gallery.removeAttribute('data-collapsed');
-					button.setAttribute('data-action', 'hide');
-				}
-			});
-		};
-
-		var init = function init() {
-			var gallery = getElemById('image-gallery');
-			var browse = getElemById('load-image');
-			var remote = getElemById('remote-url');
-			var load_remote = getElemById('load-remote');
-
-			remote.addEventListener('change', function(){
-				loadRemoteImage(this.value);
-			});
-
-			load_remote.addEventListener('click', function(){
-				loadRemoteImage(remote.value);
-			});
-
-			browse.addEventListener('click', ImageReader.load);
-			gallery.addEventListener('click', pickImage);
-			imgSource.addEventListener('load', update);
-
-			InputSliderManager.subscribe('scale', setScale);
-			InputSliderManager.setValue('scale', scale);
-			imgState = 'border1';
-			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
-			toggleGallery();
-		};
-
-		return {
-			init: init,
-			getScale : getScale,
-			loadRemoteImage: loadRemoteImage
-		};
-
-	})();
-
-	var GuideLine = function GuideLine(node) {
-		var topic = node.getAttribute('data-topic');
-		var axis = node.getAttribute('data-axis');
-
-		this.node = node;
-		this.topic = topic;
-		this.axis = axis;
-		this.info = topic.split('-')[1];
-
-		this.position = 0;
-		this.value = 0;
-		this.unit = 0;
-		this.max = 0;
-		this.pos = positions.indexOf(this.info);
-
-		guidelines[topic] = this;
-
-		var relative_container = document.createElement('div');
-		var tooltip = document.createElement('div');
-		var tooltip2 = document.createElement('div');
-
-		tooltip.className = 'tooltip';
-		tooltip.setAttribute('data-info', this.info);
-
-		tooltip2.className = 'tooltip2';
-		tooltip2.textContent = this.info;
-		tooltip2.setAttribute('data-info', this.info);
-
-		this.tooltip = tooltip;
-
-		relative_container.appendChild(tooltip);
-		relative_container.appendChild(tooltip2);
-		node.appendChild(relative_container);
-
-		var startX = 0;
-		var startY = 0;
-		var start = 0;
-
-		var startDrag = function startDrag(e) {
-			startX = e.clientX;
-			startY = e.clientY;
-			start = guidelines[topic].position;
-			document.body.setAttribute('data-move', axis);
-			relative_container.setAttribute('data-active', '');
-			node.setAttribute('data-active', '');
-
-			document.addEventListener('mousemove', updateGuideline);
-			document.addEventListener('mouseup', endDrag);
-		};
-
-		var endDrag = function endDrag() {
-			document.body.removeAttribute('data-move');
-			relative_container.removeAttribute('data-active');
-			node.removeAttribute('data-active');
-
-			document.removeEventListener('mousemove', updateGuideline);
-		};
-
-		var updateGuideline = function updateGuideline(e) {
-			var value;
-			if (topic === 'slice-top')
-				value = e.clientY - startY + start;
-
-			if (topic === 'slice-right')
-				value = startX - e.clientX + start;
-
-			if (topic === 'slice-bottom')
-				value = startY - e.clientY + start;
-
-			if (topic === 'slice-left')
-				value = e.clientX - startX + start;
-
-			if (this.unit === 0)
-				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
-			else {
-				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
-			}
-
-		}.bind(this);
-
-		node.addEventListener("mousedown", startDrag);
-
-		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
-		InputSliderManager.setValue(topic, this.position);
-	};
-
-
-	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
-		if (this.unit === 0)
-			this.position = this.value * ImageControl.getScale() | 0;
-		else
-			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
-
-		this.node.style[this.info] = this.position + 'px';
-	};
-
-	GuideLine.prototype.setPosition = function setPosition(value) {
-		this.value = value;
-		this.tooltip.textContent = value;
-		this.updateGuidelinePos();
-		Tool.setBorderSlice(this.pos, value);
-	};
-
-	GuideLine.prototype.setMax = function setMax(max) {
-		this.max = max;
-		this.updateLimit();
-	};
-
-	GuideLine.prototype.updateLimit = function updateLimit() {
-		if (this.unit === 1)
-			InputSliderManager.setMax(this.topic, 100);
-		else
-			InputSliderManager.setMax(this.topic, this.max);
-	};
-
-	GuideLine.prototype.setUnit = function setUnit(type) {
-		if (type === '%')	this.unit = 1;
-		if (type === '')	this.unit = 0;
-		this.updateLimit();
-	};
-
-	/*
-	 * Unit panel
-	 */
-	var UnitPanel = (function UnitPanel () {
-
-		var panel;
-		var title;
-		var precision;
-		var step;
-		var unit_topic = null; // settings are made for this topic
-		var step_option = [1, 0.1, 0.01];
-
-		var updatePrecision = function updatePrecision(value) {
-			InputSliderManager.setPrecision('unit-step', value);
-			InputSliderManager.setStep('unit-step', step_option[value]);
-			InputSliderManager.setMin('unit-step', step_option[value]);
-
-			if (unit_topic)
-				InputSliderManager.setPrecision(unit_topic, value);
-		};
-
-		var updateUnitSettings = function updateUnitSettings(value) {
-			if (unit_topic)
-				InputSliderManager.setStep(unit_topic, value);
-		};
-
-		var show = function show(e) {
-			var topic = e.target.getAttribute('data-topic');
-			var precision = InputSliderManager.getPrecision(topic);
-			var step = InputSliderManager.getStep(topic);
-
-			unit_topic = topic;
-			title.textContent = topic;
-
-			panel.setAttribute('data-active', 'true');
-			panel.style.top = e.target.offsetTop - 40 + 'px';
-			panel.style.left = e.target.offsetLeft + 30 + 'px';
-
-			InputSliderManager.setValue('unit-precision', precision);
-			InputSliderManager.setValue('unit-step', step);
-		};
-
-		var init = function init() {
-			panel = document.createElement('div');
-			title = document.createElement('div');
-			var close = document.createElement('div');
-
-			step = InputSliderManager.createSlider('unit-step', 'step');
-			precision = InputSliderManager.createSlider('unit-precision', 'precision');
-
-			InputSliderManager.setStep('unit-precision', 1);
-			InputSliderManager.setMax('unit-precision', 2);
-			InputSliderManager.setValue('unit-precision', 2);
-			InputSliderManager.setSensivity('unit-precision', 20);
-
-			InputSliderManager.setValue('unit-step', 1);
-			InputSliderManager.setStep('unit-step', 0.01);
-			InputSliderManager.setPrecision('unit-step', 2);
-
-			InputSliderManager.subscribe('unit-precision', updatePrecision);
-			InputSliderManager.subscribe('unit-step', updateUnitSettings);
-
-			close.addEventListener('click', function () {
-				panel.setAttribute('data-active', 'false');
-			});
-
-			title.textContent = 'Properties';
-			title.className = 'title';
-			close.className = 'close';
-			panel.id = 'unit-settings';
-			panel.setAttribute('data-active', 'false');
-			panel.appendChild(title);
-			panel.appendChild(precision);
-			panel.appendChild(step);
-			panel.appendChild(close);
-			document.body.appendChild(panel);
-		};
-
-		return {
-			init : init,
-			show : show
-		};
-
-	})();
-
-	/**
-	 * Tool Manager
-	 */
-	var Tool = (function Tool() {
-		var preview_area;
-		var dropdown_unit_options = [
-			{ '' : '--', '%' : '%'},
-			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
-			{ 'px' : 'px', 'em' : 'em'},
-		];
-
-		var border_slice = [];
-		var border_width = [];
-		var border_outset = [];
-
-		var border_slice_values = [];
-		var border_width_values = [];
-		var border_outset_values = [];
-
-		var border_slice_units = ['', '', '', ''];
-		var border_width_units = ['px', 'px', 'px', 'px'];
-		var border_outset_units = ['px', 'px', 'px', 'px'];
-
-		var border_fill = false;
-		var border_repeat = ['round', 'round'];
-		var CSS_code = {
-			'source' : null,
-			'slice' : null,
-			'width' : null,
-			'outset' : null,
-			'repeat' : null
-		};
-
-		var setBorderSlice = function setBorderSlice(positionID, value) {
-			border_slice[positionID] = value + border_slice_units[positionID];
-			updateBorderSlice();
-		};
-
-		var updateBorderSlice = function updateBorderSlice() {
-			var value = border_slice.join(' ');
-			if (border_fill === true)
-				value += ' fill';
-
-			preview.style.borderImageSlice = value;
-			setOutputCSS('slice', value);
-		};
-
-		var setBorderFill = function setBorderFill(value) {
-			border_fill = value;
-			var bimgslice = border_slice.join(' ');;
-			if (value === true)
-				bimgslice += ' fill';
-
-			preview.style.borderImageSlice = bimgslice;
-		};
-
-		var updateBorderWidth = function updateBorderWidth() {
-			var value = border_width.join(' ');
-			preview.style.borderImageWidth = value;
-			setOutputCSS('width', value);
-		};
-
-		var updateBorderOutset = function updateBorderOutset() {
-			var value = border_outset.join(' ');
-			preview.style.borderImageOutset = border_outset.join(' ');
-			setOutputCSS('outset', value);
-		};
-
-		var setBorderRepeat = function setBorderRepeat(obj) {
-			border_repeat[obj.value] = obj.name;
-			var value = border_repeat.join(' ');
-			preview.style.borderImageRepeat = value;
-			setOutputCSS('repeat', value);
-		};
-
-		var setOutputCSS = function setOutputCSS(topic, value) {
-			CSS_code[topic].textContent = value + ';';
-		};
-
-		var setPreviewFontSize = function setPreviewFontSize(value) {
-			preview.style.fontSize = value + 'px';
-		};
-
-		var setPreviewWidth = function setPreviewWidth(value) {
-			preview.style.width = value + 'px';
-		};
-
-		var setPreviewHeight = function setPreviewHeight(value) {
-			preview.style.height = value + 'px';
-		};
-
-		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
-			preview_area.style.height = value + 'px';
-		};
-
-		var updateDragOption = function updateDragOption(value) {
-			if (value === true)
-				subject.setAttribute('data-draggable', 'true');
-			else
-				subject.removeAttribute('data-draggable');
-		};
-
-		var createProperty = function createProperty(topic, labelID, optionsID) {
-
-			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
-			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
-
-			InputSliderManager.setSensivity(topic, 3);
-			InputSliderManager.setPrecision(topic, 1);
-
-			var property = document.createElement('div');
-			var config = document.createElement('div');
-
-			property.className = 'property';
-			config.className = 'config';
-			config.setAttribute('data-topic', topic);
-			config.addEventListener('click', UnitPanel.show);
-
-			property.appendChild(slider);
-			property.appendChild(dropdown);
-			property.appendChild(config);
-
-			return property;
-		};
-
-		var initBorderSliceControls = function initBorderSliceControls() {
-			var container = getElemById('border-slice-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_slice_values[id] = value;
-					border_slice[id] = value + border_slice_units[id];
-					updateBorderSlice();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					guidelines[topic].setUnit(obj.value);
-					border_slice_units[id] = obj.value;
-					border_slice[id] = border_slice_values[id] + obj.value;
-					updateBorderSlice();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'slice-' + positions[i];
-				var property = createProperty(topic, i, 0);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-
-			container.appendChild(container.children[1]);
-
-		};
-
-		var initBorderWidthControls = function initBorderWidthControls() {
-			var container = getElemById('border-width-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_width_values[id] = value;
-					border_width[id] = value + border_width_units[id];
-					updateBorderWidth();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					if (obj.value === '%')
-						InputSliderManager.setMax(topic, 100);
-					else
-						InputSliderManager.setMax(topic, 1000);
-
-					border_width_units[id] = obj.value;
-					border_width[id] = border_width_values[id] + obj.value;
-					updateBorderWidth();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'width-' + positions[i];
-				var property = createProperty(topic, i, 1);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var initBorderOutsetControls = function initBorderOutsetControls() {
-
-			var container = getElemById('border-outset-control');
-
-			var listenForChanges = function listenForChanges(topic, id) {
-				InputSliderManager.subscribe(topic, function(value) {
-					border_outset_values[id] = value;
-					border_outset[id] = value + border_outset_units[id];
-					updateBorderOutset();
-				});
-
-				DropDownManager.subscribe(topic, function(obj) {
-					border_outset_units[id] = obj.value;
-					border_outset[id] = border_outset_values[id] + obj.value;
-					updateBorderOutset();
-				});
-			};
-
-			for (var i = 0; i < positions.length; i++) {
-				var topic = 'outset-' + positions[i];
-				var property = createProperty(topic, i, 2);
-				InputSliderManager.setMax(topic, 1000);
-				listenForChanges(topic, i);
-
-				container.appendChild(property);
-			}
-		};
-
-		var init = function init() {
-
-			var gallery =
-			subject = getElemById('subject');
-			preview = getElemById("preview");
-			preview_area = getElemById("preview_section");
-
-
-			CSS_code['source'] = getElemById("out-border-source");
-			CSS_code['slice'] = getElemById("out-border-slice");
-			CSS_code['width'] = getElemById("out-border-width");
-			CSS_code['outset'] = getElemById("out-border-outset");
-			CSS_code['repeat'] = getElemById("out-border-repeat");
-
-			initBorderSliceControls();
-			initBorderWidthControls();
-			initBorderOutsetControls();
-
-			var elem = document.querySelectorAll('.guideline');
-			var size = elem.length;
-			for (var i = 0; i < size; i++)
-				new GuideLine(elem[i]);
-
-			PreviewControl.init();
-
-			ButtonManager.subscribe('slice-fill',setBorderFill);
-			ButtonManager.subscribe('drag-subject', updateDragOption);
-			ButtonManager.setValue('drag-subject', false);
-
-			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
-			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
-
-			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
-			InputSliderManager.subscribe('preview-width', setPreviewWidth);
-			InputSliderManager.subscribe('preview-height', setPreviewHeight);
-			InputSliderManager.subscribe('font-size', setPreviewFontSize);
-			InputSliderManager.setValue('preview-width', 300);
-			InputSliderManager.setValue('preview-height', 200);
-		};
-
-		return {
-			init: init,
-			setOutputCSS: setOutputCSS,
-			setBorderSlice: setBorderSlice
-		};
-
-	})();
-
-	/**
-	 * Init Tool
-	 */
-	var init = function init() {
-		InputSliderManager.init();
-		DropDownManager.init();
-		ButtonManager.init();
-		UnitPanel.init();
-		Tool.init();
-		ImageControl.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
-

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

- -

 

diff --git a/files/es/web/css/css_background_and_borders/border-image_generator/index.html b/files/es/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..3f189b87ea --- /dev/null +++ b/files/es/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2615 @@ +--- +title: Generador Border-image +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generador +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

Esta herramienta permite generar valores para CSS3 {{cssxref("border-image")}}

+
+

Border Image Generator

+

HTML Content

+ 
    

+
+        
+
+        

+            
+            
 Upload image 

+            
+            
 

+        

+
+        

+            
 Control Box 

+            

+            

+                
scale

+                

+                

+            

+            

+            

+                
draggable

+                

+            

+            

+                
section height

+                

+                

+            

+        

+
+        

+            

+                

+                

+                

+                

+            

+            
 

+        

+
+
+        

+
+
+            

+                
 border-image-slice 

+                

+                    
fill

+                    

+                

+            

+
+
+            

+                
 border-image-width 

+            

+
+
+            

+                
 border-image-outset 

+            

+
+
+            

+                
 aditional-properties 

+                

+                    
 repeat-x 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    
 repeat-y 

+                    

+                        
repeat

+                        
stretch

+                        
round

+                    

+                

+                

+                    

+                    

+                

+
+                

+                    

+                

+                

+                    

+                    

+                

+            

+
+
+            

+                
 CSS Code 

+                

+                     border-image-slice: 
+                     
+                

+                

+                     border-image-width: 
+                     
+                

+                

+                     border-image-outset: 
+                     
+                

+                

+                     border-image-repeat: 
+                     
+                

+                

+                     border-image-source: 
+                      
+                

+            

+
+        

+
+

CSS Content

+ 
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+

JavaScript Content

+ 
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+

{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}

+ +

 

diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_background_and_borders/index.html deleted file mode 100644 index 59c2117194..0000000000 --- a/files/es/web/css/css_background_and_borders/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: CSS Background and Borders -slug: Web/CSS/CSS_Background_and_Borders -tags: - - CSS - - CSS Backgrounds and Borders - - CSS Reference - - NeedsTranslation - - Overview - - TopicStub -translation_of: Web/CSS/CSS_Backgrounds_and_Borders -translation_of_original: Web/CSS/CSS_Background_and_Borders ---- -

{{CSSRef}}

- -

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

- -

Reference

- -

CSS Properties

- -
- -
- -

Guides

- -
-
Using CSS multiple backgrounds
-
Explains how to set backgrounds on elements and how they will interact with it.
-
Scaling background images
-
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
- -

Browser compatibility

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
-
diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index a80b81bf1a..0000000000 --- a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Usando múltiples fondos con CSS -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - Ejemplo - - Fondos CSS - - Guía - - Intermedio -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

- -

Especificar fondos múltiples es fácil:

- -
.myclass {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

- -

Ejemplo

- -

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

- -

HTML

- -
<div class="multi_bg_example"></div>
- -

CSS

- -
.multi_bg_example {
-  width: 100%;
-  height: 400px;
-  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-  background-repeat: no-repeat, no-repeat, no-repeat;
-  background-position: bottom right, left, right;
-  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
-}
- -

Resultado

- -

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

- -

{{EmbedLiveSample('Example','100%','400')}}

- -

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.

- -

Véase también

- - diff --git a/files/es/web/css/css_backgrounds_and_borders/index.html b/files/es/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..59c2117194 --- /dev/null +++ b/files/es/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,155 @@ +--- +title: CSS Background and Borders +slug: Web/CSS/CSS_Background_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - CSS Reference + - NeedsTranslation + - Overview + - TopicStub +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +

{{CSSRef}}

+ +

CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+ +

Reference

+ +

CSS Properties

+ +
+ +
+ +

Guides

+ +
+
Using CSS multiple backgrounds
+
Explains how to set backgrounds on elements and how they will interact with it.
+
Scaling background images
+
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0
+
diff --git a/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..a80b81bf1a --- /dev/null +++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,57 @@ +--- +title: Usando múltiples fondos con CSS +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - Ejemplo + - Fondos CSS + - Guía + - Intermedio +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

Con CSS3, puedes aplicar múltiple fondos a los elementos. Estos se presentan uno encima del otro, poniendo el primer fondo definido hasta arriba, y el último, hasta abajo. Sólo el último fondo puede incluir color de fondo.

+ +

Especificar fondos múltiples es fácil:

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

Puedes hacerlo con la propiedad atajo {{ cssxref("background") }} y con las propiedades individuales, excepto {{ cssxref("background-color") }}. Es decir, las siguientes propiedades pueden ser especificadas como lista, una por cada fondo: {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}.

+ +

Ejemplo

+ +

En este ejemplo, tres fondos son apilados: el logo de Firefox, un gradiente lineal, y una imagen de burbujas:

+ +

HTML

+ +
<div class="multi_bg_example"></div>
+ +

CSS

+ +
.multi_bg_example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-position: bottom right, left, right;
+  background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+}
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, intenta con el botón TIdy en la sección de CSS)

+ +

{{EmbedLiveSample('Example','100%','400')}}

+ +

Como puedes ver aquí, el logo de Firefox (primero enlistado) está hasta arriba, seguido por el gradiente, que está presentado encima del fondo de burbujas. Cada subpropiedad subsecuente ({{ cssxref("background-repeat") }} y {{ cssxref("background-position") }}) aplican a los fondos correspondientes. Así, el primer valor en la lista para {{ cssxref("background-repeat") }} aplica al primer fondo (el de hasta arriba), etc.

+ +

Véase también

+ + diff --git a/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..b59b5f677d --- /dev/null +++ b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,39 @@ +--- +title: Uso de URL como valor de la propiedad cursor +slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) soporta el uso de URLs como valores para la propiedad cursor (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.

+

Sintaxis

+

La sintaxis de esta propiedad es:

+
cursor: [<url>,]* cursor-genérico;
+
+

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. help o pointer.

+

Los siguientes valores están permitidos:

+
cursor: url(foo.cur), url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), help;
+
+

Primero se intentará cargar foo.cur. Si este archivo no existe o no es válido por alguna otra razón, se probará con firefox.jpg, y si este tampoco puede ser cargado, se usará help.

+

El soporte a la sintaxis de CSS3 para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.

+

Un ejemplo de la sintaxis CSS3:

+
cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), auto;
+
+cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg) 90 90, auto;
+
+


+ El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).

+

Limitaciones

+

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

+

Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).

+

Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.

+

Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

+

Compatibilidad con otros navegadores

+

Microsoft Internet Explorer también soporta URI como valor para la propiedad cursor. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad cursor. Esto significa que declaraciones como:

+
cursor: url(foo.cur);
+
+

O:

+
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+

funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre un cursor genérico al final. : ''To-do: document what MSIE does with CSS 3 hotspot locations''

diff --git a/files/es/web/css/css_box_model/index.html b/files/es/web/css/css_box_model/index.html new file mode 100644 index 0000000000..320800f82e --- /dev/null +++ b/files/es/web/css/css_box_model/index.html @@ -0,0 +1,165 @@ +--- +title: Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja +tags: + - CSS + - Modelo de Caja CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

El modelo de caja CSS  es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

+ +

Referencia

+ +

Propiedades

+ +

Propiedades que controlan el flujo del contenido en una caja.

+ +
+ +
+ +

Propiedades que controlan el tamaño de una caja.

+ +
+ +
+ +

Propiedades que controlan los márgenes de una caja.

+ +
+ +
+ +

Propiedades que controlan los rellenos de una caja

+ +
+ +
+ +

Otras propiedades

+ +
+ +
+ +

Guías y Herramientas

+ +
+
Introduction to the CSS box model
+
Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.
+
Mastering margin collapsing
+
En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.
+
Box-shadow generator
+
Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
diff --git a/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..45571faf77 --- /dev/null +++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,66 @@ +--- +title: Introducción al Modelo de Caja de CSS +slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS +tags: + - CSS + - Guía + - Modelo de Caja + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

+ +

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

+ +

CSS Box model

+ +

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

+ +

Si la propiedad {{cssxref("box-sizing")}} está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height")}}, {{cssxref("min-height")}} y {{cssxref("max-height")}}.

+ +

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

+ +

El espesor del relleno está determinado por las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, y la propiedad abreviada {{cssxref("padding")}}.

+ +

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

+ +

El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.

+ +

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

+ +

El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

+ +

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Aunque está redactado con más precisión, no hay cambio práctico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ + diff --git a/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..dafdf71855 --- /dev/null +++ b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,96 @@ +--- +title: Entendiendo el colapso de margen +slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guía + - Referencia +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

+ +

El colapso de margen ocurre en tres casos básicos:

+ +
+
Hermanos adjacentes
+
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
+
Padre y primer/último hijo
+
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
+
Bloques vacíos
+
Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.
+
+

Cosas a tener en cuenta:

+ + + + +

Ejemplos

+ +

HTML

+ +
<p>El margen inferior de este párrafo está colapsado ....</p>
+<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p>
+
+<div>Este elemento padre contiene dos párrafos!
+  <p>Este párrafo tiene un margen de <code>.4rem</code>  entre él y el texto anterior.</p>
+  <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p>
+</div>
+
+<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

Result

+ +

{{EmbedLiveSample('Ejemplos', 'auto', 350)}}

+ + + +

 

+ + +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
+ +

También puedes ver

+ + + diff --git a/files/es/web/css/css_color/index.html b/files/es/web/css/css_color/index.html new file mode 100644 index 0000000000..ef36d7954b --- /dev/null +++ b/files/es/web/css/css_color/index.html @@ -0,0 +1,120 @@ +--- +title: CSS Colors +slug: Web/CSS/CSS_Colors +tags: + - CSS + - CSS Colors + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +
{{CSSRef}}
+ +

Los colores CSS son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

+ +

Referencia

+ +

Propiedades

+ +
+ +
+ +

Tipos de datos CSS

+ +

{{cssxref("<color>")}}

+ +

Guías

+ +

Ninguna.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

Compatibilidad con navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
+
+ +

Ver también

+ + diff --git a/files/es/web/css/css_colors/color_picker_tool/index.html b/files/es/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..7e7819542d --- /dev/null +++ b/files/es/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3220 @@ +--- +title: Herramienta para seleccionar color +slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color +tags: + - CSS + - Herramientas +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML Content

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS Content

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +

{{CSSRef}}

+ +

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

+ +

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.

+ +

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+ +

 

diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html deleted file mode 100644 index 7e7819542d..0000000000 --- a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html +++ /dev/null @@ -1,3220 +0,0 @@ ---- -title: Herramienta para seleccionar color -slug: Web/CSS/CSS_Colors/Herramienta_para_seleccionar_color -tags: - - CSS - - Herramientas -translation_of: Web/CSS/CSS_Colors/Color_picker_tool ---- -
-

ColorPicker tool

- -

HTML Content

- -
    <div id="container">
-        <div id="palette" class="block">
-            <div id="color-palette"></div>
-            <div id="color-info">
-                <div class="title"> CSS Color </div>
-            </div>
-        </div>
-
-        <div id="picker" class="block">
-            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
-            <div id="picker-samples" sample-id="master"></div>
-            <div id="controls">
-                <div id="delete">
-                    <div id="trash-can"></div>
-                </div>
-                <div id="void-sample" class="icon"></div>
-            </div>
-        </div>
-
-        <div id="canvas" data-tutorial="drop">
-            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
-                data-max="20" data-sensivity="10"></div>
-        </div>
-    </div>
-
-
- -

CSS Content

- -
/*
- * COLOR PICKER TOOL
- */
-
-.ui-color-picker {
-	width: 420px;
-	margin: 0;
-	border: 1px solid #DDD;
-	background-color: #FFF;
-	display: table;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.ui-color-picker .picking-area {
-	width: 198px;
-	height: 198px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: relative;
-	float: left;
-	display: table;
-}
-
-.ui-color-picker .picking-area:hover {
-	cursor: default;
-}
-
-/* HSV format - Hue-Saturation-Value(Brightness) */
-.ui-color-picker .picking-area {
-	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
-
-	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
-				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
-
-	background-color: #F00;
-}
-
-/* HSL format - Hue-Saturation-Lightness */
-.ui-color-picker[data-mode='HSL'] .picking-area {
-	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
-									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
-				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
-	background-color: #F00;
-}
-
-.ui-color-picker .picker {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	border: 1px solid #FFF;
-	position: absolute;
-	top: 45%;
-	left: 45%;
-}
-
-.ui-color-picker .picker:before {
-	width: 8px;
-	height: 8px;
-	content: "";
-	position: absolute;
-	border: 1px solid #999;
-	border-radius: 50%;
-}
-
-.ui-color-picker .hue,
-.ui-color-picker .alpha {
-	width: 198px;
-	height: 28px;
-	margin: 5px;
-	border: 1px solid #FFF;
-	float: left;
-}
-
-.ui-color-picker .hue {
-	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
-	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
-				#00F 66.66%, #F0F 83.33%, #F00 100%);
-}
-
-.ui-color-picker .alpha {
-	border: 1px solid #CCC;
-	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-}
-
-.ui-color-picker .alpha-mask {
-	width: 100%;
-	height: 100%;
-	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
-}
-
-.ui-color-picker .slider-picker {
-	width: 2px;
-	height: 100%;
-	border: 1px solid #777;
-	background-color: #FFF;
-	position: relative;
-	top: -1px;
-}
-
-/* input HSV and RGB */
-
-.ui-color-picker .info {
-	width: 200px;
-	margin: 5px;
-	float: left;
-}
-
-.ui-color-picker .info * {
-	float: left;
-}
-
-.ui-color-picker .input {
-	width: 64px;
-	margin: 5px 2px;
-	float: left;
-}
-
-.ui-color-picker .input .name {
-	height: 20px;
-	width: 30px;
-	text-align: center;
-	font-size: 14px;
-	line-height: 18px;
-	float: left;
-}
-
-.ui-color-picker .input input {
-	width: 30px;
-	height: 18px;
-	margin: 0;
-	padding: 0;
-	border: 1px solid #DDD;
-	text-align: center;
-	float: right;
-
-	-moz-user-select: text;
-	-webkit-user-select: text;
-	-ms-user-select: text;
-}
-
-.ui-color-picker .input[data-topic="lightness"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
-	display: none;
-}
-
-.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
-	display: block;
-}
-
-.ui-color-picker .input[data-topic="alpha"] {
-	margin-top: 10px;
-	width: 93px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > .name {
-	width: 60px;
-}
-
-.ui-color-picker .input[data-topic="alpha"] > input {
-	float: right;
-}
-
-.ui-color-picker .input[data-topic="hexa"] {
-	width: auto;
-	float: right;
-	margin: 6px 8px 0 0;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > .name {
-	display: none;
-}
-
-.ui-color-picker .input[data-topic="hexa"] > input {
-	width: 90px;
-	height: 24px;
-	padding: 2px 0;
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-/* Preview color */
-.ui-color-picker .preview {
-	width: 95px;
-	height: 53px;
-	margin: 5px;
-	margin-top: 10px;
-	border: 1px solid #DDD;
-	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
-	float: left;
-	position: relative;
-}
-
-.ui-color-picker .preview:before {
-	height: 100%;
-	width: 50%;
-	left: 50%;
-	top: 0;
-	content: "";
-	background: #FFF;
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .preview-color {
-	width: 100%;
-	height: 100%;
-	background-color: rgba(255, 0, 0, 0.5);
-	position: absolute;
-	z-index: 1;
-}
-
-.ui-color-picker .switch_mode {
-	width: 10px;
-	height: 20px;
-	position: relative;
-	border-radius: 5px 0 0 5px;
-	border: 1px solid #DDD;
-	background-color: #EEE;
-	left: -12px;
-	top: -1px;
-	z-index: 1;
-	transition: all 0.5s;
-}
-
-.ui-color-picker .switch_mode:hover {
-	background-color: #CCC;
-	cursor: pointer;
-}
-
-/*
- * UI Component
- */
-
-.ui-input-slider {
-	height: 20px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	-moz-user-select: none;
-	user-select: none;
-}
-
-.ui-input-slider * {
-	float: left;
-	height: 100%;
-	line-height: 100%;
-}
-
-/* Input Slider */
-
-.ui-input-slider > input {
-	margin: 0;
-	padding: 0;
-	width: 50px;
-	text-align: center;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-.ui-input-slider-info {
-	width: 90px;
-	padding: 0px 10px 0px 0px;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-left, .ui-input-slider-right {
-	width: 16px;
-	cursor: pointer;
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
-}
-
-.ui-input-slider-right {
-	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
-}
-
-.ui-input-slider-name {
-	width: 90px;
-	padding: 0 10px 0 0;
-	text-align: right;
-	text-transform: lowercase;
-}
-
-.ui-input-slider-btn-set {
-	width: 25px;
-	background-color: #2C9FC9;
-	border-radius: 5px;
-	color: #FFF;
-	font-weight: bold;
-	line-height: 14px;
-	text-align: center;
-}
-
-.ui-input-slider-btn-set:hover {
-	background-color: #379B4A;
-	cursor: pointer;
-}
-
-/*
- * COLOR PICKER TOOL
- */
-
-body {
-	max-width: 1000px;
-	margin: 0 auto;
-
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-
-	box-shadow: 0 0 5px 0 #999;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-
-}
-
-/**
- * Resize Handle
- */
-.resize-handle {
-	width: 10px;
-	height: 10px;
-	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
-	position: absolute;
-	bottom: 0;
-	right: 0;
-}
-
-[data-resize='both']:hover {
-	cursor: nw-resize !important;
-}
-
-[data-resize='width']:hover {
-	cursor: w-resize !important;
-}
-
-[data-resize='height']:hover {
-	cursor: n-resize !important;
-}
-
-[data-hidden='true'] {
-	display: none;
-}
-
-[data-collapsed='true'] {
-	height: 0 !important;
-}
-
-.block {
-	display: table;
-}
-
-
-/**
- * 	Container
- */
-#container {
-	width: 100%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	display: table;
-}
-
-/**
- * 	Picker Zone
- */
-
-#picker {
-	padding: 10px;
-	width: 980px;
-}
-
-.ui-color-picker {
-	padding: 3px 5px;
-	float: left;
-	border-color: #FFF;
-}
-
-.ui-color-picker .switch_mode {
-	display: none;
-}
-
-.ui-color-picker .preview-color:hover {
-	cursor: move;
-}
-
-/**
- * Picker Container
- */
-
-#picker-samples {
-	width: 375px;
-	height: 114px;
-	max-height: 218px;
-	margin: 0 10px 0 30px;
-	overflow: hidden;
-	position: relative;
-	float: left;
-
-	transition: all 0.2s;
-}
-
-#picker-samples .sample {
-	width: 40px;
-	height: 40px;
-	margin: 5px;
-	border: 1px solid #DDD;
-	position: absolute;
-	float: left;
-	transition: all 0.2s;
-}
-
-#picker-samples .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#picker-samples .sample[data-active='true'] {
-	border-color: #999;
-}
-
-#picker-samples .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#picker-samples #add-icon {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	box-shadow: inset 0px 0px 2px 0px #DDD;
-}
-
-#picker-samples #add-icon:hover {
-	cursor: pointer;
-	border-color: #DDD;
-	box-shadow: inset 0px 0px 5px 0px #CCC;
-}
-
-#picker-samples #add-icon:before,
-#picker-samples #add-icon:after {
-	content: "";
-	position: absolute;
-	background-color: #EEE;
-	box-shadow: 0 0 1px 0 #EEE;
-}
-
-#picker-samples #add-icon:before {
-	width: 70%;
-	height: 16%;
-	top: 42%;
-	left: 15%;
-}
-
-#picker-samples #add-icon:after {
-	width: 16%;
-	height: 70%;
-	top: 15%;
-	left: 42%;
-}
-
-#picker-samples #add-icon:hover:before,
-#picker-samples #add-icon:hover:after {
-	background-color: #DDD;
-	box-shadow: 0 0 1px 0 #DDD;
-}
-
-/**
- * 	Controls
- */
-
-#controls {
-	width: 110px;
-	padding: 10px;
-	float: right;
-}
-
-#controls #picker-switch {
-	text-align: center;
-	float: left;
-}
-
-#controls .icon {
-	width: 48px;
-	height: 48px;
-	margin: 10px 0;
-	background-repeat: no-repeat;
-	background-position: center;
-	border: 1px solid #DDD;
-	display: table;
-	float: left;
-}
-
-#controls .icon:hover {
-	cursor: pointer;
-}
-
-#controls .picker-icon {
-	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
-}
-
-#controls #void-sample {
-	margin-right: 10px;
-	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
-	background-position: center left;
-}
-
-#controls #void-sample[data-active='true'] {
-	border-color: #CCC;
-	background-position: center right;
-}
-
-#controls .switch {
-	width: 106px;
-	padding: 1px;
-	border: 1px solid #CCC;
-	font-size: 14px;
-	text-align: center;
-	line-height: 24px;
-	overflow: hidden;
-	float: left;
-}
-
-#controls .switch:hover {
-	cursor: pointer;
-}
-
-#controls .switch > * {
-	width: 50%;
-	padding: 2px 0;
-	background-color: #EEE;
-	float: left;
-}
-
-#controls .switch [data-active='true'] {
-	color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-color: #777;
-}
-
-/**
- * 	Trash Can
- */
-
-#delete {
-	width: 100%;
-	height: 94px;
-	background-color: #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-
-	text-align: center;
-	color: #777;
-
-	position: relative;
-	float: right;
-}
-
-#delete #trash-can {
-	width: 80%;
-	height: 80%;
-	border: 2px dashed #FFF;
-	border-radius: 5px;
-	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
-
-	position: absolute;
-	top: 10%;
-	left: 10%;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-
-	transition: all 0.2s;
-}
-
-#delete[drag-state='enter'] {
-	background-color: #999;
-}
-
-/**
- * 	Color Theme
- */
-
-#color-theme {
-	margin: 0 8px 0 0;
-	border: 1px solid #EEE;
-	display: inline-block;
-	float: right;
-}
-
-#color-theme .box {
-	width: 80px;
-	height: 92px;
-	float: left;
-}
-
-/**
- * Color info box
- */
-#color-info {
-	width: 360px;
-	float: left;
-}
-
-#color-info .title {
-	width: 100%;
-	padding: 15px;
-	font-size: 18px;
-	text-align: center;
-	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
-	background-repeat:no-repeat;
-	background-position: center left 30%;
-}
-
-#color-info .copy-container {
-	position: absolute;
-	top: -100%;
-}
-
-#color-info .property {
-	min-width: 280px;
-	height: 30px;
-	margin: 10px 0;
-	text-align: center;
-	line-height: 30px;
-}
-
-#color-info .property > * {
-	float: left;
-}
-
-#color-info .property .type {
-	width: 60px;
-	height: 100%;
-	padding: 0 16px 0 0;
-	text-align: right;
-}
-
-#color-info .property .value {
-	width: 200px;
-	height: 100%;
-	padding: 0 10px;
-	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
-	font-size: 16px;
-	color: #777;
-	text-align: center;
-	background-color: #FFF;
-	border: none;
-}
-
-#color-info .property .value:hover {
-	color: #37994A;
-}
-
-#color-info .property .value:hover + .copy {
-	background-position: center right;
-}
-
-#color-info .property .copy {
-	width: 24px;
-	height: 100%;
-	padding: 0 5px;
-	background-color: #FFF;
-	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
-	background-repeat: no-repeat;
-	background-position: center left;
-	border-left: 1px solid #EEE;
-	text-align: right;
-	float: left;
-}
-
-#color-info .property .copy:hover {
-	background-position: center right;
-}
-
-
-/**
- * 	Color Palette
- */
-
-#palette {
-	width: 1000px;
-	padding: 10px 0;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	background-color: #EEE;
-	color: #777;
-
-	-moz-box-sizing: border-box;
-	-webkit-box-sizing: border-box;
-	box-sizing: border-box;
-}
-
-#color-palette {
-	width: 640px;
-	font-family: Arial, Helvetica, sans-serif;
-	color: #777;
-	float: left;
-}
-
-#color-palette .container {
-	width: 100%;
-	height: 50px;
-	line-height: 50px;
-	overflow: hidden;
-	float: left;
-	transition: all 0.5s;
-}
-
-#color-palette .container > * {
-	float: left;
-}
-
-#color-palette .title {
-	width: 100px;
-	padding: 0 10px;
-	text-align: right;
-	line-height: inherit;
-}
-
-#color-palette .palette {
-	width: 456px;
-	height: 38px;
-	margin: 3px;
-	padding: 3px;
-	display: table;
-	background-color: #FFF;
-}
-
-#color-palette .palette .sample {
-	width: 30px;
-	height: 30px;
-	margin: 3px;
-	position: relative;
-	border: 1px solid #DDD;
-	float: left;
-	transition: all 0.2s;
-}
-
-#color-palette .palette .sample:hover {
-	cursor: pointer;
-	border-color: #BBB;
-	transform: scale(1.15);
-	border-radius: 3px;
-}
-
-#color-palette .controls {
-}
-
-#color-palette .controls > * {
-	float: left;
-}
-
-#color-palette .controls > *:hover {
-	cursor: pointer;
-}
-
-#color-palette .controls .lock {
-	width: 24px;
-	height: 24px;
-	margin: 10px;
-	padding: 3px;
-	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
-	background-repeat: no-repeat;
-	background-position: bottom right;
-}
-
-#color-palette .controls .lock:hover {
-	/*background-image: url('images/unlocked-hover.png');*/
-	background-position: bottom left;
-}
-
-#color-palette .controls .lock[locked-state='true'] {
-	/*background-image: url('images/locked.png');*/
-	background-position: top left ;
-}
-
-#color-palette .controls .lock[locked-state='true']:hover {
-	/*background-image: url('images/lock-hover.png');*/
-	background-position: top right;
-}
-
-/**
- * Canvas
- */
-
-#canvas {
-	width: 100%;
-	height: 300px;
-	min-height: 250px;
-	border-top: 1px solid #DDD;
-	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
-	background-repeat: repeat;
-	position: relative;
-	float: left;
-}
-
-#canvas[data-tutorial='drop'] {
-	text-align: center;
-	font-size: 30px;
-	color: #777;
-}
-
-#canvas[data-tutorial='drop']:before {
-	content: "Drop colors here to compare";
-	width: 40%;
-	padding: 30px 9% 70px 11%;
-
-	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
-	background-repeat: no-repeat;
-	background-position: left 35px top 60%;
-
-	text-align: right;
-
-	border: 3px dashed rgb(221, 221, 221);
-	border-radius: 15px;
-
-	position: absolute;
-	top: 50px;
-	left: 20%;
-}
-
-#canvas[data-tutorial='drop']:after {
-	content: "adjust, change or modify";
-	width: 40%;
-	font-size: 24px;
-	position: absolute;
-	top: 130px;
-	left: 32%;
-	z-index: 2;
-}
-
-#canvas [data-tutorial='dblclick'] {
-	background-color: #999 !important;
-}
-
-#canvas [data-tutorial='dblclick']:before {
-	content: "double click to activate";
-	width: 80px;
-	color: #FFF;
-	position: absolute;
-	top: 10%;
-	left: 20%;
-	z-index: 2;
-}
-
-#canvas .sample {
-	width: 100px;
-	height: 100px;
-	min-width: 20px;
-	min-height: 20px;
-	position: absolute;
-	border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-#canvas .sample:hover {
-	cursor: move;
-}
-
-#canvas .sample[data-active='true']:after {
-	content: "";
-	position: absolute;
-	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
-	width: 100%;
-	height: 12px;
-	top: -12px;
-	z-index: 2;
-}
-
-#canvas .sample:hover > * {
-	cursor: pointer;
-	display: block !important;
-}
-
-#canvas .sample .resize-handle {
-	display: none;
-}
-
-#canvas .sample .pick {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	left: 0;
-	display: none;
-}
-
-#canvas .sample .delete {
-	width: 10px;
-	height: 10px;
-	margin: 5px;
-	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-	display: none;
-}
-
-
-/**
- * Canvas controls
- */
-
-#canvas .toggle-bg {
-	width: 16px;
-	height: 16px;
-	margin: 5px;
-	background: url("images/canvas-controls.png") center left no-repeat;
-	position: absolute;
-	top: 0;
-	right: 0;
-}
-
-#canvas .toggle-bg:hover {
-	cursor: pointer;
-}
-
-#canvas[data-bg='true'] {
-	background: none;
-}
-
-#canvas[data-bg='true'] .toggle-bg {
-	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
-}
-
-#zindex {
-	height: 20px;
-	margin: 5px;
-	font-size: 16px;
-	position: absolute;
-	opacity: 0;
-	top: -10000px;
-	left: 0;
-	color: #777;
-	float: left;
-	transition: opacity 1s;
-}
-
-#zindex input {
-	border: 1px solid #DDD;
-	font-size: 16px;
-	color: #777;
-}
-
-#zindex .ui-input-slider-info {
-	width: 60px;
-}
-
-#zindex[data-active='true'] {
-	top: 0;
-	opacity: 1;
-}
-
-
- -

JavaScript Content

- -
'use strict';
-
-var UIColorPicker = (function UIColorPicker() {
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	var subscribers = [];
-	var pickers = [];
-
-	/**
-	 * RGBA Color class
-	 *
-	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
-	 * @param hue			0-360
-	 * @param saturation	0-100
-	 * @param value 		0-100
-	 * @param lightness		0-100
-	 */
-
-	function Color(color) {
-
-		if(color instanceof Color === true) {
-			this.copy(color);
-			return;
-		}
-
-		this.r = 0;
-		this.g = 0;
-		this.b = 0;
-		this.a = 1;
-		this.hue = 0;
-		this.saturation = 0;
-		this.value = 0;
-		this.lightness = 0;
-		this.format = 'HSV';
-	}
-
-	function RGBColor(r, g, b) {
-		var color = new Color();
-		color.setRGBA(r, g, b, 1);
-		return color;
-	}
-
-	function RGBAColor(r, g, b, a) {
-		var color = new Color();
-		color.setRGBA(r, g, b, a);
-		return color;
-	}
-
-	function HSVColor(h, s, v) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		return color;
-	}
-
-	function HSVAColor(h, s, v, a) {
-		var color = new Color();
-		color.setHSV(h, s, v);
-		color.a = a;
-		return color;
-	}
-
-	function HSLColor(h, s, l) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		return color;
-	}
-
-	function HSLAColor(h, s, l, a) {
-		var color = new Color();
-		color.setHSL(h, s, l);
-		color.a = a;
-		return color;
-	}
-
-	Color.prototype.copy = function copy(obj) {
-		if(obj instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		this.r = obj.r;
-		this.g = obj.g;
-		this.b = obj.b;
-		this.a = obj.a;
-		this.hue = obj.hue;
-		this.saturation = obj.saturation;
-		this.value = obj.value;
-		this.format = '' + obj.format;
-		this.lightness = obj.lightness;
-	};
-
-	Color.prototype.setFormat = function setFormat(format) {
-		if (format === 'HSV')
-			this.format = 'HSV';
-		if (format === 'HSL')
-			this.format = 'HSL';
-	};
-
-	/*========== Methods to set Color Properties ==========*/
-
-	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
-		return (typeof(value) === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 255);
-	};
-
-	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
-		if (this.isValidRGBValue(red) === false ||
-			this.isValidRGBValue(green) === false ||
-			this.isValidRGBValue(blue) === false)
-			return;
-
-			this.r = red | 0;
-			this.g = green | 0;
-			this.b = blue | 0;
-
-		if (this.isValidRGBValue(alpha) === true)
-			this.a = alpha | 0;
-	};
-
-	Color.prototype.setByName = function setByName(name, value) {
-		if (name === 'r' || name === 'g' || name === 'b') {
-			if(this.isValidRGBValue(value) === false)
-				return;
-
-			this[name] = value;
-			this.updateHSX();
-		}
-	};
-
-	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
-		this.hue = hue;
-		this.saturation = saturation;
-		this.lightness = lightness;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHue = function setHue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 359)
-			return;
-		this.hue = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setSaturation = function setSaturation(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.saturation = value;
-		this.updateRGB();
-	};
-
-	Color.prototype.setValue = function setValue(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.value = value;
-		this.HSVtoRGB();
-	};
-
-	Color.prototype.setLightness = function setLightness(value) {
-		if (typeof(value) !== 'number' || isNaN(value) === true ||
-			value < 0 || value > 100)
-			return;
-		this.lightness = value;
-		this.HSLtoRGB();
-	};
-
-	Color.prototype.setHexa = function setHexa(value) {
-		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
-
-		if (valid !== true)
-			return;
-
-		if (value[0] === '#')
-			value = value.slice(1, value.length);
-
-		if (value.length === 3)
-			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
-
-		this.r = parseInt(value.substr(0, 2), 16);
-		this.g = parseInt(value.substr(2, 2), 16);
-		this.b = parseInt(value.substr(4, 2), 16);
-
-		this.alpha	= 1;
-		this.RGBtoHSV();
-	};
-
-	/*========== Conversion Methods ==========*/
-
-	Color.prototype.convertToHSL = function convertToHSL() {
-		if (this.format === 'HSL')
-			return;
-
-		this.setFormat('HSL');
-		this.RGBtoHSL();
-	};
-
-	Color.prototype.convertToHSV = function convertToHSV() {
-		if (this.format === 'HSV')
-			return;
-
-		this.setFormat('HSV');
-		this.RGBtoHSV();
-	};
-
-	/*========== Update Methods ==========*/
-
-	Color.prototype.updateRGB = function updateRGB() {
-		if (this.format === 'HSV') {
-			this.HSVtoRGB();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.HSLtoRGB();
-			return;
-		}
-	};
-
-	Color.prototype.updateHSX = function updateHSX() {
-		if (this.format === 'HSV') {
-			this.RGBtoHSV();
-			return;
-		}
-
-		if (this.format === 'HSL') {
-			this.RGBtoHSL();
-			return;
-		}
-	};
-
-	Color.prototype.HSVtoRGB = function HSVtoRGB() {
-		var sat = this.saturation / 100;
-		var value = this.value / 100;
-		var C = sat * value;
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = value - C;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.HSLtoRGB = function HSLtoRGB() {
-		var sat = this.saturation / 100;
-		var light = this.lightness / 100;
-		var C = sat * (1 - Math.abs(2 * light - 1));
-		var H = this.hue / 60;
-		var X = C * (1 - Math.abs(H % 2 - 1));
-		var m = light - C/2;
-		var precision = 255;
-
-		C = (C + m) * precision | 0;
-		X = (X + m) * precision | 0;
-		m = m * precision | 0;
-
-		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
-		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
-		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
-		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
-		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
-		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
-	};
-
-	Color.prototype.RGBtoHSV = function RGBtoHSV() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / cmax;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.value = (cmax * 100) | 0;
-	};
-
-	Color.prototype.RGBtoHSL = function RGBtoHSL() {
-		var red		= this.r / 255;
-		var green	= this.g / 255;
-		var blue	= this.b / 255;
-
-		var cmax = Math.max(red, green, blue);
-		var cmin = Math.min(red, green, blue);
-		var delta = cmax - cmin;
-		var hue = 0;
-		var saturation = 0;
-		var lightness = (cmax + cmin) / 2;
-		var X = (1 - Math.abs(2 * lightness - 1));
-
-		if (delta) {
-			if (cmax === red ) { hue = ((green - blue) / delta); }
-			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
-			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
-			if (cmax) saturation = delta / X;
-		}
-
-		this.hue = 60 * hue | 0;
-		if (this.hue < 0) this.hue += 360;
-		this.saturation = (saturation * 100) | 0;
-		this.lightness = (lightness * 100) | 0;
-	};
-
-	/*========== Get Methods ==========*/
-
-	Color.prototype.getHexa = function getHexa() {
-		var r = this.r.toString(16);
-		var g = this.g.toString(16);
-		var b = this.b.toString(16);
-		if (this.r < 16) r = '0' + r;
-		if (this.g < 16) g = '0' + g;
-		if (this.b < 16) b = '0' + b;
-		var value = '#' + r + g + b;
-		return value.toUpperCase();
-	};
-
-	Color.prototype.getRGBA = function getRGBA() {
-
-		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
-		var a = '';
-		var v = '';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'rgb' + a + rgb + v + ')';
-		return value;
-	};
-
-	Color.prototype.getHSLA = function getHSLA() {
-		if (this.format === 'HSV') {
-			var color = new Color(this);
-			color.setFormat('HSL');
-			color.updateHSX();
-			return color.getHSLA();
-		}
-
-		var a = '';
-		var v = '';
-		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
-		var x = parseFloat(this.a);
-		if (x !== 1) {
-			a = 'a';
-			v = ', ' + x;
-		}
-
-		var value = 'hsl' + a + hsl + v + ')';
-		return value;
-	};
-
-	Color.prototype.getColor = function getColor() {
-		if (this.a | 0 === 1)
-			return this.getHexa();
-		return this.getRGBA();
-	};
-
-	/*=======================================================================*/
-	/*=======================================================================*/
-
-	/*========== Capture Mouse Movement ==========*/
-
-	var setMouseTracking = function setMouseTracking(elem, callback) {
-		elem.addEventListener('mousedown', function(e) {
-			callback(e);
-			document.addEventListener('mousemove', callback);
-		});
-
-		document.addEventListener('mouseup', function(e) {
-			document.removeEventListener('mousemove', callback);
-		});
-	};
-
-	/*====================*/
-	// Color Picker Class
-	/*====================*/
-
-	function ColorPicker(node) {
-		this.color = new Color();
-		this.node = node;
-		this.subscribers = [];
-
-		var type = this.node.getAttribute('data-mode');
-		var topic = this.node.getAttribute('data-topic');
-
-		this.topic = topic;
-		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
-		this.color.setFormat(this.picker_mode);
-
-		this.createPickingArea();
-		this.createHueArea();
-
-		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
-		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
-		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
-		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
-
-		this.createAlphaArea();
-
-		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
-		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
-		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
-
-		this.createPreviewBox();
-		this.createChangeModeButton();
-
-		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
-		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
-
-		this.setColor(this.color);
-		pickers[topic] = this;
-	}
-
-	/*************************************************************************/
-	//				Function for generating the color-picker
-	/*************************************************************************/
-
-	ColorPicker.prototype.createPickingArea = function createPickingArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'picking-area';
-		picker.className = 'picker';
-
-		this.picking_area = area;
-		this.color_picker = picker;
-		setMouseTracking(area, this.updateColor.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createHueArea = function createHueArea() {
-		var area = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'hue';
-		picker.className ='slider-picker';
-
-		this.hue_area = area;
-		this.hue_picker = picker;
-		setMouseTracking(area, this.updateHueSlider.bind(this));
-
-		area.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
-		var area = document.createElement('div');
-		var mask = document.createElement('div');
-		var picker = document.createElement('div');
-
-		area.className = 'alpha';
-		mask.className = 'alpha-mask';
-		picker.className = 'slider-picker';
-
-		this.alpha_area = area;
-		this.alpha_mask = mask;
-		this.alpha_picker = picker;
-		setMouseTracking(area, this.updateAlphaSlider.bind(this));
-
-		area.appendChild(mask);
-		mask.appendChild(picker);
-		this.node.appendChild(area);
-	};
-
-	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
-		var preview_box = document.createElement('div');
-		var preview_color = document.createElement('div');
-
-		preview_box.className = 'preview';
-		preview_color.className = 'preview-color';
-
-		this.preview_color = preview_color;
-
-		preview_box.appendChild(preview_color);
-		this.node.appendChild(preview_box);
-	};
-
-	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
-		var wrapper = document.createElement('div');
-		var input = document.createElement('input');
-		var info = document.createElement('span');
-
-		wrapper.className = 'input';
-		wrapper.setAttribute('data-topic', topic);
-		info.textContent = title;
-		info.className = 'name';
-		input.setAttribute('type', 'text');
-
-		wrapper.appendChild(info);
-		wrapper.appendChild(input);
-		this.node.appendChild(wrapper);
-
-		input.addEventListener('change', onChangeFunc);
-		input.addEventListener('click', function() {
-			this.select();
-		});
-
-		this.subscribe(topic, function(value) {
-			input.value = value;
-		});
-	};
-
-	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
-
-		var button = document.createElement('div');
-		button.className = 'switch_mode';
-		button.addEventListener('click', function() {
-			if (this.picker_mode === 'HSV')
-				this.setPickerMode('HSL');
-			else
-				this.setPickerMode('HSV');
-
-		}.bind(this));
-
-		this.node.appendChild(button);
-	};
-
-	/*************************************************************************/
-	//					Updates properties of UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updateColor = function updateColor(e) {
-		var x = e.pageX - this.picking_area.offsetLeft;
-		var y = e.pageY - this.picking_area.offsetTop;
-		var picker_offset = 5;
-
-		// width and height should be the same
-		var size = this.picking_area.clientWidth;
-
-		if (x > size) x = size;
-		if (y > size) y = size;
-		if (x < 0) x = 0;
-		if (y < 0) y = 0;
-
-		var value = 100 - (y * 100 / size) | 0;
-		var saturation = x * 100 / size | 0;
-
-		if (this.picker_mode === 'HSV')
-			this.color.setHSV(this.color.hue, saturation, value);
-		if (this.picker_mode === 'HSL')
-			this.color.setHSL(this.color.hue, saturation, value);
-
-		this.color_picker.style.left = x - picker_offset + 'px';
-		this.color_picker.style.top = y - picker_offset + 'px';
-
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('value', value);
-		this.notify('lightness', value);
-		this.notify('saturation', saturation);
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
-		var x = e.pageX - this.hue_area.offsetLeft;
-		var width = this.hue_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		// TODO 360 => 359
-		var hue = ((359 * x) / width) | 0;
-		// if (hue === 360) hue = 359;
-
-		this.updateSliderPosition(this.hue_picker, x);
-		this.setHue(hue);
-	};
-
-	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
-		var x = e.pageX - this.alpha_area.offsetLeft;
-		var width = this.alpha_area.clientWidth;
-
-		if (x < 0) x = 0;
-		if (x > width) x = width;
-
-		this.color.a = (x / width).toFixed(2);
-
-		this.updateSliderPosition(this.alpha_picker, x);
-		this.updatePreviewColor();
-
-		this.notify('alpha', this.color.a);
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setHue = function setHue(value) {
-		this.color.setHue(value);
-
-		this.updatePickerBackground();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-		this.notify('hue', this.color.hue);
-
-		notify(this.topic, this.color);
-	};
-
-	// Updates when one of Saturation/Value/Lightness changes
-	ColorPicker.prototype.updateSLV = function updateSLV() {
-		this.updatePickerPosition();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-		this.notify('hexa', this.color.getHexa());
-
-		notify(this.topic, this.color);
-	};
-
-	/*************************************************************************/
-	//				Update positions of various UI elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
-		var size = this.picking_area.clientWidth;
-		var value = 0;
-		var offset = 5;
-
-		if (this.picker_mode === 'HSV')
-			value = this.color.value;
-		if (this.picker_mode === 'HSL')
-			value = this.color.lightness;
-
-		var x = (this.color.saturation * size / 100) | 0;
-		var y = size - (value * size / 100) | 0;
-
-		this.color_picker.style.left = x - offset + 'px';
-		this.color_picker.style.top = y - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
-		elem.style.left = Math.max(pos - 3, -2) + 'px';
-	};
-
-	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
-		var size = this.hue_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.hue * size / 360 ) | 0;
-		this.hue_picker.style.left = pos - offset + 'px';
-	};
-
-	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
-		var size = this.alpha_area.clientWidth;
-		var offset = 1;
-		var pos = (this.color.a * size) | 0;
-		this.alpha_picker.style.left = pos - offset + 'px';
-	};
-
-	/*************************************************************************/
-	//						Update background colors
-	/*************************************************************************/
-
-	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
-		var nc = new Color(this.color);
-		nc.setHSV(nc.hue, 100, 100);
-		this.picking_area.style.backgroundColor = nc.getHexa();
-	};
-
-	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
-		this.alpha_mask.style.backgroundColor = this.color.getHexa();
-	};
-
-	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
-		this.preview_color.style.backgroundColor = this.color.getColor();
-	};
-
-	/*************************************************************************/
-	//						Update input elements
-	/*************************************************************************/
-
-	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
-		var value = parseInt(e.target.value);
-		this.setHue(value);
-		this.updateHuePicker();
-	};
-
-	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
-		var value = parseInt(e.target.value);
-		this.color.setSaturation(value);
-		e.target.value = this.color.saturation;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setValue(value);
-		e.target.value = this.color.value;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
-		var value = parseInt(e.target.value);
-		this.color.setLightness(value);
-		e.target.value = this.color.lightness;
-		this.updateSLV();
-	};
-
-	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('r', value);
-		e.target.value = this.color.r;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('g', value);
-		e.target.value = this.color.g;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
-		var value = parseInt(e.target.value);
-		this.color.setByName('b', value);
-		e.target.value = this.color.b;
-		this.setColor(this.color);
-	};
-
-	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
-		var value = parseFloat(e.target.value);
-
-		if (typeof value === 'number' && isNaN(value) === false &&
-			value >= 0 && value <= 1)
-			this.color.a = value.toFixed(2);
-
-		e.target.value = this.color.a;
-		this.updateAlphaPicker();
-	};
-
-	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
-		var value = e.target.value;
-		this.color.setHexa(value);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//							Internal Pub/Sub
-	/*************************************************************************/
-
-	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
-		this.subscribers[topic] = callback;
-	};
-
-	ColorPicker.prototype.notify = function notify(topic, value) {
-		if (this.subscribers[topic])
-			this.subscribers[topic](value);
-	};
-
-	/*************************************************************************/
-	//							Set Picker Properties
-	/*************************************************************************/
-
-	ColorPicker.prototype.setColor = function setColor(color) {
-		if(color instanceof Color !== true) {
-			console.log('Typeof parameter not Color');
-			return;
-		}
-
-		if (color.format !== this.picker_mode) {
-			color.setFormat(this.picker_mode);
-			color.updateHSX();
-		}
-
-		this.color.copy(color);
-		this.updateHuePicker();
-		this.updatePickerPosition();
-		this.updatePickerBackground();
-		this.updateAlphaPicker();
-		this.updateAlphaGradient();
-		this.updatePreviewColor();
-
-		this.notify('red', this.color.r);
-		this.notify('green', this.color.g);
-		this.notify('blue', this.color.b);
-
-		this.notify('hue', this.color.hue);
-		this.notify('saturation', this.color.saturation);
-		this.notify('value', this.color.value);
-		this.notify('lightness', this.color.lightness);
-
-		this.notify('alpha', this.color.a);
-		this.notify('hexa', this.color.getHexa());
-		notify(this.topic, this.color);
-	};
-
-	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
-		if (mode !== 'HSV' && mode !== 'HSL')
-			return;
-
-		this.picker_mode = mode;
-		this.node.setAttribute('data-mode', this.picker_mode);
-		this.setColor(this.color);
-	};
-
-	/*************************************************************************/
-	//								UNUSED
-	/*************************************************************************/
-
-	var setPickerMode = function setPickerMode(topic, mode) {
-		if (pickers[topic])
-			pickers[topic].setPickerMode(mode);
-	};
-
-	var setColor = function setColor(topic, color) {
-		if (pickers[topic])
-			pickers[topic].setColor(color);
-	};
-
-	var getColor = function getColor(topic) {
-		if (pickers[topic])
-			return new Color(pickers[topic].color);
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(callback) {
-		subscribers.indexOf(callback);
-		subscribers.splice(index, 1);
-	};
-
-	var notify = function notify(topic, value) {
-		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
-			return;
-
-		var color = new Color(value);
-		for (var i in subscribers[topic])
-			subscribers[topic][i](color);
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-color-picker');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new ColorPicker(elem[i]);
-	};
-
-	return {
-		init : init,
-		Color : Color,
-		RGBColor : RGBColor,
-		RGBAColor : RGBAColor,
-		HSVColor : HSVColor,
-		HSVAColor : HSVAColor,
-		HSLColor : HSLColor,
-		HSLAColor : HSLAColor,
-		setColor : setColor,
-		getColor : getColor,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPickerMode : setPickerMode
-	};
-
-})();
-
-
-
-/**
- * UI-SlidersManager
- */
-
-var InputSliderManager = (function InputSliderManager() {
-
-	var subscribers = {};
-	var sliders = [];
-
-	var InputComponent = function InputComponent(obj) {
-		var input = document.createElement('input');
-		input.setAttribute('type', 'text');
-		input.style.width = 50 + obj.precision * 10 + 'px';
-
-		input.addEventListener('click', function(e) {
-			this.select();
-		});
-
-		input.addEventListener('change', function(e) {
-			var value = parseFloat(e.target.value);
-
-			if (isNaN(value) === true)
-				setValue(obj.topic, obj.value);
-			else
-				setValue(obj.topic, value);
-		});
-
-		return input;
-	};
-
-	var SliderComponent = function SliderComponent(obj, sign) {
-		var slider = document.createElement('div');
-		var startX = null;
-		var start_value = 0;
-
-		slider.addEventListener("click", function(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			setValue(obj.topic, obj.value + obj.step * sign);
-		});
-
-		slider.addEventListener("mousedown", function(e) {
-			startX = e.clientX;
-			start_value = obj.value;
-			document.body.style.cursor = "e-resize";
-
-			document.addEventListener("mouseup", slideEnd);
-			document.addEventListener("mousemove", sliderMotion);
-		});
-
-		var slideEnd = function slideEnd(e) {
-			document.removeEventListener("mousemove", sliderMotion);
-			document.body.style.cursor = "auto";
-			slider.style.cursor = "pointer";
-		};
-
-		var sliderMotion = function sliderMotion(e) {
-			slider.style.cursor = "e-resize";
-			var delta = (e.clientX - startX) / obj.sensivity | 0;
-			var value = delta * obj.step + start_value;
-			setValue(obj.topic, value);
-		};
-
-		return slider;
-	};
-
-	var InputSlider = function(node) {
-		var min		= parseFloat(node.getAttribute('data-min'));
-		var max		= parseFloat(node.getAttribute('data-max'));
-		var step	= parseFloat(node.getAttribute('data-step'));
-		var value	= parseFloat(node.getAttribute('data-value'));
-		var topic	= node.getAttribute('data-topic');
-		var unit	= node.getAttribute('data-unit');
-		var name 	= node.getAttribute('data-info');
-		var sensivity = node.getAttribute('data-sensivity') | 0;
-		var precision = node.getAttribute('data-precision') | 0;
-
-		this.min = isNaN(min) ? 0 : min;
-		this.max = isNaN(max) ? 100 : max;
-		this.precision = precision >= 0 ? precision : 0;
-		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
-		this.topic = topic;
-		this.node = node;
-		this.unit = unit === null ? '' : unit;
-		this.sensivity = sensivity > 0 ? sensivity : 5;
-		value = isNaN(value) ? this.min : value;
-
-		var input = new InputComponent(this);
-		var slider_left  = new SliderComponent(this, -1);
-		var slider_right = new SliderComponent(this,  1);
-
-		slider_left.className = 'ui-input-slider-left';
-		slider_right.className = 'ui-input-slider-right';
-
-		if (name) {
-			var info = document.createElement('span');
-			info.className = 'ui-input-slider-info';
-			info.textContent = name;
-			node.appendChild(info);
-		}
-
-		node.appendChild(slider_left);
-		node.appendChild(input);
-		node.appendChild(slider_right);
-
-		this.input = input;
-		sliders[topic] = this;
-		setValue(topic, value);
-	};
-
-	InputSlider.prototype.setInputValue = function setInputValue() {
-		this.input.value = this.value.toFixed(this.precision) + this.unit;
-	};
-
-	var setValue = function setValue(topic, value, send_notify) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = parseFloat(value.toFixed(slider.precision));
-
-		if (value > slider.max) value = slider.max;
-		if (value < slider.min)	value = slider.min;
-
-		slider.value = value;
-		slider.node.setAttribute('data-value', value);
-
-		slider.setInputValue();
-
-		if (send_notify === false)
-			return;
-
-		notify.call(slider);
-	};
-
-	var setMax = function setMax(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.max = value;
-		setValue(topic, slider.value);
-	};
-
-	var setMin = function setMin(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.min = value;
-		setValue(topic, slider.value);
-	};
-
-	var setUnit = function setUnit(topic, unit) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.unit = unit;
-		setValue(topic, slider.value);
-	};
-
-	var setStep = function setStep(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		slider.step = parseFloat(value);
-		setValue(topic, slider.value);
-	};
-
-	var setPrecision = function setPrecision(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-		slider.precision = value;
-
-		var step = parseFloat(slider.step.toFixed(value));
-		if (step === 0)
-			slider.step = 1 / Math.pow(10, value);
-
-		setValue(topic, slider.value);
-	};
-
-	var setSensivity = function setSensivity(topic, value) {
-		var slider = sliders[topic];
-		if (slider === undefined)
-			return;
-
-		value = value | 0;
-
-		slider.sensivity = value > 0 ? value : 5;
-	};
-
-	var getNode =  function getNode(topic) {
-		return sliders[topic].node;
-	};
-
-	var getPrecision =  function getPrecision(topic) {
-		return sliders[topic].precision;
-	};
-
-	var getStep =  function getStep(topic) {
-		return sliders[topic].step;
-	};
-
-	var subscribe = function subscribe(topic, callback) {
-		if (subscribers[topic] === undefined)
-			subscribers[topic] = [];
-		subscribers[topic].push(callback);
-	};
-
-	var unsubscribe = function unsubscribe(topic, callback) {
-		subscribers[topic].indexOf(callback);
-		subscribers[topic].splice(index, 1);
-	};
-
-	var notify = function notify() {
-		if (subscribers[this.topic] === undefined)
-			return;
-		for (var i = 0; i < subscribers[this.topic].length; i++)
-			subscribers[this.topic][i](this.value);
-	};
-
-	var createSlider = function createSlider(topic, label) {
-		var slider = document.createElement('div');
-		slider.className = 'ui-input-slider';
-		slider.setAttribute('data-topic', topic);
-
-		if (label !== undefined)
-			slider.setAttribute('data-info', label);
-
-		new InputSlider(slider);
-		return slider;
-	};
-
-	var init = function init() {
-		var elem = document.querySelectorAll('.ui-input-slider');
-		var size = elem.length;
-		for (var i = 0; i < size; i++)
-			new InputSlider(elem[i]);
-	};
-
-	return {
-		init : init,
-		setMax : setMax,
-		setMin : setMin,
-		setUnit : setUnit,
-		setStep : setStep,
-		getNode : getNode,
-		getStep : getStep,
-		setValue : setValue,
-		subscribe : subscribe,
-		unsubscribe : unsubscribe,
-		setPrecision : setPrecision,
-		setSensivity : setSensivity,
-		getPrecision : getPrecision,
-		createSlider : createSlider,
-	};
-
-})();
-
-
-'use strict';
-
-window.addEventListener("load", function() {
-	ColorPickerTool.init();
-});
-
-var ColorPickerTool = (function ColorPickerTool() {
-
-	/*========== Get DOM Element By ID ==========*/
-
-	function getElemById(id) {
-		return document.getElementById(id);
-	}
-
-	function allowDropEvent(e) {
-		e.preventDefault();
-	}
-
-	/*========== Make an element resizable relative to it's parent ==========*/
-
-	var UIComponent = (function UIComponent() {
-
-		function makeResizable(elem, axis) {
-			var valueX = 0;
-			var valueY = 0;
-			var action = 0;
-
-			var resizeStart = function resizeStart(e) {
-				e.stopPropagation();
-				e.preventDefault();
-				if (e.button !== 0)
-					return;
-
-				valueX = e.clientX - elem.clientWidth;
-				valueY = e.clientY - elem.clientHeight;
-
-				document.body.setAttribute('data-resize', axis);
-				document.addEventListener('mousemove', mouseMove);
-				document.addEventListener('mouseup', resizeEnd);
-			};
-
-			var mouseMove = function mouseMove(e) {
-				if (action >= 0)
-					elem.style.width = e.clientX - valueX + 'px';
-				if (action <= 0)
-					elem.style.height = e.clientY - valueY + 'px';
-			};
-
-			var resizeEnd = function resizeEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.body.removeAttribute('data-resize', axis);
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('mouseup', resizeEnd);
-			};
-
-			var handle = document.createElement('div');
-			handle.className = 'resize-handle';
-
-			if (axis === 'width') action = 1;
-			else if (axis === 'height') action = -1;
-			else axis = 'both';
-
-			handle.className = 'resize-handle';
-			handle.setAttribute('data-resize', axis);
-			handle.addEventListener('mousedown', resizeStart);
-			elem.appendChild(handle);
-		};
-
-		/*========== Make an element draggable relative to it's parent ==========*/
-
-		var makeDraggable = function makeDraggable(elem, endFunction) {
-
-			var offsetTop;
-			var offsetLeft;
-
-			elem.setAttribute('data-draggable', 'true');
-
-			var dragStart = function dragStart(e) {
-				e.preventDefault();
-				e.stopPropagation();
-
-				if (e.target.getAttribute('data-draggable') !== 'true' ||
-					e.target !== elem || e.button !== 0)
-					return;
-
-				offsetLeft = e.clientX - elem.offsetLeft;
-				offsetTop = e.clientY - elem.offsetTop;
-
-				document.addEventListener('mousemove', mouseDrag);
-				document.addEventListener('mouseup', dragEnd);
-			};
-
-			var dragEnd = function dragEnd(e) {
-				if (e.button !== 0)
-					return;
-
-				document.removeEventListener('mousemove', mouseDrag);
-				document.removeEventListener('mouseup', dragEnd);
-			};
-
-			var mouseDrag = function mouseDrag(e) {
-				elem.style.left = e.clientX - offsetLeft + 'px';
-				elem.style.top = e.clientY - offsetTop + 'px';
-			};
-
-			elem.addEventListener('mousedown', dragStart, false);
-		};
-
-		return {
-			makeResizable : makeResizable,
-			makeDraggable : makeDraggable
-		};
-
-	})();
-
-	/*========== Color Class ==========*/
-
-	var Color = UIColorPicker.Color;
-	var HSLColor = UIColorPicker.HSLColor;
-
-	/**
-	 * ColorPalette
-	 */
-	var ColorPalette = (function ColorPalette() {
-
-		var samples = [];
-		var color_palette;
-		var complementary;
-
-		var hideNode = function(node) {
-			node.setAttribute('data-hidden', 'true');
-		};
-
-		var ColorSample = function ColorSample(id) {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = new Color();
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('click', this.pickColor.bind(this));
-
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
-			this.color.copy(color);
-			var hue = (steps * degree + this.color.hue) % 360;
-			if (hue < 0) hue += 360;
-			this.color.setHue(hue);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
-			var saturation = color.saturation + value * steps;
-			if (saturation <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setSaturation(saturation);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
-			var lightness = color.lightness + value * steps;
-			if (lightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setLightness(lightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
-			var brightness = color.value + value * steps;
-			if (brightness <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.setValue(brightness);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
-			var alpha = parseFloat(color.a) + value * steps;
-			if (alpha <= 0) {
-				this.node.setAttribute('data-hidden', 'true');
-				return;
-			}
-			this.node.removeAttribute('data-hidden');
-			this.color.copy(color);
-			this.color.a = parseFloat(alpha.toFixed(2));
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.pickColor = function pickColor() {
-			UIColorPicker.setColor('picker', this.color);
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'palette-samples');
-		};
-
-		var Palette = function Palette(text, size) {
-			this.samples = [];
-			this.locked = false;
-
-			var palette = document.createElement('div');
-			var title = document.createElement('div');
-			var controls = document.createElement('div');
-			var container = document.createElement('div');
-			var lock = document.createElement('div');
-
-			container.className = 'container';
-			title.className = 'title';
-			palette.className = 'palette';
-			controls.className = 'controls';
-			lock.className = 'lock';
-			title.textContent = text;
-
-			controls.appendChild(lock);
-			container.appendChild(title);
-			container.appendChild(controls);
-			container.appendChild(palette);
-
-			lock.addEventListener('click', function () {
-				this.locked = !this.locked;
-				lock.setAttribute('locked-state', this.locked);
-			}.bind(this));
-
-			for(var i = 0; i < size; i++) {
-				var sample = new ColorSample();
-				this.samples.push(sample);
-				palette.appendChild(sample.node);
-			}
-
-			this.container = container;
-			this.title = title;
-		};
-
-		var createHuePalette = function createHuePalette() {
-			var palette = new Palette('Hue', 12);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 12; i++) {
-					palette.samples[i].updateHue(color, 30, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var createSaturationPalette = function createSaturationPalette() {
-			var palette = new Palette('Saturation', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 11; i++) {
-					palette.samples[i].updateSaturation(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		/* Brightness or Lightness - depends on the picker mode */
-		var createVLPalette = function createSaturationPalette() {
-			var palette = new Palette('Lightness', 11);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				if(color.format === 'HSL') {
-					palette.title.textContent = 'Lightness';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateLightness(color, -10, i);
-				}
-				else {
-					palette.title.textContent = 'Value';
-					for(var i = 0; i < 11; i++)
-						palette.samples[i].updateBrightness(color, -10, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var isBlankPalette = function isBlankPalette(container, value) {
-			if (value === 0) {
-				container.setAttribute('data-collapsed', 'true');
-				return true;
-			}
-
-			container.removeAttribute('data-collapsed');
-			return false;
-		};
-
-		var createAlphaPalette = function createAlphaPalette() {
-			var palette = new Palette('Alpha', 10);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (palette.locked === true)
-					return;
-
-				for(var i = 0; i < 10; i++) {
-					palette.samples[i].updateAlpha(color, -0.1, i);
-				}
-			});
-
-			color_palette.appendChild(palette.container);
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var init = function init() {
-			color_palette = getElemById('color-palette');
-
-			createHuePalette();
-			createSaturationPalette();
-			createVLPalette();
-			createAlphaPalette();
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor
-		};
-
-	})();
-
-	/**
-	 * ColorInfo
-	 */
-	var ColorInfo = (function ColorInfo() {
-
-		var info_box;
-		var select;
-		var RGBA;
-		var HEXA;
-		var HSLA;
-
-		var updateInfo = function updateInfo(color) {
-			if (color.a | 0 === 1) {
-				RGBA.info.textContent = 'RGB';
-				HSLA.info.textContent = 'HSL';
-			}
-			else {
-				RGBA.info.textContent = 'RGBA';
-				HSLA.info.textContent = 'HSLA';
-			}
-
-			RGBA.value.value = color.getRGBA();
-			HSLA.value.value = color.getHSLA();
-			HEXA.value.value = color.getHexa();
-		};
-
-		var InfoProperty = function InfoProperty(info) {
-
-			var node = document.createElement('div');
-			var title = document.createElement('div');
-			var value = document.createElement('input');
-			var copy = document.createElement('div');
-
-			node.className = 'property';
-			title.className = 'type';
-			value.className = 'value';
-			copy.className = 'copy';
-
-			title.textContent = info;
-			value.setAttribute('type', 'text');
-
-			copy.addEventListener('click', function() {
-				value.select();
-			});
-
-			node.appendChild(title);
-			node.appendChild(value);
-			node.appendChild(copy);
-
-			this.node = node;
-			this.value = value;
-			this.info = title;
-
-			info_box.appendChild(node);
-		};
-
-		var init = function init() {
-
-			info_box = getElemById('color-info');
-
-			RGBA = new InfoProperty('RGBA');
-			HSLA = new InfoProperty('HSLA');
-			HEXA = new InfoProperty('HEXA');
-
-			UIColorPicker.subscribe('picker', updateInfo);
-
-		};
-
-		return {
-			init: init
-		};
-
-	})();
-
-	/**
-	 * ColorPicker Samples
-	 */
-	var ColorPickerSamples = (function ColorPickerSamples() {
-
-		var samples = [];
-		var nr_samples = 0;
-		var active = null;
-		var container = null;
-		var	samples_per_line = 10;
-		var trash_can = null;
-		var base_color = new HSLColor(0, 50, 100);
-		var add_btn;
-		var add_btn_pos;
-
-		var ColorSample = function ColorSample() {
-			var node = document.createElement('div');
-			node.className = 'sample';
-
-			this.uid = samples.length;
-			this.index = nr_samples++;
-			this.node = node;
-			this.color = new Color(base_color);
-
-			node.setAttribute('sample-id', this.uid);
-			node.setAttribute('draggable', 'true');
-
-			node.addEventListener('dragstart', this.dragStart.bind(this));
-			node.addEventListener('dragover' , allowDropEvent);
-			node.addEventListener('drop'     , this.dragDrop.bind(this));
-
-			this.updatePosition(this.index);
-			this.updateBgColor();
-			samples.push(this);
-		};
-
-		ColorSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		ColorSample.prototype.updatePosition = function updatePosition(index) {
-			this.index = index;
-			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
-			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
-			this.node.style.top  = this.posY + 'px';
-			this.node.style.left = this.posX + 'px';
-		};
-
-		ColorSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.activate = function activate() {
-			UIColorPicker.setColor('picker', this.color);
-			this.node.setAttribute('data-active', 'true');
-		};
-
-		ColorSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-		};
-
-		ColorSample.prototype.dragStart = function dragStart(e) {
-			e.dataTransfer.setData('sampleID', this.uid);
-			e.dataTransfer.setData('location', 'picker-samples');
-		};
-
-		ColorSample.prototype.dragDrop = function dragDrop(e) {
-			e.stopPropagation();
-			this.color = Tool.getSampleColorFrom(e);
-			this.updateBgColor();
-		};
-
-		ColorSample.prototype.deleteSample = function deleteSample() {
-			container.removeChild(this.node);
-			samples[this.uid] = null;
-			nr_samples--;
-		};
-
-		var updateUI = function updateUI() {
-			updateContainerProp();
-
-			var index = 0;
-			var nr = samples.length;
-			for (var i=0; i < nr; i++)
-				if (samples[i] !== null) {
-					samples[i].updatePosition(index);
-					index++;
-				}
-
-			AddSampleButton.updatePosition(index);
-		};
-
-		var deleteSample = function deleteSample(e) {
-			trash_can.parentElement.setAttribute('drag-state', 'none');
-
-			var location = e.dataTransfer.getData('location');
-			if (location !== 'picker-samples')
-				return;
-
-			var sampleID = e.dataTransfer.getData('sampleID');
-			samples[sampleID].deleteSample();
-			console.log(samples);
-
-			updateUI();
-		};
-
-		var createDropSample = function createDropSample() {
-			var sample = document.createElement('div');
-			sample.id = 'drop-effect-sample';
-			sample.className = 'sample';
-			container.appendChild(sample);
-		};
-
-		var setActivateSample = function setActivateSample(e) {
-			if (e.target.className !== 'sample')
-				return;
-
-			unsetActiveSample(active);
-			Tool.unsetVoidSample();
-			CanvasSamples.unsetActiveSample();
-			active = samples[e.target.getAttribute('sample-id')];
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var getSampleColor = function getSampleColor(id) {
-			if (samples[id] !== undefined && samples[id]!== null)
-				return new Color(samples[id].color);
-		};
-
-		var updateContainerProp = function updateContainerProp() {
-			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
-			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
-			container.style.height = height + 10 + 'px';
-		};
-
-		var AddSampleButton = (function AddSampleButton() {
-			var node;
-			var _index = 0;
-			var _posX;
-			var _posY;
-
-			var updatePosition = function updatePosition(index) {
-				_index = index;
-				_posY = 5 + ((index / samples_per_line) | 0) * 52;
-				_posX = 5 + ((index % samples_per_line) | 0) * 52;
-
-				node.style.top  = _posY + 'px';
-				node.style.left = _posX + 'px';
-			};
-
-			var addButtonClick = function addButtonClick() {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-				updatePosition(_index + 1);
-				updateUI();
-			};
-
-			var init = function init() {
-				node = document.createElement('div');
-				var icon = document.createElement('div');
-
-				node.className = 'sample';
-				icon.id = 'add-icon';
-				node.appendChild(icon);
-				node.addEventListener('click', addButtonClick);
-
-				updatePosition(0);
-				container.appendChild(node);
-			};
-
-			return {
-				init : init,
-				updatePosition : updatePosition
-			};
-		})();
-
-		var init = function init() {
-			container = getElemById('picker-samples');
-			trash_can = getElemById('trash-can');
-
-			AddSampleButton.init();
-
-			for (var i=0; i<16; i++) {
-				var sample = new ColorSample();
-				container.appendChild(sample.node);
-			}
-
-			AddSampleButton.updatePosition(samples.length);
-			updateUI();
-
-			active = samples[0];
-			active.activate();
-
-			container.addEventListener('click', setActivateSample);
-
-			trash_can.addEventListener('dragover', allowDropEvent);
-			trash_can.addEventListener('dragenter', function() {
-				this.parentElement.setAttribute('drag-state', 'enter');
-			});
-			trash_can.addEventListener('dragleave', function(e) {
-				this.parentElement.setAttribute('drag-state', 'none');
-			});
-			trash_can.addEventListener('drop', deleteSample);
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)
-					active.updateColor(color);
-			});
-
-		};
-
-		return {
-			init : init,
-			getSampleColor : getSampleColor,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	/**
-	 * Canvas Samples
-	 */
-	var CanvasSamples = (function CanvasSamples() {
-
-		var active = null;
-		var canvas = null;
-		var samples = [];
-		var zindex = null;
-		var tutorial = true;
-
-		var CanvasSample = function CanvasSample(color, posX, posY) {
-
-			var node = document.createElement('div');
-			var pick = document.createElement('div');
-			var delete_btn = document.createElement('div');
-			node.className = 'sample';
-			pick.className = 'pick';
-			delete_btn.className = 'delete';
-
-			this.uid = samples.length;
-			this.node = node;
-			this.color = color;
-			this.updateBgColor();
-			this.zIndex = 1;
-
-			node.style.top = posY - 50 + 'px';
-			node.style.left = posX - 50 + 'px';
-			node.setAttribute('sample-id', this.uid);
-
-			node.appendChild(pick);
-			node.appendChild(delete_btn);
-
-			var activate = function activate() {
-				setActiveSample(this);
-			}.bind(this);
-
-			node.addEventListener('dblclick', activate);
-			pick.addEventListener('click', activate);
-			delete_btn.addEventListener('click', this.deleteSample.bind(this));
-
-			UIComponent.makeDraggable(node);
-			UIComponent.makeResizable(node);
-
-			samples.push(this);
-			canvas.appendChild(node);
-			return this;
-		};
-
-		CanvasSample.prototype.updateBgColor = function updateBgColor() {
-			this.node.style.backgroundColor = this.color.getColor();
-		};
-
-		CanvasSample.prototype.updateColor = function updateColor(color) {
-			this.color.copy(color);
-			this.updateBgColor();
-		};
-
-		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
-			this.zIndex = value;
-			this.node.style.zIndex = value;
-		};
-
-		CanvasSample.prototype.activate = function activate() {
-			this.node.setAttribute('data-active', 'true');
-			zindex.setAttribute('data-active', 'true');
-
-			UIColorPicker.setColor('picker', this.color);
-			InputSliderManager.setValue('z-index', this.zIndex);
-		};
-
-		CanvasSample.prototype.deactivate = function deactivate() {
-			this.node.removeAttribute('data-active');
-			zindex.removeAttribute('data-active');
-		};
-
-		CanvasSample.prototype.deleteSample = function deleteSample() {
-			if (active === this)
-				unsetActiveSample();
-			canvas.removeChild(this.node);
-			samples[this.uid] = null;
-		};
-
-		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
-			this.node.style.top = posY - this.startY + 'px';
-			this.node.style.left = posX - this.startX + 'px';
-		};
-
-		var canvasDropEvent = function canvasDropEvent(e) {
-			var color = Tool.getSampleColorFrom(e);
-
-			if (color) {
-				var offsetX = e.pageX - canvas.offsetLeft;
-				var offsetY = e.pageY - canvas.offsetTop;
-				var sample = new CanvasSample(color, offsetX, offsetY);
-				if (tutorial) {
-					tutorial = false;
-					canvas.removeAttribute('data-tutorial');
-					var info = new CanvasSample(new Color(), 100, 100);
-					info.node.setAttribute('data-tutorial', 'dblclick');
-				}
-			}
-
-		};
-
-		var setActiveSample = function setActiveSample(sample) {
-			ColorPickerSamples.unsetActiveSample();
-			Tool.unsetVoidSample();
-			unsetActiveSample();
-			active = sample;
-			active.activate();
-		};
-
-		var unsetActiveSample = function unsetActiveSample() {
-			if (active)
-				active.deactivate();
-			active = null;
-		};
-
-		var createToggleBgButton = function createToggleBgButton() {
-			var button = document.createElement('div');
-			var state = false;
-			button.className = 'toggle-bg';
-			canvas.appendChild(button);
-
-			button.addEventListener('click', function() {
-				console.log(state);
-				state = !state;
-				canvas.setAttribute('data-bg', state);
-			});
-		};
-
-		var init = function init() {
-			canvas = getElemById('canvas');
-			zindex = getElemById('zindex');
-
-			canvas.addEventListener('dragover', allowDropEvent);
-			canvas.addEventListener('drop', canvasDropEvent);
-
-			createToggleBgButton();
-
-			UIColorPicker.subscribe('picker', function(color) {
-				if (active)	active.updateColor(color);
-			});
-
-			InputSliderManager.subscribe('z-index', function (value) {
-				if (active)	active.updateZIndex(value);
-			});
-
-			UIComponent.makeResizable(canvas, 'height');
-		};
-
-		return {
-			init : init,
-			unsetActiveSample : unsetActiveSample
-		};
-
-	})();
-
-	var StateButton = function StateButton(node, state) {
-		this.state = false;
-		this.callback = null;
-
-		node.addEventListener('click', function() {
-			this.state = !this.state;
-			if (typeof this.callback === "function")
-				this.callback(this.state);
-		}.bind(this));
-	};
-
-	StateButton.prototype.set = function set() {
-		this.state = true;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.unset = function unset() {
-		this.state = false;
-		if (typeof this.callback === "function")
-			this.callback(this.state);
-	};
-
-	StateButton.prototype.subscribe = function subscribe(func) {
-		this.callback = func;
-	};
-
-
-	/**
-	 * Tool
-	 */
-	var Tool = (function Tool() {
-
-		var samples = [];
-		var controls = null;
-		var void_sw;
-
-		var createPickerModeSwitch = function createPickerModeSwitch() {
-			var parent = getElemById('controls');
-			var icon = document.createElement('div');
-			var button = document.createElement('div');
-			var hsv = document.createElement('div');
-			var hsl = document.createElement('div');
-			var active = null;
-
-			icon.className = 'icon picker-icon';
-			button.className = 'switch';
-			button.appendChild(hsv);
-			button.appendChild(hsl);
-
-			hsv.textContent = 'HSV';
-			hsl.textContent = 'HSL';
-
-			active = hsl;
-			active.setAttribute('data-active', 'true');
-
-			function switchPickingModeTo(elem) {
-				active.removeAttribute('data-active');
-				active = elem;
-				active.setAttribute('data-active', 'true');
-				UIColorPicker.setPickerMode('picker', active.textContent);
-			};
-
-			var picker_sw = new StateButton(icon);
-			picker_sw.subscribe(function() {
-				if (active === hsv)
-					switchPickingModeTo(hsl);
-				else
-					switchPickingModeTo(hsv);
-			});
-
-			hsv.addEventListener('click', function() {
-				switchPickingModeTo(hsv);
-			});
-			hsl.addEventListener('click', function() {
-				switchPickingModeTo(hsl);
-			});
-
-			parent.appendChild(icon);
-			parent.appendChild(button);
-		};
-
-		var setPickerDragAndDrop = function setPickerDragAndDrop() {
-			var preview = document.querySelector('#picker .preview-color');
-			var picking_area = document.querySelector('#picker .picking-area');
-
-			preview.setAttribute('draggable', 'true');
-			preview.addEventListener('drop', drop);
-			preview.addEventListener('dragstart', dragStart);
-			preview.addEventListener('dragover', allowDropEvent);
-
-			picking_area.addEventListener('drop', drop);
-			picking_area.addEventListener('dragover', allowDropEvent);
-
-			function drop(e) {
-				var color = getSampleColorFrom(e);
-				UIColorPicker.setColor('picker', color);
-			};
-
-			function dragStart(e) {
-				e.dataTransfer.setData('sampleID', 'picker');
-				e.dataTransfer.setData('location', 'picker');
-			};
-		};
-
-		var getSampleColorFrom = function getSampleColorFrom(e) {
-			var sampleID = e.dataTransfer.getData('sampleID');
-			var location = e.dataTransfer.getData('location');
-
-			if (location === 'picker')
-				return UIColorPicker.getColor(sampleID);
-			if (location === 'picker-samples')
-				return ColorPickerSamples.getSampleColor(sampleID);
-			if (location === 'palette-samples')
-				return ColorPalette.getSampleColor(sampleID);
-		};
-
-		var setVoidSwitch = function setVoidSwitch() {
-			var void_sample = getElemById('void-sample');
-			void_sw = new StateButton(void_sample);
-			void_sw.subscribe( function (state) {
-				void_sample.setAttribute('data-active', state);
-				if (state === true) {
-					ColorPickerSamples.unsetActiveSample();
-					CanvasSamples.unsetActiveSample();
-				}
-			});
-		};
-
-		var unsetVoidSample = function unsetVoidSample() {
-			void_sw.unset();
-		};
-
-		var init = function init() {
-			controls = getElemById('controls');
-
-			var color = new Color();
-			color.setHSL(0, 51, 51);
-			UIColorPicker.setColor('picker', color);
-
-			setPickerDragAndDrop();
-			createPickerModeSwitch();
-			setVoidSwitch();
-		};
-
-		return {
-			init : init,
-			unsetVoidSample : unsetVoidSample,
-			getSampleColorFrom : getSampleColorFrom
-		};
-
-	})();
-
-	var init = function init() {
-		UIColorPicker.init();
-		InputSliderManager.init();
-		ColorInfo.init();
-		ColorPalette.init();
-		ColorPickerSamples.init();
-		CanvasSamples.init();
-		Tool.init();
-	};
-
-	return {
-		init : init
-	};
-
-})();
-
-
-
- -

{{CSSRef}}

- -

Esta herramienta facilita crear, ajustar, y experimentar con colores personalizados para uso web. Además permite facilmente convertir entre varios formatos de color soportados por CSS, incluyendo: HEXA, RGB y HSL.  También soporta el control de alpha en los formatos RGB (rgba) y HSL (hsla).

- -

Cada color se presenta en los 3 formatos estándar de CSS mientras se ajusta; además,  basada en el color actual, se genera una paleta para HSL y HSV, así como para alpha. El recuadro "eyedropper" se puede cambiar entre los formatos HSL y HSC.

- -

{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

- -

 

diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_colors/index.html deleted file mode 100644 index ef36d7954b..0000000000 --- a/files/es/web/css/css_colors/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: CSS Colors -slug: Web/CSS/CSS_Colors -tags: - - CSS - - CSS Colors - - NeedsTranslation - - Overview - - Reference - - TopicStub -translation_of: Web/CSS/CSS_Color -translation_of_original: Web/CSS/CSS_Colors ---- -
{{CSSRef}}
- -

Los colores CSS son un módulo de CSS que trabaja con colores, tipos de colores y transparencias.

- -

Referencia

- -

Propiedades

- -
- -
- -

Tipos de datos CSS

- -

{{cssxref("<color>")}}

- -

Guías

- -

Ninguna.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
- -

Ver también

- - diff --git a/files/es/web/css/css_columns/index.html b/files/es/web/css/css_columns/index.html new file mode 100644 index 0000000000..949f2eca71 --- /dev/null +++ b/files/es/web/css/css_columns/index.html @@ -0,0 +1,112 @@ +--- +title: Columnas CSS +slug: Web/CSS/Columnas_CSS +tags: + - CSS + - Referencia CSS + - Visión general +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

Columnas CSS es un módulo de CSS que define un diseño multicolumna, permitiendo indicar cómo debe fluir el contenido a través de las columnas y cómo manejar reglas y separaciones.

+ +

Referencia

+ +

Propiedades CSS

+ +
+ +
+ +

Guías

+ +
+
Diseños multicolumna con CSS
+
Tutorial paso a paso sobre cómo desarrollar diseños de varias columnas.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Definición inicial
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatVersionUnknown}} {{property_prefix('-webkit')}}{{CompatGeckoDesktop(9)}}{{property_prefix('-moz')}}1011.10
+ 15{{property_prefix('-webkit')}}		3.0 (522){{property_prefix('-webkit')}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{property_prefix('-webkit')}}{{compatGeckoMobile(22)}}{{property_prefix('-moz')}}1011.5
+ 32{{property_prefix('-webkit')}}		3.2{{property_prefix('-webkit')}}
+
diff --git a/files/es/web/css/css_columns/using_multi-column_layouts/index.html b/files/es/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..8eed415ee2 --- /dev/null +++ b/files/es/web/css/css_columns/using_multi-column_layouts/index.html @@ -0,0 +1,68 @@ +--- +title: Columnas con CSS-3 +slug: Columnas_con_CSS-3 +tags: + - CSS + - Todas_las_Categorías +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

+

+

Introducción

+

Cuando leemos un texto, las líneas muy largas resultan incómodas. Si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas (al ir de un extremo al otro de la página). Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos. Por desgracia esto no es posible con HTML y CSS-2, a no ser que fuerces la ruptura de las columnas en puntos fijos, limites en gran medida el código a utilizar, o uses scripts complejos. +

El borrador de CSS-3 propone algunas nuevas propiedades para dar respuesta a esta necesidad. En Firefox 1.5 y superior hemos implementado algunas de estas propiedades para comportarnos según lo descrito en el borrador de CSS-3 (con una excepción explicada abajo)

El blog de Robert O'Callahan  usa columnas CSS, pruébalo con Firefox 1.5 +

+

Usar Columnas

+

Columnas, Count y Width

+

Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: -moz-column-count y -moz-column-width. +

-moz-column-count indica el número concreto de columnas a crear. Por ejemplo: +

+
<div style="-moz-column-count:2; -moz-column-gap: 1em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior): +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

-moz-column-width fija la anchura mínima de las columnas. Si no se indica un -moz-column-count, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible.

+
<div style="-moz-column-width:20em; -moz-column-gap: 1em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Se visualizará así: +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

Los detalles exactos son descritos en El borrador de CSS3. +

En un bloque multicolumna, el contenido fluye automáticamente de una columna a otra según sea necesario. Todas las funcionalidades de HTML, CSS, y DOM están soportadas dentro de las columnas, tanto al editar como al imprimir. +

+

Equilibrado de altura

+

El borrador de CSS3 especifica que la altura de las columnas debe estar equilibrada, es decir, el navegador debe definir automáticamente la altura máxima de las columnas de modo que la altura del contenido en cada columna sea más o menos igual. Firefox lo hace.

Sin embargo, en algunas situaciones puede ser útil fijar explícitamente la altura máxima de las columnas, y entonces se empiezan a meter los contenidos en la primera columna y se van creando tantas columnas como sea necesario, posiblemente desbordando por la derecha. Por ejemplo, en http://iht.com/ los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS height en un bloque multicolumnas, se permite que cada columna tenga esa altura -y no más- antes de agregar la siguiente columna. Esto permite una composición mucho más eficiente.

+

Espacio entre Columnas

+

Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el padding de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad -moz-column-gap al bloque con multicolumna:

+
<div style="-moz-column-width:20em; -moz-column-gap:2em;">
+Cuando leemos un texto las líneas muy largas resultan incómodas, si son
+demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista
+de la línea en la que estabas. Por ello, pensando en los usuarios con
+monitores grandes, los autores deben limitar la anchura del texto dividiéndolo
+en columnas, más o menos, como hacen los periódicos.</div>
+
+

Se visualizará así: +

+
Cuando leemos un texto las líneas muy largas resultan incómodas, si son demasiado largas, al cambiar de línea nuestros ojos pueden perder la pista de la línea en la que estabas. Por ello, pensando en los usuarios con monitores grandes, los autores deben limitar la anchura del texto dividiéndolo en columnas, más o menos, como hacen los periódicos.
+

Degradado elegante

+

La propiedad -moz-column será ignorada por los navegadores que no la soporten, por lo tanto, es relativamente fácil crear un diseño que en esos navegadores muestre una sola columna, y al mismo tiempo utilice multi-columnas en Firefox 1.5. +

+

Conclusión

+

Las columnas CSS3 son un nuevo método básico de disposición que ayudará a los desarrolladores Web a aprovechar mejor las condiciones reales de la pantalla. Los desarrolladores imaginativos podrán encontrarle muchas aplicaciones, especialmente a la característica de equilibrado automático y dinámico de la altura.

+

Referencias adicionales

+ +

Categorías +

interwiki links +

{{ languages( { "en": "en/CSS3_Columns", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }} diff --git a/files/es/web/css/css_conditional_rules/index.html b/files/es/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..59c2a9b328 --- /dev/null +++ b/files/es/web/css/css_conditional_rules/index.html @@ -0,0 +1,99 @@ +--- +title: CSS Reglas Condicionales +slug: Web/CSS/CSS_Reglas_Condicionales +tags: + - CSS + - Referencia +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

Las Reglas Condicionales (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

+ +

Referencia

+ +

Reglas condicionales

+ +
+ +
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..38e89c7813 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -0,0 +1,227 @@ +--- +title: Conceptos Básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +
{{CSSRef}}
+ +

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

+ +

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

+ +

Los dos ejes de flexbox

+ +

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.

+ +

El eje principal

+ +

El eje principal está definido por flex-direction, que posee cuatro posibles valores:

+ + + +

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de la línea .

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

Al elegir column o column-reverse el eje principal correrá desde el borde superior de la página hasta el final — según la dirección del bloque.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

El eje cruzado

+ +

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction (del eje principal) es row o row-reverse el eje cruzado irá por las columnas.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

Si el eje principal es column o column-reverse entonces el eje cruzado corre a lo largo de las filas.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.

+ +

Líneas de inicio y de fin

+ +

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

+ +

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

+ +

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

+ +

Working in English the start edge is on the left.

+ +

Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.

+ +

The start edge in a RTL language is on the right.

+ +

En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.

+ +

Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.

+ +

El contenedor flex

+ +

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

+ + + +

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

+ +

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

Cambiar flex-direction

+ +

Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction: row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.

+ +

Si cambiamos flex-direction a column el eje principal se cambiará y los ítems aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán nuevamente puestas al revés.

+ +

El ejemplo en vivo de abajo tiene flex-direction puesto como row-reverse. Pruebe los otros valores — row, column y column-reverse — para ver qué sucede con el contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

Contenedores flex Multi-línea con flex-wrap

+ +

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.

+ +

Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

La abreviatura flex-flow

+ +

Se pueden combinar las propiedades flex-direction y flex-wrap en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es flex-direction y el segundo valor es flex-wrap.

+ +

En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para flex-direction - row, row-reverse, column o column-reverse, y cambie también el segundo valor por wrap y nowrap.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

Propiedades aplicadas a los ítems flex

+ +

Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:

+ + + +

Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.

+ +

Antes de darle sentido a estas propiedades debemos considerar el concepto de espacio disponible. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.

+ +

Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.

+ +

This flex container has available space after laying out the items.

+ +

Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades flex que aplicaremos a dichos ítems.

+ +

La propiedad flex-basis

+ +

Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.

+ +

Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.

+ +

La propiedad flex-grow

+ +

Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.

+ +

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.

+ +

Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).

+ +

La propiedad flex-shrink

+ +

Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.

+ +

El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.

+ +
+

Nótese que los valores de flex-grow y flex-shrink son proporciones. Típicamente si pusiéramos todos los ítems flex: 1 1 200px y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: 2 1 200px. Aunque igualmente podemos colocar flex: 10 1 200px y flex: 20 1 200px si quisiéramos.

+
+ +

Valores abreviados para las propiedades flex

+ +

Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación flex permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

+ +

El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es flex-grow. Dándole un valor positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan como valor base para crecer y contraerse.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

+ +

Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:

+ + + +

Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que flex: 0 1 auto. En este caso el valor de flex-grow is 0, así que los ítems no crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.

+ +

Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.

+ +

Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0 0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con flex-basis en auto.

+ +

Una abreviación que es común en tutoriales es flex: 1 o flex: 2  y más. Es como usar flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.

+ +

Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}

+ +

Alineación, justificación y distribución del espacio libre entre ítems

+ +

Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.

+ +

align-items

+ +

La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.

+ +

El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.

+ +

En cambio definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.

+ +

También podemos usar space-between para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un espacio equitativo a la derecha e izquierda de cada ítem.

+ +

Pruebe con los siguientes valores dejustify-content en el ejemplo en vivo:

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.

+ +

Próximos pasos

+ +

Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.

diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html deleted file mode 100644 index 9048cbb739..0000000000 --- a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Casos de uso típicos de Flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

- -

¿Por qué elegir flexbox?

- -

En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en Relación de Flexbox con respecto a otros métodos de diseño, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.

- -

En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.

- - - -

Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.

- -

Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.

- -

Espacio distribuido fuera de los elementos

- -

Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en Alinear elementos en un contenedor flexible, que trata sobre la alineación de elementos en el eje principal.

- -

En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando justify-content: space-between crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor space-around, o, donde sea compatible, space-evenly. También puede usar flex-start para colocar el espacio al final de los elementos, flex-end para colocarlo delante de ellos, o center para centrar los elementos de navegación.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

Espacio distribuido dentro de los elementos

- -

Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en Control la proporción de elementos flexibles a lo largo del eje principal.

- -

Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar flex: auto, que es la abreviatura de flex: 1 1 auto, todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.

- -

En el ejemplo en vivo a continuación, intente cambiar flex: auto a flex: 1. Esta es la abreviatura de flex: 1 1 0 y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- - - -

Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.

- -

Aquí estamos utilizando la técnica de márgenes automáticos descrita en Uso de márgenes automáticos para la alineación del eje principal. Los elementos se alinean en el eje principal con flex-start ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.

- -

También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades gap de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

Centrar elemento

- -

Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.

- -

Puedes jugar con la alineación, alineando el elemento con el inicio con flex-start o al final con flex-end.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice align-items en el elemento principal o apunte el propio elemento de flexión con align-self.

- - - -

Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.

- -

Two card components showing that the internals of the component do not stretch with the wrapper.

- -

Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  {{cssxref ("flex-direction")}} :column. A continuación, configuramos el área de contenido con flex: 1, que es la abreviatura de flex: 1 1 0; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad flex del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

Objetos multimedia

- -

El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.

- -

Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.

- -

En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con flex-start, y luego establezco el elemento flex .content a flex: 1. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar flex: 1 significa que esta parte de la tarjeta puede crecer.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.

- -

Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una flex-basis de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la flex-basis.

- -
.image img {
-  max-width: 100px;
-}
-
- -

También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a flex: 1, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para flex: auto, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para flex: 1 y el lado del contenido para flex: 3. Esto significará que usan una flex-basis de 0, pero distribuye ese espacio a diferentes proporciones según el factor flex-grow que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía Controlando las proporciones de elementos de flexión a lo largo del eje principal.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Volteando el objeto multimedia

- -

Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad flex-direction configurada para row-reverse. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase flipped junto con la clase existente .media. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Controles de formulario

- -

Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.

- -

Conclusión

- -

Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.

- -

Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.

diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html deleted file mode 100644 index 38e89c7813..0000000000 --- a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: Conceptos Básicos de flexbox -slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.

- -

Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del Grid Layout de CSS, el cual controla columnas y filas a la vez.

- -

Los dos ejes de flexbox

- -

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.

- -

El eje principal

- -

El eje principal está definido por flex-direction, que posee cuatro posibles valores:

- - - -

Si elegimos row o row-reverse, el eje principal correrá a lo largo de la fila según la dirección de la línea .

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

Al elegir column o column-reverse el eje principal correrá desde el borde superior de la página hasta el final — según la dirección del bloque.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

El eje cruzado

- -

El eje cruzado va perpendicular al eje principal, y por lo tanto si flex-direction (del eje principal) es row o row-reverse el eje cruzado irá por las columnas.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

Si el eje principal es column o column-reverse entonces el eje cruzado corre a lo largo de las filas.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.

- -

Líneas de inicio y de fin

- -

Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.

- -

Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.

- -

Si flex-direction es row y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.

- -

Working in English the start edge is on the left.

- -

Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.

- -

The start edge in a RTL language is on the right.

- -

En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.

- -

Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.

- -

El contenedor flex

- -

Un área del documento que contiene un flexbox es llamada contendedor flex. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como flex o inline-flex. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven ítems flex. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.

- - - -

El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.

- -

Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

Cambiar flex-direction

- -

Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando flex-direction: row-reverse se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.

- -

Si cambiamos flex-direction a column el eje principal se cambiará y los ítems aparecerán en una columna. Colocando column-reverse las líneas de inicio y fin serán nuevamente puestas al revés.

- -

El ejemplo en vivo de abajo tiene flex-direction puesto como row-reverse. Pruebe los otros valores — row, column y column-reverse — para ver qué sucede con el contenido.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

Contenedores flex Multi-línea con flex-wrap

- -

Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.

- -

Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor wrap. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando flex-wrap se coloca como wrap, los ítems se repartirán. Al colocarlo como nowrap, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar nowrap los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

La abreviatura flex-flow

- -

Se pueden combinar las propiedades flex-direction y flex-wrap en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es flex-direction y el segundo valor es flex-wrap.

- -

En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para flex-direction - row, row-reverse, column o column-reverse, y cambie también el segundo valor por wrap y nowrap.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

Propiedades aplicadas a los ítems flex

- -

Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:

- - - -

Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.

- -

Antes de darle sentido a estas propiedades debemos considerar el concepto de espacio disponible. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.

- -

Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.

- -

This flex container has available space after laying out the items.

- -

Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades flex que aplicaremos a dichos ítems.

- -

La propiedad flex-basis

- -

Con flex-basis se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es auto — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como flex-basis.

- -

Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado display: flex en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.

- -

La propiedad flex-grow

- -

Con la propiedad flex-grow definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de flex-basis. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.

- -

Si le damos a todos los ítems del ejemplo anterior un valor flex-grow de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.

- -

Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor flex-grow de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem  (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).

- -

La propiedad flex-shrink

- -

Así como la propiedad flex-grow se encarga de añadir espacio sobre el eje principal, la propiedad flex-shrink controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y flex-shrink posee un valor entero positivo, el ítem puede contraerse a partir de flex-basis. Así como podemos asignar diferentes valores de flex-grow con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de flex-shrink se contraerá más rápido que sus hermanos que poseen valores menores.

- -

El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.

- -
-

Nótese que los valores de flex-grow y flex-shrink son proporciones. Típicamente si pusiéramos todos los ítems flex: 1 1 200px y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: 2 1 200px. Aunque igualmente podemos colocar flex: 10 1 200px y flex: 20 1 200px si quisiéramos.

-
- -

Valores abreviados para las propiedades flex

- -

Difícilmente veremos la propiedades flex-grow, flex-shrink y flex-basis usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación flex permite establecer los tres valores en este orden: flex-grow, flex-shrink, flex-basis.

- -

El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es flex-grow. Dándole un valor positivo significa que el ítem puede crecer. El segundo es flex-shrink — con un valor positivo los ítems pueden contraerse. El valor final es flex-basis; este es el valor que los ítems usan como valor base para crecer y contraerse.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}

- -

Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:

- - - -

Fijando flex: initial el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que flex: 0 1 auto. En este caso el valor de flex-grow is 0, así que los ítems no crecerán más de su tamaño flex-basis . El valor flex-shrink es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de flex-basis es auto. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.

- -

Usar flex: auto es lo mismo que usar flex: 1 1 auto , es como con flex:initial pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.

- -

Al usar flex: none se crearán ítems flex totalmente inflexibles. Es como escribir flex: 0 0 auto. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con flex-basis en auto.

- -

Una abreviación que es común en tutoriales es flex: 1 o flex: 2  y más. Es como usar flex: 1 1 0. Los ítems pueden crecer o encoger con un flex-basis de 0.

- -

Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}

- -

Alineación, justificación y distribución del espacio libre entre ítems

- -

Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.

- -

align-items

- -

La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.

- -

El valor inicial para esta propiedad es stretch razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.

- -

En cambio definimos align-items como flex-start para que los ítems se alineen al comienzo del contenedor flex, flex-end para alinearlos al final, o center para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo flex-direction define la dirección del flujo. El valor inicial es flex-start que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como flex-end para alinearlos al final, o center para alinearlos al centro.

- -

También podemos usar space-between para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor space-around para crear un espacio equitativo a la derecha e izquierda de cada ítem.

- -

Pruebe con los siguientes valores dejustify-content en el ejemplo en vivo:

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.

- -

Próximos pasos

- -

Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.

diff --git a/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..9048cbb739 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,133 @@ +--- +title: Casos de uso típicos de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.

+ +

¿Por qué elegir flexbox?

+ +

En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra.  Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en Relación de Flexbox con respecto a otros métodos de diseño, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.

+ +

En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.

+ + + +

Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.

+ +

Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.

+ +

Espacio distribuido fuera de los elementos

+ +

Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en Alinear elementos en un contenedor flexible, que trata sobre la alineación de elementos en el eje principal.

+ +

En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando justify-content: space-between crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor space-around, o, donde sea compatible, space-evenly. También puede usar flex-start para colocar el espacio al final de los elementos, flex-end para colocarlo delante de ellos, o center para centrar los elementos de navegación.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

Espacio distribuido dentro de los elementos

+ +

Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en Control la proporción de elementos flexibles a lo largo del eje principal.

+ +

Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar flex: auto, que es la abreviatura de flex: 1 1 auto, todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.

+ +

En el ejemplo en vivo a continuación, intente cambiar flex: auto a flex: 1. Esta es la abreviatura de flex: 1 1 0 y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ + + +

Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.

+ +

Aquí estamos utilizando la técnica de márgenes automáticos descrita en Uso de márgenes automáticos para la alineación del eje principal. Los elementos se alinean en el eje principal con flex-start ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.

+ +

También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades gap de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

Centrar elemento

+ +

Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.

+ +

Puedes jugar con la alineación, alineando el elemento con el inicio con flex-start o al final con flex-end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice align-items en el elemento principal o apunte el propio elemento de flexión con align-self.

+ + + +

Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.

+ +

Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con  {{cssxref ("flex-direction")}} :column. A continuación, configuramos el área de contenido con flex: 1, que es la abreviatura de flex: 1 1 0; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad flex del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

Objetos multimedia

+ +

El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.

+ +

Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.

+ +

En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con flex-start, y luego establezco el elemento flex .content a flex: 1. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar flex: 1 significa que esta parte de la tarjeta puede crecer.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.

+ +

Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una flex-basis de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la flex-basis.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a flex: 1, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para flex: auto, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para flex: 1 y el lado del contenido para flex: 3. Esto significará que usan una flex-basis de 0, pero distribuye ese espacio a diferentes proporciones según el factor flex-grow que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía Controlando las proporciones de elementos de flexión a lo largo del eje principal.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Volteando el objeto multimedia

+ +

Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad flex-direction configurada para row-reverse. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase flipped junto con la clase existente .media. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Controles de formulario

+ +

Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.

+ +

Conclusión

+ +

Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.

+ +

Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.

diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html deleted file mode 100644 index e42553fe97..0000000000 --- a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: Usando flexbox para componer aplicaciones web -slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web -tags: - - Avanzado - - CSS - - Cajas Flexibles CSS - - Ejemplo - - Guía - - Web -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -

{{CSSRef}}

- -

Usar flexbox puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, el posicionamiento absoluto, y los hacks de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de CSS. Algunos ejemplos básicos de casos de uso:

- - - -

Este artículo sólo aborda el uso de flexbox con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee la guía más general para usar cajas flexibles de CSS.

- -

Conceptos básicos

- -

Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como flex y luego dando a la propiedad {{cssxref("flex-flow")}} el valor row, si deseas que los elementos fluyan horizontalmente, o el valor column, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor wrap.

- -

Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:

- - - -

Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.

- -

Centrando un elemento en una página

- -

Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.

- -

Contenido CSS

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-
- -

Contenido HTML

- -
<div class="vertical-box">
-  <div class="spacer"></div>
-  <div class="centered-element horizontal-box">
-    <div class="spacer"></div>
-    <div class="centered-element">Centered content</div>
-     <div class="spacer"></div>
-  </div>
-  <div class="spacer"></div>
-</div>
-
- -

Resultado

- -

{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}

- -

Haciendo fluir verticalmente un conjunto de contenedores

- -

Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como auto y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como none.

- -

Contenido CSS

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-
- -

Contenido HTML

- -
<div id="document" class="vertical-box">
-  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
-  <div id="flexible-content" class="flexible-size"></div>
-  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
-</div>
-
- -

Contenido JavaScript

- -
var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height > 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height < 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}
- -

Resultado

- -

{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}

- -

Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.

- -

Creando un contenedor que colapse horizontalmente

- -

En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor wrap.

- -

Contenido CSS

- -
.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
- -

Contenido HTML

- -
<div id="container" class="horizontal-container">
-  <div class="fixed-size">Element 1</div>
-  <div class="fixed-size">Element 2</div>
-  <div class="fixed-size">Element 3</div>
-</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
-
- -

Contenido JavaScript

- -
var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width > 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width < 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-
- -

Resultado

- -

{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}

- -

Ver también

- - diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html deleted file mode 100644 index dd39986ed4..0000000000 --- a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: Usando las cajas flexibles CSS -slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -
{{CSSRef}}
- -

La propiedad Flexible Box, o flexbox, de CSS3 es un modo de diseño que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad float, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.

- -

Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

- -
Nota: Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo -webkit; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.
- -

El concepto de "cajas flexibles"

- -

Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.

- -

El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.

- -

Vocabulario de "cajas flexibles"

- -

Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una flex-direction de tipo row, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.

- -

flex_terms.png

- -
-
Contenedor flexible (Flex container)
-
El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.
-
Elemento flexible (Flex item)
-
-

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

-
-
Ejes
-
-

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.

- -
    -
  • La propiedad flex-direction establece el eje principal.
    • -
  • La propiedad justify-content define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.
    • -
  • La propiedad align-items define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.
    • -
  • La propiedad align-self define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por align-items.
    • -
-
-
Direcciones
-
-

Los lados inicio principal/fin principal (main start/main end) e inicio secundario/fin secundario (cross start/cross end) del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por writing-mode (izquierda-a-derecha, derecha-a-izquierda, etc.).

- -
    -
  • La propiedad order asigna elementos a grupos ordinales y determina qué elementos aparecen primero.
    • -
  • La propiedad flex-flow combina las propiedades flex-direction y flex-wrap para colocar los elementos flexibles.
    • -
-
-
Líneas
-
-

Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad flex-wrap, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.

-
-
Dimensiones
-
-

Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son tamaño principal (main size) and tamaño secundario (cross size), que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.

- -
    -
  • La propiedades min-height y min-width tienen un nuevo valor, auto que establece el tamaño mínimo de un elemento flexible.
    • -
  • La propiedad flex combina las propiedades flex-basis, flex-grow, y flex-shrink para establecer el grado de flexibilidad de los elementos flexibles.
    • -
-
-
- -

Diseñando una "caja flexible"

- -

Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad display así:

- -
display : flex
- -

o

- -
display : inline-flex
- -

Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor flex hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor inline-flex hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.

- -
Nota: Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, display : -webkit-flex.
- -

Consideraciones de los elementos flexibles

- -

El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad display:none.

- -

Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del inicio principal (main start) de su contenedor flexible.

- -

Actualmente, debido a un problema conocido, asignar visibility:collapse a un elemento flexible causa que sea tratado como si fuera display:none en vez de lo que se supone que debería ocurrir, es decir, como si fuera visibility:hidden. La alternativa mientras se resuelve este problema es usar visibility:hidden para elementos flexibles que deban comportarse como visibility:collapse.

- -

Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes auto se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver Aligning with 'auto' margins en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.

- -

Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa min-width:auto y/o min-height:auto. Para los elementos flexibles, el valor de atributo auto calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}}  y {{cssxref("min-height")}} para más detalles al respecto.

- -

Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades align-, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades justify-, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar justify-content con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "centrado-basado-en-márgenes" en el eje principal al reemplazar la propiedad justify-content.

- -

Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. 

- -

Propiedades de las "cajas flexibles"

- -

Propiedades que no afectan a las "cajas flexibles"

- -

Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.

- - - -

Ejemplos

- -

Ejemplo básico "flex"

- -

Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. 

- -
​<!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;
-
-      width: 30px; /* To make the transition work nicely.  (Transitions to/from
-                      "width:auto" are buggy in Gecko and Webkit, at least.
-                      See http://bugzil.la/731886 for more info.) */
-
-      -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>
- -

Ejemplo de "Diseño del Santo Gríal"

- -

Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.

- -

HolyGrailLayout.png

- -

Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.

- -
​
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         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>
- -

Área de juego

- -

Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:

- - - -

Cosas a tener en mente

- -

El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".

- -

Las "cajas flexibles" se comportan en función del modo de escritura establecido. Esto siginifica que inicio principal (main start) y fin principal (main end) se disponen de según la posición de inicio (start) y fin (end).

- -

inicio secundario (cross start) y fin secundario (cross end) confían en la definición de la posición inicio (start) o antes (before) que depende del valor de direction.

- -

Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad break- lo permita. Las propiedades CSS3 break-after, break-before y break-inside así como las propiedades CSS 2.1 page-break-before, page-break-after y page-break-inside se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.

- -

Compatibilidad de Navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaraterísticaFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte Básico{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
- {{ CompatGeckoDesktop("22.0") }}		21.0{{ property_prefix("-webkit") }}10{{ property_prefix("-ms") }}(partial)12.13.1{{ property_prefix("-webkit") }}(partial)
- 6.1{{ property_prefix("-webkit") }}
- 9
-
- -
- - - - - - - - - - - - - - - - - - - -
CaraterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Básico{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]
- {{ CompatGeckoMobile("22.0") }}		{{ CompatUnknown() }}10{{ property_prefix("-ms") }}(partial)
- 11		12.1 -

3.2{{ property_prefix("-webkit") }}(partial)
- 7.1{{ property_prefix("-webkit") }}
- 9.0

-
-
- -

Notas

- -

[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.

- -

[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a true.

- -

[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.

- -

[4] Mientras que en la implementación inicial en Opera 12.10 flexbox no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.

- -

[5] Hasta Firefox 29, especificar visibility: collapse en un elemento flex causaba que fuera tratado como si fuera display: none en vez del comportamiento pretendido, tratándolo como si fuera visibility: hidden. El método alternativo sugerido es usar visibility: hidden para los elementos flex que debieran comportarse como si huberan sido designados visibility: collapse. Para más información, ver {{bug(783470)}}.

- -

Ver también

- - diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..afb49e2a92 --- /dev/null +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,722 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas +tags: + - CSS + - Guía + - Posicionamiento + - Rejillas CSS +translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout +--- +

CSS Grid Layout presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.

+ +

¿Qué es una cuadrícula(grid)?

+ +

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:

+ +

Tamaños fijos y flexibles

+ +

Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

+ +

Posicionamiento de elementos

+ +

Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.

+ +

Creación de líneas adicionales para alojar contenido

+ +

Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.

+ +

Control de alineación

+ +

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.

+ +

Control de contenido superpuesto

+ +

Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.

+ +

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.

+ +

El contenedor de Grid

+ +

Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento. Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en elementos de la cuadrícula.

+ +

En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.

+ +
+
<div class="wrapper">
+   <div>One</div>
+   <div>Two</div>
+   <div>Three</div>
+   <div>Four</div>
+   <div>Five</div>
+</div>
+
+ +

Hago de .wrapper un contenedor de cuadrícula.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}

+
+ +

Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el Grid Inspector (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor grid. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.

+ +

Using the Grid Highlighter in DevTools to view a grid

+ +

Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.

+ +

Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.

+ +

Vias, filas y columnas del Grid

+ +

Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.

+ +

+ +

Puedo modificar nuestro ejemplo anterior al agregar la propiedad grid-template-columns, para así definir el tamaño (ancho) de las vías de cada columna.

+ +

Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

La Unidad fr

+ +

Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}

+
+ +

En el próximo ejemplo creamos una definición con una vía de 2fr y luego dos vías de 1fr. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

Listando vías con la notación repeat()

+ +

Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

También puede ser escrita así:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de 1fr y luego una vía final de 20 píxeles.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía 1fr seguida por una vía 2fr, repetida cinco veces.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

La cuadrícula implícita y explícita

+ +

Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

+ +

Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.

+ +

También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.

+ +

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

+ +
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}

+
+ +

Tamaño de vía y minmax()

+ +

Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.

+ +

Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando minmax() en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}

+
+ +

Líneas de la cuadrículaEdit

+ +

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

+ +

Diagram showing numbered grid lines.

+ +

Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.

+ +

Posicionando elementos de acuerdo a las líneas

+ +

Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.

+ +

En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.

+ +

El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.

+ +
+
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}

+
+ +

No olvide que puede utilizar Grid Inspector en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.

+ +

Celdas de cuadrícula

+ +

Una celda de cuadrícula es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.

+ +

The first cell of the grid highlighted

+ +

Áreas de cuadrícula

+ +

Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un área de cuadrícula. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.

+ +

A grid area

+ +

Canaletas

+ +

Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.

+ +
+
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-column-gap: 10px;
+   grid-row-gap: 1em;
+}
+
+ +
+

Nota: Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo grid- como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.

+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('Canaletas') }}

+
+ +

Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías fr de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.

+ +

Anidamiento de cuadrículas

+ +

Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.

+ +
+
<div class="wrapper">
+   <div class="box box1">
+       <div class="nested">a</div>
+       <div class="nested">b</div>
+        <div class="nested">c</div>
+    </div>
+    <div class="box box2">Two</div>
+    <div class="box box3">Three</div>
+    <div class="box box4">Four</div>
+    <div class="box box5">Five</div>
+</div>
+
+ +

Nested grid in flow

+ +

Si establezco box1 a display: grid puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('anidamiento', '600', '340') }}

+ +

En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la grid-gap del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.

+ +

Subgrid

+ +

En la especificación de grid de nivel 1 hay una característica llamada subgrid que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.

+ +
+

Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.

+
+ +

En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar display: subgrid en lugar de display: grid, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.

+ +

Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.

+ +
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   display: subgrid;
+}
+
+ +

Estratificando elementos con z-index

+ +

Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

El elemento box2 ahora se superpone a box1, se muestra en la parte superior ya que aparece después en el orden de origen.

+ +

Controlando el orden

+ +

Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a box2 un z-index más bajo que box1, se mostrará debajo de box1 en la pila.

+ +
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}

+ +

Siguientes Pasos

+ +

En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout.

+ + +
diff --git "a/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" "b/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" deleted file mode 100644 index afb49e2a92..0000000000 --- "a/files/es/web/css/css_grid_layout/conceptos_b\303\241sicos_del_posicionamiento_con_rejillas/index.html" +++ /dev/null @@ -1,722 +0,0 @@ ---- -title: Basic concepts of grid layout -slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_con_Rejillas -tags: - - CSS - - Guía - - Posicionamiento - - Rejillas CSS -translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout ---- -

CSS Grid Layout presenta un sistema de cuadrícula bidimensional para CSS. Las cuadrículas se pueden utilizar para posicionar áreas principales de la página o pequeños elementos de la interfaz de usuario. Este artículo lo introduce a Grid Layout de CSS y la nueva terminología que forma parte de la especificación CSS Grid Layout Nivel 1. Las características mostradas en este resumen se explicarán con mayor detalle en el resto de esta guía.

- -

¿Qué es una cuadrícula(grid)?

- -

Una cuadrícula es un conjunto de líneas horizontales y verticales que se intersectan - un grupo define columnas y el otro filas. Los elementos se pueden colocar en la cuadrícula respetando estas columnas y filas. El diseño de cuadrícula CSS tiene las siguientes características:

- -

Tamaños fijos y flexibles

- -

Usted puede crear una cuadrícula con tamaños fijos, utilizando píxeles, por ejemplo. También se puede crear una cuadrícula utilizando tamaños flexibles con porcentajes o con la nueva unidad de medida fr (fracción), diseñada para este propósito.

- -

Posicionamiento de elementos

- -

Puede colocar elementos en una ubicación precisa en la cuadrícula utilizando números de línea, nombres o seleccionando un área de la cuadrícula. Grid también contiene un algoritmo para controlar la ubicación de elementos que no tienen una posición explícita en la cuadrícula.

- -

Creación de líneas adicionales para alojar contenido

- -

Usted puede definir una cuadrícula explícita con grid layout. La especificación  Grid Layout  es lo suficientemente flexible como para permitir agregar filas y columnas adicionales cuando sea necesario. Características como la adición de "tantas columnas como caben en un contenedor" también fueron incuidas.

- -

Control de alineación

- -

Grid contiene características de alineación para poder controlar la forma cómo se alinean los elementos una vez colocados en un área de cuadrícula y cómo está alineada toda la cuadrícula.

- -

Control de contenido superpuesto

- -

Se puede colocar más de un elemento en una celda de la cuadrícula o área, las cuales pueden solaparse o superponerse total o parcialmente entre sí. Esta estratificación puede ser controlada con la propiedad {{cssxref("z-index")}}.

- -

Grid es una poderosa especificación que, cuando se combina con otras partes de CSS como flexbox, puede ayudarle a crear diseños que antes eran imposibles de construir en CSS. Todo comienza creando una cuadrícula en su contenedor de cuadrícula.

- -

El contenedor de Grid

- -

Creamos un contenedor de cuadrícula al declarar display: grid o display: inline-grid en un elemento. Tan pronto como hagamos esto todos los hijos directos de ese elemento se convertirán en elementos de la cuadrícula.

- -

En este ejemplo, se tiene un contenedor div con una clase wrapper y dentro hay cinco elementos hijos.

- -
-
<div class="wrapper">
-   <div>One</div>
-   <div>Two</div>
-   <div>Three</div>
-   <div>Four</div>
-   <div>Five</div>
-</div>
-
- -

Hago de .wrapper un contenedor de cuadrícula.

- -
.wrapper {
-  display: grid;
-}
-
- - - -

{{ EmbedLiveSample('El_contenedor_de_Grid', '200', '330') }}

-
- -

Todos los descendientes directos son ahora elementos de la cuadrícula. En un navegador web, usted no verá ninguna diferencia en cómo son mostrados estos elementos antes de convertirlos en una cuadrícula ya que grid ha creado una cuadrícula de una sola columna para los elementos. En este punto usted puede encontrar útil trabajar en Firefox Developer Edition, el cual  tiene disponible el Grid Inspector (Inspector de cuádricula) como parte de las Herramientas de Desarrollador. Si ve este ejemplo en Firefox e inspecciona la cuadrícula, verá un icono pequeño junto al valor grid. Haga clic sobre este y la cuadrícula de este elemento se superpondrá en la ventana del navegador.

- -

Using the Grid Highlighter in DevTools to view a grid

- -

Mientras usted aprende y luego trabaja con CSS Grid Layout esta herramienta le dará una mejor idea de lo que está sucediendo con sus cuadrículas visualmente.

- -

Si queremos empezar a hacer esto más parecido a una cuadrícula necesitamos agregar columnas.

- -

Vias, filas y columnas del Grid

- -

Definimos filas y columnas en nuestra cuadrícula con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}. Éstas definen las vías de la cuadrícula. Una vía de cuadrícula es el área entre las dos líneas -horizontales o verticales- dentro de la cuadrícula. En la imagen inferior se puede ver una vía resaltada -  esta es la vía de la primera fila en nuestra cuadrícula.

- -

- -

Puedo modificar nuestro ejemplo anterior al agregar la propiedad grid-template-columns, para así definir el tamaño (ancho) de las vías de cada columna.

- -

Ahora he creado una cuadrícula con tres vías por columna de 200 píxeles. Los elementos hijo se posicionarán en esta cuadrícula uno en cada una de las celdas de la cuadrícula.

- -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 200px 200px 200px;
-}
-
- - - -

{{ EmbedLiveSample('grid_first', '610', '140') }}

-
- -

La Unidad fr

- -

Las vías se pueden definir usando cualquier unidad de medida. Grid también introduce una unidad de longitud adicional para ayudarnos a crear vías de cuadrícula flexibles. La nueva unidad fr representa una fracción del espacio disponible en el contenedor de la cuadrícula. La siguiente definición de cuadrícula crearía tres vias con el mismo ancho, que se expanden y se encogen de acuerdo el espacio disponible.

- -
-
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- - - -

{{ EmbedLiveSample('La_Unidad_fr', '220', '140') }}

-
- -

En el próximo ejemplo creamos una definición con una vía de 2fr y luego dos vías de 1fr. El espacio disponible se divide en cuatro. Dos partes corresponden a la primera vía  y una parte a cada una de las dos vias restantes.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr;
-}
-
- -

En este ejemplo final mezclamos las vías de tamaño absoluto con unidades de fracción(fr). La primera vía tiene 500 píxeles, por lo que este ancho fijo se sustrae del espacio disponible.El espacio restante se divide en tres y se asigna en proporción a las dos vías flexibles.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 500px 1fr 2fr;
-}
-
- -

Listando vías con la notación repeat()

- -

Las cuadrículas grandes con muchas vías o celdas pueden utilizar la notación repeat() con el fin de repetir todas o una sección de la lista de vías. Por ejemplo la definición de cuadrícula:

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
- -

También puede ser escrita así:

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

La notación de repetición se puede utilizar para una parte del listado de vías. En este siguiente ejemplo he creado una cuadrícula con una vía inicial de 20 píxeles luego una sección repetitiva de 6 vías de 1fr y luego una vía final de 20 píxeles.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: 20px repeat(6, 1fr) 20px;
-}
-
- -

La notación de repetición toma una lista de vías específicas, por lo tanto, puede utilizarla para crear un patrón de iteración de vías. En el próximo ejemplo, mi cuadrícula consistirá de 10 vías, una vía 1fr seguida por una vía 2fr, repetida cinco veces.

- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr 2fr);
-}
-
- -

La cuadrícula implícita y explícita

- -

Al crear nuestra cuadrícula de ejemplo definimos nuestras vías de columna con la propiedad {{cssxref("grid-template-columns")}}, pero dejamos que grid creara filas  para el contenido según fuera necesario. Estas filas se crean en la cuadrícula implícita. La cuadrícula explícita consiste en las filas y columnas que se definen con las propiedades {{cssxref("grid-template-columns")}} y {{cssxref("grid-template-rows")}}.

- -

Si coloca algo fuera de la cuadrícula ya definida, o si debido a la cantidad de contenido, se necesitarán más vías o celdas, entonces grid crea filas y columnas en la cuadrícula implícita. Estas vías varían su tamaño automáticamente de forma predeterminada, así que ajustarán su tamaño basadas en el contenido dentro de ellas.

- -

También puede definir un tamaño para el conjunto de vías creadas en la cuadrícula implícita con las propiedades {{cssxref("grid-auto-rows")}} y {{cssxref("grid-auto-columns")}}.

- -

En el siguiente ejemplo usamos grid-auto-rows para asegurar que las vías creadas en la cuadrícula implícita tengan 200 píxeles de alto.

- -
<div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> </div> -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 200px;
-}
-
- - - -

{{ EmbedLiveSample('cuadrícula_implícita_y_explícita', '230', '420') }}

-
- -

Tamaño de vía y minmax()

- -

Al configurar una cuadrícula explícita o definir el tamaño de las filas o columnas creadas automáticamente, es posible que desee dar a las vías un tamaño mínimo, pero asegurarse que se expandan para adaptarse a cualquier contenido que se pueda agregar. Por ejemplo, tal vez quiera que mis filas nunca se colapsen a menos de 100 píxeles, pero si mi contenido se extiende a 300 píxeles de altura, me gustaría que la fila se expandiera a esa altura.

- -

Grid tiene una solución para esto con la función {{cssxref("minmax", "minmax()")}}. En el siguiente ejemplo estoy usando minmax() en el valor de la propiedad {{cssxref("grid-auto-rows")}}. Las filas creadas automáticamente tendrán como mínimo de 100 píxeles de alto y un máximo de auto. El uso de auto significa que el tamaño mirará el tamaño del contenido y se estirará para dar espacio al elemento más alto en una celda en esta fila.

- -
-
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-
- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two
-    <p>I have some more content in.</p>
-    <p>This makes me taller than 100 pixels.</p>
-  </div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -

{{ EmbedLiveSample('Tamaño_de_vía_y_minmax', '240', '470') }}

-
- -

Líneas de la cuadrículaEdit

- -

Debe tenerse en cuenta que cuando definimos una cuadrícula definimos las vías de la cuadrícula, no las líneas. Grid luego nos da las líneas numeradas a utilizar al posicionar elementos. En nuestra cuadrícula de tres columnas y dos filas, tenemos cuatro líneas de columna.

- -

Diagram showing numbered grid lines.

- -

Las líneas están numeradas según el modo de escritura del documento. En un idioma de izquierda a derecha, la línea 1 está al lado izquierdo de la cuadrícula. En un idioma de derecha a izquierda, está en el lado derecho de la cuadrícula. Las líneas también se pueden nombrar, ya veremos cómo hacer esto en una guía posterior de esta serie.

- -

Posicionando elementos de acuerdo a las líneas

- -

Estaremos explorando la colocación basada en líneas en detalle en un artículo posterior, el siguiente ejemplo demuestra cómo hacer esto de una manera sencilla. Cuando colocamos un elemento  y tomamos como punto de referencia la línea - en lugar de la vía.

- -

En el siguiente ejemplo, estoy posicionando los dos primeros elementos en la cuadrícula de tres vías de columna,  usando las propiedades {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} y {{cssxref("grid-row-end")}}. Trabajando de izquierda a derecha, el primer elemento se coloca partiendo de la línea de la columna 1, y se extiende a la línea de la columna 4, que en nuestro caso es la línea que está mas a la derecha en la cuadrícula. Y comienza en la línea de la fila 1 y termina en la línea de fila la 3, por lo tanto, se extiende sobre dos filas.

- -

El segundo elemento comienza en la línea de columna 1 de la  cuadrícula y se extiende por toda la fila. Este es el valor por defecto, por lo que no necesito especificar la línea final. También se extiende dos vías de fila de la línea de fila 3 a la línea de fila 5. Los otros elementos se colocarán a sí mismos en espacios vacíos en la cuadrícula.

- -
-
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-  <div class="box4">Four</div>
-  <div class="box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 3;
-  grid-row-end: 5;
-}
-
- - - -

{{ EmbedLiveSample('Líneas_de_cuadrícula', '230', '420') }}

-
- -

No olvide que puede utilizar Grid Inspector en las Herramientas de Desarrollador de Firefox para ver cómo se posicionan los elementos en las líneas de la cuadrícula.

- -

Celdas de cuadrícula

- -

Una celda de cuadrícula es la unidad más pequeña en una cuadrícula, conceptualmente es como una celda de tabla. Como vimos en nuestros ejemplos anteriores, una vez que se define una cuadrícula en un padre, los elementos hijo se posicionarán a sí mismos de una vez en cada celda de la cuadrícula definida. En la imagen de abajo he resaltado la primera celda de la cuadrícula.

- -

The first cell of the grid highlighted

- -

Áreas de cuadrícula

- -

Los elementos pueden extenderse a través de una o más celdas tanto por fila como por columna, lo que crea un área de cuadrícula. Las áreas de la cuadrícula tienen que ser rectangulares - no es posible crear un área en forma de L, por ejemplo. El área de cuadrícula resaltada abarca dos vías de fila y dos de columna.

- -

A grid area

- -

Canaletas

- -

Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear usando las propiedades {{cssxref("grid-column-gap")}} y {{cssxref("grid-row-gap")}}, o la propiedad abreviada {{cssxref("grid-gap")}}. En el siguiente ejemplo estoy creando una brecha de 10 píxeles entre columnas y una brecha de 1em entre filas.

- -
-
.wrapper {
-   display: grid;
-   grid-template-columns: repeat(3, 1fr);
-   grid-column-gap: 10px;
-   grid-row-gap: 1em;
-}
-
- -
-

Nota: Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo grid- como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.

-
- -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- - - -

{{ EmbedLiveSample('Canaletas') }}

-
- -

Cualquier espacio utilizado por las brechas se tendrá en cuenta antes de que el espacio sea asignado a las vías fr de longitud flexible y las canaletas intervienen con propósitos de dimensionamiento como una vía de cuadrícula regular, sin embargo, no se puede colocar nada en una brecha. En términos de posicionamiento basado en líneas, la brecha actúa como una línea gruesa.

- -

Anidamiento de cuadrículas

- -

Un elemento de cuadrícula puede convertirse en un contenedor de cuadrícula. En el ejemplo siguiente tengo la cuadrícula de tres columnas creada anteriormente, con nuestros dos elementos posicionados. En este caso, el primer elemento tiene algunos subelementos. Ya que estos elementos no son descendientes directos de la cuadrícula, no participan en la disposición de la cuadrícula y por lo tanto se muestran en el flujo normal del documento.

- -
-
<div class="wrapper">
-   <div class="box box1">
-       <div class="nested">a</div>
-       <div class="nested">b</div>
-        <div class="nested">c</div>
-    </div>
-    <div class="box box2">Two</div>
-    <div class="box box3">Three</div>
-    <div class="box box4">Four</div>
-    <div class="box box5">Five</div>
-</div>
-
- -

Nested grid in flow

- -

Si establezco box1 a display: grid puedo darle una definición de vía y también se convertirá en una cuadrícula, los elementos entonces se posicionan en esta nueva cuadrícula.

- -
.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- - -
- -

{{ EmbedLiveSample('anidamiento', '600', '340') }}

- -

En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Como usted puede ver en el ejemplo, no ha heredado la grid-gap del elemento padre y las líneas de la cuadrícula anidada no se alinean con las líneas de la cuadrícula padre.

- -

Subgrid

- -

En la especificación de grid de nivel 1 hay una característica llamada subgrid que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.

- -
-

Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.

-
- -

En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar display: subgrid en lugar de display: grid, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.

- -

Cabe señalar que la cuadrícula está anidada en ambas dimensiones — filas y columnas. No hay concepto de la cuadrícula implícita trabajando con subgrids. Esto significa que debe asegurarse de que la cuadrícula padre tenga suficientes vías de fila y columna para todos los subelementos.

- -
.box1 {
-   grid-column-start: 1;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end: 3;
-   display: subgrid;
-}
-
- -

Estratificando elementos con z-index

- -

Los elementos de cuadrícula pueden ocupar la misma celda. Si volvemos a nuestro ejemplo con elementos posicionados por número de línea, podemos cambiar esto para hacer que dos elementos se superpongan.

- -
-
<div class="wrapper">
-  <div class="box box1">One</div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-}
-
- - -
- -

{{ EmbedLiveSample('l_ex', '230', '420') }}

- -

El elemento box2 ahora se superpone a box1, se muestra en la parte superior ya que aparece después en el orden de origen.

- -

Controlando el orden

- -

Podemos controlar el orden en el que los artículos se apilan utilizando la propiedad z-index - al igual que con los elementos posicionados. Si le damos a box2 un z-index más bajo que box1, se mostrará debajo de box1 en la pila.

- -
-
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 100px;
-}
-
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  z-index: 2;
-}
-
-.box2 {
-  grid-column-start: 1;
-  grid-row-start: 2;
-  grid-row-end: 4;
-  z-index: 1;
-}
-
- - - -

{{ EmbedLiveSample('controlando_el_orden', '230', '420') }}

- -

Siguientes Pasos

- -

En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout.

- - -
diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html deleted file mode 100644 index 298da1dc5f..0000000000 --- a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html +++ /dev/null @@ -1,642 +0,0 @@ ---- -title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS -slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout -tags: - - CSS - - CSS Cuadrícula - - CSS Grids - - CSS Grilla - - CSS Rejilla - - Guía -translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout ---- -

CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

- -
-

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

-
- -

Grid y flexbox

- -

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

- -

Diseños de Una dimensión vs. dos dimensiones

- -

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

- -

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

- -

También he configurado la propiedad wrap{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  flex-wrap: wrap;
-}
-.wrapper > div {
-  flex: 1 1 200px;
-}
-
-
- -

{{ EmbedLiveSample('onedtwod', '500', '230') }}

- -

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

- -

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

- -

El mismo diseño con CSS Grid Layout

- -

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-  <div>Four</div>
-  <div>Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
- -

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

-
- -

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

- - - -

¿Contenido fuera o layout dentro?

- -

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

- -

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

- -

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

- -

Alineación de Cajas

- -

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

- -

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

- -

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

- -

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

- -
- - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: flex;
-  align-items: flex-end;
-  min-height: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: flex-start;
-}
-
- -

{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}

-
- -

Alineación en CSS Grid Layout

- -

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start yflex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

- -
- - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3,1fr);
-  align-items: end;
-  grid-auto-rows: 200px;
-}
-.box1 {
-  align-self: stretch;
-}
-.box2 {
-  align-self: start;
-}
-
- -

{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}

-
- -

La unidad fr y flex-basis

- -

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

- -

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

- -

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

- -

Auto-filling grid tracks

- -

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

- -

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

- - - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, 200px);
-}
-
- -

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

- -

Una cantidad flexible de pistas

- -

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

- -
- - -
<div class="wrapper">
-  <div>One</div>
-  <div>Two</div>
-  <div>Three</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-}
-
- -

{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}

-
- -

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

- -

El grid y los elementos absolutamente posicionados

- -

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

- -

El grid container como bloque contenedor

- -

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

- -

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

- -
- - -
<div class="wrapper">
-   <div class="box1">One</div>
-   <div class="box2">Two</div>
-   <div class="box3">
-    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
-   </div>
-   <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-   display: grid;
-   grid-template-columns: repeat(4,1fr);
-   grid-auto-rows: 200px;
-   grid-gap: 20px;
-   position: relative;
-}
-.box3 {
-   grid-column-start: 2;
-   grid-column-end: 4;
-   grid-row-start: 1;
-   grid-row-end: 3;
-   position: absolute;
-   top: 40px;
-   left: 40px;
-}
-
- -

{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}

-
- -

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

- -

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

- -

El grid container como parent

- -

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

- -

Image of grid container as parent

- -

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

- -

Con un grid area como parent

- -

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

- -

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

- -
- - -
<div class="wrapper">
-  <div class="box1">One</div>
-  <div class="box2">Two</div>
-  <div class="box3">Three
-    <div class="abspos">
-     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
-    </div>
-  </div>
-  <div class="box4">Four</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(4,1fr);
-  grid-auto-rows: 200px;
-  grid-gap: 20px;
-}
-.box3 {
-  grid-column-start: 2;
-  grid-column-end: 4;
-  grid-row-start: 1;
-  grid-row-end: 3;
-  position: relative;
-}
-.abspos {
-  position: absolute;
-  top: 40px;
-  left: 40px;
-  background-color: rgba(255,255,255,.5);
-  border: 1px solid rgba(0,0,0,0.5);
-  color: #000;
-  padding: 10px;
-}
-
- -

{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}

-
- -

Grid y display: contents

- -

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

- -
-

“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”

-
- -

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display:block.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-}
-
-
- -

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

-
- -

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

- -
- - -
<div class="wrapper">
-  <div class="box box1">
-    <div class="nested">a</div>
-    <div class="nested">b</div>
-    <div class="nested">c</div>
-  </div>
-  <div class="box box2">Two</div>
-  <div class="box box3">Three</div>
-  <div class="box box4">Four</div>
-  <div class="box box5">Five</div>
-</div>
-
- -
.wrapper {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: minmax(100px, auto);
-}
-.box1 {
-  grid-column-start: 1;
-  grid-column-end: 4;
-  display: contents;
-}
-
- -

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

-
- -

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

- -

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

- - diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..298da1dc5f --- /dev/null +++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,642 @@ +--- +title: Relación de Grid Layout con otros métodos de diseño y posicionamiento - CSS +slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout +tags: + - CSS + - CSS Cuadrícula + - CSS Grids + - CSS Grilla + - CSS Rejilla + - Guía +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta Grid junto con otras técnicas que ya se estén usando.

+ +
+

Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será Grid.

+
+ +

Grid y flexbox

+ +

La diferencia básica entre CSS Grid Layout y CSS Flexbox Layout es que Flexbox se creó para diseños de una dimensión, en una fila o una columna. En cambio CSS Grid Layout se pensó para el diseño bidimensional, en varias filas y columnas al mismo tiempo. Sin embargo, las dos especificaciones comparten algunas características comunes, y si ya has aprendido cómo utilizar Flexbox, verás semejanzas que te ayudarán a entender Grid.

+ +

Diseños de Una dimensión vs. dos dimensiones

+ +

Un ejemplo simple puede demostrar la diferencia entre el diseño de una y dos dimensiones.

+ +

En este primer ejemplo, estoy usando flexbox para diseñar un conjunto de cajas. Tengo cinco ítems-hijos en mi contenedor y les he dado valores a sus propiedades flex para que puedan aumentar y reducirse desde una flex-basis de 200 píxeles.

+ +

También he configurado la propiedad wrap{{cssxref ("flex-wrap")}} , de modo que si el espacio del contenedor se hace demasiado estrecho para mantener esa flex-basis, los ítems se ajustarán (wrap) a una nueva fila.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

En la imagen se puede ver que dos elementos se han ajustado en una nueva línea. Estos ítems comparten el espacio disponible y no están alineados debajo de los ítems de arriba. Esto es porque cuando envuelves (wrap) flex-ítems, cada nueva fila (o columna si se trabaja por columna) se convierte en un nuevo flex-container. La distribución del espacio ocurre a lo largo de la fila.

+ +

La pregunta típica entonces es cómo conseguir que estos ítems se alineen. Aquí es donde queremos un método de layout bidimensional, queremos controlar la alineación por fila y columna, y es donde entra el grid.

+ +

El mismo diseño con CSS Grid Layout

+ +

En el siguiente ejemplo construyo el mismo diseño usando Grid. Esta vez tenemos tres pistas de columna de 1fr. No necesitamos establecer nada sobre los ítems mismos, ellos se colocarán uno dentro de cada celda de la cuadrícula creada. Como se puede ver, se mantienen en una cuadrícula estricta, alineados en filas y columnas. Con cinco ítems, tenemos un hueco al final de la fila dos.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

Hay una pregunta muy simple para decidir si utilizar grid o flexbox:

+ + + +

¿Contenido fuera o layout dentro?

+ +

Además de la distinción unidimensional vs bidimensional, hay otra forma de decidir si es mejor utilizar flexbox o grid para un layout. Flexbox trabaja desde el contenido. Un caso de uso ideal para flexbox es cuando tienes un conjunto de ítems y quieres espaciarlos uniformemente en un contenedor. Dejas que el tamaño del contenido decida cuánto espacio ocupa cada ítem. Si los ítems se envuelven (wrap) en una nueva línea, calcularán su espaciado basándose en su tamaño y el espacio disponible en esa línea.

+ +

Grid funciona desde el layout hacia adentro. Cuando usas CSS Grid Layout creas un diseño y luego colocas elementos en él, o permites que las reglas de auto-placement coloquen los elementos en las celdas de la cuadrícula de acuerdo con esa cuadrícula estricta. Existe la posibilidad de crear pistas que respondan al tamaño del contenido, sin embargo, también cambiarán toda la pista.

+ +

Si estás usando flexbox y estás deshabilitando parte de la flexibilidad, probablemente necesites usar CSS Grid Layout. Un ejemplo sería si estás configurando un ancho de porcentaje en un flex-item para alinearlo con otros ítems de una línea anterior. En ese caso, es probable que Grid sea una mejor opción.

+ +

Alineación de Cajas

+ +

La característica de Flexbox que fue más emocionante para muchos de nosotros es que nos dio un control de alineación adecuado por primera vez. Hizo fácil centrar una caja en la página. Los flex-ítems pueden estirarse hasta la altura del flex container, lo que significa que son posibles columnas de la misma altura. Estas eran cosas que queríamos hacer desde hace mucho tiempo, y creamos todo tipo de hacks para conseguir al menos el efecto visual.

+ +

Las propiedades de alineación de la especificación de Flexbox se han añadido a una nueva especificación llamada Box Alignment Level 3. Esto significa que pueden utilizarse en otras especificaciones, incluida Grid Layout. En el futuro, es posible que se apliquen también a otros métodos de layout.

+ +

En una guía posterior en esta serie voy a echar un vistazo a Box Alignment y cómo funciona en Grid Layout, sin embargo aquí hay un ejemplo simple comparando Flexbox con Grid.

+ +

El primer ejemplo utiliza flexbox, tengo un contenedor con tres ítems dentro. El {{cssxref("min-height")}} del wrapper es fijo, por lo que está definiendo la altura del flex container. En el flex container he establecido {{cssxref("align-items")}} en flex-end para que los items se alineen al final del flex container. También he establecido la propiedad {{cssxref("align-self")}} en box1 para que anule el valor por defecto y se estire a la altura del contenedor, y en box2 para que se alinee con el inicio del contenedor flexible.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_de_cajas', '300', '230') }}

+
+ +

Alineación en CSS Grid Layout

+ +

En este segundo ejemplo uso Grid para construir el mismo diseño, usando las propiedades de alineación como se aplican en el grid layout. Por eso alineamos a start y a end en vez de a flex-start yflex-end. En grid layout alineamos los ítems dentro de su grid area que en este caso es una celda de la rejilla pero puede ser un área formada por múltiples celdas de rejilla.

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('Alineacion_en_Cssgrid', '200', '310') }}

+
+ +

La unidad fr y flex-basis

+ +

Ya hemos visto que la unidad fr asigna a las pistas del grid (tracks) una proporción del espacio disponible en el grid container. La unidad frcombinada con la función {{cssxref("minmax()", "minmax")}} permite un comportamiento muy similar al que tienen las propiedades flex en Flexbox - y todavía mantenemos la posibilidad de crear un layout de dos dimensiones.

+ +

Si volvemos al ejemplo en el que demostré la diferencia entre layouts de una y de dos dimensiones, puedes ver que hay una diferencia con respecto al modo de funcionamiento responsive en cada una de ellas. En la flex-layout si arrastramos nuestra ventana haciéndola cada vez más pequeña, flex box ajusta el número de ítems en cada fila de acuerdo al espacio disponible. Si tenemos mucho espacio los cinco ítems pueden caber en una fila, pero si tenemos un contenedor muy estrecho podríamos tener espacio solo para uno.

+ +

En comparación, la versión grid siempre mantiene tres pistas de columna: son las pistas mismas las que crecen y se encogen, pero siempre hay tres, ya que al crear la rejilla definimos tres.

+ +

Auto-filling grid tracks

+ +

Podemos crear un efecto similar a flexbox, mientras mantenemos el contenido organizado en filas y columnas concretas mediante la creación de una lista de tracks usando la notación repeat y las propiedades auto-fill y auto-fit.

+ +

En el siguiente ejemplo he usado auto-fill en el lugar del número entero de la notación repeat y he establecido la lista de pistas en 200 píxeles. Esto significa que el grid creará tantas columnas de 200 píxeles como quepan en el container.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('Auto-filling_grid_tracks', '500', '170') }}

+ +

Una cantidad flexible de pistas

+ +

Esto no es lo mismo que flexbox, en el ejemplo de flexbox los elementos son más grandes que la base de 200 píxeles antes del envoltorio. Podemos lograr lo mismo en grid combinando auto-fill y la función {{cssxref("minmax()", "minmax")}}. En el siguiente ejemplo configuro pistas que se rellenan automáticamente con minmax. Quiero que mis pistas tengan un mínimo de 200 píxeles, y luego establezco el máximo en 1fr. Una vez que el navegador ha calculado cuántas veces caben 200 píxeles en el contenedor - teniendo en cuenta también la cantidad de espacio entre las rejillas ( grid gaps) - tratará como una instrucción el máximo de 1fr y repartirá el espacio restante entre los ítems.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('cantidad_flexible_pistas', '500', '170') }}

+
+ +

Ahora tenemos la capacidad de crear una cuadrícula con un número flexible de pistas flexibles, y de ver los ítems dispuestos en la cuadrícula alineados por filas y columnas al mismo tiempo.

+ +

El grid y los elementos absolutamente posicionados

+ +

Grid interactúa con elementos absolutamente posicionados, lo que puede ser útil si quieres colocar un ítem dentro de una rejilla o de un área de la rejilla. La especificación define el comportamiento cuando un grid container es el bloque contenedor y es el padre del ítem posicionado absolutamente.

+ +

El grid container como bloque contenedor

+ +

Para hacer que el grid container sea un bloque contenedor es necesario añadir al container la propiedad position con el valor relative, (de la misma manera que harías para cualquier otro bloque contenedor posicionado absolutamente). Una vez hecho esto, si das la propiedad position: absolute a un grid-item se tomará como bloque que contiene el grid container o, si el ítem también tiene una posición de cuadrícula, como el área de la cuadrícula en la que se coloca.

+ +

En el ejemplo de abajo tengo un wrapper que contiene cuatro ítems hijos, el ítem tres está absolutamente posicionado y también está colocado en la cuadrícula usando line-based placement. El grid container tiene position: relative y así se convierte en el contexto de posicionamiento de este elemento.

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">
+    Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+   </div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(4,1fr);
+   grid-auto-rows: 200px;
+   grid-gap: 20px;
+   position: relative;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+   position: absolute;
+   top: 40px;
+   left: 40px;
+}
+
+ +

{{ EmbedLiveSample('grid_container_como_bloque_contenedor', '500', '330') }}

+
+ +

Puedes ver que el ítem está ocupando el área de la línea 2 a la 4 de la cuadrícula y que empieza después de la línea 1. Luego se desplaza en esa área usando las propiedades top y left. Sin embargo, se ha sacado del flujo, como ocurre con los objetos en posición absoluta, por lo que las reglas de auto-placement colocan los objetos en ese mismo espacio. El ítem tampoco causa que sea generada la fila adicional para que se extienda a la línea 3.

+ +

Si eliminamos position: absolute de las reglas de .box3 podemos ver cómo se mostraría sin el posicionamiento.

+ +

El grid container como parent

+ +

Si el hijo absolutamente posicionado tiene un grid container como padre pero ese container no crea un nuevo contexto de posicionamiento, entonces se saca del flujo como en el ejemplo anterior. El contexto de posicionamiento será el elemento que cree un contexto de posicionamiento como es común a otros métodos de diseño. En nuestro caso, si eliminamos position: relative del wrapper de arriba, el contexto de posicionamiento es de la ventana de visualización, como se muestra en esta imagen.

+ +

Image of grid container as parent

+ +

Una vez más, el ítem ya no participa en el diseño de la cuadrícula en términos de tamaño o cuando otros ítems se colocan automáticamente.

+ +

Con un grid area como parent

+ +

Si el ítem absolutamente posicionado está anidado dentro de un área de cuadrícula, entonces puede crear un contexto de posicionamiento en esa área. En el ejemplo de abajo tenemos nuestra cuadrícula como antes pero esta vez he anidado un ítem dentro de .box3 de la cuadrícula.

+ +

He dado a .box3 position relative y luego he posicionado el sub-ítem con las propiedades offset. En este caso, el contexto de posicionamiento es el grid area

+ +
+ + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     Este bloque está absolutamente posicionado. En este ejemplo, el grid container es el bloque contenedor, y por ello sus valores offsset para el posicionamiento absoluto se calculan a partir de los bordes exteriores del área en la que está colocado.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('Con_un_grid_area_como_parent', '500', '420') }}

+
+ +

Grid y display: contents

+ +

Una interacción final con otra especificación de layout que merece la pena destacar es la interacción entre CSS Grid Layout y display: contents. El valor de contents en la propiedad display es un nuevo valor que se describe en Display specification de la siguiente manera:

+ +
+

“El elemento en sí no genera ninguna caja, pero sus hijos y pseudo-elementos siguen generando cajas como de costumbre. A efectos de generación y layout de cajas, el elemento debe ser tratado como si hubiera sido sustituido por sus hijos y pseudo-elementos en el árbol del documento”

+
+ +

Si configuras un ítem como display: contents la caja que normalmente crearía desaparece, y las cajas de los elementos hijo aparecen como si hubieran subido de nivel. Esto significa que los hijos de un grid item pueden convertirse en grid items. . ¿Suena raro? He aquí un ejemplo sencillo. En el siguiente marcado tengo un grid, el primer ítem del grid se establece para que se expanda tres pistas de columna. Contiene tres ítems anidados. Como esos hijos no son hijos directos, no forman parte del grid layout y por tanto se muestran como display:block.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

Si ahora añado display: contents a las reglas del box1, la caja de ese ítem desaparece y los subítems se convierten en grid ítems y se despliegan usando las reglas de auto-placement.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

Esta puede ser una forma de anidar elementos en la rejilla para que actúen como si fueran parte de la rejilla, y es una forma de sortear algunos de los problemas que resolverían los sub-grid una vez que se implementen. También puedes usar display: contents de manera similar en flexbox para que los ítems anidados se conviertan en flex items.

+ +

Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.

+ + diff --git a/files/es/web/css/css_images/using_css_gradients/index.html b/files/es/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..2e3f5e13a4 --- /dev/null +++ b/files/es/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,386 @@ +--- +title: Usando gradientes con CSS +slug: CSS/Using_CSS_gradients +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +

CSS3 posee soporte para nuevos tipos de gradientes  en las propiedades CSS. Usarlos en un segundo plano, permite mostrar transiciones suaves entre dos o más colores especificados, evitando así el uso de imágenes para estos efectos, lo que reduce el tiempo de descarga y el uso de ancho de banda. Además, debido a que el gradiente es generado por el navegador, los objetos degradados se ven mejor cuando se hace un acercamiento, y el ajuste de diseño es mucho más flexible.

+ +

Los navegadores soportan dos tipos de gradientes: lineal, definido con la función linear-gradient, y radial, definido con radial-gradient.

+ +

Gradientes lineales

+ +

Para crear un gradiente lineal, se establece un punto de partida y una dirección (indicada por un ángulo) a lo largo de la cual se aplica el efecto. Usted también puede definir paradas de color. las paradas de color son los colores que usted desea que Gecko renderise con suaves transiciones entre ellos, y usted puede específicar al menos dos de ellas, pero puede específicar más para crear efectos de gradientes más complejos.

+ +

Gradientes lineales simples

+ +

Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
+
 
+
+ +
+
/* La sintaxis vieja, obsoleta, pero todavía necesaria, con prefijo, para Opera y navegadores basados en WebKit-based */
+background: -prefix-linear-gradient(top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom, blue, white);
+
+
+ +

Cambiando el mismo gradiente para correr de izquierda a derecha:

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
basic_linear_blueleft.png +
 
+
+ +
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to right, blue, white);
+
+ +

Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:

+ + + + + + + + + + + + +
Captura de pantallaDemo en vivo
basic_linear_bluetopleft.png +
 
+
+ +
/* la vieja sintaxis, obsoleta, pero todavía necesaria, prefijada, para Opera y Navegadores basados en Webkit */
+background: -prefix-linear-gradient(left top, blue, white);
+
+/* La nueva sintaxis necesaria para navegadores apegados al estandar (IE 10 y Firefox 10 en adelante), sin prefijo */
+background: linear-gradient(to bottom right, blue, white);
+
+ +

Usando Angulos

+ +

Si usted no específica un ángulo, uno es determinado automáticamente basado en la dirección dada. Si usted desea más control sobre la dirección del gradiente, usted necesita establecer el ángulo específicamente.

+ +

Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.

+ +

linear_gradient_angle.png

+ +

El de la derecha usa un CSS Como este:

+ +
background: linear-gradient(70deg, black, white);
+
+ +

El ángulo es especificado como un ángulo entre una línea vertical y la línea del gradiente, contando en el sentido horario. En otras palabras, 0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:

+ +

linear_redangles.png

+ +
background: linear-gradient(<angle>, red, white);
+
+ +
+

Note: several browsers implement, prefixed, an older draft of the specification where 0deg was pointing to the right rather than to the top. Pay attention in the value of the angle when mixing prefixed and standard linear-gradient, some may need to have 90deg added to the <angle>.

+
+ +

Color stops

+ +

Color stops are points along the gradient line that will have a specific color at that location. The location can be specified as either a percentage of the length of the line, or as an absolute length. You may specify as many color stops as you like in order to achieve the desired effect.

+ +

If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want.

+ +

Example: Three color stops

+ +

This example specifies three color stops:

+ + + + + + + + + + + + +
Screen ShotLive Demo
linear_colorstops1.png +
 
+
+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(top, blue, white 80%, orange);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to bottom, blue, white 80%, orange);
+
+ +

Note that the first and last color stops don't specify a location; because of that, values of 0% and 100% are assigned automatically. The middle color stop specifies a location of 80%, putting it most of the way toward the bottom.

+ +

Example: Evenly spaced color stops

+ +

Here's an example using a wide variety of colors, all evenly spaced:

+ + + + + + + + + + + + +
Screen ShotLive Demo
linear_rainbow.png +
 
+
+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: -prefix-linear-gradient(left, red, orange, yellow, green, blue);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, red, orange, yellow, green, blue);
+
+ +

Notice that the color stops are automatically spaced evenly when no locations are specified.

+ +

Transparency and gradients

+ +

Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:

+ +

linear_multibg_transparent.png

+ +
/* The old syntax, deprecated, but still needed, prefixed, for Opera and WebKit-based browsers */
+background: linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+/* The new syntax needed by standard-compliant browsers (IE 10 and Firefox 10 onwards), without prefix */
+background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);
+
+ +

The backgrounds are stacked with the first specified background on top, and each successive background farther away. By stacking backgrounds this way, you can create very creative effects as seen above.

+ +

Radial gradients

+ +

Radial gradients are specified using the {{ cssxref("radial-gradient") }} functional notation. The syntax is similar to that for linear gradients, except you can specify the gradient's ending shape (whether it should be a circle or ellipse) as well as its size. By default, the ending shape is an ellipse with the same proportions than the container's box.

+ +

Color stops

+ +

You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.

+ +

Example: Evenly spaced color stops

+ +

By default, as with linear gradients, the color stops are evenly spaced:

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_gradient_even.png +
 
+
+ +
background: radial-gradient(red, yellow, rgb(30, 144, 255));
+
+ +

Example: Explicitly spaced color stops

+ +

Here we specify specific locations for the color stops:

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_gradient_varied.png +
 
+
+ +
background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%);
+
+ +

Size

+ +

This is one of the areas in which radial gradients differ from linear gradients. You can provide a size value that specifies the point that defines the size of the circle or ellipse. See this description of the size constants for specifics.

+ +

Example: closest-side for ellipses

+ +

This ellipse uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_ellipse_size1.png +
 
+
+ +
background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Example: farthest-corner for ellipses

+ +

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_ellipse_size2.png +
 
+
+ +
background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Example: closest-side for circles

+ +

This example uses closest-side, which determines the circle's size as the distance between the start point (the center) and the closest side.

+ + + + + + + + + + + + +
Screen ShotLive Demo
radial_circle_size1.png +
 
+
+ +
background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);
+
+ +

Here, the circle's radius is half the height of the box, since the top and bottom edges are equidistant from the start point and are closer than the left and right edges.

+ +

Repeating gradients

+ +

The {{ cssxref("linear-gradient") }} and {{ cssxref("radial-gradient") }} properties don't support automatically repeating the color stops. However, the {{ cssxref("repeating-linear-gradient") }} and {{ cssxref("repeating-radial-gradient") }} properties are available to offer this functionality.

+ +

Examples: Repeating linear gradient

+ +

This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:

+ + + + + + + + + + + + +
Screen ShotLive Demo
repeating_linear_gradient.png +
 
+
+ +
background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px);
+
+ +

Another example using the {{ cssxref("repeating-linear-gradient") }} property.

+ +

repeat_background_gradient_checked.png

+ +
background-color: #000;
+background-image: repeating-linear-gradient(90deg, transparent, transparent 50px,
+      rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
+      rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
+      rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
+      rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
+      rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
+      rgba(255, 206, 0, 0.25) 166px),
+repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px),
+repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px,
+      rgba(143, 77, 63, 0.25) 10px);
+
+ +

Example: Repeating radial gradient

+ +

This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:

+ + + + + + + + + + + + +
Screen ShotLive Demo
repeating_radial_gradient.png +
 
+
+ +
background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+
+ +

See also

+ + diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/dimensionamiento/index.html deleted file mode 100644 index a5a9b4063c..0000000000 --- a/files/es/web/css/css_logical_properties/dimensionamiento/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Dimensionamiento para propiedades lógicas -slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento -translation_of: Web/CSS/CSS_Logical_Properties/Sizing ---- -
{{CSSRef}}
- -

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

- -

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

- -

Asignaciones para dimensiones

- -

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  horizontal-tb, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.

- -

Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Propiedades LógicasPropiedades Físicas
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
- -

Ejemplo de ancho y alto

- -

Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

- -

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

- -

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

- -

Ejemplo de ancho y alto mínimo

- -

También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.
-
- Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

- -

 

- -

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

- -

Ejemplo de ancho y alto máximo

- -

Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

- -

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

- -

Palabras claves para redimensionamiento lógico

- -

La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

- -

El valor de la palabra clave de bothpara la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.

- -

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

- -
-

Nota: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.

- -

 

-
diff --git a/files/es/web/css/css_logical_properties/sizing/index.html b/files/es/web/css/css_logical_properties/sizing/index.html new file mode 100644 index 0000000000..a5a9b4063c --- /dev/null +++ b/files/es/web/css/css_logical_properties/sizing/index.html @@ -0,0 +1,89 @@ +--- +title: Dimensionamiento para propiedades lógicas +slug: Web/CSS/CSS_Logical_Properties/Dimensionamiento +translation_of: Web/CSS/CSS_Logical_Properties/Sizing +--- +
{{CSSRef}}
+ +

En esta guía explicaremos las asignaciones relativas al flujo relativo entre las propiedades de dimensionamiento físico y lógico usados para dimensionar elementos en nuestras páginas.

+ +

Cuando especificamos el tamaño de un ítem, las Propiedades y Valores Lógicos te dan la habilidad de indicar el dimensionamiento en relación al flujo relativo del texto (en línea y bloque) más bien que dimensionamiento físico con relación a las dimensiones físicas: horizontal y vertical (por ejemplo, left y right). Si bien estas asignaciones de flujo relativo pueden convertirse en el valor predeterminado para muchos de nosotros, en un diseño puede usar el tamaño físico y el tamaño lógico. Es posible que desee que algunas características se relacionen siempre con las dimensiones físicas, independientemente del modo de escritura.

+ +

Asignaciones para dimensiones

+ +

La siguiente tabla proporciona asignaciones entre propiedades lógicas y físicas. Estas asignaciones asumen que estás en un modo de escritura  horizontal-tb, como Inglés o Árabe, en cada caso el ancho ({{CSSxRef("width")}}) sería asignado a {{CSSxRef("inline-size")}}.

+ +

Si tú estás en un modo de escritura vertical, entonces {{CSSxRef("inline-size")}} sería asignado a {{CSSxRef("height")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Propiedades LógicasPropiedades Físicas
{{CSSxRef("inline-size")}}{{CSSxRef("width")}}
{{CSSxRef("block-size")}}{{CSSxRef("height")}}
{{CSSxRef("min-inline-size")}}{{CSSxRef("min-width")}}
{{CSSxRef("min-block-size")}}{{CSSxRef("min-height")}}
{{CSSxRef("max-inline-size")}}{{CSSxRef("max-width")}}
{{CSSxRef("max-block-size")}}{{CSSxRef("max-height")}}
+ +

Ejemplo de ancho y alto

+ +

Las asignaciones para el ancho ({{CSSxRef("width")}}) y el alto ({{CSSxRef("height")}}) son {{CSSxRef("inline-size")}}, que establece el largo en la dimensión en línea y {{CSSxRef("block-size")}}, que establece el largo en la dimensión en bloque. Cuando trabajamos en Inglés, si reemplazamos el ancho (width) con inline-size y el alto (height) con block-size dará el mismo diseño.

+ +

En el siguiente ejemplo, establecemos un modo de escritura horizontal-tb. Cambiamos esto por vertical-rl y veremos que el primer ejemplo — cuando usamos width y height — permanece con el mismo tamaño en cada dimensión, a pesar de que el texto se vuelve vertical. El segundo ejemplo — cuando usamos inline-size y block-size — seguirá la dirección del texto como si todo el bloque hubiera girado.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-inline-block.html", '100%', 500)}}

+ +

Ejemplo de ancho y alto mínimo

+ +

También hay asignaciones para {{CSSxRef ("min-width")}} y {{CSSxRef ("min-height")}} — estas son {{CSSxRef ("min-inline-size")}} y {{ CSSxRef ("min-block-size")}}. Estas funcionan de la misma manera que las propiedades de inline-size y block-size, pero establecen un tamaño mínimo en lugar de uno fijo.
+
+ Intente cambiar el siguiente ejemplo a vertical-rl, como en el primer ejemplo, para ver el efecto que tiene. Estoy usando min-height en el primer ejemplo y min-block-size en el segundo.

+ +

 

+ +

{{EmbedGHLiveSample("css-examples/logical/size-min.html", "100%", 500)}}

+ +

Ejemplo de ancho y alto máximo

+ +

Finalmente, puedes usar {{CSSxRef("max-inline-size")}} y {{CSSxRef("max-block-size")}} como reemplazos de {{CSSxRef("max-width")}} y {{CSSxRef("max-height")}}. Intenta jugar con el siguiente ejemplo de la misma manera que antes.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-max.html", "100%", 500)}}

+ +

Palabras claves para redimensionamiento lógico

+ +

La propiedad {{CSSxRef("resize")}} establece si un elemento se puede redimensionar o no y si tiene valores físicos de horizontal y vertical. La propiedad resize también tiene valores de palabras clave lógicas. Usar resize: inline permite cambiar el tamaño en la dimensión inline y resize: block permite cambiar el tamaño en la dimensión de bloque.

+ +

El valor de la palabra clave de bothpara la propiedad de cambio de tamaño funciona ya sea que esté pensando física o lógicamente. Establece ambas dimensiones a la vez. Intenta jugar con el siguiente ejemplo.

+ +

{{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

+ +
+

Nota: Tenga en cuenta que actualmente los valores lógicos para el cambio de tamaño solo son compatibles con Firefox.

+ +

 

+
diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_modelo_caja/index.html deleted file mode 100644 index 320800f82e..0000000000 --- a/files/es/web/css/css_modelo_caja/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Modelo de Caja de CSS -slug: Web/CSS/CSS_Modelo_Caja -tags: - - CSS - - Modelo de Caja CSS - - Referencia CSS - - Visión general -translation_of: Web/CSS/CSS_Box_Model ---- -
{{CSSRef}}
- -

El modelo de caja CSS  es un módulo  CSS que define cajas rectangulares, incluyendo sus rellenos y márgenes, que son generadas para los elementos y que se disponen de acuerdo al modelo de formato visual.

- -

Referencia

- -

Propiedades

- -

Propiedades que controlan el flujo del contenido en una caja.

- -
- -
- -

Propiedades que controlan el tamaño de una caja.

- -
- -
- -

Propiedades que controlan los márgenes de una caja.

- -
- -
- -

Propiedades que controlan los rellenos de una caja

- -
- -
- -

Otras propiedades

- -
- -
- -

Guías y Herramientas

- -
-
Introduction to the CSS box model
-
Explica uno de los conceptos fundamentales de CSS, el modelo de caja: describe el significado del margen, del relleno, así como de las diferentes zonas de una caja.
-
Mastering margin collapsing
-
En determinados casos dos márgenes adyacentes se convierten en uno. Este artículo explica cuando sucede esto y cómo controlarlo.
-
Box-shadow generator
-
Una herramienta interactiva que permite crear sombras y proporciona la síntaxis necesaria para generar dichas sombras usando la propiedad {{cssxref("box-shadow")}}.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Definición Inicial
- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico1.0{{CompatGeckoMobile("1")}}6.06.01.0
-
diff --git "a/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" "b/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" deleted file mode 100644 index 45571faf77..0000000000 --- "a/files/es/web/css/css_modelo_caja/introducci\303\263n_al_modelo_de_caja_de_css/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Introducción al Modelo de Caja de CSS -slug: Web/CSS/CSS_Modelo_Caja/Introducción_al_modelo_de_caja_de_CSS -tags: - - CSS - - Guía - - Modelo de Caja - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model ---- -
{{CSSRef}}
- -

Al diseñar un documento, el motor de representación del navegador representa cada elemento como un cuadro rectangular según el estándar modelo de caja de CSS. CSS determina el tamaño, la posición y las propiedades (color, fondo, tamaño del borde, etc.) de estos cuadros.

- -

Cada caja se compone de cuatro partes (o áreas), definidas por sus respectivos límites: el límite del contenido, el límite del relleno (padding), el límite del borde y el límite del margen.

- -

CSS Box model

- -

El área de contenido, delimitada por el límite del contenido, contiene el contenido "real" del elemento, como lo puede ser texto, imagen o un reproductor de video. Sus dimensiones son el ancho del contenido (o el ancho de la caja de contenido) y la altura del contenido (o la altura de la caja de contenido). A menudo tiene un color de fondo o una imagen de fondo.

- -

Si la propiedad {{cssxref("box-sizing")}} está configurada en content-box (default), el tamaño del área de contenido se puede definir explícitamente con las propiedades de {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height")}}, {{cssxref("min-height")}} y {{cssxref("max-height")}}.

- -

El área de relleno (padding), delimitada por el límite del relleno, extiende el área de contenido para incluir el relleno del elemento. Sus dimensiones son el ancho de la caja de relleno y la altura de la caja de relleno. Cuando el área de contenido tiene un fondo, se extiende dentro del relleno.

- -

El espesor del relleno está determinado por las propiedades {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}, y la propiedad abreviada {{cssxref("padding")}}.

- -

El área del borde, delimitada por el límite del borde, extiende el área de relleno para incluir los bordes del elemento. Sus dimensiones son el ancho de la caja del borde y la altura de la caja del borde.

- -

El espesor de los bordes está determinado por las propiedades {{cssxref("border-width")}} y la propiedad abreviada {{cssxref("border")}}. Si la propiedad {{cssxref("box-sizing")}} se establece en border-box, el tamaño del área del borde se puede definir explícitamente con las propiedades {{cssxref("width")}}, {{cssxref("min- width")}}, {{cssxref("max-width")}}, {{cssxref("height")}}, {{cssxref("min-height")}}, y {{cssxref("max-height")}}.

- -

El área del margen, delimitada por el límite del margen, extiende el área del borde para incluir un área vacía utilizada para separar el elemento de sus vecinos. Sus dimensiones son el ancho de la caja del margen y la altura de la caja del margen.

- -

El tamaño del área del margen está determinado por las propiedades {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref ("margin-bottom")}}, { {cssxref("margin-left")}}, y la propiedad abreviada {{cssxref ("margin")}}. Cuando se produce el colapso del margen, el área del margen no está claramente definida ya que los márgenes se comparten entre las cajas.

- -

Finalmente, ten en cuenta que para elementos en línea no reemplazados, la cantidad de espacio ocupado (la contribución a la altura de la línea) está determinada por la propiedad {{cssxref ('line-height')}}, aunque los bordes y el relleno todavía se muestran alrededor del contenido.

- -

Especificación

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{ Spec2('CSS2.1') }}Aunque está redactado con más precisión, no hay cambio práctico.
{{ SpecName("CSS1","#formatting-model")}}{{ Spec2('CSS1') }}Definición inicial
- -

Vea también

- - diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html deleted file mode 100644 index dafdf71855..0000000000 --- a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Entendiendo el colapso de margen -slug: Web/CSS/CSS_Modelo_Caja/Mastering_margin_collapsing -tags: - - CSS - - CSS Box Model - - Guía - - Referencia -translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing ---- -
{{CSSRef}}
- -

Los márgenes Top y bottom de los bloques a veces están combinados (colapsados) en un solo margen cuyo tamaño es el mayor de los márgenes combinados, un comportamiento conocido como colapso de margen. Ten en cuenta que los márgenes de flotantes y elementos con posición absoluta nunca colapsan.

- -

El colapso de margen ocurre en tres casos básicos:

- -
-
Hermanos adjacentes
-
Los márgenes de los hermanos adjacentes son colapsados (excepto cuando el último hermano necesita ser limpiado después de usar los flotantes).
-
Padre y primer/último hijo
-
Si no hay un borde, padding, contenido en línea, block formatting context creado, o un limpiado para separar el {{cssxref("margin-top")}} de un bloque del {{cssxref("margin-top")}} de su primer bloque hijo; o no hay borde, padding, contenido en línea, {{cssxref("height")}}, {{cssxref("min-height")}}, o {{cssxref("max-height")}} para separar el {{cssxref("margin-bottom")}} de un bloque del {{cssxref("margin-bottom")}} de su último hijo, entonces esos márgenes colapsan. El margen colapsado termina fuera del padre.
-
Bloques vacíos
-
Si no hay borde, padding, contenido en línea, {{cssxref("height")}}, o {{cssxref("min-height")}} para separar el {{cssxref("margin-top")}} de un bloque de su {{cssxref("margin-bottom")}}, entonces sus márgenes superiores e inferiores colapsan.
-
-

Cosas a tener en cuenta:

- - - - -

Ejemplos

- -

HTML

- -
<p>El margen inferior de este párrafo está colapsado ....</p>
-<p>... con el margen superior de este párrafo, lo que deja un margen de<code>1.2rem</code> entre ellos.</p>
-
-<div>Este elemento padre contiene dos párrafos!
-  <p>Este párrafo tiene un margen de <code>.4rem</code>  entre él y el texto anterior.</p>
-  <p>Mi margen inferior se colapsa con mi padre, produciendo un margen inferior de <code>2rem</code>.</p>
-</div>
-
-<p>Estoy <code>2rem</code> por debajo del elemento de arriba.</p>
- -

CSS

- -
div {
-  margin: 2rem 0;
-  background: lavender;
-}
-
-p {
-  margin: .4rem 0 1.2rem 0;
-  background: yellow;
-}
- -

Result

- -

{{EmbedLiveSample('Ejemplos', 'auto', 350)}}

- - - -

 

- - -

Especificaciones

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Initial definition
- -

También puedes ver

- - - diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html deleted file mode 100644 index 0278b3254f..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: Agregando z-index -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Agregando {{ cssxref("z-index") }}

- -

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

- -

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

- -
-

Precaución: z-index solo tiene efecto si un elemento es posicionado.

-
- - - -
-

Notas:

- - -
- -

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

- -

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

- -

Código fuente de ejemplo

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="UTF-8">
-    <title>Adding z-index</title>
-    <style type="text/css">
-
-    div {
-        opacity: 0.7;
-        font: 12px Arial;
-    }
-
-    span.bold { font-weight: bold; }
-
-    #normdiv {
-        z-index: 8;
-        height: 70px;
-        border: 1px dashed #999966;
-        background-color: #ffffcc;
-        margin: 0px 50px 0px 50px;
-        text-align: center;
-    }
-
-    #reldiv1 {
-        z-index: 3;
-        height: 100px;
-        position: relative;
-        top: 30px;
-        border: 1px dashed #669966;
-        background-color: #ccffcc;
-        margin: 0px 50px 0px 50px;
-        text-align: center;
-    }
-
-    #reldiv2 {
-        z-index: 2;
-        height: 100px;
-        position: relative;
-        top: 15px;
-        left: 20px;
-        border: 1px dashed #669966;
-        background-color: #ccffcc;
-        margin: 0px 50px 0px 50px;
-        text-align: center;
-    }
-
-    #absdiv1 {
-        z-index: 5;
-        position: absolute;
-        width: 150px;
-        height: 350px;
-        top: 10px;
-        left: 10px;
-        border: 1px dashed #990000;
-        background-color: #ffdddd;
-        text-align: center;
-    }
-
-    #absdiv2 {
-        z-index: 1;
-        position: absolute;
-        width: 150px;
-        height: 350px;
-        top: 10px;
-        right: 10px;
-        border: 1px dashed #990000;
-        background-color: #ffdddd;
-        text-align: center;
-    }
-
-    </style>
-</head>
-
-<body>
-
-    <br /><br />
-
-    <div id="absdiv1">
-        <br /><span class="bold">DIV #1</span>
-        <br />position: absolute;
-        <br />z-index: 5;
-    </div>
-
-    <div id="reldiv1">
-        <br /><span class="bold">DIV #2</span>
-        <br />position: relative;
-        <br />z-index: 3;
-    </div>
-
-    <div id="reldiv2">
-        <br /><span class="bold">DIV #3</span>
-        <br />position: relative;
-        <br />z-index: 2;
-    </div>
-
-    <div id="absdiv2">
-        <br /><span class="bold">DIV #4</span>
-        <br />position: absolute;
-        <br />z-index: 1;
-    </div>
-
-    <div id="normdiv">
-        <br /><span class="bold">DIV #5</span>
-        <br />no positioning
-        <br />z-index: 8;
-    </div>
-
-</body>
-</html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- - -
- -

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html deleted file mode 100644 index 81b145e1a3..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Apilamiento y float -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float -tags: - - Avanzado - - CSS - - Entendiendo_CSS_z-index - - Guía - - Referencia - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float ---- -
{{cssref}}
- -

Apilamiento y float

- -

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

- -
    -
  1. Fondo y bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Bloques flotantes
    4. -
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. -
- -

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

- -

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

- -
    -
  1. Fondo y bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Bloques flotantes
    4. -
  4. Descendientes en línea en el flujo normal
    5. -
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. -
- -
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
- -

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

- -

Código fuente de ejemplo

- -

HTML

- -
<div id="abs1">
-  <b>DIV #1</b><br />position: absolute;</div>
-
-<div id="flo1">
-  <b>DIV #2</b><br />float: left;</div>
-
-<div id="flo2">
-  <b>DIV #3</b><br />float: right;</div>
-
-<br />
-
-<div id="sta1">
-  <b>DIV #4</b><br />no positioning</div>
-
-<div id="abs2">
-  <b>DIV #5</b><br />position: absolute;</div>
-
- -

CSS

- -
div {
-  padding: 10px;
-  text-align: center;
-}
-
-b {
-  font-family: sans-serif;
-}
-
-#abs1 {
-  position: absolute;
-  width: 150px;
-  height: 200px;
-  top: 10px;
-  right: 140px;
-  border: 1px dashed #900;
-  background-color: #fdd;
-}
-
-#sta1 {
-  height: 100px;
-  border: 1px dashed #996;
-  background-color: #ffc;
-  margin: 0px 10px 0px 10px;
-  text-align: left;
-}
-
-#flo1 {
-  margin: 0px 10px 0px 20px;
-  float: left;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#flo2 {
-  margin: 0px 20px 0px 10px;
-  float: right;
-  width: 150px;
-  height: 200px;
-  border: 1px dashed #090;
-  background-color: #cfc;
-}
-
-#abs2 {
-  position: absolute;
-  width: 150px;
-  height: 100px;
-  top: 130px;
-  left: 100px;
-  border: 1px dashed #990;
-  background-color: #fdd;
-}
- -

También puedes ver

- - - -
-

Información del documento original

- - -
- -

 

diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html deleted file mode 100644 index def9c5ea8e..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Ejemplo 1 del contexto de apilamiento -slug: >- - Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Ejemplo 1 del contexto de apilamiento

- -

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

- -

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

- -

Stacking context example 1

- -

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

- -

Stacking context example 1

- -

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

- -

Stacking context example 1

- -

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

- -

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

- - - -
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
- -

Ejemplo

- -

HTML

- -
<div id="div1">
-<br /><span class="bold">DIV #1</span>
-<br />position: relative;
-   <div id="div2">
-   <br /><span class="bold">DIV #2</span>
-   <br />position: absolute;
-   <br />z-index: 1;
-   </div>
-</div>
-
-<br />
-
-<div id="div3">
-<br /><span class="bold">DIV #3</span>
-<br />position: relative;
-   <div id="div4">
-   <br /><span class="bold">DIV #4</span>
-   <br />position: absolute;
-   <br />z-index: 2;
-   </div>
-</div>
-
-</body></html>
-
- -

CSS

- -
.bold {
-    font-weight: bold;
-    font: 12px Arial;
-}
-#div1,
-#div3 {
-    height: 80px;
-    position: relative;
-    border: 1px dashed #669966;
-    background-color: #ccffcc;
-    padding-left: 5px;
-}
-#div2 {
-    opacity: 0.8;
-    z-index: 1;
-    position: absolute;
-    width: 150px;
-    height: 200px;
-    top: 20px;
-    left: 170px;
-    border: 1px dashed #990000;
-    background-color: #ffdddd;
-    text-align: center;
-}
-#div4 {
-    opacity: 0.8;
-    z-index: 2;
-    position: absolute;
-    width: 200px;
-    height: 70px;
-    top: 65px;
-    left: 50px;
-    border: 1px dashed #000099;
-    background-color: #ddddff;
-    text-align: left;
-    padding-left: 10px;
-}
- -

Resultado

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

- -

También puedes ver

- - - -
-

Información del documento original

- - -
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html deleted file mode 100644 index 2955b43b7f..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Ejemplo 2 del contexto de apilamiento -slug: >- - Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Ejemplo 2 del contexto de apilamiento

- -

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

- -

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

- -

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

- -

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

- -

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

- - - -
Nota:  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
- -

Código fuente de ejemplo

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-#div2 { z-index: 2; }
-#div3 { z-index: 1; }
-#div4 { z-index: 10; }
-
-#div1,#div3 {
-   height: 80px;
-   position: relative;
-   border: 1px dashed #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#div2 {
-   opacity: 0.8;
-   position: absolute;
-   width: 150px;
-   height: 200px;
-   top: 20px;
-   left: 170px;
-   border: 1px dashed #990000;
-   background-color: #ffdddd;
-   text-align: center;
-}
-
-#div4 {
-   opacity: 0.8;
-   position: absolute;
-   width: 200px;
-   height: 70px;
-   top: 65px;
-   left: 50px;
-   border: 1px dashed #000099;
-   background-color: #ddddff;
-   text-align: left;
-   padding-left: 10px;
-}
-
-
-</style></head>
-
-<body>
-
-    <br />
-
-    <div id="div1"><br />
-        <span class="bold">DIV #1</span><br />
-        position: relative;
-        <div id="div2"><br />
-            <span class="bold">DIV #2</span><br />
-            position: absolute;<br />
-            z-index: 2;
-        </div>
-    </div>
-
-    <br />
-
-    <div id="div3"><br />
-        <span class="bold">DIV #3</span><br />
-        position: relative;<br />
-        z-index: 1;
-        <div id="div4"><br />
-            <span class="bold">DIV #4</span><br />
-            position: absolute;<br />
-            z-index: 10;
-        </div>
-    </div>
-
-</body>
-</html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- - -
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html deleted file mode 100644 index c41d8b56ad..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Ejemplo 3 del contexto de apilamiento -slug: >- - Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 ---- -

« CSS « Understanding CSS z-index

- -

Ejemplo 3 del contexto de apilamiento

- -

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

- -

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

- -

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

- -

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

- -

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

- -

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

- -

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

- -

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

- - - -

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

- -
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
- -

Código fuente de ejemplo

- -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-<head><style type="text/css">
-
-div { font: 12px Arial; }
-
-span.bold { font-weight: bold; }
-
-div.lev1 {
-   width: 250px;
-   height: 70px;
-   position: relative;
-   border: 2px outset #669966;
-   background-color: #ccffcc;
-   padding-left: 5px;
-}
-
-#container1 {
-   z-index: 1;
-   position: absolute;
-   top: 30px;
-   left: 75px;
-}
-
-div.lev2 {
-   opacity: 0.9;
-   width: 200px;
-   height: 60px;
-   position: relative;
-   border: 2px outset #990000;
-   background-color: #ffdddd;
-   padding-left: 5px;
-}
-
-#container2 {
-   z-index: 1;
-   position: absolute;
-   top: 20px;
-   left: 110px;
-}
-
-div.lev3 {
-   z-index: 10;
-   width: 100px;
-   position: relative;
-   border: 2px outset #000099;
-   background-color: #ddddff;
-   padding-left: 5px;
-}
-
-</style></head>
-
-<body>
-
-<br />
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-
-   <div id="container1">
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-
-         <div id="container2">
-
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-            <div class="lev3"><span class="bold">LEVEL #3</span></div>
-
-         </div>
-
-      </div>
-
-      <div class="lev2">
-      <br /><span class="bold">LEVEL #2</span>
-      <br />z-index: 1;
-      </div>
-
-   </div>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-<div class="lev1">
-<span class="bold">LEVEL #1</span>
-</div>
-
-</body></html>
-
- -

También puedes ver

- - - -
-

Información del documento original

- - -
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html deleted file mode 100644 index 1daf172048..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: El contexto de apilamiento -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context ---- -

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

El contexto de apilamiento

- -

 

- -

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

- -

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

- - - -

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

- -

En resumen:

- - - -
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
- -

El ejemplo

- -

Example of stacking rules modified using z-index

- -

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

- - - -

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

- -
-

Notas:

- - -
- -

Ejemplo

- -

HTML

- -
    <div id="div1">
-      <h1>Division Element #1</h1>
-      <code>position: relative;<br/>
-      z-index: 5;</code>
-    </div>
-
-    <div id="div2">
-      <h1>Division Element #2</h1>
-      <code>position: relative;<br/>
-      z-index: 2;</code>
-    </div>
-
-    <div id="div3">
-
-      <div id="div4">
-        <h1>Division Element #4</h1>
-        <code>position: relative;<br/>
-        z-index: 6;</code>
-      </div>
-
-      <h1>Division Element #3</h1>
-      <code>position: absolute;<br/>
-      z-index: 4;</code>
-
-      <div id="div5">
-        <h1>Division Element #5</h1>
-        <code>position: relative;<br/>
-        z-index: 1;</code>
-      </div>
-
-      <div id="div6">
-        <h1>Division Element #6</h1>
-        <code>position: absolute;<br/>
-        z-index: 3;</code>
-      </div>
-    </div>
-
- -

CSS

- -
* {
-    margin: 0;
-}
-html {
-    padding: 20px;
-    font: 12px/20px Arial, sans-serif;
-}
-div {
-    opacity: 0.7;
-    position: relative;
-}
-h1 {
-    font: inherit;
-    font-weight: bold;
-}
-#div1,
-#div2 {
-    border: 1px dashed #696;
-    padding: 10px;
-    background-color: #cfc;
-}
-#div1 {
-    z-index: 5;
-    margin-bottom: 190px;
-}
-#div2 {
-    z-index: 2;
-}
-#div3 {
-    z-index: 4;
-    opacity: 1;
-    position: absolute;
-    top: 40px;
-    left: 180px;
-    width: 330px;
-    border: 1px dashed #900;
-    background-color: #fdd;
-    padding: 40px 20px 20px;
-}
-#div4,
-#div5 {
-    border: 1px dashed #996;
-    background-color: #ffc;
-}
-#div4 {
-    z-index: 6;
-    margin-bottom: 15px;
-    padding: 25px 10px 5px;
-}
-#div5 {
-    z-index: 1;
-    margin-top: 15px;
-    padding: 5px 10px;
-}
-#div6 {
-    z-index: 3;
-    position: absolute;
-    top: 20px;
-    left: 180px;
-    width: 150px;
-    height: 125px;
-    border: 1px dashed #009;
-    padding-top: 125px;
-    background-color: #ddf;
-    text-align: center;
-}
- -

Resultado

- -

{{ EmbedLiveSample('Example', '556', '396') }}

- -

También puedes ver

- - - -
-

Información del documento original

- - -
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/index.html deleted file mode 100644 index 14971890e0..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Entendiendo la propiedad CSS z-index -slug: Web/CSS/CSS_Positioning/entendiendo_z_index -tags: - - Avanzado - - CSS - - Entendiendo_CSS_Z_Index - - Guía - - Referencia - - z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index ---- -

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

- -
-

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

-
- -

(de CSS 2.1 Section 9.9.1 - Layered presentation)

- -

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

- -

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

- -

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

- -
    -
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. -
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. -
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. -
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. -
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. -
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. -
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. -
- -

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

- -
-

Información del documento original

- - -
diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html deleted file mode 100644 index 97038e7bae..0000000000 --- a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: Apilando sin z-index -slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index -translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index ---- -

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

- -

Apilando sin z-index

- -

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

- -
    -
  1. El fondo y los bordes del elemento raiz
    2. -
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. -
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. -
- -

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

- -
-

Notas:

- - -
- -

understanding_zindex_01.png

- -

 

- -

Ejemplo

- -

HTML

- -
<div id="absdiv1">
-    <br /><span class="bold">DIV #1</span>
-    <br />position: absolute; </div>
-<div id="reldiv1">
-    <br /><span class="bold">DIV #2</span>
-    <br />position: relative; </div>
-<div id="reldiv2">
-    <br /><span class="bold">DIV #3</span>
-    <br />position: relative; </div>
-<div id="absdiv2">
-    <br /><span class="bold">DIV #4</span>
-    <br />position: absolute; </div>
-<div id="normdiv">
-    <br /><span class="bold">DIV #5</span>
-    <br />no positioning </div>
-
- -

CSS

- -
 .bold {
-     font-weight: bold;
-     font: 12px Arial;
- }
- #normdiv {
-     height: 70px;
-     border: 1px dashed #999966;
-     background-color: #ffffcc;
-     margin: 0px 50px 0px 50px;
-     text-align: center;
- }
- #reldiv1 {
-     opacity: 0.7;
-     height: 100px;
-     position: relative;
-     top: 30px;
-     border: 1px dashed #669966;
-     background-color: #ccffcc;
-     margin: 0px 50px 0px 50px;
-     text-align: center;
- }
- #reldiv2 {
-     opacity: 0.7;
-     height: 100px;
-     position: relative;
-     top: 15px;
-     left: 20px;
-     border: 1px dashed #669966;
-     background-color: #ccffcc;
-     margin: 0px 50px 0px 50px;
-     text-align: center;
- }
- #absdiv1 {
-     opacity: 0.7;
-     position: absolute;
-     width: 150px;
-     height: 350px;
-     top: 10px;
-     left: 10px;
-     border: 1px dashed #990000;
-     background-color: #ffdddd;
-     text-align: center;
- }
- #absdiv2 {
-     opacity: 0.7;
-     position: absolute;
-     width: 150px;
-     height: 350px;
-     top: 10px;
-     right: 10px;
-     border: 1px dashed #990000;
-     background-color: #ffdddd;
-     text-align: center;
- }
-
- -

Resultado

- -

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

- -

También puedes ver

- - - -
-

Información del documento original

- - -
- -

 

diff --git a/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..0278b3254f --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,179 @@ +--- +title: Agregando z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Agregando_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Agregando {{ cssxref("z-index") }}

+ +

El primer ejemplo, Apilando sin z-index, explica cómo es organizado el apilamiento por defecto. Si quieres especificar un orden diferente de apilamiento, debes posicionar un elemento y usar la propiedad z-index.

+ +

Esta propiedad es asignada con un valor entero (positivo o negativo), el cuál representa la posición del elemento en el eje-Z. Si no estás familiarizado con el eje-Z, imagina que la página tiene muchas capas una encima de la otra. Cada capa es numerada. Una capa con un número mayor es renderizada encima de las capas con números menores.

+ +
+

Precaución: z-index solo tiene efecto si un elemento es posicionado.

+
+ + + +
+

Notas:

+ + +
+ +

En el siguiente ejempo, el orden de apilamiento de las capas es organizado usando z-index. El z-index del DIV#5 no hace efecto ya que este no es un elemento posicionado.

+ +

{{ EmbedLiveSample('Example_source_code', '468', '365', '', 'Web/Guide/CSS/Understanding_z_index/Adding_z-index') }}

+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Adding z-index</title>
+    <style type="text/css">
+
+    div {
+        opacity: 0.7;
+        font: 12px Arial;
+    }
+
+    span.bold { font-weight: bold; }
+
+    #normdiv {
+        z-index: 8;
+        height: 70px;
+        border: 1px dashed #999966;
+        background-color: #ffffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv1 {
+        z-index: 3;
+        height: 100px;
+        position: relative;
+        top: 30px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #reldiv2 {
+        z-index: 2;
+        height: 100px;
+        position: relative;
+        top: 15px;
+        left: 20px;
+        border: 1px dashed #669966;
+        background-color: #ccffcc;
+        margin: 0px 50px 0px 50px;
+        text-align: center;
+    }
+
+    #absdiv1 {
+        z-index: 5;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        left: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    #absdiv2 {
+        z-index: 1;
+        position: absolute;
+        width: 150px;
+        height: 350px;
+        top: 10px;
+        right: 10px;
+        border: 1px dashed #990000;
+        background-color: #ffdddd;
+        text-align: center;
+    }
+
+    </style>
+</head>
+
+<body>
+
+    <br /><br />
+
+    <div id="absdiv1">
+        <br /><span class="bold">DIV #1</span>
+        <br />position: absolute;
+        <br />z-index: 5;
+    </div>
+
+    <div id="reldiv1">
+        <br /><span class="bold">DIV #2</span>
+        <br />position: relative;
+        <br />z-index: 3;
+    </div>
+
+    <div id="reldiv2">
+        <br /><span class="bold">DIV #3</span>
+        <br />position: relative;
+        <br />z-index: 2;
+    </div>
+
+    <div id="absdiv2">
+        <br /><span class="bold">DIV #4</span>
+        <br />position: absolute;
+        <br />z-index: 1;
+    </div>
+
+    <div id="normdiv">
+        <br /><span class="bold">DIV #5</span>
+        <br />no positioning
+        <br />z-index: 8;
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
+ +

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/es/web/css/css_positioning/understanding_z_index/index.html b/files/es/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..14971890e0 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,47 @@ +--- +title: Entendiendo la propiedad CSS z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index +tags: + - Avanzado + - CSS + - Entendiendo_CSS_Z_Index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

Usualmente se puede considerar que las páginas HTML tienen dos dimensiones, porque el texto, las imágenes y otros elementos son organizados en la página sin superponerse. Hay un solo flujo de renderizado, y todos los elementos son concientes del espacio ocupado por otros. El atributo {{cssxref("z-index")}} te permite ajustar el orden de las capas de los objetos cuando el contenido está siendo renderizado.

+ +
+

En CSS 2.1, cada caja tiene una posición en tres dimensiones. Adicionalmente a sus posiciones horizontales y verticales, las cajas caen a lo largo de un "eje-z" y son formadas una encima de la otra. Las posiciones eje-Z son particularmente relevantes cuando las cajas se superponen visualmente.

+
+ +

(de CSS 2.1 Section 9.9.1 - Layered presentation)

+ +

Eso significa que las reglas de estilo CSS te permiten posicionar cajas en capas adicionales a la capa normal de renderizado (capa 0). La posición Z de cada capa es expresada como un entero que representa el orden de apilamiento durante el proceso de renderizado. Números más grandes significan mayor cercanía al observador. La posición Z puede ser controlada con la propiedad CSS {{ cssxref("z-index") }}.

+ +

Usar z-index parece extremadamente fácil: una sola propiedad, asigna un número entero, con un comportamiento fácil de entender. Sin embargo, cuando z-index es aplicada a jerarquías complejas de elementos HTML, su comportamiento puede ser difícil de entender o incluso impredecible. Esto es debido a reglas complejas de apilamiento. De hecho una sección dedicada ha sido reservada en la especificación CSS CSS-2.1 Appendix E para explicar mejor estas reglas.

+ +

Este artículo va a intentar explicar esas reglas, de una forma más simple y con varios ejemplos.

+ +
    +
  1. Apilando sin z-index : Reglas de apilamiento por defecto
    2. +
  2. Apilamiento y float : Cómo son manejados los elementos flotantes
    3. +
  3. Agregando z-index : Usando z-index para cambiar el apilamiento por defecto
    4. +
  4. El contexto de apilamiento : Notas sobre el contexto de apilamiento
    5. +
  5. Ejemplo 1 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en el último nivel
    6. +
  6. Ejemplo 2 del contexto de apilamiento : Jerarquía HTML de 2 niveles, z-index en todos los niveles
    7. +
  7. Ejemplo 3 del contexto de apilamiento : Jerarquía HTML de 3 niveles, z-index en el segundo nivel
    8. +
+ +

Nota del autor: Gracias a Wladimir Palant y Rod Whiteley por la revisión.

+ +
+

Información del documento original

+ + +
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..81b145e1a3 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,144 @@ +--- +title: Apilamiento y float +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Apilamiento_y_float +tags: + - Avanzado + - CSS + - Entendiendo_CSS_z-index + - Guía + - Referencia + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +
{{cssref}}
+ +

Apilamiento y float

+ +

Para los bloques flotantes el orden de apilamiento es un poco diferente. Los bloques flotantes son colocados entre bloques no posicionados y bloques posicionados:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    5. +
+ +

En realidad, como puedes ver en el siguiente ejemplo, el fondo y el borde del bloque no posicionado (DIV #4) no son afectados por los bloques flotantes, mientras que el contenido si es afectado. Esto ocurre de acuerdo al comportamiento flotante stándar de CSS.

+ +

Este comportamiento puede ser explicado con una versión mejorada de la lista previa:

+ +
    +
  1. Fondo y bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Bloques flotantes
    4. +
  4. Descendientes en línea en el flujo normal
    5. +
  5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
    6. +
+ +
Nota: En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+ +

{{ EmbedLiveSample('Example_source_code', '563', '255', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_and_float') }}

+ +

Código fuente de ejemplo

+ +

HTML

+ +
<div id="abs1">
+  <b>DIV #1</b><br />position: absolute;</div>
+
+<div id="flo1">
+  <b>DIV #2</b><br />float: left;</div>
+
+<div id="flo2">
+  <b>DIV #3</b><br />float: right;</div>
+
+<br />
+
+<div id="sta1">
+  <b>DIV #4</b><br />no positioning</div>
+
+<div id="abs2">
+  <b>DIV #5</b><br />position: absolute;</div>
+
+ +

CSS

+ +
div {
+  padding: 10px;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  position: absolute;
+  width: 150px;
+  height: 200px;
+  top: 10px;
+  right: 140px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  height: 100px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 10px 0px 10px;
+  text-align: left;
+}
+
+#flo1 {
+  margin: 0px 10px 0px 20px;
+  float: left;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#flo2 {
+  margin: 0px 20px 0px 10px;
+  float: right;
+  width: 150px;
+  height: 200px;
+  border: 1px dashed #090;
+  background-color: #cfc;
+}
+
+#abs2 {
+  position: absolute;
+  width: 150px;
+  height: 100px;
+  top: 130px;
+  left: 100px;
+  border: 1px dashed #990;
+  background-color: #fdd;
+}
+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
+ +

 

diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..def9c5ea8e --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,132 @@ +--- +title: Ejemplo 1 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 1 del contexto de apilamiento

+ +

Empecemos con un ejemplo básico. En el contexto de apilamiento raíz tenemos dos DIVs (DIV #1 and DIV #3), ambos con posición relativa, pero sin propiedad z-index. Dentro del DIV #1 se encuentra el DIV #2 de posición absoluta, mientras que en el DIV #3 se encuentra el DIV #4 con posición absoluta, ambos sin propiedad z-index.

+ +

El único contexto de apilamiento es el contexto raíz. Sin la propiedad z-index, los elementos son apilados por orden de ocurrencia.

+ +

Stacking context example 1

+ +

Si a DIV #2 le asignamos un valor z-index positivo (no-cero y no-auto), es renderizado encima de todos los otros DIVs.

+ +

Stacking context example 1

+ +

Luego si al DIV #4 también se le asigna un z-index positivo mayor que el z-index del DIV #2, es renderizado encima de los otros DIVs incluyendo DIV #2.

+ +

Stacking context example 1

+ +

En este último ejemplo puedes ver que el DIV #2 y el DIV #4 no son hermanos, porque pertenecen a padres distintos en la jerarquía de elementos HTML. A pesar de esto, el apilamiento del DIV #4 con respecto al DIV #2 puede ser controlado a través de z-index. Pasa que, dado a que al DIV #1 y al DIV #3 no se le ha asignado ningún valor z-index, ellos no han creado un contexto de apilamiento. Esto significa que todos sus contenidos, incluyendo el DIV #2 y el DIV #4, pertenecen al mismo contexto de apilamiento raíz.

+ +

En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente asimilados dentro del elemento raíz, y la jerarquía resultante es la siguiente:

+ + + +
Nota: El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+ +

Ejemplo

+ +

HTML

+ +
<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+ +

CSS

+ +
.bold {
+    font-weight: bold;
+    font: 12px Arial;
+}
+#div1,
+#div3 {
+    height: 80px;
+    position: relative;
+    border: 1px dashed #669966;
+    background-color: #ccffcc;
+    padding-left: 5px;
+}
+#div2 {
+    opacity: 0.8;
+    z-index: 1;
+    position: absolute;
+    width: 150px;
+    height: 200px;
+    top: 20px;
+    left: 170px;
+    border: 1px dashed #990000;
+    background-color: #ffdddd;
+    text-align: center;
+}
+#div4 {
+    opacity: 0.8;
+    z-index: 2;
+    position: absolute;
+    width: 200px;
+    height: 70px;
+    top: 65px;
+    left: 50px;
+    border: 1px dashed #000099;
+    background-color: #ddddff;
+    text-align: left;
+    padding-left: 10px;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..2955b43b7f --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,137 @@ +--- +title: Ejemplo 2 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Ejemplo 2 del contexto de apilamiento

+ +

Este es un ejemplo muy simple, pero es la clave para entender el concepto de contexto de apilamiento. Tenemos los mismos 4 DIVs del ejemplo previo, pero ahora las propiedades z-index son asignadas en ambos niveles de la jerarquía.

+ +

{{ EmbedLiveSample('Example_source_code', '352', '270', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2') }}

+ +

Puedes ver que el DIV #2 (z-index: 2) está encima del DIV #3 (z-index: 1), porque ambos pertenecen al mismo contexto de apilamiento (el contexto raíz), así que los valores z-index indican cómo son apilados los elementos.

+ +

Lo que puede ser considerado extraño es que el DIV #2 (z-index: 2) está encima del DIV #4 (z-index: 10), a pesar de sus valores z-index. La razón es que ellos no pertenecen al mismo contexto de apilamiento. El DIV #4 pertenece al contexto de apilamiento creado por el DIV #3, y como explicamos previamente el DIV #3 (y todos su contenido) está debajo del DIV #2.

+ +

Para entender mejor esta situación, esta es la jerarquía del contexto de apilamiento:

+ + + +
Nota:  Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+    <br />
+
+    <div id="div1"><br />
+        <span class="bold">DIV #1</span><br />
+        position: relative;
+        <div id="div2"><br />
+            <span class="bold">DIV #2</span><br />
+            position: absolute;<br />
+            z-index: 2;
+        </div>
+    </div>
+
+    <br />
+
+    <div id="div3"><br />
+        <span class="bold">DIV #3</span><br />
+        position: relative;<br />
+        z-index: 1;
+        <div id="div4"><br />
+            <span class="bold">DIV #4</span><br />
+            position: absolute;<br />
+            z-index: 10;
+        </div>
+    </div>
+
+</body>
+</html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..c41d8b56ad --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,183 @@ +--- +title: Ejemplo 3 del contexto de apilamiento +slug: >- + Web/CSS/CSS_Positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +

« CSS « Understanding CSS z-index

+ +

Ejemplo 3 del contexto de apilamiento

+ +

Este último ejemplo muestra los problemas que surgen cuando se combinan varios elementos posicionados en una jerarquía HTML multi nivel y cuando los valores z-index son asignados usando selectores de clase.

+ +

Tomemos como ejemplo un menú jerárquico de tres niveles formado por varios DIVs posicionados. DIVs de segundo y tercer nivel aparecen cuando se pone el cursor encima o se hace clic en sus padres. Usualmente este tipo de menú es generado mediante un script del lado del cliente o del lado del servidor, así que las reglas de estilos son asignadas con un selector de clase en lugar de un selector de id.

+ +

Si los tres niveles del menú se superponen parcialmente, entonces gestionar el apilamiento se podría convertir en un problema.

+ +

{{ EmbedLiveSample('Example_source_code', '320', '330', '', 'Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3') }}

+ +

El menú de primer nivel solo tiene posición relativa, así que ningún contexto de apilamiento es creado.

+ +

El menú de segundo nivel tiene posición absoluta dentro del elemento padre. Para colocarlo encima de todos los menus de primer nivel, usamos z-index. El problema es que para cada menú de segundo nivel, un contexto de apilamiento es creado y cada menú de tercer nivel pertenece al contexto de su padre.

+ +

De manera que un menú de tercer nivel va a ser apilado bajo los menus de segundo nivel porque todos los menus de segundo nivel comparten el mismo valor z-index y las reglas de apilamiento por defecto son aplicadas.

+ +

Para entender mejor la situación, esta es la jerarquía del contexto de apilamiento:

+ + + +

Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.

+ +
Nota: En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+ +

Código fuente de ejemplo

+ +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
diff --git a/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..97038e7bae --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,141 @@ +--- +title: Apilando sin z-index +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

Apilando sin z-index

+ +

Cuando ningún elemento tiene z-index, los elementos son apilados en este orden (de abajo hacia arriba):

+ +
    +
  1. El fondo y los bordes del elemento raiz
    2. +
  2. Bloques descendientes en el flujo normal, en orden de aparición (en HTML)
    3. +
  3. Elementos posicionados descendentemente, en orden de aparición (en HTML)
    4. +
+ +

En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.

+ +
+

Notas:

+ + +
+ +

understanding_zindex_01.png

+ +

 

+ +

Ejemplo

+ +

HTML

+ +
<div id="absdiv1">
+    <br /><span class="bold">DIV #1</span>
+    <br />position: absolute; </div>
+<div id="reldiv1">
+    <br /><span class="bold">DIV #2</span>
+    <br />position: relative; </div>
+<div id="reldiv2">
+    <br /><span class="bold">DIV #3</span>
+    <br />position: relative; </div>
+<div id="absdiv2">
+    <br /><span class="bold">DIV #4</span>
+    <br />position: absolute; </div>
+<div id="normdiv">
+    <br /><span class="bold">DIV #5</span>
+    <br />no positioning </div>
+
+ +

CSS

+ +
 .bold {
+     font-weight: bold;
+     font: 12px Arial;
+ }
+ #normdiv {
+     height: 70px;
+     border: 1px dashed #999966;
+     background-color: #ffffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv1 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 30px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #reldiv2 {
+     opacity: 0.7;
+     height: 100px;
+     position: relative;
+     top: 15px;
+     left: 20px;
+     border: 1px dashed #669966;
+     background-color: #ccffcc;
+     margin: 0px 50px 0px 50px;
+     text-align: center;
+ }
+ #absdiv1 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     left: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+ #absdiv2 {
+     opacity: 0.7;
+     position: absolute;
+     width: 150px;
+     height: 350px;
+     top: 10px;
+     right: 10px;
+     border: 1px dashed #990000;
+     background-color: #ffdddd;
+     text-align: center;
+ }
+
+ +

Resultado

+ +

(Si la imagen no aparece en CodePen, haz clic en el botón Tidy en la sección CSS)

+ +

{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
+ +

 

diff --git a/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..1daf172048 --- /dev/null +++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,231 @@ +--- +title: El contexto de apilamiento +slug: Web/CSS/CSS_Positioning/entendiendo_z_index/El_contexto_de_apilamiento +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +

El contexto de apilamiento es la conceptualización tridimensional de los elementos HTML a lo largo de un eje-Z imaginario relativo al usuario que se asume está de cara al viewport o página web. Los elementos HTML ocupan este espacio por orden de prioridad basado en sus atributos.

+ +

« CSS « ENTENDIENDO LA PROPIEDAD CSS Z-INDEX

+ +

El contexto de apilamiento

+ +

 

+ +

En el ejemplo previo, Agregando z-index, el orden de renderizado de ciertos DIVs es influenciado por sus valores z-index. Esto ocurre debido a que estos DIVs tienen propiedades especiales que causan que formen un contexto de apilamiento.

+ +

Un contexto de apilamiento es formado, en cualquier lugar del documento, por cualquier elemento que

+ + + +

Dentro de un contexto de apilamiento, los elementos hijos son apilados de acuerdo a las mismas reglas previamente explicadas. Es importante entender que los valores z-index de los contextos de apilamiento de los hijos solo tienen sentido en el contexto del padre. Los contextos de apilamiento son tratados atómicamente como una sola unidad en el contexto de apilamiento del padre.

+ +

En resumen:

+ + + +
Nota: La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+ +

El ejemplo

+ +

Example of stacking rules modified using z-index

+ +

En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento, debido a sus valores de posicionamiento y z-index. La jerarquía de contextos de apilamiento es organizada de la siguiente manera:

+ + + +

Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.

+ +
+

Notas:

+ + +
+ +

Ejemplo

+ +

HTML

+ +
    <div id="div1">
+      <h1>Division Element #1</h1>
+      <code>position: relative;<br/>
+      z-index: 5;</code>
+    </div>
+
+    <div id="div2">
+      <h1>Division Element #2</h1>
+      <code>position: relative;<br/>
+      z-index: 2;</code>
+    </div>
+
+    <div id="div3">
+
+      <div id="div4">
+        <h1>Division Element #4</h1>
+        <code>position: relative;<br/>
+        z-index: 6;</code>
+      </div>
+
+      <h1>Division Element #3</h1>
+      <code>position: absolute;<br/>
+      z-index: 4;</code>
+
+      <div id="div5">
+        <h1>Division Element #5</h1>
+        <code>position: relative;<br/>
+        z-index: 1;</code>
+      </div>
+
+      <div id="div6">
+        <h1>Division Element #6</h1>
+        <code>position: absolute;<br/>
+        z-index: 3;</code>
+      </div>
+    </div>
+
+ +

CSS

+ +
* {
+    margin: 0;
+}
+html {
+    padding: 20px;
+    font: 12px/20px Arial, sans-serif;
+}
+div {
+    opacity: 0.7;
+    position: relative;
+}
+h1 {
+    font: inherit;
+    font-weight: bold;
+}
+#div1,
+#div2 {
+    border: 1px dashed #696;
+    padding: 10px;
+    background-color: #cfc;
+}
+#div1 {
+    z-index: 5;
+    margin-bottom: 190px;
+}
+#div2 {
+    z-index: 2;
+}
+#div3 {
+    z-index: 4;
+    opacity: 1;
+    position: absolute;
+    top: 40px;
+    left: 180px;
+    width: 330px;
+    border: 1px dashed #900;
+    background-color: #fdd;
+    padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+    border: 1px dashed #996;
+    background-color: #ffc;
+}
+#div4 {
+    z-index: 6;
+    margin-bottom: 15px;
+    padding: 25px 10px 5px;
+}
+#div5 {
+    z-index: 1;
+    margin-top: 15px;
+    padding: 5px 10px;
+}
+#div6 {
+    z-index: 3;
+    position: absolute;
+    top: 20px;
+    left: 180px;
+    width: 150px;
+    height: 125px;
+    border: 1px dashed #009;
+    padding-top: 125px;
+    background-color: #ddf;
+    text-align: center;
+}
+ +

Resultado

+ +

{{ EmbedLiveSample('Example', '556', '396') }}

+ +

También puedes ver

+ + + +
+

Información del documento original

+ + +
diff --git a/files/es/web/css/css_reglas_condicionales/index.html b/files/es/web/css/css_reglas_condicionales/index.html deleted file mode 100644 index 59c2a9b328..0000000000 --- a/files/es/web/css/css_reglas_condicionales/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: CSS Reglas Condicionales -slug: Web/CSS/CSS_Reglas_Condicionales -tags: - - CSS - - Referencia -translation_of: Web/CSS/CSS_Conditional_Rules ---- -
{{CSSRef}}
- -

Las Reglas Condicionales (At-rules) es un módulo de CSS que permite definir un conjunto de reglas que solo aplicarán con base en las capacidades del procesador o del documento al cual la hoja de estilos está siendo aplicada.

- -

Referencia

- -

Reglas condicionales

- -
- -
- -

Guías

- -

None.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Definición Inicial
- -

Compatibilidad de navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CatacterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CatacterísticaAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
diff --git a/files/es/web/css/css_selectors/index.html b/files/es/web/css/css_selectors/index.html new file mode 100644 index 0000000000..20baaf25a6 --- /dev/null +++ b/files/es/web/css/css_selectors/index.html @@ -0,0 +1,164 @@ +--- +title: Selectores CSS +slug: Web/CSS/Selectores_CSS +tags: + - CSS + - Referencia + - Selectores + - Selectores de CSS + - Visión general +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef}}
+ +

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

+ +

Selectores básicos

+ +
+
Selector de tipo
+
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
+ Sintaxis: eltname
+ Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
+
Selector de clase
+
Selecciona todos los elementos que tienen el atributo de class especificado.
+ Sintaxis: .classname
+ Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
+
Selector de ID
+
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
+ Sintaxis: #idname
+ Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
+
Selector universal
+
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
+ Sintaxis: * ns|* *|*
+ Ejemplo: * se aplicará a todos los elementos del documento.
+
Selector de atributo
+
Selecciona elementos basándose en el valor de un determinado atributo.
+ Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
+
+ +

Combinadores

+ +
+
Combinador de hermanos adyacentes
+
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
+ Sintaxis: A + B
+ Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
+
Combinador general de hermanos
+
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
+ Sintaxis: A ~ B
+ Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
+
Combinador de hijo
+
El combinador > selecciona los elementos que son hijos directos del primer elemento.
+ Sintaxis: A > B
+ Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
+
Combinador de descendientes
+
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
+ Sintaxis: A B
+ Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
+
Combinador de columna {{Experimental_Inline}}
+
El combinador || selecciona los elementos especificados pertenecientes a una columna.
+ Sintaxis: A || B
+ Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
+
+ +

Pseudoclases

+ +
+
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
+
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
+
+ +

Pseudoelementos

+ +
+
+

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

+
+
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
diff --git a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html new file mode 100644 index 0000000000..fe51517a2b --- /dev/null +++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -0,0 +1,67 @@ +--- +title: 'Usando la pseudo-clase :target en selectores' +slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' +tags: + - CSS + - CSS3 + - Selectores +translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' +--- +

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

+ +

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

+ +

Seleccionando un objetivo (target)

+ +

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

+ +

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

+ +
h2:target {font-weight: bold;}
+ +

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

+ +
#Example:target {border: 1px solid black;}
+ +

Aplicando estilos a todos los elementos objetivo

+ +

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

+ +
:target {color: red;}
+
+ +

Ejemplo

+ +

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Conclusión

+ +

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

+ + + + + +
+

Información del Documento Original

+ + +
diff --git a/files/es/web/css/css_text/index.html b/files/es/web/css/css_text/index.html new file mode 100644 index 0000000000..f0c3c934b6 --- /dev/null +++ b/files/es/web/css/css_text/index.html @@ -0,0 +1,123 @@ +--- +title: Texto CSS +slug: Web/CSS/Texto_CSS +tags: + - CSS + - Texto CSS + - Vista general +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

Texto CSS  es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

+ +

Referencia

+ +

Propiedades

+ +
+ +
+ +

Guías

+ +

None.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
+
diff --git a/files/es/web/css/css_transitions/using_css_transitions/index.html b/files/es/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..62142638c4 --- /dev/null +++ b/files/es/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,700 @@ +--- +title: Transiciones de CSS +slug: Web/CSS/Transiciones_de_CSS +tags: + - CSS + - Gecko + - Transiciones de CSS +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +

{{ SeeCompatTable() }}

+ +

Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

+ +
Nota: como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como -moz-transition, -webkit-transition y -o-transition.
+ +

Las propiedades de transición CSS

+ +

Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

+ +

Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:

+ +
+
{{ cssxref("transition-property") }}
+
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.
+
{{ cssxref("transition-duration") }}
+
Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
+
{{ cssxref("transition-timing-function") }}
+
Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.
+
{{ cssxref("transition-delay") }}
+
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.
+
+ +

Detectar la finalización de una transición

+ +

Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento transitionend ofrece dos propiedades:

+ +
+
propertyName
+
Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.
+
elapsedTime
+
Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.
+
+ +

Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +
Nota: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
+ +

Propiedades que pueden ser animadas

+ +

Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

+ +
Nota: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipo de valor
{{ cssxref("background-color") }}{{cssxref("<color>")}}
{{ cssxref("background-image") }}solo degradado; no está implementado en Firefox (see {{ bug(536540) }})
{{ cssxref("background-position") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("background-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-color") }} (including sub-properties){{cssxref("<color>")}}
{{ cssxref("border-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-width") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("border-spacing") }}{{cssxref("<length>")}}
{{ cssxref("bottom") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-box-flex") }}número
{{ cssxref("box-shadow") }}sombra
{{ cssxref("color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-count") }}número
{{ cssxref("-moz-column-gap") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-rule-color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-rule-width") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-width") }}{{cssxref("<length>")}}
{{ cssxref("clip") }}rectágulo
{{ svgattr("fill") }}pintar
{{ svgattr("fill-opacity") }}valor de opacidad
{{ svgattr("flood-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("font-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("font-size-adjust") }}números, palabras clave
{{ cssxref("font-stretch") }}palabras clave
{{ cssxref("font-weight") }}números| palabras clave (excluyendo bolder, lighter)
{{ cssxref("height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-image-region") }}rect()
{{ cssxref("left") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("letter-spacing") }}{{cssxref("<length>")}}
{{ svgattr("lighting-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("line-height") }}número | {{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("margin") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("marker-offset") }}{{cssxref("<length>")}}
{{ cssxref("max-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("max-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("opacity") }}número
{{ cssxref("outline-color") }}{{cssxref("<color>")}}
{{ cssxref("outline-offset") }}entero
{{ cssxref("-moz-outline-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("outline-width") }}{{cssxref("<length>")}}
{{ cssxref("padding") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("right") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stop-color") }}{{cssxref("<color>")}} | palabras clave
{{ svgattr("stop-opacity") }}valor de opacidad
{{ svgattr("stroke") }}pintar
{{ svgattr("stroke-dasharray") }}dasharray
{{ svgattr("stroke-dashoffset") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stroke-miterlimit") }}miterlimit
{{ svgattr("stroke-opacity") }}valor de opacidad
{{ svgattr("stroke-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-indent") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-shadow") }}sombra
{{ cssxref("top") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-transform-origin") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, keywords
{{ cssxref("-moz-transform") }}transform-function
{{ cssxref("vertical-align") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, palabras clave
{{ cssxref("visibility") }}visibilidad
{{ cssxref("width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("word-spacing") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("z-index") }}entero
+ +

Cuando las listas de valores de propiedades tienen longitudes diferentes

+ +

Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

Se considera como si fuera:

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

Se interpreta como:

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

Funciones de intervalos de transición

+ +

Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:

+ +

+ +

En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:

+ + + +

Ejemplos

+ +

Una muestra del efecto de transición

+ +

Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.

+ +

En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

+ +
<ul>
+  <li id="long1">Transición larga, gradual...</li>
+  <li id="fast1">Transición muy rápida...</li>
+  <li id="delay1">Transición larga de un minuto de retraso...</li>
+  <li id="easeout">Usar intervalos de alejamiento...</li>
+  <li id="linear">Usar intervalos lineales...</li>
+  <li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
+</ul>
+
+ +

Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

+ +

Usar un retraso

+ +

Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:

+ +
#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+
+ +

Usar una función de intervalos de transición lineales

+ +

De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición linear, tal y como se muestra a continuación.

+ +
transition-timing-function: linear;
+
+ +

Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.

+ +

Especificar una función de intervalos cúbicos bézier

+ +

Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:

+ +
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
+
+ +

Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

+ +

Menús de resaltado

+ +

Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.

+ +

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

+ +

Primero configuramos el menú usando HTML:

+ +
<div class="sidebar">
+  <p><a class="menuButton" href="home">Inicio</a></p>
+  <p><a class="menuButton" href="about">Acerca de</a></p>
+  <p><a class="menuButton" href="contact">Contacto Us</a></p>
+  <p><a class="menuButton" href="links">Vínculos</a></p>
+</div>
+
+ +

Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:

+ +
.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  -moz-box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  -webkit-transition-property: background-color, color;
+  -webkit-transition-duration: 1s;
+  -o-transition-property: background-color, color;
+  -o-transition-duration: 1s;
+  background-color:white;
+  color:black;
+  -moz-box-shadow: 2px 2px 1px black;
+}
+
+ +

Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.

+ +

En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

+ +

Usar eventos de transición para animar un objeto

+ +

En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.

+ +

+ +

+ + + +

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

+ +

El HTML

+ +

El HTML para este ejemplo es muy sencillo:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>CSS Transition Demo</title>
+    <link rel="stylesheet" href="transitions.css" type="text/css">
+    <script src="transitions.js" type="text/javascript"></script>
+  </head>
+  <body onload="runDemo()">
+    <div class="slideRight">¡Esto es una caja!</div>
+  </body>
+</html>
+
+ +

Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función runDemo() del código JavaScript.

+ +

La CSS

+ +

Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuación se muestran sólo los trozos relevantes:

+ +
.slideRight {
+  position: absolute;
+  transition-property: background-color, color, left;
+  transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  background-color: red;
+  left: 0%;
+  color: black;
+}
+
+ +

Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.

+ +

La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.

+ +

Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

+ +

La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.

+ +

Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.

+ +
.slideLeft {
+  position: absolute;
+  transition-property: background-color, color, left;
+  transition-duration: 5s;
+  -webkit-transition-property: background-color, color, left;
+  -webkit-transition-duration: 5s;
+  -o-transition-property: background-color, color, left;
+  -o-transition-duration: 5s;
+  text-align: center;
+  background-color: blue;
+  left: 90%;
+  color: white;
+  width: 100px;
+  height: 100px;
+}
+
+ +

Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.

+ +

El código JavaScript

+ +

Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.

+ +
Nota: una vez que la compatibilidad para las animaciones CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
+ +

En primer lugar, la función runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animación:

+ +
function runDemo() {
+  var el = updateTransition();
+
+  // Configurar un controlador de eventos para invertir la dirección
+  // cuando finalice la transición.
+
+  el.addEventListener("transitionend", updateTransition, true);
+}
+
+ +

Es bastante sencillo: llama a la función updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.

+ +

La función updateTransition() tiene este aspecto:

+ +
function updateTransition() {
+  var el = document.querySelector("div.slideLeft");
+
+  if (el) {
+    el.className = "slideRight";
+  } else {
+    el = document.querySelector("div.slideRight");
+    el.className = "slideLeft";
+  }
+
+  return el;
+}
+
+ +

Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

+ +

Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.

+ +

Compatibilidad de navegadores

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadoresCompatibilidad básicaPropiedadEvento de transición finalizada
Internet Explorer(ninguna, a partir de IE9 pp7)------
Firefox (Gecko)4.0 (2.0)-moz-transitiontransitionend
Opera10.5-o-transitionOTransitionEnd
Safari | Chrome | WebKit3.2 | yes | yes-webkit-transitionwebkitTransitionEnd
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Consultar también

+ + + +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}

diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html deleted file mode 100644 index b59b5f677d..0000000000 --- a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Uso de URL como valor de la propiedad cursor -slug: Web/CSS/cursor/Uso_de_URL_como_valor_de_la_propiedad_cursor -tags: - - CSS - - Todas_las_Categorías -translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property ---- -

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0) soporta el uso de URLs como valores para la propiedad cursor (CSS2). Esto nos permite definir la imagen que queremos como puntero del ratón, además podemos usar cualquiera de los formatos gráficos soportados por Gecko.

-

Sintaxis

-

La sintaxis de esta propiedad es:

-
cursor: [<url>,]* cursor-genérico;
-
-

Esto es, se pueden indicar cero o más direcciones URL (separadas por comas), que deben ser seguidas de uno de los cursores genéricos definidos en la especificación, por ej. help o pointer.

-

Los siguientes valores están permitidos:

-
cursor: url(foo.cur), url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), help;
-
-

Primero se intentará cargar foo.cur. Si este archivo no existe o no es válido por alguna otra razón, se probará con firefox.jpg, y si este tampoco puede ser cargado, se usará help.

-

El soporte a la sintaxis de CSS3 para los valores de cursor fue añadido en Gecko 1.8beta3; por lo tanto en Firefox 1.5 funciona. Esto permite especificar las coordenadas del punto en el que la imagen del cursor es fijada al área activa. Si no se especifican, las coordenadas del punto de contacto son tomadas del propio archivo (para archivos CUR y XBM) o se fijan en la esquina superior izquierda de la imagen.

-

Un ejemplo de la sintaxis CSS3:

-
cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg), auto;
-
-cursor: url(http://developer.mozilla.org/wiki-images/es/e/ed/firefox.jpg) 90 90, auto;
-
-


- El primer número es la coordenada X, y el segundo la coordenada Y. El ejemplo anterior pone el punto de contacto del área activa a (90,90) píxeles de la esquina superior izquierda (0,0).

-

Limitaciones

-

Pueden usarse todos los formatos gráficos soportados por Gecko. Por lo tanto puede usar imágenes PNG, JPG, CUR, GIF, etc. Sin embargo, ANI no está soportado. Además, si especifica un GIF animado, el cursor usará el GIF, pero sin animación. Esta limitación podría ser superada en futuras versiones.

-

Gecko no limita el tamaño de los cursores. Sin embargo, quien busque la máxima compatibilidad multiplataforma debería limitarlos a un tamaño de 32x32, los cursores más grandes no funcionarán en Windows 9x (95, 98, MÍ).

-

Los cursores translúcidos no estan soportados en las versiones de Windows anteriores a XP. Esto es una limitación del sistema operativo. La transparencia funciona en todas las plataformas.

-

Solo las versiones de Mozilla para Windows, OS/2 y GNU/Linux (usando GTK+ 2.4 o superior) soportan valores URL para los cursores. El soporte en otras plataformas podría ser añadido en futuras versiones: (Mac OS: {{ Bug(286304) }}, QNX Neutrino: {{ Bug(286307) }}, XLib: {{ Bug(286309) }}, Qt: {{ Bug(286310) }}, BeOS: {{ Bug(298184) }}, GTK 2.0/2.2: {{ Bug(308536) }})

-

Compatibilidad con otros navegadores

-

Microsoft Internet Explorer también soporta URI como valor para la propiedad cursor. Sin embargo, solo soporta los formatos gráficos CUR y ANI. Además, es menos estricto con la sintaxis de la propiedad cursor. Esto significa que declaraciones como:

-
cursor: url(foo.cur);
-
-

O:

-
cursor: url(foo.cur), pointer, url(bar.cur), auto;
-
-

funcionarán en MSIE, pero no lo harán en los navegadores basados en Gecko. Para ser compatible con Gecko y actuar conforme a la especificación de CSS2.1, ponga la lista de URIs primero, y ponga siempre un cursor genérico al final. : ''To-do: document what MSIE does with CSS 3 hotspot locations''

diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/elemento_reemplazo/index.html deleted file mode 100644 index a8bedc65a2..0000000000 --- a/files/es/web/css/elemento_reemplazo/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Elemento de reemplazo -slug: Web/CSS/Elemento_reemplazo -tags: - - CSS - - CSS Referência - - Intermediate -translation_of: Web/CSS/Replaced_element ---- -
- {{CSSRef()}}
-

Summary

-

Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..

-

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.

-

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.

-

Ver tambien:

- diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/especificidad/index.html deleted file mode 100644 index 6a42fdb53f..0000000000 --- a/files/es/web/css/especificidad/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Especificidad -slug: Web/CSS/Especificidad -tags: - - CSS - - Ejemplo - - Guía - - Principiante - - Web -translation_of: Web/CSS/Specificity ---- -

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

- -

¿Cómo se calcula?

- -

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

- -
-

Nota: La proximidad de elementos en el árbol del documento no tiene efecto en la especificidad.

-
- -

Tipos de selectores

- -

La siguiente lista de tipos de selectores incrementa en función de la especificidad:

- -
    -
  1. Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before).
    2. -
  2. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover).
    3. -
  3. Selectores de ID (p.e., #example).
    4. -
- -

El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)

- -

Para más información, visita "Especificidad" en "Cascada y herencia", también puedes visitar: https://specifishity.com

- -

Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.

- -

La excepción !important

- -

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. 

- -

Algunas reglas de oro:

- - - -

En lugar de usar !important, considera:

- -
    -
  1. Hacer un mejor uso de las propiedades en cascada de CSS.
    2. -
  2. -

    Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

    - - 
    <div id="test">
-  <span>Text</span>
-</div>
-
    - - 
    div#test span { color: green; }
-div span { color: blue; }
-span { color: red; }
    -
    3. -
  3. Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar - 
    #myId#myId span { color: yellow; }
-.myClass.myClass span { color: orange; }
    -
    4. -
- -

Cómo se debería usar !important:

- -
A) Sobrescribiendo los estilos en linea
- -
    -
  1. Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
    2. -
  2. Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. 
    3. -
- -

En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.

- -

Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.

- -

B) Otro escenario:

- -
#someElement p {
-    color: blue;
-}
-
-p.awesome {
-    color: red;
-}
- -

¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement? Sin !important, la primera regla tendrá más especificidad y ganará a la segunda.

- -

Cómo sobrescribir !important

- -

A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.

- -

Algunos ejemplos con una gran especificidad:

- -
table td    {height: 50px !important;}
-.myTable td {height: 50px !important;}
-#myTable td {height: 50px !important;}
- -

B) O añade el mismo selector después de uno existente:

- -
td {height: 50px !important;}
- -

C) O reescribe la regla original para evitar el uso de !important.

- -

Para más información, visita (en inglés):

- -

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

- -

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

- -

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

- -

http://stackoverflow.com/questions/11178673/how-to-override-important

- -

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

- -

La excepción :not

- -

La pseudo-clase negación :not no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los tipos de selectores. 

- -

Aquí tienes un pedazo de CSS:

- -
div.outer p {
-  color:orange;
-}
-div:not(.outer) p {
-  color: lime;
-}
-
- -

cuando se usa con el siguiente HTML:

- -
<div class="outer">
-  <p>Esto está en el outer div.</p>
-  <div class="inner">
-    <p>Este texto está en el inner div.</p>
-  </div>
-</div>
-
- -

Debería aparecer en pantalla como:

- -

Esto está en el outer div
-
- Este texto está en el inner div

- -

Especificidad basada en la forma

- -

La especificidad está basada en la forma de un selector. En el siguiente caso, el selector *[id="foo"] cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.

- -

Las siguientes declaraciones de estilo:

- -
*#foo {
-  color: green;
-}
-*[id="foo"] {
-  color: purple;
-}
-
- -

cuando se usan con este marcador:

- -
<p id="foo">Soy un texto de ejemplo.</p>
-
- -

Se acabarán viendo así:

- -

Soy un texto de ejemplo

- -

Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.

- -

Ignorancia de proximidad en el árbol

- -

La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:

- -
body h1 {
-  color: green;
-}
-html h1 {
-  color: purple;
-}
-
- -

Con el siguiente HTML:

- -
<html>
-<body>
-  <h1>¡Aquí va un título!</h1>
-</body>
-</html>
-
- -

Se mostrará como:

- -

¡Aquí va un título!

- -

Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector html h1 se ha declarado después.

- -

Declaración directa vs estilos heredados

- -

Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.

- -
#parent {
-  color: green;
-}
-h1 {
-  color: purple;
-}
- -

Con el siguiente HTML:

- -
<html>
-<body id="parent">
-  <h1>¡Aquí va un título!</h1>
-</body>
-</html>
- -

Se verá así:

- -

¡Aquí va un título!

- -

Porque el selector h1 selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.

- -

Consulta también (en inglés)

- - diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/filter-function/url/index.html deleted file mode 100644 index 2ec8f41bf0..0000000000 --- a/files/es/web/css/filter-function/url/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: url() -slug: Web/CSS/filter-function/url -tags: - - CSS - - Referencia -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/filter-function/url ---- -
{{cssref}}
- -

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

- -

Sintaxis

- -
url(location)
- -

Parámetros

- -
-
location
-
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
-
- -

Ejemplo

- -
url(resources.svg#c1)
- -

Ver también

- - diff --git a/files/es/web/css/font-language-override/index.html b/files/es/web/css/font-language-override/index.html new file mode 100644 index 0000000000..1749002182 --- /dev/null +++ b/files/es/web/css/font-language-override/index.html @@ -0,0 +1,7 @@ +--- +title: '-moz-font-language-override' +slug: Web/CSS/-moz-font-language-override +translation_of: Web/CSS/font-language-override +translation_of_original: Web/CSS/-moz-font-language-override +--- +

*  , html,  body, div, p  { font-Zawgyi-One  !  important; }

diff --git a/files/es/web/css/gap/index.html b/files/es/web/css/gap/index.html new file mode 100644 index 0000000000..6f27042610 --- /dev/null +++ b/files/es/web/css/gap/index.html @@ -0,0 +1,252 @@ +--- +title: grid-gap +slug: Web/CSS/grid-gap +translation_of: Web/CSS/gap +translation_of_original: Web/CSS/grid-gap +--- +

Resumen

+ +

La propiedad CSS grid-gap es una propiedad  abreviada shorthand para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.

+ +

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Un valor <longitud> */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Un valor <porcentaje> */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Dos valores <longitud> */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Uno o dos valores <porcentaje> */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Valores Globales */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+
+ +

Valores

+ +
+
<longitud>
+
Es el ancho del calalón que separa las lineas de las rejillas.
+
<percentage>
+
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

Contenido HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

Contenido CSS

+ +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "200px")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}definición inicial
+ +

Compatibilidad del navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[6]
<porcentaje> valor{{CompatNo}}{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatNo}}[4]{{CompatNo}}[6]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaVista web de AndroidChrome para AndroidFirefox Móvil (Gecko)IE MóvilOpera MóvilSafari Móvil
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}[3]{{CompatOperaMobile(44)}}{{CompatUnknown}}
<porcentaje> value{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

+ +

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

+ +

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

+ +

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

+ +

[6] Experimental implementation available in Safari Technological Preview.

+ +

See also

+ + + + diff --git a/files/es/web/css/general_sibling_combinator/index.html b/files/es/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..96c87148b9 --- /dev/null +++ b/files/es/web/css/general_sibling_combinator/index.html @@ -0,0 +1,117 @@ +--- +title: Selectores de hermanos generales +slug: Web/CSS/Selectores_hermanos_generales +tags: + - CSS + - NeedsMobileBrowserCompatibility + - Referencia CSS + - Selectores +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

Resumen

+ +

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

+ +

Sintaxis

+ +
elemento ~ elemento { estilos }
+
+ +

Ejemplo

+ +
p ~ span {
+  color: red;
+}
+ +
<span>Este span no es rojo.</span>
+<p>Aquí hay un párrafo.</p>
+<code>Aquí hay algo de código.</code>
+<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
+ +

{{ EmbedLiveSample('Example', 320, 150) }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
+ +

Compatibilidad entre navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}793
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Ver también

+ +

 

+ + diff --git a/files/es/web/css/gradient/index.html b/files/es/web/css/gradient/index.html new file mode 100644 index 0000000000..ae187f2521 --- /dev/null +++ b/files/es/web/css/gradient/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/CSS/Gradiente +tags: + - CSS + - CSS tipo de datos + - Degradado + - Diseño + - Gradiente + - Referencia + - graficos +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).

+ +

{{EmbedInteractiveExample("pages/css/type-gradient.html")}}

+ +

Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

+ +

Funciones de las Gradientes

+ +

Hay tres tipos de gradientes de color:

+ + + +

Interpolación

+ +

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

+ +

Especificación

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}} 
+ +

Compatibilidad del navegador

+ +

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

+ +

Ver también

+ + diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradiente/index.html deleted file mode 100644 index ae187f2521..0000000000 --- a/files/es/web/css/gradiente/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: -slug: Web/CSS/Gradiente -tags: - - CSS - - CSS tipo de datos - - Degradado - - Diseño - - Gradiente - - Referencia - - graficos -translation_of: Web/CSS/gradient ---- -
{{CSSRef}}
- -

Resumen

- -

El tipo de datos CSS <gradient> indica un tipo de {{cssxref("<image>")}} que consiste de una transición progresiva entre dos o más colores (Degradado).

- -

{{EmbedInteractiveExample("pages/css/type-gradient.html")}}

- -

Un gradiente de CSS no es un {{cssxref("<color>")}} pero tampoco es una imagen con dimensiones intrínsecas; es decir, que no tiene tamaño natural o preferido, ni una relación preferida. Su tamaño concreto coincidirá con los elementos a los que se aplica.

- -

Funciones de las Gradientes

- -

Hay tres tipos de gradientes de color:

- -
    -
  • Linear gradients(gradiente lineal), generados por la función {{cssxref("linear-gradient", "linear-gradient()")}}, donde el color se desvanece suavemente a lo largo de una línea imaginaria. - - - - 
    body {
-background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
-background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
-}
    - -

    {{ EmbedLiveSample('linear-gradient', 600, 20) }}

    -
    • -
  • Radial gradient (gradientes radiales), generados por la función {{cssxref("radial-gradient", "radial-gradient()")}}. Cuanto más lejos de un origen sea un punto, más lejos del color original será. - - - 
    body {
-background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
-background: radial-gradient(red, yellow, rgb(30, 144, 255));
-}
-
    - -

    {{ EmbedLiveSample('radial-gradient', 600, 20) }}

    -
    • -
  • Repeating gradient (gradientes de repetición), donde se repiten gradientes lineales o radiales tanto como sea necesario para llenar toda la caja. - - - 
    body {
-background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
-background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
-}
    - -

    {{ EmbedLiveSample('repeating-gradient', 600, 20) }}

    -
    • -
- -

Interpolación

- -

Al igual que con cualquier caso de interpolación de colores, los gradientes se calculan en el espacio de color alfa-premultiplicado. Esto impide que sombras de gris inesperadas aparezcan cuando el color o la opacidad están variando.  (debe tener en cuenta que los navegadores mas antiguos no tienen incorporado este tipo de comportamient cuando utiliza la palabra clave "transparent " del inglés transparente ( para más información hacer clic en el link))

- -

Especificación

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}} 
- -

Compatibilidad del navegador

- -

Cada tipo de gradiente tiene una matriz de compatibilidad diferente. Por favor, consulte cada artículo individualmente.

- -

Ver también

- -
    -
  • Usando Gradientes CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • -
diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/grid-column-gap/index.html deleted file mode 100644 index e7a607a5bc..0000000000 --- a/files/es/web/css/grid-column-gap/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: grid-column-gap -slug: Web/CSS/grid-column-gap -translation_of: Web/CSS/column-gap -translation_of_original: Web/CSS/grid-column-gap ---- -

La propiedad CSS grid-column-gap especifica el {{glossary("gutters","gutter")}} entre {{glossary("grid columns")}}.

- -
/* <length> values */
-grid-column-gap: 20px;
-grid-column-gap: 1em;
-grid-column-gap: 3vmin;
-grid-column-gap: 0.5cm;
-
-/* <percentage> value */
-grid-column-gap: 10%;
-
-/* Global values */
-grid-column-gap: inherit;
-grid-column-gap: initial;
-grid-column-gap: unset;
-
- -

El efecto es como si las {{glossary("grid lines")}} afectadas adquieren una anchura específica: Los {{glossary("grid tracks", "grid track")}} entre dos líneas de la cuadrícula es el espacio entre los canales que las representa. Para el tamaño de la pista, cada canal se trata esencialmente como una pista adicional del tamaño especificado. Los valores negativos no son válidos.

- -

{{cssinfo}}

- -

Syntax

- -

Valores

- -
-
<length-percentage>
-
Es el ancho del canal que separa las columnas de la grilla. {{cssxref("<percentage>")}} valores son relativos a la dimensión del elemento.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Ejemplo

- -

HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

CSS

- -
#grid {
-  display: grid;
-  height: 100px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
-  grid-column-gap: 20px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "100px")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-column-gap", "grid-column-gap")}}{{Spec2("CSS3 Grid")}}Definición incial
- -

Compatibilidad en navegadores

- -

 

- - - -

{{Compat("css.properties.grid-column-gap")}}

- -

 

- -

Ver también

- - - - diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/grid-gap/index.html deleted file mode 100644 index 6f27042610..0000000000 --- a/files/es/web/css/grid-gap/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: grid-gap -slug: Web/CSS/grid-gap -translation_of: Web/CSS/gap -translation_of_original: Web/CSS/grid-gap ---- -

Resumen

- -

La propiedad CSS grid-gap es una propiedad  abreviada shorthand para {{cssxref("grid-row-gap")}} y {{cssxref("grid-column-gap")}} que especifica los canales entre las filas y las columnas de la cuadrícula.

- -

Si <'grid-column-gap'> se omite, adquiere el mismo valor que <'grid-row-gap'>.

- -

{{cssinfo}}

- -

Sintaxis

- -
/* Un valor <longitud> */
-grid-gap: 20px;
-grid-gap: 1em;
-grid-gap: 3vmin;
-grid-gap: 0.5cm;
-
-/* Un valor <porcentaje> */
-grid-gap: 16%;
-grid-gap: 100%;
-
-/* Dos valores <longitud> */
-grid-gap: 20px 10px;
-grid-gap: 1em 0.5em;
-grid-gap: 3vmin 2vmax;
-grid-gap: 0.5cm 2mm;
-
-/* Uno o dos valores <porcentaje> */
-grid-gap: 16% 100%;
-grid-gap: 21px 82%;
-
-/* Valores Globales */
-grid-gap: inherit;
-grid-gap: initial;
-grid-gap: unset;
-
- -

Valores

- -
-
<longitud>
-
Es el ancho del calalón que separa las lineas de las rejillas.
-
<percentage>
-
Es el ancho del canalón que separa las lineas de las rejillas, en relación con la dimensión del elemento.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Ejemplo

- -

Contenido HTML

- -
<div id="grid">
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
- -

Contenido CSS

- -
#grid {
-  display: grid;
-  height: 200px;
-  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
-  grid-gap: 20px 5px;
-}
-
-#grid > div {
-  background-color: lime;
-}
-
- -

{{EmbedLiveSample("Example", "100%", "200px")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}definición inicial
- -

Compatibilidad del navegador

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("57.0")}}[1]{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatOpera(44)}}[4]{{CompatNo}}[6]
<porcentaje> valor{{CompatNo}}{{CompatNo}}[3]{{CompatGeckoDesktop("52.0")}}[2]{{CompatNo}}[3]{{CompatNo}}[4]{{CompatNo}}[6]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaVista web de AndroidChrome para AndroidFirefox Móvil (Gecko)IE MóvilOpera MóvilSafari Móvil
Basic support{{CompatChrome("57.0")}}[1]{{CompatChrome("57.0")}}[1]{{CompatUnknown}}{{CompatGeckoMobile("52.0")}}[3]{{CompatOperaMobile(44)}}{{CompatUnknown}}
<porcentaje> value{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("52.0")}}[5]{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementado bajo la plataforma web experimental de características de etiquetas en chrome://flags since Chrome 29.0.

- -

[2] Implemented behind the preference layout.css.grid.enabled since Gecko 40.0 {{geckoRelease("40.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

- -

[3] Internet Explorer implements an older version of the specification, which didn't define this property.

- -

[4] Implemented behind the Enable experimental Web Platform features flag in chrome://flags since Opera 28.0.

- -

[5] Implemented behind the preference layout.css.grid.enabled since Gecko 49.0 {{geckoRelease("49.0")}}, defaulting to false. Since Gecko 52.0 {{geckoRelease("52.0")}} it is enabled by default.

- -

[6] Experimental implementation available in Safari Technological Preview.

- -

See also

- - - - diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/herramientas/cubic_bezier_generator/index.html deleted file mode 100644 index b99e7afaa3..0000000000 --- a/files/es/web/css/herramientas/cubic_bezier_generator/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: Generador de curvas de bézier -slug: Web/CSS/Herramientas/Cubic_Bezier_Generator -translation_of: Web/CSS/Tools/Cubic_Bezier_Generator ---- -
-
-
<html>
-    <canvas id="bezier" width="336" height="336">
-    </canvas>
-    <form>
-       <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'>
-       <label for="y1">y1 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'>
-       <label for="x2">x2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'>
-       <label for="y2">y2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'>
-       <br>
-       <output id="output">Log</output>
-    </form>
-</html>
-
- -
.field {
-    width: 40px;
-}
-
- -
function updateCanvas() {
-
-    var x1 = document.getElementById('x1').value;
-    var y1 = document.getElementById('y1').value;
-    var x2 = document.getElementById('x2').value;
-    var y2 = document.getElementById('y2').value;
-
-    drawBezierCurve(x1, y1, x2, y2);
-}
-
-const radius = 4;
-// Place needed to draw the rulers
-const rulers = 30.5;
-const margin = 10.5;
-const basic_scale_size = 5; // Size of 0.1 tick on the rulers
-var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
-var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
-
-function initCanvas() {
-    // get the canvas element using the DOM
-    var canvas = document.getElementById('bezier');
-
-    // Make sure we don't execute when canvas isn't supported
-    if (canvas.getContext) {
-        // use getContext to use the canvas for drawing
-        var ctx = canvas.getContext('2d');
-
-        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
-
-        canvas.onmousedown = mouseDown;
-        canvas.onmouseup = mouseUp;
-    } else {
-        alert('You need Safari or Firefox 1.5+ to see this demo.');
-    }
-}
-
-function cX(x) {
-    return x * scaling + rulers;
-}
-
-function reverseX(x) {
-    return (x - rulers) / scaling;
-}
-
-function lX(x) {
-    //Used when drawing vertical lines to prevent subpixel blur
-    var result = cX(x);
-    return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function cY(y) {
-
-    return (1 - y) * scaling + margin;
-}
-
-function reverseY(y) {
-    return (margin - y) / scaling + 1;
-}
-
-function lY(y) {
-    // Used when drawing horizontal lines to prevent subpixel blur
-    var result = cY(y);
-    return Math.round(result) == result ? result + 0.5 : result;
-}
-
-function drawBezierCurve(x1, y1, x2, y2) {
-
-    // get the canvas element using the DOM
-    var canvas = document.getElementById('bezier');
-
-    // Make sure we don't execute when canvas isn't supported
-    if (canvas.getContext) {
-
-        // use getContext to use the canvas for drawing
-        var ctx = canvas.getContext('2d');
-
-
-
-        // Clear canvas
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-        // Draw the rulers
-        ctx.beginPath();
-        ctx.strokeStyle = "black";
-
-        // Draw the Y axis
-        ctx.moveTo(cX(0), cY(0));
-        ctx.lineTo(cX(1), cY(0));
-        ctx.textAlign = "right";
-
-        for (var i = 0.1; i <= 1; i = i + 0.1) {
-            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
-            if ((i == 0.5) || (i > 0.9)) {
-                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
-                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
-                // Limitation the constant 4 should be font size dependant
-            }
-            ctx.lineTo(cX(0), lY(i));
-        }
-        ctx.stroke();
-        ctx.closePath();
-        ctx.beginPath();
-
-        // Draw the Y axis label
-        ctx.save();
-        ctx.rotate(-Math.PI / 2);
-        ctx.textAlign = "left";
-        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
-        ctx.restore();
-
-        // Draw the X axis
-        ctx.moveTo(cX(0), cY(0));
-        ctx.lineTo(cX(0), cY(1));
-        ctx.textAlign = "center";
-        for (i = 0.1; i <= 1; i = i + 0.1) {
-            ctx.moveTo(lX(i), basic_scale_size + cY(0));
-            if ((i == 0.5) || (i > 0.9)) {
-                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
-                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
-                // Limitation the constant 4 should be dependant of the font size
-            }
-            ctx.lineTo(lX(i), cY(0));
-        }
-
-        // Draw the X axis label
-        ctx.textAlign = "left";
-        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
-        // Limitation the constant 4 should be dependant of the font size
-        ctx.stroke();
-        ctx.closePath();
-
-        // Draw the Bézier Curve
-        ctx.beginPath();
-        ctx.moveTo(cX(0), cY(0));
-        ctx.strokeStyle = 'blue';
-        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
-        ctx.stroke();
-        ctx.closePath();
-
-
-
-        // Draw the P2 point (with a line to P0)
-        ctx.beginPath();
-        ctx.strokeStyle = 'red';
-        ctx.moveTo(cX(x1), cY(y1));
-        ctx.lineTo(cX(0), cY(0));
-        ctx.stroke();
-        ctx.closePath();
-        ctx.beginPath();
-        ctx.moveTo(cX(x1), cY(y1));
-        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fillStyle = 'white';
-        ctx.fill();
-        ctx.closePath();
-
-
-
-        // Draw the P3 point (with a line to P1)
-        ctx.beginPath();
-        ctx.strokeStyle = 'red';
-        ctx.moveTo(cX(x2), cY(y2));
-        ctx.lineTo(cX(1), cY(1));
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.beginPath();
-        ctx.moveTo(cX(x2), cY(y2));
-        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
-        ctx.stroke();
-        ctx.fill();
-        ctx.closePath();
-
-        // Draw the P1(1,1) point (with dashed hints)
-        ctx.beginPath();
-        ctx.moveTo(cX(1), cY(1));
-        ctx.strokeStyle = 'lightgrey';
-        ctx.lineTo(cX(0), cY(1));
-        ctx.moveTo(cX(1), cY(1));
-        ctx.lineTo(cX(1), cY(0));
-        ctx.stroke();
-        ctx.closePath();
-
-        ctx.beginPath();
-        ctx.strokeStyle = "black";
-        ctx.fillStyle = "black";
-        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
-
-
-        // Draw the P0(0,0) point
-        ctx.beginPath();
-        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
-        ctx.fill();
-        ctx.stroke();
-        ctx.closePath();
-
-
-    } else {
-        alert('You need Safari or Firefox 1.5+ to see this demo.');
-    }
-}
-
-function mouseDown(e) {
-
-    var canvas = document.getElementById('bezier');
-
-    var x1 = cX(document.getElementById('x1').value);
-    var y1 = cY(document.getElementById('y1').value);
-
-    var x = e.pageX - canvas.offsetLeft;
-    var y = e.pageY - canvas.offsetTop;
-
-    var output = document.getElementById('output');
-    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
-
-
-    if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) {
-        var output = document.getElementById('output');
-        output.value = "P1!";
-        dragSM = 1;
-    }
-
-    var x2 = cX(document.getElementById('x2').value);
-    var y2 = cY(document.getElementById('y2').value);
-
-    if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) {
-        var output = document.getElementById('output');
-        output.value = "P2!";
-        dragSM = 2;
-    }
-
-    // If we are starting a drag
-    if (dragSM != 0) {
-        canvas.onmousemove = mouseMove;
-    }
-}
-
-function mouseUp(e) {
-
-    var output = document.getElementById('output');
-    output.value = "Mouse up!";
-    dragSM = 0;
-    canvas.onmousemove = null;
-}
-
-function mouseMove(e) {
-    if (dragSM != 0) {
-        var canvas = document.getElementById('bezier');
-
-        var x = e.pageX - canvas.offsetLeft;
-        var y = e.pageY - canvas.offsetTop;
-
-        var output = document.getElementById('output');
-        output.value = "Drag!";
-
-        if (dragSM == 1) {
-            var x1 = document.getElementById('x1');
-            var y1 = document.getElementById('y1');
-            x1.value = reverseX(x);
-            x1.value = Math.round(x1.value * 10000) / 10000;
-            y1.value = reverseY(y);
-            y1.value = Math.round(y1.value * 10000) / 10000;
-            if (x1.value < 0) { x1.value = 0; }
-            if (x1.value > 1) { x1.value = 1; }
-        } else if (dragSM == 2) {
-            var x2 = document.getElementById('x2');
-            var y2 = document.getElementById('y2');
-            x2.value = reverseX(x);
-            x2.value = Math.round(x2.value * 10000) / 10000;
-            y2.value = reverseY(y);
-            y2.value = Math.round(y2.value * 10000) / 10000;
-            if (x2.value < 0) { x2.value = 0; }
-            if (x2.value > 1) { x2.value = 1; }
-        }
-        updateCanvas();
-    }
-}
-
-initCanvas();
-updateCanvas();
-
-
- -

{{draft}}

- -

Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!

- -

{{EmbedLiveSample("Tool", 1000, 2000)}}

-
- -

 

diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/herramientas/index.html deleted file mode 100644 index 59cd1febfa..0000000000 --- a/files/es/web/css/herramientas/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Herramientas -slug: Web/CSS/Herramientas -tags: - - CSS -translation_of: Web/CSS/Tools ---- -
 
- -

CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.

- -

{{LandingPageListSubpages}}

- -

Otras herramientas

- -
    -
  • -

    Animación CSS - Stylie

    -
    • -
  • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
    • -
  • Menus CSS- cssmenumaker.com
    • -
- -

Temas relacionados

- - diff --git a/files/es/web/css/initial_value/index.html b/files/es/web/css/initial_value/index.html new file mode 100644 index 0000000000..a6bbcdf32d --- /dev/null +++ b/files/es/web/css/initial_value/index.html @@ -0,0 +1,26 @@ +--- +title: Valor inicial +slug: Web/CSS/Valor_inicial +tags: + - CSS + - 'CSS:Referencias' + - Todas_las_Categorías +translation_of: Web/CSS/initial_value +--- +

+

<< Volver +

+

Resumen

+

El Valor inicial dado en el resumen de cada definición de propiedad CSS tiene un significado distinto según se trate de propiedades heredadas o no heredadas. +

Para propiedades heredadas, se usa el valor inicial, para el elemento raíz solamente, cuando no se ha especificado ningún valor para el elemento.

Para propiedades no heredadas se usa el valor inicial para todos los elementos, cuando no se especificó nigún valor para el elemento.

En CSS3 se propuso el valor initial para permitir a los autores especificar explícitamente éste valor inicial. +

+

Ver también

+

Propiedades heredadas y no heredadas, initial +


+

+
+

Categorías +

Interwiki Languages +

+
+{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }} diff --git "a/files/es/web/css/introducci\303\263n/boxes/index.html" "b/files/es/web/css/introducci\303\263n/boxes/index.html" deleted file mode 100644 index caccdd80b2..0000000000 --- "a/files/es/web/css/introducci\303\263n/boxes/index.html" +++ /dev/null @@ -1,335 +0,0 @@ ---- -title: Boxes -slug: Web/CSS/Introducción/Boxes -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de  CSS Getting Started ; se describen cómo se puede usar CSS para controlar el espacio que un elemento ocupa cuando se muestra. En su documento de ejemplo, se cambia el espacio y se agregan reglas decorativos.

- -

Información: Cajas

- -

Cuando el navegador muestra un elemento, el elemento ocupa un espacio. Hay cuatro partes en el espacio que ocupa.

- -

En el centro, existe el espacio que el elemento necesita para mostrar su contenido. Alrededor de eso, no hay relleno. En torno de est, hay un borde. En torno esto, hay un margen que separa este elemento de otros elementos.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

El gris pálido muestra partes del diseño.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Esto es lo que se ve en su navegador.

-
- -

El relleno, el borde y el margen pueden tener diferentes tamaños en la parte superior, derecha, inferior e izquierda del elemento. Alguno o todos estos tamaños pueden ser cero.

- -

Coloreando

- -

El relleno es siempre el mismo color que el elemento del fondo. Así que cuando se establece el color de fondo, se ve el color aplicado al elemento en sí y su relleno. El margen es siempre transparente.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

El elemento tiene un fondo verde .

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

Esto es lo que se ve en su navegador.

-
- -

Borders

- -

Puede utilizar los bordes para decorar elementos con líneas o cuadros.
-
- Para especificar la misma frontera todo alrededor de un elemento, utilice la propiedad {{cssxref ("border")}} . Especifique el ancho (por lo general en píxeles para la visualización en una pantalla), el estilo, y el color.
-
- Los estilos son:

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

También puede establecer el estilo a none ( ninguno) o hidden (oculto),  para eliminar explícitamente la frontera (border ), o establecer el color como transparente para hacer la frontera invisible sin cambiar el diseño.

- -

Para especificar los bordes de uno en uno por separado, utilice las propiedades: {{cssxref ("border-top")}}, {{cssxref ("border-right")}}, {{cssxref ("border-bottom")} }, {{cssxref ("border-left")}}. Usted puede utilizar estas para especificar un borde  solo en un lado, o diferentes los bordes en diferentes lados.

- -
-
Ejemplo
- -


- Esta norma establece el color de fondo y el borde superior de los elementos de la etiqueta h3:

- -
h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-
- -

El resultado se ve así:

- - - - - - - -
-

Stylish heading

-
- -

Esta regla hace que las imágenes sean fáciles de ver, dándoles un borde gris medio a todo:

- -
img {border: 2px solid #ccc;}
-
- -

El resultado se ve así:

- - - - - - - - -
Image:Image:Blue-rule.png
-
- -

Márgenes y relleno

- -


- Use  márgenes y el relleno para ajustar las posiciones de los elementos 'y crear el espacio que les rodea.
-
- Utilice la propiedad {{cssxref ("margin")}} o la propiedad {{cssxref ("padding")}} para establecer los márgenes y el  relleno con sus anchuras respectivamente.
-
- Si especifica una anchura, que se aplica en todo el elemento (arriba, derecha, abajo y de izquierda).
-
- Si especifica dos anchos, la primera se aplica a la parte superior e inferior, la segunda a la derecha y la izquierda.
-
- Puede especificar los cuatro anchos en el orden: arriba, derecha, abajo, de izquierda.

- -
-
Ejemplo
- -


- Esta norma delimita párrafos con la  class remark, dándoles un borde rojo a su alrededor.
-
- El padding (relleno) separa un poco todo el borde del texto .
-
- A la izquierda una  sangría desde el margen del párrafo con respecto al resto del texto (margin-left ):

- -
p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
- -

El resultado se ve así:

- - - - - - - -
-

A continuación es un párrafo normal.

- -

Aqui con la clase remark.

-
-
- -
-
Más detalles
- -

Cuando se utiliza márgenes y el relleno para ajustar la manera en que los elementos se disponen, sus reglas de estilo interactúan con los estilos de tu navegador por defecto y pueden ser muy complejas.
-
- Los distintos navegadores ponen que los elementos de manera diferente. Los resultados pueden ser similar ,hasta que nuestro hoja de estilos cambia las cosas. A veces esto puede hacer que sus hojas de estilo den resultados sorprendentes.
-
- Para obtener el resultado deseado, es posible que tenga que cambiar el marcado de su documento. La página siguiente de este tutorial tiene más información al respecto.
-
- Para obtener información detallada acerca de relleno, márgenes y bordes, consulte la página de referencia Modelo de caja.

-
- -

Acción: Agregar bordes

- -

Edite su archivo CSS , style2.css. Agrega esta regla para dibujar una línea a través de la página sobre cada encabezado:

- -
h3 {border-top: 1px solid gray;}
-
- -

Si usted tomó el cambio en la última página, modificara la regla que ha creado, de lo contrario agregar la nueva regla para añadir espacio debajo de cada ítem de la lista:

- -
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
- -

Actualice el navegador para ver el resultado:

- - - - - - - -
-

(A) The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

(B) Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
El reto
- -


- Agrega una regla a la hoja de estilos, para que aparesca un amplio borde alrededor de los la lista de océanos, en un color que le recuerda al mar, algo como esto:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -

. . .

-
- -

 

- -

(No es necesario que coincida con el ancho y el color que se ve aquí exactamente.)

-
- -

Ver una solución a este desafío.

- -

What next?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}Al especificar márgenes y el relleno, se modificó el diseño del documento. En la página siguiente se cambia el layout de su documento de otra manera.

diff --git "a/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" "b/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" deleted file mode 100644 index b47218eb7a..0000000000 --- "a/files/es/web/css/introducci\303\263n/cascading_and_inheritance/index.html" +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Cascada y herencia -slug: Web/CSS/Introducción/Cascading_and_inheritance -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}Esta es la cuarta sección del tutorial CSS Primeros pasos; que describe cómo interactúan las hojas de estilo en cascada, y cómo los elementos heredan el estilo de sus padres. Usted agrega a la hoja de estilos de ejemplo, utilizando la herencia para alterar el estilo de muchas partes del documento en un solo paso.

- -

Información: Cascada y herencia

- -

El estilo final para un elemento se puede especificar en muchos lugares diferentes, que pueden interactuar de una manera compleja. Esta interacción compleja hace el CSS poderoso, pero puede también hacer que sea confuso y difícil de depurar.

- -

Tres principales fuentes de información de estilo forman una cascada. Estas son:

- -
    -
  • Estilos por defecto del navegador para del lenguaje de marcado.
    • -
  • Estilos especificados por un usuario que está leyendo el documento.
    • -
  • Los estilos relacionados en el documento por su autor. Estos pueden ser especificados en tres lugares: -
      -
    • En un archivo externo: este tutorial aborda principalmente este método para definir los estilos.
      • -
    • En una definición al principio del documento: utilice este método únicamente para los estilos que se utilizan sólo en esa página .
      • -
    • En un elemento específico en el cuerpo del documento: este es el método menos fácil de mantener, pero puede ser utilizado para la probar.
      • -
    -
    • -
- -

El estilo del usuario modifica el estilo por defecto del navegador. El estilo del autor del documento a continuación modifica el estilo un poco más. En este tutorial, usted es el autor del documento de ejemplo, y solo trabaja con hojas de estilo del autor.

- -
-
Ejemplo
- -

Cuando lea este documento en un navegador, parte del estilo que ves proviene por defecto de su navegador de HTML.

- -

Parte del estilo podría venir de los ajustes personalizados del navegador o de un archivo de definición de estilo personalizado. En Firefox, la configuración se puede personalizar en cuadro de diálogo Preferencias, o puede especificar estilos en un archivo denominado user Content.css, archivado en su perfil de navegador.

- -

Parte del estilo proviene de las hojas de estilo vinculadas al documento por el servidor wiki.

-
- -

Al abrir su documento de muestra en el navegador, los elementos {{ HTMLElement("strong") }} son más relevante que el resto del texto. Esto viene del estilo por defecto del navegador para HTML.

- -

El elemento {{ HTMLElement("strong") }} son rojos. Esto viene de la propia hoja de estilos de ejemplo.

- -

El elemento {{ HTMLElement("strong") }} también heredan gran parte del estilo del elemento {{ HTMLElement("p") }}, porque ellos son sus hijos. De la misma manera, los elementos {{ HTMLElement("p") }} heredan gran parte del estilo del elemento{{ HTMLElement("body") }}.

- -

Para los estilos en cascada, las hojas de estilo del autor tienen prioridad, ante las hojas de estilo del lector,  por defecto de tu navegador.

- -

Para los estilos heredados, el estilo propio de un nodo hijo tiene prioridad sobre estilo heredado de su padre.

- -

Estas no son las únicas prioridades que se aplican. En una página posterior de este tutorial se explica mas detalladamente.

- -
-
Más detalles
- -

El CSS también proporciona una forma para que el lector pueda anular el estilo del autor del documento, mediante el uso de la palabra clave! !important.

- -

Esto significa que, como autor del documento, no siempre se puede predecir con exactitud lo que sus lectores van a ver.

- -

Si quieres conocer todos los detalles de cascada y herencia mira Asignando propiedad de valores, cascada, y herencia en las especificaciones del CSS.

-
- -

Acción: El uso de la herencia 

- -
    -
  1. Edite su archivo  CSS de ejemplo.
    2. -
  2. Agrega esta línea copiando y pegando. Realmente no importa si usted la agrega por encima o por debajo de la línea que está. Sin embargo, añadirla en la parte superior es más lógico, porque en el documento el elemento {{ HTMLElement("p") }} es el elemento padre del elemento  {{ HTMLElement("strong") }} : - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. Ahora actualice el navegador para ver el efecto en su documento de muestra. El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} han heredado el estilo subrayado de su elemento padre {{ HTMLElement("p") }}.
    - -

    Pero los elementos {{ HTMLElement("strong") }} siguen siendo rojo. El color rojo es su estilo propio, por lo que tiene prioridad sobre el color azul de su elemento padre {{ HTMLElement("p") }} .

    -
    4. -
- - -
- - - - - - - - -
Antes
Cascading Style Sheets
- - - - - - - - -
Después
Cascading Style Sheets
- -
-
Problema
-Cambie su hoja de estilo de manera que aparecen subrayados sólo las letras rojas: - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

- -
p {color: blue; }
-strong {color: red; text-decoration: underline;}
-
- -

 

-Hide solution
-Ver una solución al desafío.
- -

¿Y ahora qué?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}Su hoja de estilo de ejemplo especifica estilos para las etiquetas <p> y <strong>, cambiando el estilo de los elementos correspondientes en todo el documento. La siguiente sección describe cómo especificar el estilo de manera más selectiva.

diff --git "a/files/es/web/css/introducci\303\263n/color/index.html" "b/files/es/web/css/introducci\303\263n/color/index.html" deleted file mode 100644 index 030fa9d692..0000000000 --- "a/files/es/web/css/introducci\303\263n/color/index.html" +++ /dev/null @@ -1,364 +0,0 @@ ---- -title: Color -slug: Web/CSS/Introducción/Color -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ CSSTutorialTOC() }}

- -

- -

Esta es la sección octava de la CSS Introduccióntutorial; se explica cómo puede especificar el color en CSS. En su hoja de estilos de muestra, se introduce colores de fondo.

- -

Información: Color

- -

En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. CSS 2 soporta 17 colores con nombre absoluto. Algunos de los nombres puede que no sea el esperado:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
- -

 

- -
-
-
Detalles
- -

Su navegador puede soportar muchos más colores con nombre, como:

-
- - - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
- -

Para detalles de esta lista ampliada, consulte: SVG palabras clave de color en el módulo de colores CSS 3 . Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.

-
- -

Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres dígitos  hexadecimales entre los rangos  0 - 9, a - f. Las letras a - f representan los valores de 10 a 15:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
- -


- Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
- -

Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.

- -
-
-
Ejemplo
- -

Con un poco de práctica, puede ajustar los colores de tres dígitos de forma manual para la mayoría de los propósitos:

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Comience con el rojo puro: #f00
Para que sea más pálido, añadir un poco de verde y azul: #f77
Para hacerlo más naranja, añadir un poco de verde adicional: #fa7
Para oscurecer, reducir todos sus componentes: #c74
Para reducir su saturación, hacer que sus componentes más iguales: #c98
Si usted los pone exactamente iguales, se obtiene gris: #ccc
- -

Para un tono pastel como el azul pálido:

- - - - - - - - - - - - - - -
Comience con blanco puro: #fff
Reducir los otros componentes un poco: #eef
-
- -
-
-
Más detalles
- -

También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.

- -

Por ejemplo, este es de color granate (rojo oscuro)dark red:

-
- -
RGB (128, 0, 0)
- -

Para más detalles sobre cómo especificar los colores, ver: Colores en la Especificación CSS.

- -

Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: Sistema CSS2 Colores en la Especificación CSS.

-
- -

Propiedades de Color

- -

Ya ha utilizado la propiedad color  en el texto.

- -

También puede utilizar la propiedad background-color para cambiar fondos elementos.

- -

Los Fondos (Backgrounds ) se pueden establecer en transparent (transparentes) para eliminar explícitamente cualquier color, revelando fondo del elemento padre.

- -
-
-
Ejemplo
- -

Los ejemplos de cajas de este tutorial utilizan este fondo de color amarillo pálido:

- -
background-color : # fffff4 ;
- -
 
- -

Los Más detalles cajas utilizan este gris pálido:

- -
background-color : # F4F4F4 ;
-
-
- -

 

- -

Acción: El uso de códigos de color

- -
    -
  1. Edite su archivo CSS.
    2. -
  2. Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. (La disposición y comentarios en el archivo probablemente difieren del archivo que se muestra aquí. Mantenga la disposición y los comentarios de la forma que prefiera.) - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    - -
     
    -
    3. -
  3. Guarde el archivo y actualizar el navegador para ver el resultado.
    4. -
- - - - - - - -
- - - - - - - - - -
C ascading S tyle S heets
C ascading S tyle S heets
-
- -
-
-
Desafío
- -

En el archivo CSS, cambiara todos los nombres de los colores a los códigos de color de 3 dígitos sin afectar el resultado.

- -

(Esto no se puede hacer exactamente, pero usted puede conseguir cerca. Para hacerlo exactamente lo que necesita códigos de 6 dígitos, y hay que buscar la especificación CSS o utilizar una herramienta gráfica para que coincida con los colores.)

-Ver una solución para el desafío.
-
- -

¿Y ahora qué?

- -

En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.La siguiente sección explica cómo se puede hacer excepciones a esta estricta separación.

diff --git "a/files/es/web/css/introducci\303\263n/how_css_works/index.html" "b/files/es/web/css/introducci\303\263n/how_css_works/index.html" deleted file mode 100644 index f4beb05519..0000000000 --- "a/files/es/web/css/introducci\303\263n/how_css_works/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Cómo funciona el CSS -slug: Web/CSS/Introducción/How_CSS_works -tags: - - CSS - - 'CSS:' - - 'CSS:Empezando' - - Diseño - - Guía - - Inicio - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}Esta tercera parte del tutorial Empezando CSS explica cómo funciona el CSS en el navegador y la finalidad del Modelo de Objeto de Documento (DOM). Usted también aprenderá cómo analizar el documento de muestra.

- -

Información: Cómo funciona CSS

- -

Cuando un navegador muestra un documento, debe combinar el contenido del documento con la información de su estilo. Se procesa el documento en dos etapas:

- -
    -
  1. El navegador convierte el lenguaje de marcado (markup) y el CSS en el DOM (Document Object Model). El DOM representa el documento en la memoria del ordenador. Combina el contenido del documento con su estilo.
    2. -
  2. El navegador muestra el contenido de la DOM.
    3. -
- -

Un lenguaje de marcado utiliza elementos para definir la estructura del documento. Usted marca un elemento utilizando etiquetas, que son cadenas que comienzan con '<' y termina con '>'. La mayoría de los elementos tienen un par de etiquetas, una etiqueta de inicio y una etiqueta de cierre. Para la etiqueta de inicio, coloque el nombre del elemento entre '<' y '>'. Para la etiqueta final, coloque un '/' después de '<' y antes del nombre del elemento.

- -

Dependiendo del lenguaje de marcado, algunos elementos tienen sólo una etiqueta de inicio, o una sola etiqueta donde el '/' viene después del nombre del elemento. Un elemento también puede ser un contenedor e incluir otros elementos entre su etiqueta de inicio y la etiqueta de cierre. Sólo recuerda cerrar siempre las etiquetas dentro del contenedor.

- -

Un DOM tiene una estructura en forma de árbol. Cada elemento, atributo y extensión de texto en el lenguaje de marcado se convierte en un nodo de la estructura de árbol. Los nodos se definen por su relación con otros nodos DOM. Algunos elementos son los padres de los nodos secundarios, y los nodos secundarios tienen hermanos.

- -

Comprender el DOM le ayuda a diseñar, depurar y mantener su CSS, porque el DOM es donde su CSS y el contenido del documento se reúnen.

- -
-
Ejemplo
-En el documento de ejemplo, las etiqueta <p> y su etiqueta de cierre </ p> crean un contenedor: - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

Ejemplo en vivo

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

En el DOM, el nodo correspondiente P es uno de los padres. Sus hijos son los nodos STRONG y los nodos de texto. Los nodos STRONG son en sí mismos padres, con los nodos de texto como sus hijos:

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

Acción: Analizando un DOM

- -

El uso del Inspector DOM

- -

Para analizar un DOM, se necesita un software especial. Usted puede usar el complemento de  Mozilla DOM Inspector (DOMi) para analizar un DOM. Usted sólo tendrá que instalar el complemento (ver más detalles abajo).

- -
    -
  1. Utilice el navegador Mozilla para abrir el documento en versión HTML.
    2. -
  2. Desde la barra de menú de su navegador, selecciona Herramientas> Inspector DOM, o Herramientas> Desarrollo Web> Inspector DOM. -
    -
    Más detalles
    - -

    Si el navegador Mozilla no tiene Domi, puede instalarlo del sitio de complementos y reiniciar el navegador. Luego regrese a este tutorial.

    - -

    Si no desea instalar Domi (o estás usando un navegador que no Mozilla), puede utilizar Web X-Ray Goggles, como se describe en la siguiente sección. O bien, puede omitir esta sección e ir directamente a la página siguiente. Saltarse esta sección no interfiere con el resto del tutorial.

    -
    -
    3. -
  3. En el Domi, expanda los nodos de su documento haciendo clic en las flechas. -

    Nota: El espaciado de su archivo HTML puede ocasionar que Domi muestre algunos nodos de texto vacíos, que se pueden pasar por alto.

    - -

    Parte del resultado podría tener este aspecto, según qué nodos has expandido:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    Cuando selecciona cualquiera de los nodos, puede usar panel de la derecha de  DOMi para averiguar más cosas sobre él. Por ejemplo, cuando se selecciona un nodo de texto, DOMi muestra el texto en el panel de la derecha.

    - -

    Cuando se selecciona un elemento nodo, DOMi analiza y ofrece una enorme cantidad de información en su panel de la derecha. La información de estilo es sólo una parte de la información que proporciona.

    -
    4. -
- -
-
Problema
- -

En el DOMi , haga clic en un nodo STRONG.

- -

Utilice el panel de la derecha de Domi para encontrar el nodo de color rojo, y donde su apariencia es más relevante que el texto normal.

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Ocultar solución
-Ver la solución para el problema.
- -

Utilizando Web X-Ray Goggles

- -

Web X-Ray Goggles muestra menos información que DOM Inspector, pero es más fácil de instalar y utilizar.

- -
    -
  1. Ir a la página principal de la Web X-Ray Goggles.
    2. -
  2. Arrastre el enlace bookmarklet en esa página a tu barra de herramientas del navegador.
    3. -
  3. Abra el documento en versión HTML.
    4. -
  4. Active Web X-Ray Goggles haciendo clic en el bookmarklet en la barra de herramientas.
    5. -
  5. Mueva el puntero del ratón por encima de su documento para comprobar los elementos en el documento.
    6. -
- -

¿Y ahora qué?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}Si tomaste el reto, usted vera que la información de estilo  interactúa en más de un lugar, para crear el estilo final de un elemento. La siguiente página explica más acerca de estas interacciones.

diff --git "a/files/es/web/css/introducci\303\263n/index.html" "b/files/es/web/css/introducci\303\263n/index.html" deleted file mode 100644 index 09177572fa..0000000000 --- "a/files/es/web/css/introducci\303\263n/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Introducción -slug: Web/CSS/Introducción -tags: - - CSS - - 'CSS:Introducción' - - para_revisar -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

Presentación

- -

Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).

- -

Además, te guía a través de las características básicas de CSS con ejemplos prácticos que puedes probar por ti mismo en tu propio equipo. Está dividido en dos partes.

- -
    -
  • La parte I ilustra las características estándar de CSS que funcionan en los navegadores Mozilla y también en la mayoría de los navegadores modernos.
    • -
- -
    -
  • La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.
    • -
- -

El tutorial se basa en la Especificación CSS 2.1 .

- -

¿Quién debe usar este tutorial?

- -

Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.

- -

Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo. A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.

- -

Si sabes algo de CSS, puede omitir las partes de la guía de aprendizaje que ya conoces y sólo utilizar las partes que te interesen.

- -

Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.

- -

¿Qué se necesita antes de empezar?

- -

Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite). También debes saber cómo utilizarlos de forma básica.

- -

Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.

- -

Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla. Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas. El otro software de Mozilla al que hace referencia este tutorial incluye:

- - - -

Nota: CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él. Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.

- -

Cómo utilizar este tutorial

- -

Para utilizar este tutorial, lee las páginas con atención y en orden. Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.

- -

En cada página, utiliza la sección de Información para entender cómo funciona CSS. Usa la sección Acción para tratar de usar CSS en tu propio equipo.

- -

Para controlar que has comprendido los contenidos, acepta el reto al final de cada página. Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.

- -

Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título Más detalles. Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.

- -

Parte I del tutorial

- -

Una guía paso a paso básica para CSS.

- -
    -
  1. Qué es CSS
    2. -
  2. Por qué usar CSS
    3. -
  3. Cómo funciona CSS
    4. -
  4. Cascada y herencia
    5. -
  5. Selectores
    6. -
  6. CSS legibles
    7. -
  7. Estilos de texto
    8. -
  8. Color
    9. -
  9. Contenido
    10. -
  10. Listas
    11. -
  11. Cajas
    12. -
  12. Diseño
    13. -
  13. Tablas
    14. -
  14. Multimedia
    15. -
- -

Parte II del tutorial

- -

Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.

- -
    -
  1. JavaScript
    2. -
  2. Enlaces XBL
    3. -
  3. Interfaces de usuario XUL
    4. -
  4. Gráficos SVG
    5. -
  5. Datos XML
    6. -
- -

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git "a/files/es/web/css/introducci\303\263n/layout/index.html" "b/files/es/web/css/introducci\303\263n/layout/index.html" deleted file mode 100644 index f71d3a82e6..0000000000 --- "a/files/es/web/css/introducci\303\263n/layout/index.html" +++ /dev/null @@ -1,384 +0,0 @@ ---- -title: Layout -slug: Web/CSS/Introducción/Layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}}Esta es la 12ª sección del tutorial CSS Getting Started; Describe algunas maneras de ajustar el diseño de su documento. Cambia el diseño de su documento de ejemplo.

- -

Informacion: Layout

- -

Puede utilizar CSS para especificar varios efectos visuales que cambian el diseño de su documento. Algunas de las técnicas para especificar el diseño son avanzadas, y más allá del alcance de este tutorial básico.

- -

Cuando diseña un diseño para que se vea similar en muchos navegadores, su hoja de estilo interactúa con la hoja de estilo y el motor de diseño predeterminados del navegador de formas que pueden ser complejas. Este es también un tema avanzado, más allá del alcance de este tutorial básico.

- -

Esta página describe algunas técnicas sencillas que puedes probar.

- -

Estructura del documento

- -

Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.

- -

El lenguaje de marcado del documento puede tener etiquetas de propósito general para crear la estructura. Por ejemplo, en HTML puede utilizar el elemento {{HTMLElement ('div')}} para crear una estructura.

- -
-
-

Ejemplo

- -

En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.

- -

Su hoja de estilo no puede dibujar un borde alrededor de esos párrafos, porque no hay ningún elemento que especificar en el selector.

- -

Para solucionar este problema estructural, puede agregar una etiqueta {{HTMLElement ('div')}} alrededor de los párrafos. Esta etiqueta es única, por lo que puede identificarse con un atributo id:

-
- -
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
- -

Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:

- -
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
- -

  El resultado se ve así: 

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
-
- -

Unidades de tamaño

- -

Hasta ahora en este tutorial, se han especificado tamaños en píxeles (px). Estos son apropiados para algunos propósitos en un dispositivo de visualización como una pantalla de computadora. Pero cuando el usuario cambia el tamaño de fuente, su diseño puede parecer incorrecto.

- -

Para muchos propósitos es mejor especificar tamaños como un porcentaje o en ems (em). Un em es nominalmente el tamaño de la fuente actual (el ancho de una letra m). Cuando el usuario cambia el tamaño de fuente, su diseño se ajusta automáticamente.

- -
-
-

Ejemplo

- -

El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.

- -

El borde de la derecha tiene su tamaño especificado en ems.

- -

En su navegador, cambie el tamaño de la fuente para ver cómo se ajusta el borde de la derecha pero el borde de la izquierda no:

-
- - - - - - - -
-
RESIZE ME PLEASE
-
-
- -
-
-

Más detalles

- -

Para otros dispositivos, otras unidades de longitud son apropiadas.

- -

Hay más información sobre esto en una página posterior de este tutorial.

- -

Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.

-
-
- -

Diseño del texto

- -

Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:

- -

{{Cssxref ('text-align')}}

- -


-   Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar
- {{Cssxref ('texto-sangría')}}
-     Indente el contenido en una cantidad que especifique.

- -

Estas propiedades se aplican a cualquier contenido similar al texto del elemento, no sólo al texto real. Recuerde que son heredados por los hijos del elemento, por lo que es posible que tenga que desactivarlos explícitamente en los niños para evitar resultados sorprendentes.

- -
-
-

Ejemplo

- -

Para centrar los títulos:

-
- -
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
- -

Resultado:

- - - - - - - -
-

(A) The oceans

-
- -

En un documento HTML, el contenido que ve debajo de un encabezado no está estructuralmente contenido por el encabezado. Así que cuando alineas un encabezado como este, las etiquetas debajo del encabezado no heredan el estilo.

-
- -

Floats

- -

La propiedad {{cssxref ('float')}} fuerza un elemento a la izquierda oa la derecha. Esta es una forma sencilla de controlar su posición y tamaño.

- -

El resto del contenido del documento fluye normalmente alrededor del elemento flotante. Puede controlar esto usando la propiedad {{cssxref ('clear')}} en otros elementos para hacerlos permanecer alejados de los flotadores.

- -
-
-

Ejemplo

- -

En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.

- -

Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:

-
- -
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
- -

El resultado sería:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -

(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)

- -

Posicionamiento

- -

Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.

- -

Estas son propiedades avanzadas. Es posible utilizarlos de manera sencilla, por eso se mencionan en este tutorial básico. Pero puede ser difícil usarlos para diseños complejos.

- -

relativo

- -


-   La posición del elemento se desplaza en relación con su posición normal. Utilícelo para desplazar un elemento por una cantidad especificada. A veces se puede utilizar el margen del elemento para lograr el mismo efecto.
- fijo
-     La posición del elemento es fija. Especifique la posición del elemento en relación con la ventana del documento. Incluso si el resto del documento se desplaza, el elemento permanece fijo.
- absoluto
-     La posición del elemento es fija con relación a un elemento padre. Sólo un padre que está posicionado con relativo, fijo o absoluto hará. Puede hacer que cualquier elemento padre sea adecuado especificando position: relative; Para ello sin especificar ningún cambio.
- estático
-     El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.

- -

Junto con estos valores de la propiedad de posición (a excepción de estática), especifique una o más de las propiedades: superior, derecha, inferior, izquierda, anchura, altura para identificar dónde desea que aparezca el elemento y tal vez también su tamaño.

- -
-
-

Ejemplo

- -

Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:

-
- -
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
- -

En su hoja de estilos, haga que la posición de los padres sea relativa. No hay necesidad de especificar ningún cambio real. Haga que la posición de los niños sea absoluta:

- -
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no hay margenes alrededor del elemento */
-  top: 0px; /* distancia desde la parte superior */
-  left: 0px; /* distancia desde la izquierda */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
- -

El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:

- -
-

/

- -

\

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

Más detalles

- -

La historia completa sobre posicionamiento toma dos capítulos complejos en la Especificación CSS: Modelo de formato visual y detalles del modelo de formato Visual.

- -

Si está diseñando hojas de estilo para trabajar en muchos navegadores, también debe tener en cuenta las diferencias en la forma en que los navegadores interpretan el estándar y quizás errores en versiones concretas de navegadores particulares.

-
-
- -

Action: Specifying layout

- -
    -
  1. Cambie el documento de ejemplo, doc2. Html y hoja de estilo, style2. Css, utilizando los ejemplos anteriores en las secciones Estructura de documento y flotantes.
    2. -
  2. En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.
    3. -
- -
-
-

Cambios

- -

Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.

-
- -
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
- -

Si no descargó el archivo de imagen anteriormente en este tutorial, descárguelo ahora y colóquelo en el mismo directorio que los demás archivos de ejemplo:

- - - - - - - -
Image:Yellow-pin.png
- -

Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.

- -

Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.

- -

Actualiza tu navegador y haz que la ventana sea pequeña. Compruebe que la imagen permanece en la parte superior derecha incluso cuando se desplaza el documento:

- -
-
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -

 

- -
Yellow map pin
-
-
-
- -

 See a solution to this challenge.

- -

What next?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }}Usted acaba de cubrir todos los temas en este tutorial básico de CSS. La siguiente página describe selectores más avanzados para reglas CSS y algunas maneras específicas en las que puede diseñar tablas.

diff --git "a/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" "b/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" deleted file mode 100644 index 1788c8c0ee..0000000000 --- "a/files/es/web/css/introducci\303\263n/los_colon_estilos_de_texto/index.html" +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Los estilos de texto -slug: 'Web/CSS/Introducción/Los:estilos_de_texto' -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

- -

Esta es la sección séptima del tutorial CSS Introducción ; da más ejemplos de estilos de texto.Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.

- -

Los estilos de texto: Información

- -

CSS tiene varias propiedades de estilo de texto .

- -

Hay una propiedad abreviada conveniente, la fuente , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:

- -
    -
  • Negrita, cursiva, y small-caps (versalita)
    • -
  • El tamaño
    • -
  • La altura de la línea
    • -
  • El tipo de letra
    • -
- -
-
-
Ejemplo
- -
p { fuente : cursiva 75% / 125% "Comic Sans MS" , cursive ; }
-
- -

Esta regla establece varias propiedades de la fuente, poniendo todos los párrafos en italic.

- -

El tamaño de fuente se establece en tres cuartas partes del tamaño en cada párrafo del elemento padre,  y el interlíneado se establece en 125% (un poco más separados de lo normal).

- -

El tipo de letra se establece en Comic Sans MS, pero si este tipo de letra no está disponible, el navegador utilizará por defecto tipografía cursiva (hand-written).

- -

La regla tiene el efecto colateral de desactivar las versalitas y negritas (estableciendo su valor en normal):

-
- -

Tipos de fuentes

- -

No se puede predecir qué tipografías tienen los lectores de nuestro documento . Así que cuando se especifica llos tipos de fuentes de las letras, es buena idea darle una lista alternativa en orden de preferencia.

- -

Finalice la lista con uno de los las tipografías por defecto: serif, sans-serif, cursive, fantasy or monospace.

- -

Si el tipo de letra no es compatible con alguna de los caracteres del documento, el navegador puede sustituirlos por una tipografía diferente. Por ejemplo, el documento puede contener caracteres especiales que el tipo de letra no admite. Si el navegador puede encontrar otro tipografía que tiene esos caracteres, entonces usará otro tipo de fuente

- -

Para especificar un tipo de letra por sí misma, utilizar el font-family propiedad.

- -

Los tamaños de la fuente

- -

Los usuarios de navegadores pueden anular los tamaños de fuente por defecto o cambiar el tamaño del texto mientras leen una página, así que tiene buen sentido utilizar tamaños relativos donde se pueda.

- -

Puede utilizar algunos valores incorporados para tamaños de fuentes,  like small, medium and large (pequeñas, medianas y grandes) . También puede utilizar valores relativos al tamaño de fuente del elemento padre, like: smaller, larger, 150% or 1.5em. ( más pequeño, más grande, 150% o 1.5em.). Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); así 1.5em es una vez y media el tamaño de la fuente del elemento padre.

- -

Si es necesario, puede especificar como tamaño actual, : 14px (14 píxeles) para un dispositivo de visualización o 14pt (14 puntos) para una impresora. Esto no es accesible para los usuarios con discapacidad visual, ya que no les permite cambiar el tamaño. Una estrategia más accesible es establecer un valor incorporado como mediano en un elemento en la parte superior del documento, y luego fijar tamaños relativos a todos los elementos descendientes.

- -

Para especificar un tamaño de fuente por su cuenta, utilice el font-size propiedad.

- -

Altura de línea

- -

El interlíneado especifica el espacio entre líneas. Si el documento tiene párrafos largos con muchas líneas, una separación más grande de lo normal, hace que sea más fácil de leer, especialmente si el tamaño de la letra es pequeña.

- -

Para especificar una altura de línea por su cuenta, utilice la propiedad line-height .

- -

Decoración

- -

La propiedad independiente text-decoration puede especificar otros estilos, como el subrayado o tachado. Usted puede establecerlo en ninguno ( none )  para eliminar expresamente cualquier decoración.

- -

Otras propiedades

- -

Para especificar cursiva por su cuenta, use font-style : italic;
- Para especificar audaz por su cuenta, use font-weight : bold;
- Para especificar los pequeños capitales en su propio, el uso font-variant : small-caps;

- -

Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como normal o inherit.

- -
-
Mas detalles
- -

Puede especificar estilos de texto de diversas maneras.

- -

Por ejemplo, algunas de las propiedades mencionadas aquí tienen otros valores que se pueden utilizar.

- -

En una hoja de estilo compleja, evite utilizar la propiedad font shorthand, debido a sus efectos secundarios (resetean otras propiedades individuales).

- -

Para obtener mas detalles de las propiedades que se relacionan con las fuentes, ver las especificaciónes CSS , Fonts,. Si desea más detalles sobre la decoración de texto, ver Text .

- -

Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar @ font-face para especificar una fuente en línea. Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.

-
- -

Acción: Especificaciónes de las fuentes

- -

Para un simple documento, puede establecer la fuente del elemento  <body> y el resto del documento hereda la configuración.

- -
    -
  1. Edite su archivo CSS.
    2. -
  2. Agregue la siguiente regla para cambiar el tipo de letra en todo el documento. La parte superior del archivo CSS es el lugar lógico para esto, pero no tiene los mismos efectos donde usted lo ponga: - 
    body {font: 16px "Comic Sans MS", cursive;}
    - -
     
    -
    3. -
  3. Añada un comentario que explique la regla, y agregue un espacio en blanco para que coincida con su diseño preferido.
    4. -
  4. Guarde el archivo y actualice el explorador para ver el efecto. Si su sistema tiene Comic Sans MS, u otra fuente cursiva que no soporta italic, su navegador eligira un tipo de letra diferente para la primera línea del texto en italic: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. Desde la barra de menú de su navegador, elija Ver> Tamaño del texto> Aumentar (o Ver> Zoom> Acercar ). A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.
    6. -
- -
-
Desafío
- -

Sin modificar nada más, hacer las seis letras iniciales dos veces el tamaño de letra serif por defecto del navegador:

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Possible solution
- -

Add the following style declaration to the strong rule:

- -
  font: 200% serif;
-
-If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. - -

 

-Hide solution
-Ver una solución para el desafío.
- -

¿Y ahora qué?

- -

El documento muestra ya utiliza varios colores con nombre. La siguiente sección enumera los nombres de los colores estándar y se explica cómo se puede especificar otros .

- -

 

diff --git "a/files/es/web/css/introducci\303\263n/media/index.html" "b/files/es/web/css/introducci\303\263n/media/index.html" deleted file mode 100644 index bb7bb0bd23..0000000000 --- "a/files/es/web/css/introducci\303\263n/media/index.html" +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Media -slug: Web/CSS/Introducción/Media -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables")}}

- -

Esta es la ultima sección de la primera parte del tutorial de Introducción a CSS. Muchas páginas de este tutorial se han enfocado en las propiedades y valores de CSS que especifican como mostrar un documento. Esta sección indaga otra vez en el propósito y la estructura de las hojas de estilo.

- -

Información: Media

- -

El propósito de CSS es especificar cómo los documentos son presentados al usuario. La presentación puede tener más de una forma.

- -

Por ejemplo, probablemente estes leyendo esta página en algún aparato doméstico (un celular, tu pc). Pero también podrías querer proyectarlo para una audiencia mas grande o imprimirlo. Estos medios pueden tener diferentes características. CSS te provee diferentes maneras de presentar un documento en distintos medios.

- -

Para especificar reglas para un medio en particular, usa {{CSSXref("@media")}} seguido por el tipo de medio, seguido por llaves que encierren las reglas.

- -
-
Ejemplo
- -

Un documento en un web site tiene una barra de navegación que permite a los usuarios moverse en el sitio.

- -

En el lenguaje de marcado, el elemento padre de esta área tiene el id nav-area. (En {{HTMLVersionInline(5)}}, esto puede ser marcado con el elemento {{HTMLElement("nav")}} en vez de un {{HTMLElement("div")}} con un atributo id.)

- -

Cuando vas a imprimir el documento esa área de navegación no tiene ningún propósito, entonces con las hojas de estilo puedes removerlo completamente:

- -
@media print {
-  #nav-area {display: none;}
-  }
-
-
- -

Algunos de los tipos de medios comunes son:

- - - - - - - - - - - - - - - - - - - - -
screenPantalla de computadora
printMedio paginado
projectionPantalla proyectada
allTodos (por defecto)
- -
-
Mas detalles
- -

Existen otras maneras de especificar un conjunto de reglas para los distintos medios.

- -

El lenguaje de marcado del documento puede permitir que el tipo de medio sea determinado cuando la hoja de estilo esta enlazada al documento. Por ejemplo, en HTML puedes especificar el tipo de medio con un atributo media en la etiqueta LINK.

- -

En CSS puedes usar {{CSSXref("@import")}} al inicio de la hoja de estilo para importar otra hoja de estilo de una URL, opcionalmente especificando el tipo de medio.

- -

Al usar estas técnicas puedes separar las reglas de estilo para los diferentes medios en distintos archivos. Esta es una manera útil de estructurar tus hojas de estilo.

- -

Para más detalles de los tipos de medio, ve Media en la especificación de CSS.

- -

Existen mas ejemplos de la propiedad {{cssxref("display")}} en una página posterior de este tutorial: XML data.

-
- -

Imprimir

- -

CSS tiene algún soporte especifico para impresión y para medios páginados en general.

- -

Una regla {{cssxref("@page")}} puede determinar los márgenes de la página. Para impresión de doble cara, puedes definir los márgenes separadamente para @page:left y @page:right.

- -

Para medios impresios, normalmente usas unidades apropiadas de lonfigutd como pulgadas (in) y puntos (pt = 1/72 inch), o centimetros (cm) y milimetros (mm). Es igualmente apropiado usar ems (em) para conincidir el tamaño de la fuente, y porcentajes (%).

- -

Tu puedes controlar como los saltos de línea del contenido de un documento, al usar las propiedades {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} y{{cssxref("page-break-inside")}}.

- -
-
Ejemplo
- -

Esta regla determina los márgenes a una pulgada en todos los lados:

- -
@page {margin: 1in;}
-
- -

Esta regla asegura que cada elemento H1 empiece en una nueva página:

- -
h1 {page-break-before: always;}
-
-
- -
-
Más detalles
- -

Para más detalles del soporte de CSS para medios paginados, ver Paged media en la especificación de CSS.

- -

Como otras características de CSS, imprimir depende de tu navegador y su configuración. Por ejemplo, Mozilla te suple con unos márgenes por defecto, cabeceras y pies de página cuando imprimes. Cuando otros usuarios imprimen tu documento, probablemente no puedas predecir el navegador y la configuración usada, por lo que no podrás controlar los resutlados completamente.

-
- -

Interfaces de Usuario

- -

CSS tiene algunas propiedades especificas para aparatos que soportanuna interfaz de usuario, como monitores. Esto hace que la apariencia del documento cambie dinámicamente mientras el usuario trabaja con la interfaz.

- -

No existe un tipo especial de medio para aparatos con interfaz de usuario.

- -

Si existen cinco selectores especiales:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
E{{cssxref(":hover")}}Cualquier elemento E que tenga el puntero sobre él
E{{cssxref(":focus")}}Cualquier elemento E que tenga el foco del teclado
E{{cssxref(":active")}}Cualquier elemento E que este envuelto en la acción actual del usuario
E{{cssxref(":link")}}Cualquier elemento E que es un hipervinculo a una URL no visitada por el usuario
E{{cssxref(":visited")}}Cualquier elemento E que es un hipervinculo a una URL que el usuario ya visito
- -
-

Nota: La información que puede ser obtenida con el selector :visited esta restringida en {{gecko("2.0")}}. Ver Privacy and the :visited selector para más detalles.

-
- -

La propiedad {{cssxref("cursor")}} especifica la forma del puntero: Algunas de las formas comunes son las siguientes.

- -

Coloca el mouse sobre los items en este lista para ver la forma actual del puntero en tu navegador:

- - - - - - - - - - - - - - - - - - - - - - - - -
SelectorSelects
pointerIndicating a link
waitIndicating that the program cannot accept input
progressIndicating that the program is working, but can still accept input
defaultThe default (usually an arrow)
- -

Una propiedad {{cssxref("outline")}} crea un contorno que a menudo es usado para indicar el foco del teclado. Sus valores son similares a la propiedad {{cssxref("border")}}, excepto que no puedes especificar lados individuales.

- -

Otras características de las interfaces de usuario son implementadas usando atributos. Por ejemplo, un elemento que esta deshabilitado o es de solo lectura tiene el atributo disabled o el atributo readonly. Selectores puede especificar estos atributos como cualquier otro, usando corchetes: {{mediawiki.external('disabled')}} o {{mediawiki.external('readonly')}}.

- -
-
Ejemplo
- -

Estas reglas especifican estilos para un boton que cambia dinámicamente cuando el usuario interactúa con el:

- -
.green-button {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.green-button[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.green-button:active {
-  border-style: inset;
-  }
-
- -

Esta wiki no soporta una interfaz de usuario en la página, entonces estos botones no hacen "click". A continuación se presentan una imágenes estáticas para ilustrar la idea:

- - - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
disablednormalactive
-
- -

Un botón completamente funcional también tiene un contorno oscuro alrededor cuando esta por defecto, y un contorno punteado en él cuando tiene el foco del teclado. También podría un efecto flotante (hover) cuando el puntero este sobre el.

-
- -
-
Más detalles
- -

Para más información sobre interfaces de usuario en CSS, ver User interface en la especificación de CSS.

- -

Existe un ejemplo del lenguaje de marcado usado por Mozilla para interfaces de usuario, XUL, en la Parte II de este tutorial.

-
- -

Acción: Imprimir un documento

- -
    -
  1. Abrir un nuevo documento HTML, doc4.html. Copiar y pegar el contenido de aqui: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h1>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. Abrir una nueva hoja de estilo, style4.css. Copiar y pegar el contenido de aqui: - 
    /*** Print sample ***/
-
-/* defaults  for screen */
-#print-head,
-#print-foot {
-  display: none;
-  }
-
-/* print only */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#print-head {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#print-foot {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#print-foot:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* end print only */
-
    -
    3. -
  3. Ve este documento en tu navegador; este usa el estilo por defecto de tu navegador.
    4. -
  4. Imprime (o previsualiza) el documento; la hoja de estilo coloca cada sección en una página separada, y agrega una cabecera y un pie de página por cada una. Si tu navegador soporta contadores, le agregará un número de página al pie. - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section A
    - -
    This is the first section...
    - -
    Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    Heading for paged media
    - -
    Section B
    - -
    This is the second section...
    - -
    Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - - -
Retos
Mueve las relgas de estilo especificas para imprimir a un archivo CSS separado. -

Lee la página de referencia {{CSSXref("@import")}} para buscar detalles de como importar el nuevo archivo CSS especifico para imrpimir dentro de tu hoja de estilo style4.css.

- -

Haz que las encabezamientos se vuelvan azules cuando el puntero del mouse este sobre ellos.

-
- -

Ver soluciones a estos retos.

- -

¿Qué sigue?

- -

Si has tenido dificultades entendiendo esta página, o si tienes algún comentario, por favor contribuye en la página de Discussion.

- -

Hasta aquí, todas las reglas de estilo en este tutorial han estado en archivos especificos. Las reglas y sus valores son fijos. La siguiente página describe como cambiar las reglas dinámicamente al usar un lenguaje de programación: JavaScript

diff --git "a/files/es/web/css/introducci\303\263n/selectors/index.html" "b/files/es/web/css/introducci\303\263n/selectors/index.html" deleted file mode 100644 index 9ebe3573e8..0000000000 --- "a/files/es/web/css/introducci\303\263n/selectors/index.html" +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: Selectores -slug: Web/CSS/Introducción/Selectors -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}Esta es la sección quinta del tutoriaCSS Getting Started ;En él se explica cómo se puede aplicar estilos de forma selectiva, y cómo los diferentes tipos de selectores tener diferentes prioridades. Agregar algunos atributos a las etiquetas en su documento de muestra, y utiliza estos atributos en su hoja de estilos de muestra.

- -

Información: Selectores

- -


- CSS tiene su propia terminología para describir el lenguaje CSS. Anteriormente en este tutorial, que ha creado una línea en su hoja de estilos como esta:

- -
strong {
-  color: red;
-}
-
- -

En la terminología de CSS, toda esta línea es una rule (regla). Esta regla comienza con strong, que es un selector. Permite seleccionar qué elementos en el DOM se aplica la regla.

- -
-
Más detalles
- -

La parte interior de las llaves es la declaración.

- -

 La palabra clave es color, que es una propiedad, y el rojo es el valor.

- -

El punto y coma después de el par propiedad-valor separa los posibles otros pares de  propiedad-valor en una misma declaración.

- -

 Este tutorial se refiere a un selector como strong como un selector de etiquetas. La especificación CSS se refiere a él como un selector de tipo ( type selector).

-
- -

En esta página del tutorial se explica más acerca de los selectores que se pueden utilizar en las reglas CSS.

- -

Además de añadir nombres a las etiquetas , puede usar valores en los atributos de los selectores. Esto permite que sus reglas sean más específicas.

- -

Dos atributos tienen un estatus especial para CSS. Son class e id.

- -

Class: Selectores de clase

- -

Utilice el atributo class para asignarle  a un elemento un nombre de clase (class). Depende del nombre que elijas como class. Múltiples elementos en un documento pueden tener el mismo valor de la clase.

- -

En su hoja de estilo, escriba un punto (.) antes del nombre de la clase, cuando se utiliza como un selector.

- -

Selectores ID

- -

Utilice el atributo id en un elemento para asignar un identificación para ese elemento. Depende de usted el nombre que elija para el ID. El nombre de ID debe ser único en el documento.
-  

- -

En su hoja de estilo, escriba un símbolo de almohadilla (#) ante el ID cuando se utiliza esto en un selector.

- -
-
Ejemplo
- -

Esta etiqueta HTML tiene un atributo class y un atributo id:

- -
<p class="key" id="principal">
-
- -

El valor de id es, principal, debe ser único en el documento; pero otras etiquetas del documento puede tener el mismo nombre de la class, Key.

- -

En una hoja de estilo CSS, esta regla hace que todos los elementos con la class key sean verdes . (Puede ser que no todos los sean {{HTMLElement ()} "p"} elementos.)

- -
.key {
-  color: green;
-}
-
- -

Esta regla hace que el único elemento de id principal este en negrita:

- -
#principal {
-  font-weight: bolder;
-}
-
-
- -

Si más de una regla se aplica a un elemento y especifica la misma propiedad, entonces el CSS da prioridad a la regla que tiene el selector más específico. Un selector ID es más específico que un selector de class, que a su vez es más específico que un selector (tag) de etiquetas.

- -
-
Más detalles
- -

También se pueden combinar selectores, haciendo un selector más específico.
-
- Por ejemplo, el selector .key selecciona todos los elementos que tienen key como nombre de clase (class). El selector p.key selecciona sólo el elemento {{ HTMLElement("p") }} que tiene de nombre key.

- -

Usted no esta limitado a los dos atributos especiales, class e id.  Se puede especificar otros atributos mediante corchetes. Por ejemplo, el selector [type='button'] selecciona todos los elementos que tienen un atributo de tipo con el  valor button.

-
- -

Si la hoja de estilo tiene reglas en conflicto y son igualmente específicas, entonces el CSS da prioridad a la regla que está después en la hoja de estilos.

- -

Cuando usted tiene un problema con las reglas en conflicto, trate de resolverlo haciendo una de las normas más específicas, para que tenga prioridad. Si usted no puede hacer esto, trate de mover una de las reglas mas cerca del final de la hoja de estilos para que tenga la prioridad.

- -

Las pseudo-clases de los selectores

- -

Una pseudo-clase  pseudo-class es en  CSS una palabra clave añadida a los selectores, que especifica un estado especial del elemento a seleccionar. Por ejemplo {{Css Href (": hover")}} aplicará un estilo cuando el usuario se desplaza sobre el elemento especificado mediante el selector.

- -

Las Pseudo-classes, junto con los pseudo-elements, permiten aplicar un estilo a un elemento no sólo en relación con el contenido de la estructura del documento, sino también en relación a los factores externos, como la historia del navegador por ejemplo: ({{href css (": visited ")}}, ), el estado de su contenido (como {{ref css (": :checked")}} en algunos elementos de formulario), o la posición del ratón (como {{cssxref (":hover ")}} que le permite saber si el ratón está sobre un elemento o no). Para ver una lista completa de selectores, visite especificación CSS3 Selectores de trabajo CSS3 Selectors working spec.

- -
-
Sintaxis
- -
selector:pseudo-class {
-  property: value;
-}
-
-
- -

Listado de pseudo-classes:

- -
    -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":nth-child") }}
    • -
  • {{ Cssxref(":nth-last-child") }}
    • -
  • {{ Cssxref(":nth-of-type") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":disabled") }}
    • -
- -

Información: Los selectores basados en relaciones (relationships)

- -

El CSS tiene algunas formas de seleccionar elementos en función de las relaciones entre los elementos. Usted puede utilizar estas para hacer selectores que sean más específicos.

- - - - - - - - - - - - - - - - - - - - - - - - - -
Selectores comunes basados en relaciones
SelectorSelects
A ECualquier elemento E que es un descendiente de un elemento A (que es: un hijo o un hijo de un hijo etc.)
A > ECualquier elemento E que es un hijo de un elemento A
E:first-childCualquier elemento E que es el primer hijo de su padre
B + ECualquier elemento E que es el siguiente hermano de un elemento B (es decir: el próximo hijo del mismo padre)
- -

Usted puede combinarlas para expresar relaciones complejas.
-
- También puede utilizar el símbolo asterisco (*) para significar "cualquier elemento".

- -
-
Ejemplo
- -

Una tabla HTML tiene un atributo id, pero sus filas y las celdas no tienen identificadores individuales:

- -
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
- -

Estas reglas hacen que la primera celda de cada fila sea en negrita, y la segunda celda de cada fila en  la familia de fuente  monoespaciado. Esto sólo afecta a una tabla concreta del documento:

- -
    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-
- -

El resultado se ve así:

- - - - - - - -
- - - - - - - - -
Prefix0001default
-
-
- -
-
Más detalles
- -

La manera mas habitual es hacer que un selector sea más específico, entonces aumentara su prioridad.

- -

Si utiliza estas técnicas, se evita la necesidad de especificar la class o atributos ID en muchas etiquetas del documento. En su lugar, CSS hace este trabajo.

- -

En grandes diseños donde la velocidad es importante, usted puede hacer sus hojas de estilo más eficiente evitando reglas complejas que dependen de relaciones entre los elementos.

- -

Para más ejemplos sobre las tablas, ver Tables en la página CSS Reference.

-
- -

Action: Using class and ID selectors

- -
    -
  1. Edite su archivo HTML, y duplicar el párrafo copiando y pegando.
    2. -
  2. A continuación, agregue los atibutos  id y class a la primera copia, y un atributopara la segunda copia como se muestra a continuación. Alternativamente, copie y pegue el archivo entero de nuevo: - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    3. -
  3. Ahora edite su archivo CSS. Reemplazar todo el contenido con: - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    4. -
  4. Guarde los archivos y actualizar el navegador para ver el resultado: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - -

    Puede intentar reordenar las líneas en el archivo CSS de mostrar de que el orden no efecta.

    - -

    Los selectores de class.carrot and .spinach tienen prioridad sobre el selector de etiquetas strong.

    - -

    El ID selector #first tiene prioridad sobre los selectores de clase y etiqueta.

    -
    5. -
- -
-
Desafíos
- -
    -
  1. Sin cambiar su archivo HTML, agregue una sola regla para su archivo CSS que mantenga todas las letras iniciales que mismo color que están ahora, pero hace que todo el otro texto en el segundo párrafo sea azul: - - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. Ahora cambie la regla que acaba de agregar (sin cambiar nada más), para hacer que el primer párrafo sea azul también: - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
- -
-
Possible solution
- -
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
-Hide solution
-See a solution for the challenge.
- -

Action: Using pseudo-classes selectors

- -
    -
  1. Cree un HTML como el siguiente: - - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    2. -
  2. Ahora edite su archivo CSS. Reemplace todo el contenido con: - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    3. -
  3. Guarde los archivos y actualice el explorador para ver el resultado (poner el ratón sobre el siguiente enlace para ver el efecto): - - - - - - -
    Go to our Home page  
    -
    4. -
- -

Acción: Uso de selectores basados en las relaciones y pseudo-clases

- -

Con selectores basados en las relaciones y pseudo-clases puede crear algoritmos complejos en cascada . Esto es una técnica común que se utiliza, por ejemplo, con el fin de crear menús desplegables en puro CSS (es decir sólo CSS, sin necesidad de utilizar JavaScript). La esencia de esta técnica es la creación de una regla como la siguiente:

- -
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
- -

Aplicararemos a una estructura de HTML como el siguiente:

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

Vea nuestro ejemplo completoCSS-based dropdown menu example para una posible referencia.

- -

¿Y ahora qué?

- -

Su hoja de estilos de muestra está empezando a parecer densa y complicada. La siguiente sección describe maneras de hacer CSS más fácil de leer. easier to read.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git a/files/es/web/css/mask-clip/index.html b/files/es/web/css/mask-clip/index.html new file mode 100644 index 0000000000..5110c18d6c --- /dev/null +++ b/files/es/web/css/mask-clip/index.html @@ -0,0 +1,102 @@ +--- +title: '-webkit-mask-clip' +slug: Web/CSS/-webkit-mask-clip +tags: + - CSS +translation_of: Web/CSS/mask-clip +translation_of_original: Web/CSS/-webkit-mask-clip +--- +

{{ CSSRef() }}

+ +

{{ Non-standard_header() }}

+ +

Si se especificado {{ Cssxref("-webkit-mask-image") }} , -webkit-mask-clip determina el comportamiento de recorte (clipping) de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+
+ +

donde:

+ +
+
<clip-style>
+
border | padding | content | text
+
+ +

Valores

+ +
+
border
+
Si se ha especificado border , la máscara de imagen se extiende hasta el borde del elemento.
+
padding
+
Si se ha especificado padding , la imagen de máscara de extiendo hasta el padding (relleno) del elemento.
+
content
+
Si se ha espeficiado content , la imagen de máscara se recorta al tamaño del contenido del elemento.
+
text
+
Si se ha especificado  text , la imagen de máscara de recorta al tamaño del texto del elemento.
+
+ +

Ejemplo

+ +
div {
+    -webkit-mask-image: url('images/mask.png');
+    -webkit-mask-clip: padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}3.2
+
+ +

Ver además

+ +

{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-box-image") }}, {{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}

diff --git a/files/es/web/css/mask-image/index.html b/files/es/web/css/mask-image/index.html new file mode 100644 index 0000000000..60434d3e6a --- /dev/null +++ b/files/es/web/css/mask-image/index.html @@ -0,0 +1,157 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad CSS -webkit-mask-image establece la imagen de máscara para un elemento. Una imagen de máscara fija que partes del elemento serán visibles de acuerdo a la transparencia de la imagen de máscara.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
-webkit-mask-image: url(images/mymask.png);
+-webkit-mask-image: url(images/foo.png), url(images/bar.png);
+-webkit-mask-image: none;
+
+ +

Valores

+ +
+
<uri>
+
La localización del recurso imagen que será utilizado como imagen de máscara.
+
<gradient>
+
La función webkit-gradient que será usada como imagen de máscara.
+
none
+
Usado para especificar si un elemento no tiene imagen de máscara.
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
body {
+  -webkit-mask-image: url('images/mymask.png');
+}
+
+div {
+  -webkit-mask-image: url('images/foo.png'), url('images/bar.png');
+}
+
+p {
+  -webkit-mask-image: none;
+}
+
+ +

Si se especifican varias imágenes, la región visible que sale como resultado es la combinación de las regiones visibles de cada máscara individual.

+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Soporte básico{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Múltiples imágenes de máscara{{CompatNo}}1.0{{CompatNo}}{{CompatNo}}4.0
Gradientes{{CompatNo}}1.0{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}4.0{{property_prefix("-webkit")}}
Máscaras SVG{{CompatNo}}8.0[1]{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureiOS SafariOpera MiniOpera MobileAndroid Browser
Soporte básico3.2{{CompatNo}}{{CompatNo}}2.1
Múltiples imágenes de máscara{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
Gradientes{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Máscaras SVG{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}
+
+ +

[1] Desde la versión 1.9.1 {{geckoRelease("1.9.1")}} Gecko soporta Efectos de filtro SVG, que se pueden usar para aplicar máscaras a contenido HTML.

+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}},{{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}},{{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/mask-origin/index.html b/files/es/web/css/mask-origin/index.html new file mode 100644 index 0000000000..8e75d01a39 --- /dev/null +++ b/files/es/web/css/mask-origin/index.html @@ -0,0 +1,101 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referencia +translation_of: Web/CSS/mask-origin +translation_of_original: Web/CSS/-webkit-mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propiedad  CSS -webkit-mask-origin determina el origen de una imagen de máscara. El valor de la propiedad {{cssxref("-webkit-mask-position")}} se interpreta en relación al valor de esta propiedad. No se aplica cuando -webkit-mask-attachment es fixed.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +
+
padding
+
Valor por defecto. La posición de la imagen de máscara es relativa al padding (relleno). (Para cajas solas  "0 0" es la esquina superior izquierda del límite del padding, "100% 100%" es la esquina inferior derecha.)
+
border
+
La posición de la imagen de máscara es relativa al borde.
+
content
+
La posición de la imagen de máscara es relativa al contenido.
+
+ +

Ejemplos

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* La imagen de máscara estará dentro del padding */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Compatibilidad con los distintos navegadores.

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básica2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/es/web/css/mask-position/index.html b/files/es/web/css/mask-position/index.html new file mode 100644 index 0000000000..60a7231da3 --- /dev/null +++ b/files/es/web/css/mask-position/index.html @@ -0,0 +1,119 @@ +--- +title: '-webkit-mask-position' +slug: Web/CSS/-webkit-mask-position +tags: + - CSS + - No estándar(2) + - Propiedad CSS + - Referencia CSS +translation_of: Web/CSS/mask-position +translation_of_original: Web/CSS/-webkit-mask-position +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Sumario

+ +
la propiedad CSS -webkit-mask-position fija la posición inicial de una máscara de imagen.
+ +

{{cssinfo}}

+ +

Síntaxis

+ +
{{csssyntax}}
+ +

Valores

+ +

 Acepta uno o dos valores.  Se permiten valores negativos para {{cssxref("<percentage>")}} y {{cssxref("<length>")}}.

+ +
    +
  • Si sólo se especifica un valor, el segundo valor se supone que es center.
    • +
  • El primer valor representa la posición horizontal y el segundo la posición vertical (si al menos un valor no es una palabra clave).
    • +
+ +
+
<percentage>
+
Con un par de valores  0% 0%,  (es igual a 0 0) la esquina superior izquierda de la imagen se alinea con la esquina superior izquierda del borde del relleno del cuadro. Un valor par de 100% 100% coloca la esquina inferior derecha de la imagen  en la esquina inferior derecha del zona del relleno. Con un par de valores de 14% 84%, el punto del 14%  a lo largo y el 84% hacia abajo de la imagen son situados el punto del 14%  a lo largo y el 84% del área del relleno.
+
<length>
+
Con un par de valores 2cm 1cm, la esquina superior izquierda de la imagen se coloca a 2cm a la derecha y 1cm por debajo de la esquina superior izquierda del área del relleno.
+
top
+
Equivalente al 0% para la posición vertical.
+
right
+
Equivalente al 100% para la posición horizontal.
+
bottom
+
Equivalente al 100% para la posición vertical.
+
left
+
Equivalente al 0% para la posición horizontal.
+
center
+
Equivalente al 50% para la posición horizontal si no se da otra forma, o 50% para la posición vertical si lo es.
+
+ +

Ejemplos

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: bottom right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position: 25%;
+}
+
+ +

Especificaciones

+ +

No forma parte de ninguna especificación.

+ +

Compatibilidad con los distintos nevegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte Básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte Básico{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Ver tambien

+ +

{{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}

diff --git a/files/es/web/css/mask-repeat/index.html b/files/es/web/css/mask-repeat/index.html new file mode 100644 index 0000000000..316bec182e --- /dev/null +++ b/files/es/web/css/mask-repeat/index.html @@ -0,0 +1,133 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia + - Web +translation_of: Web/CSS/mask-repeat +translation_of_original: Web/CSS/-webkit-mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask-repeat especifica si la imagen de máscara se repite (en mosaico) y cómo se repite.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave de valor únicas */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Palabras clave de valor mútiple */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Valores globlaes */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Valores

+ +
+
repeat
+
La máscara de imagen se repite tanto vertical como horizontalmente.
+
repeat-x
+
La imagen de máscara de repite sólo horizontalmente.
+
repeat-y
+
La imagen de máscara de repite sólo verticalemente.
+
no-repeat
+
La máscara de imagen no se repite. Sólo se dibuja una copia suya. El resto del contenido del elemento con máscara no se muestra.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+
+ +

Ejemplos

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+
+ +

Soporte para múltiples imágenes de máscara

+ +

Se puede especificar, seperados por comas,  un <repeat-style> para cada una de las imágenes de máscara:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Cada imagen se relaciona con el correspondiente estilo, desde la primera especificada hasta la última.

+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Ver además

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/es/web/css/mask/index.html b/files/es/web/css/mask/index.html new file mode 100644 index 0000000000..50dd997bb0 --- /dev/null +++ b/files/es/web/css/mask/index.html @@ -0,0 +1,125 @@ +--- +title: '-webkit-mask' +slug: Web/CSS/-webkit-mask +tags: + - CSS + - No estandar + - Propiedad CSS + - Referencia +translation_of: Web/CSS/mask +translation_of_original: Web/CSS/-webkit-mask +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Resumen

+ +

La propiedad -webkit-mask es una  manera corta de establecer, en un único sitio en una hoja de estilos, los valores individuales de máscara. -webkit-mask  puede ser utilizado para fijar los valores en una o más de las siguiente propiedades: {{Cssxref("-webkit-mask-image")}}, {{Cssxref("-webkit-mask-repeat")}}, {{Cssxref("-webkit-mask-attachment")}}, {{Cssxref("-webkit-mask-position")}}, {{Cssxref("-webkit-mask-origin")}}, y {{Cssxref("-webkit-mask-clip")}}.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-webkit-mask: none;
+
+/* Valores de imágene */
+-webkit-mask: url(mask.png);                       /* Imagen de pixel usado coo máscara */
+-webkit-mask: url(masks.svg#star);                 /* Elemento dentro de un gráfico SVG usado como máscara */
+-webkit-mask: linear-gradient(transparent, black); /* Gradiente usado como máscara */
+
+/* Valores combinados */
+-webkit-mask: url(masks.svg#star) 40px 20px;       /* Elemento dentro de un gráfico SVG usado como máscara y posicionado  40px desde la parte superior y 20px a la izquierda */
+-webkit-mask: url(masks.svg#star) 0 0/50px 50px;   /* Elemento dentro de un gráfico SVG usado como máscara con una anchura y altura de 50px */
+-webkit-mask: url(masks.svg#star) repeat-x;        /* Elemento dentro de un gráfico SVG usado como una máscara que se repite horizontalmente */
+-webkit-mask: url(masks.svg#star) border;          /* Elemento dentro de un gráfico SVG usado como una máscara que sobrepasa la caja que rodea el borde */
+-webkit-mask: url(masks.svg#star) text;            /* Elemento dentro de un gráfico SVG usado como una máscara que recorta el texto que contiene */
+
+/* Valores globales */
+-webkit-mask: inherit;
+-webkit-mask: initial;
+-webkit-mask: unset;
+
+ +

Valores

+ +
+
mask-image
+
Requierido.Ver {{Cssxref("-webkit-mask-image")}}.
+
mask-repeat
+
Opcional. Ver {{Cssxref("-webkit-mask-repeat")}}.
+
mask-attachment
+
Opcional Ver {{Cssxref("-webkit-mask-attachment")}}.
+
mask-position
+
Opcional. Ver {{Cssxref("-webkit-mask-position")}}.
+
mask-origin
+
Opcional. Ver {{Cssxref("-webkit-mask-origin")}}.
+
mask-clip
+
Opcional Ver {{Cssxref("-webkit-mask-clip")}}.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +
.example {
+  -webkit-mask: url('mask.png') no-repeat fixed 20px 20px padding padding;
+}
+
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatNo}}{{CompatNo}}{{CompatNo}}3.2
+
+ +

See also

+ +
    +
  • {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}
    • +
diff --git a/files/es/web/css/media_queries/testing_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html new file mode 100644 index 0000000000..dac4330054 --- /dev/null +++ b/files/es/web/css/media_queries/testing_media_queries/index.html @@ -0,0 +1,93 @@ +--- +title: Probando media queries +slug: Web/Guide/CSS/probando_media_queries +translation_of: Web/CSS/Media_Queries/Testing_media_queries +--- +

{{SeeCompatTable}}

+

El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.

+

Creando una media query list

+

Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.

+

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

+
var mql = window.matchMedia("(orientation: portrait)");
+
+

Revisando el resultado de un query

+

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

+
if (mql.matches) {
+  /* The device is currently in portrait orientation */
+} else {
+  /* The device is currently in landscape orientation */
+}
+
+

Recibiendo notificaciones query

+

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the addListener() method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:

+
var mql = window.matchMedia("(orientation: portrait)");
+mql.addListener(handleOrientationChange);
+handleOrientationChange(mql);
+
+

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).

+

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

+
function handleOrientationChange(mql) {
+  if (mql.matches) {
+    /* The device is currently in portrait orientation */
+  } else {
+    /* The device is currently in landscape orientation */
+  }
+}
+
+

Terminando con las notificaciones query 

+

Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al removeListener() en el {{domxref("MediaQueryList") }}:

+
mql.removeListener(handleOrientationChange);
+
+

Compatibilidad con los navegadores

+

{{CompatibilityTable}}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico9{{CompatGeckoDesktop("6.0") }}1012.15.1
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{CompatUnknown}}1012.15
+
+

Ver también

+
    +
  • Media queries
    • +
  • {{domxref("window.matchMedia()") }}
    • +
  • {{domxref("MediaQueryList") }}
    • +
  • {{domxref("MediaQueryListListener") }}
    • +
diff --git a/files/es/web/css/media_queries/using_media_queries/index.html b/files/es/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..997626e12d --- /dev/null +++ b/files/es/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,828 @@ +--- +title: CSS media queries +slug: CSS/Media_queries +tags: + - CSS + - Media + - Media Queries + - query +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

Las media queries (en español "consultas de medios") son útiles cuando deseas modificar tu página web o aplicación en función del tipo de dispositivo (como una impresora o una pantalla) o de características y parámetros específicos (como la resolución de la pantalla o el ancho del {{glossary("viewport")}} del navegador).

+ +

Se utilizan para:

+ +
    +
  • Aplicar estilos condicionales con las reglas-at {{cssxref("@media")}} e {{cssxref("@import")}} de CSS.
    • +
  • Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos HTML.
    • +
  • Testear y monitorizar los estados de los medios usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}.
    • +
+ +

Sintaxis

+ +

 

+ +

Las media queries consisten de un tipo de medio opcional y una o más expresiones de características de medios. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.

+ +

El resultado de la consulta es "verdadero" cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se está mostrando el documento y todas las expresiones en el media query son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.

+ +

Las consultas sobre tipos de medios desconocidos son siempre falsas.

+ +

 

+ +
<!-- CSS media query on a link element -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query within a style sheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>
+
+ +

Media Types

+ +

Los Media Types (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos not o only, el tipo de medio es opcional y será interpretada como all.

+ +
+
all
+
Apto para todos los dispositivos.
+
print
+
Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. 
+
screen
+
Destinado principalmente a las pantallas.
+
speech
+
Destinado a sintetizadores de voz.
+
+ +
+

Tipos de medios depreciados: CSS2.1 y Media Queries 3 definieron varios tipos de medios adicionales (tty, tv, projection, handheld, braille, embossed y aural), pero fueron desaprobados en Media Queries 4 y no deberían ser usados. El tipo aural ha sido reemplazado por speech, que es similar.

+
+ +

Operadores Lógicos

+ +

Se pueden redactar queries utilizando operadores lógicos, incluyendo not, and, y only.

+ +

Además se puede combinar múltiples queries en una lista separada por comas múltiples; si cualquiera de las queries en la lista es verdadera, la hoja de estilo asociada es aplicada. Esto es equivalente a una operación lógica "or".

+ +

and

+ +

El operador and es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como all puede lucir así:

+ +
@media (min-width: 700px) { ... }
+ +

Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador and y colocar la siguiente cadena:

+ +
@media (min-width: 700px) and (orientation: landscape) { ... }
+ +

La siguiente query solo retornara verdadero si la ventana tiene un ancho de 700px o mas y la pantalla esta en formato horizontal. Ahora si usted quiere aplicar esta opción solo si tipo de medio es TV, usted puede utilizar la siguiente cadena:

+ +
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+ +

Esta query solo se aplica si el tipo de medio es TV, la ventana tiene 700px de ancho o mas y la pantalla esta en formato horizontal.

+ +

lista separada por comas

+ +

Las listas separadas por comas se comportan como el operador or cuando es usado en media queries. Cuando utilice una lista separada por comas y alguno de los queries retorna verdadero, el estilo o la hoja de estilos sera aplicada. Cada query en una lista separada por comas es tratado como una query individual y cualquier operador aplicado a un medio no afectara a los demás. Esto significa que cada query en una lista separada por comas puede tener como objetivo diferentes medios, tipos y estados.

+ +

Si usted quiere aplicar una serie de estilos para un equipo con un ancho mínimo de 700px o si el dispositivo esta colocado en horizontal, usted puede escribir lo siguiente:

+ +
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
+ +

Por lo tanto, si esta en una screen con una ventana de 800px de ancho, la declaración del medio retornara verdadero debido a la primera parte de la lista, si aplicamos esto a un dispositivo @media all and (min-width: 700px) podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del handheld en la segunda query. Por otra parte si estuviese en un handheld con un ancho de ventana de 500px, la primera parte de la lista fallaría pero la segunda parte retornara verdadero debido a la declaración de medio.

+ +

not

+ +

El operador not aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un query si es posible pero no a todos los query posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo, el not en el siguiente query es evaluado al final:

+ +
@media not all and (monochrome) { ... }
+
+ +

Esto significa que el query es evaluado de la siguiente forma:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... y no de esta forma:

+ +
@media (not all) and (monochrome) { ... }
+ +

Otro Ejemplo:

+ +
@media not screen and (color), print and (color)
+
+ +

Es evaluado de la siguiente forma:

+ +
@media (not (screen and (color))), print and (color)
+ +

only

+ +

El operador only previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:

+ +
<link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" />
+
+ +

Pseudo-BNF

+ +
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid
+ +

Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.

+ +
Nota: Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.
+ +

Funciones Multimedia

+ +

La mayoría de las funciones multimedia pueden ser precedidas por "min-" o "max-" para expresar "greater or equal to" o "less than or equal to". Esto elimina la necesidad de usar los símbolos "<" y ">" los cuales podrían causar conflictos con HTML y XML. Si usted usa una función multimedia sin especificarle un valor, la expresión retornara verdadero si el valor es diferente de cero.

+ +
Nota: Si una función multimedia no aplica al dispositivo donde el navegador esta corriendo, la expresión que contiene esa función siempre retornara falso. Por Ejemplo, cambiar la relación de aspecto en un dispositivo aural siempre resultara falso.
+ +

color

+ +

Valor: {{cssxref("<color>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: si

+ +

Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.

+ +
Nota: Si el componente de color tiene diferente numero de bits por color, entonces el valor mas pequeño es utilizado. Por Ejemplo, si una pantalla utiliza 5 bits para azul y rojo y 6 bits para el verde, entonces se utilizan 5 bits por componente de color. Si el dispositivo utiliza índices de color se usara el mínimo valor de bits por color en la tabla.
+ +

Ejemplos

+ +

Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:

+ +
@media all and (color) { ... }
+
+ +

Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:

+ +
@media all and (min-color: 4) { ... }
+
+ +

color-index

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Indica el numero de entradas en la tabla de colores para el dispositivo de salida.

+ +

Ejemplos

+ +

Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:

+ +
@media all and (color-index) { ... }
+
+ +

Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:

+ +
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+
+ +

aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

+ +

Ejemplo

+ +

Lo siguiente selecciona una hoja de estilo especial para ser aplicada donde la proporción del tamaño de la pantalla del dispositivo de salida es al menos la misma de ancho que de alto.

+ +
@media screen and (min-aspect-ratio: 1/1) { ... }
+ +

Este selecciona el estilo cuando la proporción de aspecto sea 1:1 o superior. En otras palabras este estilo solo sera aplicado cuando el área de visualización sea cuadrada u horizontal.

+ +

device-aspect-ratio

+ +

Valor: {{cssxref("<ratio>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer termino) a los pixeles verticales (segundo termino).

+ +

Ejemplo

+ +

El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").

+ +
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }
+ +

Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.

+ +

device-height

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

+ +

device-width

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a un documento cuando este sea mostrado en una pantalla de menos de 800px de ancho, usted puede usar esto:

+ +
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />
+
+ +

grid

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: all
+ Acepta prefijos min/max: no

+ +

Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo esta basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor sera 1, de lo contrario sera 0.

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:

+ +
@media handheld and (grid) and (max-width: 15em) { ... }
+
+ +
Nota: La unidad "em" tiene un significado especial para los dispositivos de cuadrícula; ya que la anchura exacta de una "em" no puede ser determinada, se asume un "em" como el ancho de una celda en la cuadrícula y el alto de una celda en la cuadrícula.
+ +

height

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

La función height describe la altura de la superficie a renderizar en el dispositivo de salida (como la altura de una ventana o la bandeja de papel en una impresora).

+ +
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
+ +

monochrome

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor sera 0.

+ +

Ejemplos

+ +

Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:

+ +
@media all and (monochrome) { ... }
+
+ +

Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:

+ +
@media all and (min-monochrome: 8) { ... }
+
+ +

orientation

+ +

Valor: landscape | portrait
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo solo en orientación vertical (portrait):

+ +
@media all and (orientation: portrait) { ... }
+ +

resolution

+ +

Valor: {{cssxref("<resolution>")}}
+ Medio: {{cssxref("Media/Bitmap", "bitmap")}}
+ Acepta prefijos min/max: sí

+ +

Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm).

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:

+ +
@media print and (min-resolution: 300dpi) { ... }
+
+ +

Para reemplazar la vieja sintaxis (min-device-pixel-ratio: 2):

+ +
@media screen and (min-resolution: 2dppx) { ... }
+ +

scan

+ +

Valor: progressive | interlace
+ Medio: {{cssxref("Media/TV")}}
+ Acepta prefijos min/max: no

+ +

Describe el proceso de exploración de televisión de los dispositivos de salida.

+ +

Ejemplo

+ +

Para aplicar una hoja de estilo solo a televisores de exploración progresiva:

+ +
@media tv and (scan: progressive) { ... }
+
+ +

width

+ +

Valor: {{cssxref("<length>")}}
+ Medio: {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}
+ Acepta prefijos min/max: sí

+ +

La función width describe el ancho de la superficie a renderizar en el dispositivo de salida (como el ancho de una ventana de un documento o el ancho de la bandeja de papel en una impresora).

+ +
Nota: Cuando el usuario cambia el tamaño de una ventana Firefox también cambia las hojas de estilo para utilizar la mas adecuada basándose en los valores de width y height del query.
+ +

Ejemplos

+ +

Si usted quiere especificar una hoja de estilo para dispositivos portátiles o pantallas con un ancho de al menos 20em, usted puede usar esta query:

+ +
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+
+ +

Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:

+ +
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+
+ +

Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:

+ +
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+
+
+ +
    +
+ +

Específico de Mozilla

+ +

Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.

+ +

{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.

+ +

{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el usuario ha configurado su dispositivo para usar la apariencia "Grafito" en Mac OS X, esto sera 1. Si el usuario esta usando la apariencia azul por defecto, o si no usa Mac OS X, esto sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(maemo-classic)") }}

+ +

{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}

+ +

Valor: {{cssxref("<number>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: sí

+ +

Da el numero de pixeles del dispositivo por pixeles de CSS.

+ +
+

No use esta función.

+ +

En cambio use la función resolution con la unidad dppx.
+
+ -moz-device-pixel-ratio puede ser usada para compatibilidad con Firefox 16 o anterior; y -webkit-device-pixel-ratio con navegadores basados en WebKit que no soporten dppx.

+ +

Ejemplo:

+ +
@media (-webkit-min-device-pixel-ratio: 2), /* Navegadores basados en WebKit */
+       (min--moz-device-pixel-ratio: 2),    /* Navegadores anteriores a Firefox 16 */
+       (min-resolution: 2dppx),             /* La forma estandar */
+       (min-resolution: 192dpi)             /* compatibilidad con dppx */
+ +

Vea este articulo CSSWG sobre buenas practicas para compatibilidad en relación a resolution y dppx.

+
+ +
Nota: Esta funcion multimedia tambien esta implementada en Webkit como -webkit-device-pixel-ratio. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: min--moz-device-pixel-ratio y max--moz-device-pixel-ratio; y los mismos prefijos implementados por Webkit se llaman asi: -webkit-min-device-pixel-ratio y -webkit-max-device-pixel-ratio.
+ +

{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+ +

Valor: windows-xp | windows-vista | windows-win7 | windows-win8
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:

+ +
    +
  • windows-xp
    • +
  • windows-vista
    • +
  • windows-win7
    • +
  • windows-win8
    • +
  • windows-win10
    • +
+ +

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al final de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al final de la barra de desplazamiento. de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha inversa al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra una fecha apuntando hacia la derecha al principio de la barra de desplazamiento, de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.

+ +

{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si la interfaz de usuario muestra la miniatura de la barra de desplazamiento de forma proporcional (basado en el porcentaje del documento que es visible), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.

+ +

{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.

+ +

Ejemplo

+ +

Usted puede usar esto para renderizar sus botones un poco mas grandes, Por Ejemplo, si el usuario se encuentra en una pantalla táctil, esto hará los botones mas fáciles de usar con los dedos.

+ +

{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-classic)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

El valor sera 1 si el usuario actualmente esta utilizando algunos de los temas por defecto de Windows (Luna, Royale, Zune, or Aero), de lo contrario el valor sera 0.

+ +

Esto corresponde a la pseudoclase: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.

+ +

{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+ +

Valor: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ +

Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:

+ +
    +
  • aero
    • +
  • luna-blue
    • +
  • luna-olive
    • +
  • luna-silver
    • +
  • royale
    • +
  • generic
    • +
  • zune
    • +
+ +

Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el tema utilizado por el sistema operativo en el que se ejecutan.

+ +

Específico de WebKit

+ +

-webkit-transform-3d

+ +

Vakir: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

Ejemplo

+ +
@media (-webkit-transform-3d) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+
+@media (-webkit-transform-3d: 1) {
+  .foo {
+    transform-style: preserve-3d;
+  }
+}
+ +

-webkit-transform-2d

+ +

Valor: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

-webkit-transition

+ +

Value: {{cssxref("<integer>")}}
+ Medio: {{cssxref("Media/Visual")}}
+ Acepta prefijos min/max: no

+ + + +

Si está soportado, el valor es 1, si no, el valor es 0.

+ +

Compatibilidad con Navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
+ {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] grid media type no está soportado

+ +

[2] Soporta valores {{cssxref("<integer>")}}.

+ +

[3] Soporta valores {{cssxref("<number>")}}, según la especificación.

+ +

[4] tv media no está soportado

+ +

[5] Ver {{WebKitBug(22494)}}.

+ +

[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar layout.css.prefixes.webkit por defecto a false (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

+ +

[7] Implementado como alias para min--moz-device-pixel-ratio y max--moz-device-pixel-ratio por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar layout.css.prefixes.webkit y layout.css.prefixes.device-pixel-ratio-webkit por defecto a false. Desde Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit por defecto es true.

+ +

Vea también

+ + diff --git a/files/es/web/css/mix-blend-mode/index.html b/files/es/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..fc213a4ceb --- /dev/null +++ b/files/es/web/css/mix-blend-mode/index.html @@ -0,0 +1,611 @@ +--- +title: mix-blend-mode +slug: Web/CSS/Referencia_CSS/mix-blend-mode +tags: + - CSS +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

Syntax

+ +
/* Valores clave */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Valores globales */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

Valores

+ +
+
{{cssxref("<blend-mode>")}}
+
El modo de mezcla que debería ser aplicado.
+
+ +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

Ejemplo vivo

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
+
+ +

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
+ +

{{cssinfo}}

+ +

Compatibilidad con navegadores

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

Véase también

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/es/web/css/normal/index.html b/files/es/web/css/normal/index.html deleted file mode 100644 index 332e284385..0000000000 --- a/files/es/web/css/normal/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: normal -slug: Web/CSS/normal -translation_of: Web/CSS/font-variant -translation_of_original: Web/CSS/normal ---- -

Sumario

-

El valor normal en una propiedad CSS, es normalmente el valor medio de entre los posibles valores que puede tomar. Es el valor por defecto, es decir, el que tiene la propiedad si no establecemos uno distinto.

-

Ejemplos

-

En la propiedad font-style: normal establece que el tipo de fuente no es italic ni oblique.

-

El la propiedad font-size: normalse establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.

diff --git a/files/es/web/css/percentage/index.html b/files/es/web/css/percentage/index.html new file mode 100644 index 0000000000..c6629803fe --- /dev/null +++ b/files/es/web/css/percentage/index.html @@ -0,0 +1,126 @@ +--- +title: +slug: Web/CSS/porcentaje +translation_of: Web/CSS/percentage +--- +

{{CSSRef}}

+ +

Sumario

+ +

Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.

+ +

Varias propriedades de longitud usan porcentajes, tales como width, margin y padding. Los porcentajes tambien se pueden ver en font-size, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

+ +
Nota: Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <length>, sera accesible en la propiedad heredada, no el valor porcentual.
+ +

Interpolación

+ +

Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

+ +

Examples

+ +
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
+</div>
+
+ +

El codigo de arriba se va a renderizar así:

+ +
+
Width: 50%, Left margin: 20%
+ +
Width: 30%, Left margin: 60%
+
+ +

 

+ +
<div style="font-size:18px;">
+  Full size text (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+
+ +

El codigo de arriba de renderizara así:

+ +
Full size text (18px) 50% 200%
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacionEstatusComentarios
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}No hay cambios significantes desde CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}No hay cambios desde CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico1.01.0 (1.0)<=5.0yes1.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basicosisisisisi
+
diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/porcentaje/index.html deleted file mode 100644 index c6629803fe..0000000000 --- a/files/es/web/css/porcentaje/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: -slug: Web/CSS/porcentaje -translation_of: Web/CSS/percentage ---- -

{{CSSRef}}

- -

Sumario

- -

Los tipos de dato <porcentaje> de CSS representan un valor en forma de porcentaje. Muchas propiedades de CSS pueden tomar valores porcentuales, siempre para definir longitudes con respecto al tamaño de los elementos padre. Los porcentajes estan formados por un <numero> seguido por el signo de porcentaje %. No hay un espacio entre el '%' y el numero.

- -

Varias propriedades de longitud usan porcentajes, tales como width, margin y padding. Los porcentajes tambien se pueden ver en font-size, donde el tamaño del texto esta directamente relacionado al tamaño de su elemento padre.

- -
Nota: Solo los valores calculados son heredados. Entonces, incluso si un valor porcentual es usado en en la propiedad padre, un valor real, como una anchura en pixeles para un valor <length>, sera accesible en la propiedad heredada, no el valor porcentual.
- -

Interpolación

- -

Los valores del tipo de dato <porcentaje> de CSS pueden ser interpolados en orden de permitir animaciones. En ese caso ellos son interpolados como numeros reales de punto flotante. La velocidad de la interpolación se determina por medio de la funcion de temporizacion asociada con la animacion.

- -

Examples

- -
<div style="background-color:#0000FF;">
-  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Width: 50%, Left margin: 20%</div>
-  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Width: 30%, Left margin: 60%</div>
-</div>
-
- -

El codigo de arriba se va a renderizar así:

- -
-
Width: 50%, Left margin: 20%
- -
Width: 30%, Left margin: 60%
-
- -

 

- -
<div style="font-size:18px;">
-  Full size text (18px)
-  <span style="font-size:50%;">50%</span>
-  <span style="font-size:200%;">200%</span>
-</div>
-
- -

El codigo de arriba de renderizara así:

- -
Full size text (18px) 50% 200%
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstatusComentarios
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}No hay cambios significantes desde CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}No hay cambios desde CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico1.01.0 (1.0)<=5.0yes1.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte basicosisisisisi
-
diff --git a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html b/files/es/web/css/preguntas_frecuentes_sobre_css/index.html deleted file mode 100644 index 36c2fa1317..0000000000 --- a/files/es/web/css/preguntas_frecuentes_sobre_css/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Preguntas frecuentes sobre CSS -slug: Web/CSS/Preguntas_frecuentes_sobre_CSS -tags: - - CSS - - Proyecto MDC -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

Mi CSS es válida, pero no se representa correctamente

-

Los navegadores utilizan la declaración DOCTYPE para elegir entre mostrar el documento usando un modo que sea más compatible con los estándares de la Web o mostrarlo con los fallos de los navegadores antiguos. El uso de una declaración DOCTYPE correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.

-

Los navegadores modernos tienen fundamentalmente dos modos de renderizado:

-
  • Quirks mode (Modo no estándar): también se llama el modo de compatibilidad con versiones anteriores y permite que las páginas web heredadas se representen como sus autores habían previsto, siguiendo las normas de representación o renderizado no estándares que usan los navegadores antiguos. Los documentos con una declaración DOCTYPE incompleta, incorrecta o faltante o con una declaración DOCTYPE conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.
  • Standards Mode (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C. Se supone que las nuevas páginas HTML se diseñarán para navegadores compatibles con los estándares, y como resultado, las páginas con una declaración DOCTYPE moderna será renderizada con el Modo estándar.
    • -
-

Los navegadores basados en Gecko tienen un tercer Modo casi estándar que tiene solo una peculiaridades menores.

-

Esta es una lista de las declaraciones DOCTYPE más utilizadas que activarán el Modo estándar o el Modo casi estándar:

-
<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-

Diferencia entre id y class

-

Los elementos HTML pueden tener un atributo id y / o un atributo class. El atributo id asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre. El atributo class asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo class. CSS te permite aplicar estilos a un atributo id y / o class concreto.

-

Utiliza un estilo específico de id cuando desees restringir las reglas de estilo a un bloque o elemento concreto. Este estilo lo usará un solo elemento con ese id concreto.

-

Usa un estilo específico de class cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.

-

Consulta Selectores CSS

-

Restaurar el valor de la propiedad predeterminado

-

Debido a que CSS no proporciona una palabra clave "predeterminada", la única manera de restaurar el valor predeterminado de una propiedad es volver a declarar explícitamente dicha propiedad.

-

Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como p ) que tal vez desees reemplazar con reglas más específicas (como las que usan id o selectores de clase), porque el valor predeterminado original no puede restablecerse automáticamente.

-

Debido a la naturaleza en cascada de CSS, es una buena práctica definir reglas de estilo de una manera lo más concreta posible para evitar aplicar estilo a elementos a los que no se tenía previsto aplicar.

-

Estilos derivados

-

CSS no permite que se defina un estilo según los términos de otro. (Consulta la nota de Eric Meyer acerca de la postura del Grupo de trabajo). Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.

-

Asignación de múltiples clases

-

A los elementos HTML se les pueden asignar varias clases listándolas  en el atributo class, con un espacio en blanco para separarlas.

-
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... contenido de las noticias de hoy ...
-</ div>
-
-

Si la misma propiedad se declara en ambas reglas, el conflicto se resuelve primero a través de la especificidad, a continuación, según el orden de las declaraciones CSS. El orden de las clases en el atributo class no es relevante.

-

Normas de estilo que no funcionan

-

Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones. Puedes utilizar las Reglas de estilo de CSS del Inspector DOM para depurar los problemas de este tipo, pero los casos más frecuentes en los que se ignoran las reglas de estilo se enumeran a continuación.

-
Jerarquía de los elementos HTML
-

La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos. Es importante recordar que una regla que se aplica a un descendiente reemplaza el estilo del padre, a pesar de la especificidad o la prioridad de las reglas CSS.

-
.news { color: black; }
-. corpName {font-weight: bold; color: red;}
-
-<!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita -->
-<div class="news">
-   (Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...
-</ div>
-
-

En el caso de jerarquías HTML complejas, si parece que se ignora una regla, comprueba si el elemento está dentro de otro elemento con un estilo diferente.

-
Regla de estilo explícitamente redefinida
-

En las hojas de estilo CSS el orden es importante. Si defines una regla y luego vuelves a definirla, se usará la última definición.

-
#stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  otras reglas             */
-/*  otras reglas             */
-/*  otras reglas             */
-.stockSymbol { font-weight: normal; }
-
-<!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</ div>
-
-

Para evitar este tipo de errores, intenta definir las reglas solo una vez para un selector determinado y agrupa todas las reglas que pertenecen a ese selector.

-
Uso de una propiedad abreviada
-

Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta. Usar la abreviatura con sólo algunos atributos es posible y correcto, pero hay que recordar que los atributos no declarados se restablecen a los valores predeterminados automáticamente. Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.

-
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</ div>
-
-

En el ejemplo anterior el problema se produjo en las reglas que pertencían a distintos elementos, pero puede ocurrir también para el mismo elemento, porque el orden de las reglas es importante.

-
#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana; / * font-weight es ahora normal * /
-}
-
-
Uso del selector *
-

El selector * se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.

-
body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</ div>
-
-

En este ejemplo, el selector body * aplica la regla a todos los elementos dentro del cuerpo (body), en cualquier nivel de jerarquía, incluyendo redtext. Así font-weight: bold; aplicada a la clase boldtext se reemplaza por font-weight: normal; aplicada a redtext.

-
Especificidad en CSS
-

Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo. El estilo en línea (en los atributos HTML style) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.

-
div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-<div id="orange" class="green" style="color: red;">This is red</div>
-
-

Las reglas son más complicadas cuando el selector tiene varias partes. Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el capítulo 6.4.3 de la Especificación CSS 2.1

-

¿Qué hacen las propiedades -moz-*?

-

Por favor, consulta la página Extensiones CSS de Mozilla.

-

 

-

{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}

diff --git a/files/es/web/css/primeros_pasos/index.html b/files/es/web/css/primeros_pasos/index.html deleted file mode 100644 index c6eb218230..0000000000 --- a/files/es/web/css/primeros_pasos/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Primeros pasos -slug: Web/CSS/Primeros_pasos ---- -

 

-

Introducción

-

Este tutorial es una introducción a las hojas de estilo en cascada (CSS).

-

Te guiará a través de las funcionalidades básicas de CSS con ejemplos prácticos que puedes poner a prueba en tu propio equipo. Tiene dos partes.

-
  • La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.
    • -
-
  • La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.
    • -
-

El tutorial está basado en la especificación 2.1 de CSS 2.1.

-

¿Quién debe usar este tutorial?

-

Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.

-

Si eres un principiante en CSS, usa la primera parte del tutorial para entender CSS y aprender cómo usarlo. Después usa la segunda parte para entender el alcance de CSS en Mozilla.

-

Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.

-

Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.

-

¿Qué necesitas antes de empezar?

-

Para obtener lo mejor de este tutorial, necesitas un editor de archivos de texto y un navegador basado en Mozilla (Firefox o SeaMonkey). Deberías tener conocimientos básicos de cómo usarlos.

-

Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.

-

Unas pequeñas partes del tutorial requieren otros programas de Mozilla. Esas partes son opcionales. Si no quieres descargar otras aplicaciones de Mozilla, puedes saltearte esas partes. El otro software de Mozilla que se referencia en este tutorial incluye:

- -

Nota:  CSS brinda formas de trabajar con el color, así que partes de este tutorial dependen del color. Puedes usar estas partes fácilmente si tienes un monitor a color y una visión de colores normal.

-

Cómo usar este tutorial

-

Para usar este tutorial, lee las páginas detenidamente y en orden. Si pierdes una página, podrá resultarte difícil entender las páginas posteriores.

-

En cada página, usa la sección de Información para entender cómo funciona CSS. Usa la sección Acción para probar el uso de CSS en tu propio equipo.

-

Para probar que hayas entendido, haz el desafío al final de cada página. Las soluciones a los desafíos están enlazados debajo de ellos, así no necesitas mirarlos si no quieres hacerlo.

-

Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título Más detalles. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.

-

Primera parte del tutorial

-

Una guía básica paso a paso de CSS.

-
  1. What is CSS
  2. Why use CSS
  3. How CSS works
  4. Cascading and inheritance
  5. Selectors
  6. Readable CSS
  7. Text styles
  8. Color
  9. Content
  10. Lists
  11. Boxes
  12. Layout
  13. Tables
  14. Media
    15. -
-

Segunda parte del tutorial

-

Ejemplos que muestran el alcance del CSS en Mozilla.

-
  1. JavaScript
  2. XBL bindings
  3. XUL user interfaces
  4. SVG graphics
  5. XML data
    6. -
-

{{ languages( { "en": "en/CSS/Getting_Started", "de": "de/CSS/Einführung", "es": "es/CSS/Primeros_pasos", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}

diff --git a/files/es/web/css/pseudo-elements/index.html b/files/es/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..c65b904163 --- /dev/null +++ b/files/es/web/css/pseudo-elements/index.html @@ -0,0 +1,86 @@ +--- +title: Pseudoelementos +slug: Web/CSS/Pseudoelementos +tags: + - CSS + - Pseudo-element + - Pseudo-elementos + - Selectores +translation_of: Web/CSS/Pseudo-elements +--- +
{{ CSSRef() }}
+ +

Resumen

+ +

Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.

+ +

Sintaxis

+ +
selector::pseudo-elemento { propiedad: valor; }
+ +

Lista de pseudoelementos

+ +
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
+ +

Notas

+ +

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

+ +
Nota: ::selection siempre se escribe con dos puntos dobles (::).
+ +

Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavegadorVersión inferiorSoporta
Internet Explorer8.0:pseudoelemento
9.0:pseudoelemento y ::pseudoelemento
Firefox (Gecko)1.0 (1.0):pseudoelemento
1.0 (1.5):pseudoelemento y ::pseudoelemento
Opera4.0:pseudoelemento
7.0:pseudoelemento y ::pseudoelemento
Safari (WebKit)1.0 (85):pseudoelemento y ::pseudoelemento
+ +

 

diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudoelementos/index.html deleted file mode 100644 index c65b904163..0000000000 --- a/files/es/web/css/pseudoelementos/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Pseudoelementos -slug: Web/CSS/Pseudoelementos -tags: - - CSS - - Pseudo-element - - Pseudo-elementos - - Selectores -translation_of: Web/CSS/Pseudo-elements ---- -
{{ CSSRef() }}
- -

Resumen

- -

Al igual que las {{ Cssxref("Pseudo-classes") }}, los pseudo-elementos se añaden a los selectores, pero en cambio, no describen un estado especial sino que, permiten añadir estilos a una parte concreta del documento. Por ejemplo, el pseudoelemento {{ Cssxref("::first-line") }} selecciona solo la primera línea del elemento especificado por el selector.

- -

Sintaxis

- -
selector::pseudo-elemento { propiedad: valor; }
- -

Lista de pseudoelementos

- -
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::backdrop") }}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
- -

Notas

- -

De vez en cuando se utilizan dos puntos dobles (::) en vez de solo uno (:). Esto forma parte de CSS3 y de un intento para distinguir pseudo-elementos de pseudo-clases.

- -
Nota: ::selection siempre se escribe con dos puntos dobles (::).
- -

Solo se puede usar un pseudo-elemento por selector. Debe aparecer después del selector simple.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadorVersión inferiorSoporta
Internet Explorer8.0:pseudoelemento
9.0:pseudoelemento y ::pseudoelemento
Firefox (Gecko)1.0 (1.0):pseudoelemento
1.0 (1.5):pseudoelemento y ::pseudoelemento
Opera4.0:pseudoelemento
7.0:pseudoelemento y ::pseudoelemento
Safari (WebKit)1.0 (85):pseudoelemento y ::pseudoelemento
- -

 

diff --git a/files/es/web/css/reference/index.html b/files/es/web/css/reference/index.html new file mode 100644 index 0000000000..63c52a6cdb --- /dev/null +++ b/files/es/web/css/reference/index.html @@ -0,0 +1,246 @@ +--- +title: Referencia CSS +slug: Web/CSS/Referencia_CSS +tags: + - CSS + - Referencia CSS + - para_revisar +translation_of: Web/CSS/Reference +--- +
+

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

+ +

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

+ +

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

+Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
+ +

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

+ +

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

+ +

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

+ +

Sintaxis de regla básica

+ +

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

+ +

Sintaxis de regla de estilo

+ +
selectorlist {
+   property: value; 
+   [more property:value; pairs] 
+}
+
+...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
+
+Ver selector, pseudo-elemento, pseudo-clase más abajo.
+
+
+ +

Ejemplos de reglas de estilo

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

+ +

Sintaxis de las reglas-at (@rules)

+ +

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

+ +

Índice de palabras clave

+ +
+

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

+
+ +
{{CSS_Ref}}
+ +

Selectores

+ +

Selectores básicos

+ + + +

Combinadores

+ + + +

Pseudo-clases

+ +
+
    +
  • {{ Cssxref(":active") }}
    • +
  • {{ Cssxref(':any')}}
    • +
  • {{ Cssxref(':any-link')}}
    • +
  • {{ Cssxref(":checked") }}
    • +
  • {{ Cssxref(":default") }}
    • +
  • {{ Cssxref(":defined") }}
    • +
  • {{ Cssxref(":dir", ":dir()")}}
    • +
  • {{ Cssxref(":disabled") }}
    • +
  • {{ Cssxref(":empty") }}
    • +
  • {{ Cssxref(":enabled") }}
    • +
  • {{ Cssxref(":first") }}
    • +
  • {{ Cssxref(":first-child") }}
    • +
  • {{ Cssxref(":first-of-type") }}
    • +
  • {{ Cssxref(":fullscreen") }}
    • +
  • {{ Cssxref(":focus") }}
    • +
  • {{ Cssxref(":focus-visible") }}
    • +
  • {{ Cssxref(":host") }}
    • +
  • {{ Cssxref(":host()") }}
    • +
  • {{ Cssxref(":host-context()") }}
    • +
  • {{ Cssxref(":hover") }}
    • +
  • {{ Cssxref(":indeterminate") }}
    • +
  • {{ Cssxref(":in-range") }}
    • +
  • {{ Cssxref(":invalid") }}
    • +
  • {{ Cssxref(":lang", ":lang()") }}
    • +
  • {{ Cssxref(":last-child") }}
    • +
  • {{ Cssxref(":last-of-type") }}
    • +
  • {{ Cssxref(":left") }}
    • +
  • {{ Cssxref(":link") }}
    • +
  • {{ Cssxref(":not", ":not()") }}
    • +
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • +
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • +
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • +
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • +
  • {{ Cssxref(":only-child") }}
    • +
  • {{ Cssxref(":only-of-type") }}
    • +
  • {{ Cssxref(":optional") }}
    • +
  • {{ Cssxref(":out-of-range") }}
    • +
  • {{ Cssxref(":read-only") }}
    • +
  • {{ Cssxref(":read-write") }}
    • +
  • {{ Cssxref(":required") }}
    • +
  • {{ Cssxref(":right") }}
    • +
  • {{ Cssxref(":root") }}
    • +
  • {{ Cssxref(":scope") }}
    • +
  • {{ Cssxref(":target") }}
    • +
  • {{ Cssxref(":valid") }}
    • +
  • {{ Cssxref(":visited") }}
    • +
+
+ +

Pseudo-elementos

+ +
+
    +
  • {{ Cssxref("::after") }}
    • +
  • {{ Cssxref("::backdrop") }}
    • +
  • {{ Cssxref("::before") }}
    • +
  • {{ Cssxref("::cue") }}
    • +
  • {{ Cssxref("::first-letter") }}
    • +
  • {{ Cssxref("::first-line") }}
    • +
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • +
  • {{ Cssxref("::selection") }}
    • +
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • +
+
+ +
+

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

+
+ +

Conceptos

+ +

Sintaxis y semántica

+ + + +

Valores

+ + + +

Diseño

+ + + +

DOM-CSS / CSSOM

+ +

Tipos de objetos principales

+ + + +

Métodos importantes

+ +
    +
  • {{domxref("CSSStyleSheet.insertRule")}}
    • +
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • +
+ +

Tutoriales CSS3

+ +

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

+ + + +

Ver también

+ + diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/referencia_css/index.html deleted file mode 100644 index 63c52a6cdb..0000000000 --- a/files/es/web/css/referencia_css/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: Referencia CSS -slug: Web/CSS/Referencia_CSS -tags: - - CSS - - Referencia CSS - - para_revisar -translation_of: Web/CSS/Reference ---- -
-

Estamos trabajando sobre este documento. Si deseas ayudarnos a redactar o mejorar alguna de las páginas listadas a continuación, te animamos a que lo hagas.

- -

Si vas a agregar o modificar una página, por favor, ajústate a la plantilla Referencia CSS:Plantilla de propiedades y modifica según sea necesario.

- -

La plantilla básica para las páginas de ejemplo se puede encontrar aquí: samples/cssref/TEMPLATE.html.

-Siéntete libre para discutir sobre cualquier pregunta o sugerencia en la página Talk:CSS Reference.
- -

Esta Referencia CSS muestra la sintáxis básica de una regla CSS; lista todas las propiedades estándares CSS, pseudo-classes y pseudo-elementos, reglas-at, unidades, y selectores, todos juntos en orden alfabético, así como los selectores por tipo; y le permitirá acceso rápido a la información detallada de cada uno de ellos. No solo lista las propiedades de CSS 1 y CSS 2.1, sino que también es una referencia de CSS3 que enlaza cualquier propiedad y concepto de CSS3 estandarizado, o ya establecido. También incluye una breve referencia DOM-CSS / CSSOM.

- -

Tenga en cuenta que las definiciones de reglas CSS son completamente basadas en texto (ASCII), mientras que DOM-CSS / CSSOM, el sistema de gestión de reglas, está basado en objetos.

- -

Vea también las Extensiones CSS de Mozilla para propiedades específicas de Gecko, que usan el prefijo -moz; y las Extensiones CSS de WebKit para propiedades específicas de WebKit. Vea Vendor-prefixed CSS Property Overview de Peter Beverloo como referencia a todas las propiedades con prefijo.

- -

Sintaxis de regla básica

- -

Se advierte que cualquier error de sintaxis en una definición de regla invalidará la regla por completo.

- -

Sintaxis de regla de estilo

- -
selectorlist {
-   property: value; 
-   [more property:value; pairs] 
-}
-
-...where selectorlist is: selector[:pseudo-class] [::pseudo-element] [, more selectorlists]
-
-Ver selector, pseudo-elemento, pseudo-clase más abajo.
-
-
- -

Ejemplos de reglas de estilo

- -
strong {
-  color: red;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-
- -

Para una introducción de nivel principiante a la sintaxis de los selectores de CSS, consulte este tutorial. Tenga en cuenta que cualquier error de sintaxis CSS en una definición de regla hace que la regla completa se invalide. El navegador ignora las reglas no válidas. Tenga en cuenta que las definiciones de reglas CSS son totalmente (ASCII) basadas en texto, mientras que DOM-CSS / CSSOM (el sistema de gestión de reglas) está basado en objetos.

- -

Sintaxis de las reglas-at (@rules)

- -

Debido a que éstas tienen formatos de estructura variados, revise la sección reglas-At para ver la sintaxis de la regla deseada.

- -

Índice de palabras clave

- -
-

Nota: Los nombres de propiedad en este índice no incluyen los nombres de JavaScript donde difieren de los nombres estándar de CSS.

-
- -
{{CSS_Ref}}
- -

Selectores

- -

Selectores básicos

- - - -

Combinadores

- - - -

Pseudo-clases

- -
-
    -
  • {{ Cssxref(":active") }}
    • -
  • {{ Cssxref(':any')}}
    • -
  • {{ Cssxref(':any-link')}}
    • -
  • {{ Cssxref(":checked") }}
    • -
  • {{ Cssxref(":default") }}
    • -
  • {{ Cssxref(":defined") }}
    • -
  • {{ Cssxref(":dir", ":dir()")}}
    • -
  • {{ Cssxref(":disabled") }}
    • -
  • {{ Cssxref(":empty") }}
    • -
  • {{ Cssxref(":enabled") }}
    • -
  • {{ Cssxref(":first") }}
    • -
  • {{ Cssxref(":first-child") }}
    • -
  • {{ Cssxref(":first-of-type") }}
    • -
  • {{ Cssxref(":fullscreen") }}
    • -
  • {{ Cssxref(":focus") }}
    • -
  • {{ Cssxref(":focus-visible") }}
    • -
  • {{ Cssxref(":host") }}
    • -
  • {{ Cssxref(":host()") }}
    • -
  • {{ Cssxref(":host-context()") }}
    • -
  • {{ Cssxref(":hover") }}
    • -
  • {{ Cssxref(":indeterminate") }}
    • -
  • {{ Cssxref(":in-range") }}
    • -
  • {{ Cssxref(":invalid") }}
    • -
  • {{ Cssxref(":lang", ":lang()") }}
    • -
  • {{ Cssxref(":last-child") }}
    • -
  • {{ Cssxref(":last-of-type") }}
    • -
  • {{ Cssxref(":left") }}
    • -
  • {{ Cssxref(":link") }}
    • -
  • {{ Cssxref(":not", ":not()") }}
    • -
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • -
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • -
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • -
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • -
  • {{ Cssxref(":only-child") }}
    • -
  • {{ Cssxref(":only-of-type") }}
    • -
  • {{ Cssxref(":optional") }}
    • -
  • {{ Cssxref(":out-of-range") }}
    • -
  • {{ Cssxref(":read-only") }}
    • -
  • {{ Cssxref(":read-write") }}
    • -
  • {{ Cssxref(":required") }}
    • -
  • {{ Cssxref(":right") }}
    • -
  • {{ Cssxref(":root") }}
    • -
  • {{ Cssxref(":scope") }}
    • -
  • {{ Cssxref(":target") }}
    • -
  • {{ Cssxref(":valid") }}
    • -
  • {{ Cssxref(":visited") }}
    • -
-
- -

Pseudo-elementos

- -
-
    -
  • {{ Cssxref("::after") }}
    • -
  • {{ Cssxref("::backdrop") }}
    • -
  • {{ Cssxref("::before") }}
    • -
  • {{ Cssxref("::cue") }}
    • -
  • {{ Cssxref("::first-letter") }}
    • -
  • {{ Cssxref("::first-line") }}
    • -
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • -
  • {{ Cssxref("::selection") }}
    • -
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • -
-
- -
-

Ver también: Una lista completa de selectores en la especificación de Nivel 3 de Selectores.

-
- -

Conceptos

- -

Sintaxis y semántica

- - - -

Valores

- - - -

Diseño

- - - -

DOM-CSS / CSSOM

- -

Tipos de objetos principales

- - - -

Métodos importantes

- -
    -
  • {{domxref("CSSStyleSheet.insertRule")}}
    • -
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • -
- -

Tutoriales CSS3

- -

Estas páginas describen las nuevas tecnologías que aparecieron en CSS3, o las de CSS2.1 que no tienen mucho soporte:

- - - -

Ver también

- - diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/referencia_css/mix-blend-mode/index.html deleted file mode 100644 index fc213a4ceb..0000000000 --- a/files/es/web/css/referencia_css/mix-blend-mode/index.html +++ /dev/null @@ -1,611 +0,0 @@ ---- -title: mix-blend-mode -slug: Web/CSS/Referencia_CSS/mix-blend-mode -tags: - - CSS -translation_of: Web/CSS/mix-blend-mode ---- -
{{CSSRef}}
- -

La propiedad CSS mix-blend-mode describe cómo el contenido de un elemento debe mezclarse con el contenido del elemento que está tras él y con el fondo del elemento.

- -
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
- - - -

Syntax

- -
/* Valores clave */
-mix-blend-mode: normal;
-mix-blend-mode: multiply;
-mix-blend-mode: screen;
-mix-blend-mode: overlay;
-mix-blend-mode: darken;
-mix-blend-mode: lighten;
-mix-blend-mode: color-dodge;
-mix-blend-mode: color-burn;
-mix-blend-mode: hard-light;
-mix-blend-mode: soft-light;
-mix-blend-mode: difference;
-mix-blend-mode: exclusion;
-mix-blend-mode: hue;
-mix-blend-mode: saturation;
-mix-blend-mode: color;
-mix-blend-mode: luminosity;
-
-/* Valores globales */
-mix-blend-mode: initial;
-mix-blend-mode: inherit;
-mix-blend-mode: unset;
-
- -

Valores

- -
-
{{cssxref("<blend-mode>")}}
-
El modo de mezcla que debería ser aplicado.
-
- -

Sintaxis formal

- -
{{csssyntax}}
- -

Ejemplos

- - - -
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
- -

Ejemplo vivo

- -
<svg>
-  <g class="isolate">
-    <circle cx="40" cy="40" r="40" fill="red"/>
-    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
-    <circle cx="60" cy="80" r="40" fill="blue"/>
-  </g>
-</svg>
- -
circle { mix-blend-mode: screen; }
-.isolate { isolation: isolate; } /* sin aislación, el color de fondo será tenido en cuenta */
-
- -

{{EmbedLiveSample("Ejemplo_vivo", "100%", "180")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Definición inicial
- -

{{cssinfo}}

- -

Compatibilidad con navegadores

- - - -

{{Compat("css.properties.mix-blend-mode")}}

- -

Véase también

- -
    -
  • {{cssxref("<blend-mode>")}}
    • -
  • {{cssxref("background-blend-mode")}}
    • -
diff --git a/files/es/web/css/replaced_element/index.html b/files/es/web/css/replaced_element/index.html new file mode 100644 index 0000000000..a8bedc65a2 --- /dev/null +++ b/files/es/web/css/replaced_element/index.html @@ -0,0 +1,19 @@ +--- +title: Elemento de reemplazo +slug: Web/CSS/Elemento_reemplazo +tags: + - CSS + - CSS Referência + - Intermediate +translation_of: Web/CSS/Replaced_element +--- +
+ {{CSSRef()}}
+

Summary

+

Dentro de CSS tenemos los elementos de reemplazo, cuya representacion esta fuera del ambito de propio CSS. Son un tipo de objeto externo, por tanto su representacion es independiente de CSS. Algunos objetos que normalmente funcionan como objetos de reemplazo son {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} o elementos de formulario como {{HTMLElement("textarea")}}, {{HTMLElement("input")}}. Algunos elementos como {{HTMLElement("audio")}} or {{HTMLElement("canvas")}} ejercen como elementos de reemplazo solo en casos especificos. Los objetos insertados a traves de las propiedades CSS {{cssxref("content")}} son objetos de reemplazo anonimos..

+

CSS gestiona elementos de reemplazo en casos concretos, por ejemplo al calcular los margenes y algunos auto valores.

+

Recuerda que algunos elementos de reemplazo, no todos, tienen dimensiones intrinsecas o linea de base establecida, las cuales son utilizadas por propiedades de CSS como {{cssxref("vertical-align")}}.

+

Ver tambien:

+
    +
  • {{CSS_key_concepts()}}
    • +
diff --git "a/files/es/web/css/resoluci\303\263n/index.html" "b/files/es/web/css/resoluci\303\263n/index.html" deleted file mode 100644 index b480413bb1..0000000000 --- "a/files/es/web/css/resoluci\303\263n/index.html" +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: -slug: Web/CSS/resolución -tags: - - CSS - - CSS tipo de datos - - Diseño - - Estilos - - Referencia -translation_of: Web/CSS/resolution ---- -
{{CSSRef}}
- -

Resumen

- -

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

- -

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

- -

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

- -

Unidades

- -
-
dpi
-
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
-
dpcm
-
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
-
dppx
-
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.
-
- -

Ejemplos

- -

Éstos son algunos de los usos correctos de valores <resolution>:

- -
96dpi                                              Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
-@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
-
- -

Here are some incorrect uses:

- -
72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
-ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
-0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
-
- -

Especificación

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Factorización del tipo en una especificación más genérica. Ningún cambio
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}Añadida la unidad dppx
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
- -

Compatibilidad de navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico293.5 (1.9.1)[1]99.5{{CompatNo}}[2]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}[2]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}[2]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
-
- -

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).

- -

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

- -

Ver también

- - diff --git a/files/es/web/css/resolution/index.html b/files/es/web/css/resolution/index.html new file mode 100644 index 0000000000..b480413bb1 --- /dev/null +++ b/files/es/web/css/resolution/index.html @@ -0,0 +1,151 @@ +--- +title: +slug: Web/CSS/resolución +tags: + - CSS + - CSS tipo de datos + - Diseño + - Estilos + - Referencia +translation_of: Web/CSS/resolution +--- +
{{CSSRef}}
+ +

Resumen

+ +

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un {{cssxref("<number>")}} inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

+ +

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

+ +

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un {{cssxref("<length>")}}: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

+ +

Unidades

+ +
+
dpi
+
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
+
dpcm
+
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
+
dppx
+
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por {{cssxref("image-resolution")}}.
+
+ +

Ejemplos

+ +

Éstos son algunos de los usos correctos de valores <resolution>:

+ +
96dpi                                              Uso correcto: a {{cssxref("<number>")}} (here an {{cssxref("<integer>")}}) followed by the unit.
+@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.
+
+ +

Here are some incorrect uses:

+ +
72 dpi                                             Incorecto: no hay espacios entre {{ cssxref("<number>") }} y la unidad.
+ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
+0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores {{ cssxref("<length>") }}.
+
+ +

Especificación

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Factorización del tipo en una especificación más genérica. Ningún cambio
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}Añadida la unidad dppx
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico293.5 (1.9.1)[1]99.5{{CompatNo}}[2]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}[2]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}[2]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}
+
+ +

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran {{cssxref("<integer>")}} seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión ({{cssxref("<number>")}} CSS válido seguido inmediatamente por la unidad).

+ +

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

+ +

Ver también

+ + diff --git a/files/es/web/css/rtl/index.html b/files/es/web/css/rtl/index.html deleted file mode 100644 index 1fd8c9f45d..0000000000 --- a/files/es/web/css/rtl/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: rtl -slug: Web/CSS/rtl ---- -

Sumario

-

El valor rtl es el valor que debe usarse para la propiedad CSS:direction si queremos escribir en lenguas táles como el Hebreo o el Árabe. El nombre viene de las iniciales de las palabras en inglés: Right To Left, que indican que el texto y otros elementos se han de representar de derecha a izquierda. -


-

-

Ejemplos

-
div {
-   position: absolute;
-   right: 20px;
-   height: 200px;
-   border: 1px solid #000;
-   direction: rtl;
-}
-
-


-

-

Ver también

-

{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} -

diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/selectores_atributo/index.html deleted file mode 100644 index a7b59d03c6..0000000000 --- a/files/es/web/css/selectores_atributo/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Selectores de atributo -slug: Web/CSS/Selectores_atributo -tags: - - Atributos - - CSS - - Selectores - - Selectores de Atributo -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

El selector de atributos CSS coincide con los elementos en función de la presencia o el valor de un atributo determinado.

- -
/* Elementos <a> con un atributo title */
-a[title] {
-  color: purple;
-}
-
-/* Elementos <a> con un href que coincida con "https://example.org" */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* Elementos <a> con un href que contenga "example" */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* Elementos <a> con un href que comience con "#" */
-a[href^="#"] {
-  color: #001978;
-}
-
-/* Elementos <a> con un href que termine en ".org" */
-a[href$=".org"] {
-  font-style: italic;
-}
-
-/* Elementos <a> cuyo atributo class contenga la palabra "logo" */
-a[class~="logo"] {
-  padding: 2px;
-}
-
- -
-
[attr]
-
Selecciona los elementos que tienen el atributo attr.
-
[attr=value]
-
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.
-
[attr~=value]
-
-

Selecciona los elementos cuyo atributo attr tenga por valor una lista de palabras separadas por espacios, una de las cuales sea value.

-
-
[attr|=value]
-
Selecciona los elementos cuyo atributo attr tenga exactamente el valor value o empiece por value seguido de un guión - (U+002D). Se puede usar para coincidencias de subcódigos en otros idiomas.
-
[attr^=value]
-
Selecciona los elementos cuyo atributo attr tenga un valor prefijado  por value.
-
[attr$=value]
-
Selecciona los elementos cuyo atributo attr cuyo valor tiene el sufijo (seguido) de value.
-
[attr*=value]
-
Selecciona los elementos cuyo atributo attr tenga un valor que contenga value.
-
[attr operator value i]
-
Agregar una i (o I) antes del corchete de cierre hace que el valor sea comparado sin distinguir entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
-
[attr operator value s] {{Experimental_Inline}}
-
Agregar una s (o S) antes del corchete de cierre hace que el valor sea comparado distinguiendo entre mayúsculas y minúsculas (para caracteres dentro del rango ASCII).
-
- -

Ejemplos

- -

Enlaces

- -

CSS

- -
a {
-  color: blue;
-}
-
-/* Enlaces internos, comenzando con "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Enlaces con "example" en cualquier parte de la URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Enlaces con "insensitive" en cualquier parte de la URL,
-   independientemente de las mayúsculas */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Enlaces que terminan en ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Enlace interno</a></li>
-  <li><a href="http://example.com">Enlace de ejemplo</a></li>
-  <li><a href="#InSensitive">Enlace interno insensible Insensitive</a></li>
-  <li><a href="http://example.org">Ejemplo de enlace .org</a></li>
-</ul>
- -

Resultado

- -

{{EmbedLiveSample('Enlaces')}}

- -

Idiomas

- -

CSS

- -
/* Todos los divs con un atributo `lang` están en negrita. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* Todos los divs en inglés de EE. UU. son azules. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* Todos los divs en portugués son verdes. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* Todos los divs en chino son rojos, ya sean
-   simplificados (zh-CN) o tradicionales (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* Todos los divs con `data-lang` Traditional Chinese
-   son de color púrpura. */
-/* Nota: también puede usar atributos con guiones
-   sin comillas dobles */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
-
- -

Resultado

- -

{{EmbedLiveSample('Idiomas')}}

- -

Listas Ordenadas

- -

{{SeeCompatTable}}

- -

La especificación HTML requiere que el atributo {{htmlattrxref("type", "input")}} distinga entre mayúsculas y minúsculas debido a que se usa principalmente en el elemento {{HTMLElement("input")}}, tratando de usar selectores de atributos con el atributo {{htmlattrxref("type", "ol")}} de una {{HTMLElement("ol", "lista ordenada")}} no funciona sin el modificador de mayúsculas y minúsculas.

- -

CSS

- -
/*
-Los tipos de lista requieren poder distinguir entre mayúsculas
-y minúsculas debido al peculiar comportamiento que tiene HTML
-con el atributo "type"
-*/
-
-ol[type="a"] {
-  list-style-type: lower-alpha;
-  background: red;
-}
-
-ol[type="a" s] {
-  list-style-type: lower-alpha;
-  background: lime;
-}
-
-ol[type="A" s] {
-  list-style-type: upper-alpha;
-  background: lime;
-}
- -

HTML

- -
<ol type="A">
-  <li>Example list</li>
-</ol>
- -

Result

- -

{{EmbedLiveSample("HTML_ordered_lists")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Agrega un modificador para la selección de valores de atributos insensibles a mayúsculas / minúsculas ASCII.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Definición Inicial.
- -

Compatibilidad con navegadores

- - - -

{{Compat("css.selectors.attribute")}}

- -

Ver también

- -
    -
  • Seleccionando un solo elemento:{{domxref("Document.querySelector()")}}, {{domxref("DocumentFragment.querySelector()")}}, o {{domxref("Element.querySelector()")}}
    • -
  • Seleccionar todos los elementos coincidentes:{{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}}, o {{domxref("Element.querySelectorAll()")}}
    • -
  • Todos los métodos anteriores se implementan en base a {{domxref("ParentNode")}} mixin; vea  {{domxref("ParentNode.querySelector()")}} y {{domxref("ParentNode.querySelectorAll()")}}
    • -
diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/selectores_css/index.html deleted file mode 100644 index 20baaf25a6..0000000000 --- a/files/es/web/css/selectores_css/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: Selectores CSS -slug: Web/CSS/Selectores_CSS -tags: - - CSS - - Referencia - - Selectores - - Selectores de CSS - - Visión general -translation_of: Web/CSS/CSS_Selectors ---- -
{{CSSRef}}
- -

Los selectores definen sobre qué elementos se aplicará un conjunto de reglas CSS.

- -

Selectores básicos

- -
-
Selector de tipo
-
Selecciona todos los elementos que coinciden con el nombre del elemento especificado.
- Sintaxis: eltname
- Ejemplo: input se aplicará a cualquier elemento {{HTMLElement('input')}}.
-
Selector de clase
-
Selecciona todos los elementos que tienen el atributo de class especificado.
- Sintaxis: .classname
- Ejemplo: .index seleccionará cualquier elemento que tenga la clase "index".
-
Selector de ID
-
Selecciona un elemento basándose en el valor de su atributo id. Solo puede haber un elemento con un determinado ID dentro de un documento.
- Sintaxis: #idname
- Ejemplo: #toc se aplicará a cualquier elemento que tenga el ID "toc".
-
Selector universal
-
Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.
- Sintaxis: * ns|* *|*
- Ejemplo: * se aplicará a todos los elementos del documento.
-
Selector de atributo
-
Selecciona elementos basándose en el valor de un determinado atributo.
- Sintaxis: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
- Ejemplo: [autoplay] seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).
-
- -

Combinadores

- -
-
Combinador de hermanos adyacentes
-
El combinador + selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.
- Sintaxis: A + B
- Ejemplo: La regla h2 + p se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.
-
Combinador general de hermanos
-
El combinador ~ selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.
- Sintaxis: A ~ B
- Ejemplo: La regla p ~ span se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.
-
Combinador de hijo
-
El combinador > selecciona los elementos que son hijos directos del primer elemento.
- Sintaxis: A > B
- Ejemplo: La regla ul > li se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.
-
Combinador de descendientes
-
El combinador   (espacio) selecciona los elementos que son descendientes del primer elemento.
- Sintaxis: A B
- Ejemplo: La regla div span se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.
-
Combinador de columna {{Experimental_Inline}}
-
El combinador || selecciona los elementos especificados pertenecientes a una columna.
- Sintaxis: A || B
- Ejemplo: col || td seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.
-
- -

Pseudoclases

- -
-
Las pseudoclases permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.
-
Ejemplo: La regla a:visited se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.
-
- -

Pseudoelementos

- -
-
-

Los pseudoelementos son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.

-
-
Ejemplo: La regla p::first-line se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Añadidos el combinador de columna ||, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Añadidos el combinador ~ general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo :: de dos puntos dobles. Selectores de atributos adicionales.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Añadidos los combinadores > de elemento hijo y + de elementos hermanos adyacentes. Añadidos los selectores universal y de atributo.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición inicial.
- -

Compatibilidad en navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatGeckoDesktop("1")}}3.03.51.0
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2
-
diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html deleted file mode 100644 index fe51517a2b..0000000000 --- a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: 'Usando la pseudo-clase :target en selectores' -slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores' -tags: - - CSS - - CSS3 - - Selectores -translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors' ---- -

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience. {{CSSRef}}

- -

Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los Selectores CSS3 incluyen la pseudo-clase {{ Cssxref(":target") }}.

- -

Seleccionando un objetivo (target)

- -

La pseudo-clase {{ Cssxref(":target") }} es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example contiene el identificador de fragmento #Example. En HTML, los identificadores son valores de los atributos id o name, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.

- -

Supongamos que se quiere estilizar cualquier elemento h2 que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:

- -
h2:target {font-weight: bold;}
- -

También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento #Example, escribiremos:

- -
#Example:target {border: 1px solid black;}
- -

Aplicando estilos a todos los elementos objetivo

- -

Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:

- -
:target {color: red;}
-
- -

Ejemplo

- -

En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <h1 id="one"> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.

- -
-
<h4 id="one">...</h4> <p id="two">...</p>
-<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
-
-<a href="#one">First</a>
-<a href="#two">Second</a>
-<a href="#three">Third</a>
-<a href="#four">Fourth</a>
-<a href="#five">Fifth</a>
-
- -

Conclusión

- -

En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.

- - - - - -
-

Información del Documento Original

- -
    -
  • Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications
    • -
  • Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.
    • -
  • Nota: El artículo en inglés era originalmente parte del sitio DevEdge.
    • -
-
diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/selectores_hermanos_adyacentes/index.html deleted file mode 100644 index 1200c4bd61..0000000000 --- a/files/es/web/css/selectores_hermanos_adyacentes/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Selectores de hermanos adyacentes -slug: Web/CSS/Selectores_hermanos_adyacentes -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Referencia CSS - - Selectores -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -

{{CSSRef("Selectors")}}

- -

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

- -

Sintaxis

- -
elemento_anterior + elemento_afectado { estilos }
-
- -

Ejemplo

- -
-
li:first-of-type + li {
-  color: red;
-}
-
- -
<ul>
-  <li>Uno</li>
-  <li>Dos</li>
-  <li>Tres</li>
-</ul>
-
- -

{{EmbedLiveSample('Example_1', 200, 100)}}

- -

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :

- -
img + span.caption {
-  font-style: italic;
-}
-
- -

que coincidiría con los siguientes elementos {{HTMLElement("span")}} :

- -
<img src="photo1.jpg"><span class="caption">The first photo</span>
-<img src="photo2.jpg"><span class="caption">The second photo</span>
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstadoComentarios
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
- -

Compatibilidad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

- -

Ver también

- - diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/selectores_hermanos_generales/index.html deleted file mode 100644 index 96c87148b9..0000000000 --- a/files/es/web/css/selectores_hermanos_generales/index.html +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Selectores de hermanos generales -slug: Web/CSS/Selectores_hermanos_generales -tags: - - CSS - - NeedsMobileBrowserCompatibility - - Referencia CSS - - Selectores -translation_of: Web/CSS/General_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

Resumen

- -

El combinador ~ separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común.

- -

Sintaxis

- -
elemento ~ elemento { estilos }
-
- -

Ejemplo

- -
p ~ span {
-  color: red;
-}
- -
<span>Este span no es rojo.</span>
-<p>Aquí hay un párrafo.</p>
-<code>Aquí hay algo de código.</code>
-<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
- -

{{ EmbedLiveSample('Example', 320, 150) }}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{ SpecName('CSS4 Selectors', '#general-sibling-combinators', 'following-sibling combinator') }}{{Spec2('CSS4 Selectors')}} 
{{ SpecName('CSS3 Selectors', '#general-sibling-combinators', 'general sibling combinator') }}{{Spec2('CSS3 Selectors')}} 
- -

Compatibilidad entre navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1")}}793
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

 

- -

Ver también

- -

 

- - diff --git "a/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" "b/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" deleted file mode 100644 index 90d5ea8b75..0000000000 --- "a/files/es/web/css/sintaxis_definici\303\263n_de_valor/index.html" +++ /dev/null @@ -1,402 +0,0 @@ ---- -title: Sintaxis de definición de valor -slug: Web/CSS/Sintaxis_definición_de_valor -translation_of: Web/CSS/Value_definition_syntax ---- -

{{CSSRef()}}

- -

La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).

- -

La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.

- -

Tipos de valor de los componentes

- -

Palabras clave

- -

Palabras clave genéricas

- -

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

- -

El caso específico de inherit e initial

- -

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

- -

Literales

- -

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

- -

Ambos símbolos aparecen literalmente en una definición de valor.

- -

Tipos de dato

- -

Tipos de dato básicos

- -

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

- -

Tipos de dato no terminales

- -

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por  '<' y '>'.

- -

Los tipos de dato no terminales son de dos tipos::

- -
    -
  • tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
    • -
  • tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.
    • -
- -

Combinadores de los valores de componentes

- -

Corchetes

- -

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

- -
bold [ thin && <length> ]
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold thin 2vh
    • -
  • bold 0 thin
    • -
  • bold thin 3.5em
    • -
- -

Pero no con:

- -
    -
  • thin bold 3em,  porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.
    • -
- -

Yuxtaposición

- -

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

- -
bold <length> , thin
-
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold 1em, thin
    • -
  • bold 0, thin
    • -
  • bold 2.5cm, thin
    • -
  • bold 3vh, thin
    • -
- -

Pero no con:

- -
    -
  • thin 1em, bold porque las entidades deben aparecer en el orden expresado
    • -
  • bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
    • -
  • bold 0.5ms, thin porque los valores ms no son de tipo {{cssxref("<length>")}}
    • -
- -

Doble ampersand

- -

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

- -
bold && <length>
-
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold 1em
    • -
  • bold 0
    • -
  • 2.5cm bold
    • -
  • 3vh bold
    • -
- -

Pero no con:

- -
    -
  • bold porque ambos componentes deben aparecer en el valor
    • -
  • bold 1em bold porque ambos componentes deben aparecer solo una vez
    • -
- -
Nota: yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length> es equivalente a [ bold thin ] && <length>. Que describe a bold thin <length> ó <length> bold thin pero no a  bold <length> thin.
- -

Barra doble

- -

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

- -
<'border-width'> || <'border-style'> || <'border-color'>
-
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • 1em solid blue
    • -
  • blue 1em
    • -
  • solid 1px yellow
    • -
- -

Pero no con:

- -
    -
  • blue yellow porque un componente debe aparecer al menos una vez.
    • -
  • bold  porque no es una palabra clave permitida como valor de ninguna de las entidades.
    • -
- -
Nota: el doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length> es equivalente a bold || [ thin && <length> ]. Describe a bold, thin, <length>, bold thin, <length> bold, o thin <length> bold pero no bold <length> bold thin porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
- -

Barra simple

- -

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

- -
<percentage> | <length> | left | center | right | top | bottom
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • 3%
    • -
  • 0
    • -
  • 3.5em
    • -
  • left
    • -
  • center
    • -
  • right
    • -
  • top
    • -
  • bottom
    • -
- -

Pero no

- -
    -
  • center 3% porque solo uno de los componentes debe estar presente
    • -
  • 3em 4.5em porque un componente debe estar presente máximo una vez.
    • -
- -
-

Note: la barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length> es equivalente a bold | [ thin || <length> ]. Describe bold, thin, <length>, <length> thin, o thin <length> pero no bold <length> porque solo una entidad de cada lado del combinador | puede estar presente.

-
- -

Multiplicadores de valores de componentes

- -

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

- -

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

- -

Asterisco (*)

- -

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

- -
bold smaller*
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold
    • -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller y así sucesivamente
    • -
- -

Pero no:

- -
    -
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller
    • -
- -

Suma (+)

- -

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

- -
bold smaller+
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller y sucesivamente
    • -
- -

Pero no:

- -
    -
  • bold porque smaller debe aparecer al menos una vez
    • -
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Pregunta (?)

- -

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

- -
bold smaller?
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold
    • -
  • bold smaller
    • -
- -

Pero no:

- -
    -
  • bold smaller smaller porque smaller debe aparecer como máximo una vez
    • -
  • smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Llaves ({ })

- -

El multiplicador llaves, encierra a dos enteros A y B separados  por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

- -
bold smaller{1,3}
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold smaller
    • -
  • bold smaller smaller
    • -
  • bold smaller smaller smaller
    • -
- -

Pero no:

- -
    -
  • bold porque smaller debe aparecer al menos una vez
    • -
  • bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
    • -
  • smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Hash (#)

- -

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

- -
bold smaller#
- -

El ejemplo empareja con los siguientes valores:

- -
    -
  • bold smaller
    • -
  • bold smaller, smaller
    • -
  • bold smaller, smaller, smaller y así sucesivamente
    • -
- -

Pero no:

- -
    -
  • bold porque smaller debe aparecer al menos una vez
    • -
  • bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
    • -
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • -
- -

Sumario

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SímboloNombreDescripciónEjemplo
Combinadores
 YuxtaposiciónComponentes obligatorios que deben aparecer en el mismo ordensolid <length>
&&Doble ampersandComponentes obligatorios pero que pueden aparecer en cualquier ordenlength> && <string>
||Barra dobleAl menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden<'border-image-outset'> || <'border-image-slice'>
|Barra simpleExactamente uno de los componentes debe estar presentesmaller | small | normal | big | bigger
[ ]CorchetesAgrupa componentes para sobreescribir las reglas de precedenciabold [ thin && <length> ]
Multiplicadores
 Sin multiplicadorExactamente 1 vezsolid
*Asterisco0 or more timesbold smaller*
+Suma1 o mas vecesbold smaller+
?Pregunta0 o 1 vez (es opcional)bold smaller?
{A,B}LlavesAl menos A veces, como mas B vecesbold smaller{1,3}
#Hash1 o mas veces, pero cada ocurrencia separada por una coma (',')bold smaller#
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Definición inicial
- -

Vea también

- -
    -
  • {{ CSS_key_concepts() }}
    • -
diff --git a/files/es/web/css/specificity/index.html b/files/es/web/css/specificity/index.html new file mode 100644 index 0000000000..6a42fdb53f --- /dev/null +++ b/files/es/web/css/specificity/index.html @@ -0,0 +1,239 @@ +--- +title: Especificidad +slug: Web/CSS/Especificidad +tags: + - CSS + - Ejemplo + - Guía + - Principiante + - Web +translation_of: Web/CSS/Specificity +--- +

La especificidad es la manera mediante la cual los navegadores deciden qué valores de una propiedad CSS son más relevantes para un elemento y, por lo tanto, serán aplicados. La especificidad está basada en las reglas de coincidencia que están compuestas por diferentes tipos de selectores CSS.

+ +

¿Cómo se calcula?

+ +

La especificidad es un peso (importancia o valor) que se le asigna a una declaración CSS dada, determinada por el número correspondiente de cada tipo de selector. Cuando varias declaraciones tienen igual especificidad, se aplicará al elemento la última declaración encontrada en el CSS. La especificidad solo se aplica cuando el mismo elemento es objetivo de múltiples declaraciones. Según las reglas de CSS, en caso de que un elemento sea objeto de una declaración directa, esta siempre tendrá preferencia sobre las reglas heredadas de su ancestro.

+ +
+

Nota: La proximidad de elementos en el árbol del documento no tiene efecto en la especificidad.

+
+ +

Tipos de selectores

+ +

La siguiente lista de tipos de selectores incrementa en función de la especificidad:

+ +
    +
  1. Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before).
    2. +
  2. Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover).
    3. +
  3. Selectores de ID (p.e., #example).
    4. +
+ +

El selector universal ({{CSSxRef("Universal_selectors", "*")}}), los combinadores ({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) y la pseudo-clase de negación ({{CSSxRef(":not", ":not()")}}) no tienen efecto sobre la especificidad. (Sin embargo, los selectores declarados dentro de :not() si lo tienen.)

+ +

Para más información, visita "Especificidad" en "Cascada y herencia", también puedes visitar: https://specifishity.com

+ +

Los estilos inline añadidos a un elemento (p.e., style="font-weight:bold") siempre sobrescriben a cualquier estilo escrito en hojas de estilo externas, por lo que se puede decir que tienen la mayor especificidad.

+ +

La excepción !important

+ +

Cuando se emplea important en una declaración de estilo, esta declaración sobrescribe a cualquier otra. Aunque técnicamente !important  no tiene nada que ver con especificidad, interactúa directamente con esta. Sin embargo, el uso de !important es una mala práctica y debería evitarse porque hace que el código sea más difícil de depurar al romper la cascada (artículo en inglés) natural de las hojas de estilo. Cuando dos declaraciones en conflicto con el !important son aplicadas al mismo elemento, se aplicará la declaración con mayor especificidad. 

+ +

Algunas reglas de oro:

+ +
    +
  • Busca siempre una manera de emplear la especificidad antes de considerar el uso de !important.
    • +
  • Usa !important solo en declaraciones específicas de CSS que sobrescriban CSS externo (de librerías externas como Bootstrap o normalize.css).
    • +
  • Nunca uses !important cuando estés intentando escribir un plugin/mashup.
    • +
  • Nunca uses !important en todo el código CSS.
    • +
+ +

En lugar de usar !important, considera:

+ +
    +
  1. Hacer un mejor uso de las propiedades en cascada de CSS.
    2. +
  2. +

    Usar reglas más específicas. Indicando uno o más elementos antes del elemento que estás seleccionando, la regla se vuelve más específica y gana mayor prioridad:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
+
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    +
    3. +
  3. Como un caso especial sin sentido para (2), duplicar selectores simples para aumentar la especificidad cuando no tiene nada más que especificar + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

Cómo se debería usar !important:

+ +
A) Sobrescribiendo los estilos en linea
+ +
    +
  1. Tienes un archivo CSS que establece aspectos visuales de tu sitio de manera global.
    2. +
  2. Tú (u otros) usan estilos inline en los propios elementos. Esto es considerado como una muy mala práctica. 
    3. +
+ +

En este caso, puedes establecer ciertos estilos en tu archivo CSS global como importantes, superando así los estilos en línea configurados directamente en los elementos.

+ +

Ejemplo del mundo real: Algunos plugins jQuery muy mal escritos que usan estilos inline.

+ +

B) Otro escenario:

+ +
#someElement p {
+    color: blue;
+}
+
+p.awesome {
+    color: red;
+}
+ +

¿Cómo haces que los párrafos awesome se vuelvan siempre rojos, incluso los que se encuentren dentro de #someElement? Sin !important, la primera regla tendrá más especificidad y ganará a la segunda.

+ +

Cómo sobrescribir !important

+ +

A) Simplemente añade otra regla CSS con !important y, o bien da al selector una especificidad mayor (añadiendo una etiqueta, id o clase al selector), o añadiendo una regla CSS con el mismo selector en un punto posterior al ya existente. Esto funciona porque en caso de empate en especificidad, la última regla prevalece.

+ +

Algunos ejemplos con una gran especificidad:

+ +
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}
+ +

B) O añade el mismo selector después de uno existente:

+ +
td {height: 50px !important;}
+ +

C) O reescribe la regla original para evitar el uso de !important.

+ +

Para más información, visita (en inglés):

+ +

http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css

+ +

http://stackoverflow.com/questions/9245353/what-does-important-in-css-mean

+ +

http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css

+ +

http://stackoverflow.com/questions/11178673/how-to-override-important

+ +

http://stackoverflow.com/questions/2042497/when-to-use-important-to-save-the-day-when-working-with-css

+ +

La excepción :not

+ +

La pseudo-clase negación :not no es considerada una pseudo-clase para el cálculo de la especificidad. Pero los selectores colocados dentre de ella, si cuentan como selectores normales a la hora de determinar el valor de los tipos de selectores. 

+ +

Aquí tienes un pedazo de CSS:

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +

cuando se usa con el siguiente HTML:

+ +
<div class="outer">
+  <p>Esto está en el outer div.</p>
+  <div class="inner">
+    <p>Este texto está en el inner div.</p>
+  </div>
+</div>
+
+ +

Debería aparecer en pantalla como:

+ +

Esto está en el outer div
+
+ Este texto está en el inner div

+ +

Especificidad basada en la forma

+ +

La especificidad está basada en la forma de un selector. En el siguiente caso, el selector *[id="foo"] cuenta como un atributo selector para la determinación de la especificidad de un selector, incluso cuando se selecciona un ID.

+ +

Las siguientes declaraciones de estilo:

+ +
*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +

cuando se usan con este marcador:

+ +
<p id="foo">Soy un texto de ejemplo.</p>
+
+ +

Se acabarán viendo así:

+ +

Soy un texto de ejemplo

+ +

Debido a que coincide con el mismo elemento, pero el selector ID tiene una mayor especificidad.

+ +

Ignorancia de proximidad en el árbol

+ +

La proximidad de un elemento con otros a los que se hace referencia en un selector determinado, no tiene impacto en la especificidad. La siguiente declaración de estilo:

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +

Con el siguiente HTML:

+ +
<html>
+<body>
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+
+ +

Se mostrará como:

+ +

¡Aquí va un título!

+ +

Porque las dos declaraciones tienen un resultado de tipo de selector igual, pero el selector html h1 se ha declarado después.

+ +

Declaración directa vs estilos heredados

+ +

Los estilos para elementos objetivo de una declaración directa siempre tienen preferencia sobre los estilos heredados, sin importar la especificidad de la regla heredada.

+ +
#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}
+ +

Con el siguiente HTML:

+ +
<html>
+<body id="parent">
+  <h1>¡Aquí va un título!</h1>
+</body>
+</html>
+ +

Se verá así:

+ +

¡Aquí va un título!

+ +

Porque el selector h1 selecciona el objetivo de manera específica, pero el color verde simplemente es heredad de su padre.

+ +

Consulta también (en inglés)

+ + diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/texto_css/index.html deleted file mode 100644 index f0c3c934b6..0000000000 --- a/files/es/web/css/texto_css/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Texto CSS -slug: Web/CSS/Texto_CSS -tags: - - CSS - - Texto CSS - - Vista general -translation_of: Web/CSS/CSS_Text ---- -
{{CSSRef}}
- -

Texto CSS  es el módulo de CSS que define cómo realizar la manipulación de elementos de texto como los saltos de línea, la justificación, la alineación, la gestión de espacios en blanco y las transformaciones de texto.

- -

Referencia

- -

Propiedades

- -
-
    -
  • {{cssxref("hyphens")}}
    • -
  • {{cssxref("letter-spacing")}}
    • -
  • {{cssxref("line-break")}}
    • -
  • {{cssxref("overflow-wrap")}}
    • -
  • {{cssxref("tab-size")}}
    • -
  • {{cssxref("text-align")}}
    • -
  • {{cssxref("text-align-last")}}
    • -
  • {{cssxref("text-indent")}}
    • -
  • {{cssxref("text-size-adjust")}}
    • -
  • {{cssxref("text-transform")}}
    • -
  • {{cssxref("white-space")}}
    • -
  • {{cssxref("word-break")}}
    • -
  • {{cssxref("word-spacing")}}
    • -
  • {{cssxref("word-wrap")}}
    • -
-
- -

Guías

- -

None.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Actualiza varias propiedades para que sean independientes de la direccionalidad del texto.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Definición Inicial
- -

Compatibilidad con los distintos navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)
-
diff --git a/files/es/web/css/tools/cubic_bezier_generator/index.html b/files/es/web/css/tools/cubic_bezier_generator/index.html new file mode 100644 index 0000000000..b99e7afaa3 --- /dev/null +++ b/files/es/web/css/tools/cubic_bezier_generator/index.html @@ -0,0 +1,320 @@ +--- +title: Generador de curvas de bézier +slug: Web/CSS/Herramientas/Cubic_Bezier_Generator +translation_of: Web/CSS/Tools/Cubic_Bezier_Generator +--- +
+
+
<html>
+    <canvas id="bezier" width="336" height="336">
+    </canvas>
+    <form>
+       <label for="x1">x1 = </label><input onchange="updateCanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'>
+       <label for="y1">y1 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y1" value="0.33" class='field'>
+       <label for="x2">x2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="x2" value="0.14" class='field'>
+       <label for="y2">y2 = </label><input onchange="updateCanvas();return true;"  type="text" maxlength=6 id="y2" value="0.53" class='field'>
+       <br>
+       <output id="output">Log</output>
+    </form>
+</html>
+
+ +
.field {
+    width: 40px;
+}
+
+ +
function updateCanvas() {
+
+    var x1 = document.getElementById('x1').value;
+    var y1 = document.getElementById('y1').value;
+    var x2 = document.getElementById('x2').value;
+    var y2 = document.getElementById('y2').value;
+
+    drawBezierCurve(x1, y1, x2, y2);
+}
+
+const radius = 4;
+// Place needed to draw the rulers
+const rulers = 30.5;
+const margin = 10.5;
+const basic_scale_size = 5; // Size of 0.1 tick on the rulers
+var scaling; //LIMITATION: scaling is computed once: if canvas.height/canvas.width change it won't be recalculated
+var dragSM = 0; // Drag state machine: 0 = nodrag, others = object being dragged
+
+function initCanvas() {
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+        scaling = Math.min(canvas.height - rulers - margin, canvas.width - rulers - margin);
+
+        canvas.onmousedown = mouseDown;
+        canvas.onmouseup = mouseUp;
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function cX(x) {
+    return x * scaling + rulers;
+}
+
+function reverseX(x) {
+    return (x - rulers) / scaling;
+}
+
+function lX(x) {
+    //Used when drawing vertical lines to prevent subpixel blur
+    var result = cX(x);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function cY(y) {
+
+    return (1 - y) * scaling + margin;
+}
+
+function reverseY(y) {
+    return (margin - y) / scaling + 1;
+}
+
+function lY(y) {
+    // Used when drawing horizontal lines to prevent subpixel blur
+    var result = cY(y);
+    return Math.round(result) == result ? result + 0.5 : result;
+}
+
+function drawBezierCurve(x1, y1, x2, y2) {
+
+    // get the canvas element using the DOM
+    var canvas = document.getElementById('bezier');
+
+    // Make sure we don't execute when canvas isn't supported
+    if (canvas.getContext) {
+
+        // use getContext to use the canvas for drawing
+        var ctx = canvas.getContext('2d');
+
+
+
+        // Clear canvas
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the rulers
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+
+        // Draw the Y axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.textAlign = "right";
+
+        for (var i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(-basic_scale_size + cX(0), lY(i));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(-2 * basic_scale_size + cX(0), lY(i));
+                ctx.fillText(Math.round(i * 10) / 10, -3 * basic_scale_size + cX(0), cY(i) + 4);
+                // Limitation the constant 4 should be font size dependant
+            }
+            ctx.lineTo(cX(0), lY(i));
+        }
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+
+        // Draw the Y axis label
+        ctx.save();
+        ctx.rotate(-Math.PI / 2);
+        ctx.textAlign = "left";
+        ctx.fillText("Output (Value Ratio)", -cY(0), -3 * basic_scale_size + cX(0));
+        ctx.restore();
+
+        // Draw the X axis
+        ctx.moveTo(cX(0), cY(0));
+        ctx.lineTo(cX(0), cY(1));
+        ctx.textAlign = "center";
+        for (i = 0.1; i <= 1; i = i + 0.1) {
+            ctx.moveTo(lX(i), basic_scale_size + cY(0));
+            if ((i == 0.5) || (i > 0.9)) {
+                ctx.moveTo(lX(i), 2 * basic_scale_size + cY(0));
+                ctx.fillText(Math.round(i * 10) / 10, cX(i), 4 * basic_scale_size + cY(0));
+                // Limitation the constant 4 should be dependant of the font size
+            }
+            ctx.lineTo(lX(i), cY(0));
+        }
+
+        // Draw the X axis label
+        ctx.textAlign = "left";
+        ctx.fillText("Input (Time Duration Ratio)", cX(0), 4 * basic_scale_size + cY(0));
+        // Limitation the constant 4 should be dependant of the font size
+        ctx.stroke();
+        ctx.closePath();
+
+        // Draw the Bézier Curve
+        ctx.beginPath();
+        ctx.moveTo(cX(0), cY(0));
+        ctx.strokeStyle = 'blue';
+        ctx.bezierCurveTo(cX(x1), cY(y1), cX(x2), cY(y2), cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+
+
+        // Draw the P2 point (with a line to P0)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.lineTo(cX(0), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+        ctx.beginPath();
+        ctx.moveTo(cX(x1), cY(y1));
+        ctx.arc(cX(x1), cY(y1), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fillStyle = 'white';
+        ctx.fill();
+        ctx.closePath();
+
+
+
+        // Draw the P3 point (with a line to P1)
+        ctx.beginPath();
+        ctx.strokeStyle = 'red';
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.lineTo(cX(1), cY(1));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.moveTo(cX(x2), cY(y2));
+        ctx.arc(cX(x2), cY(y2), radius, 0, 2 * Math.PI);
+        ctx.stroke();
+        ctx.fill();
+        ctx.closePath();
+
+        // Draw the P1(1,1) point (with dashed hints)
+        ctx.beginPath();
+        ctx.moveTo(cX(1), cY(1));
+        ctx.strokeStyle = 'lightgrey';
+        ctx.lineTo(cX(0), cY(1));
+        ctx.moveTo(cX(1), cY(1));
+        ctx.lineTo(cX(1), cY(0));
+        ctx.stroke();
+        ctx.closePath();
+
+        ctx.beginPath();
+        ctx.strokeStyle = "black";
+        ctx.fillStyle = "black";
+        ctx.arc(cX(1), cY(1), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+        // Draw the P0(0,0) point
+        ctx.beginPath();
+        ctx.arc(cX(0), cY(0), radius, 0, 2 * Math.PI);
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+
+
+    } else {
+        alert('You need Safari or Firefox 1.5+ to see this demo.');
+    }
+}
+
+function mouseDown(e) {
+
+    var canvas = document.getElementById('bezier');
+
+    var x1 = cX(document.getElementById('x1').value);
+    var y1 = cY(document.getElementById('y1').value);
+
+    var x = e.pageX - canvas.offsetLeft;
+    var y = e.pageY - canvas.offsetTop;
+
+    var output = document.getElementById('output');
+    output.value = "(" + x + "," + y + ") should be (" + x1 + "," + y1 + ")";
+
+
+    if ((x1 + radius >= x) && (x1 - radius <= x) && (y1 + radius >= y) && (y1 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P1!";
+        dragSM = 1;
+    }
+
+    var x2 = cX(document.getElementById('x2').value);
+    var y2 = cY(document.getElementById('y2').value);
+
+    if ((x2 + radius >= x) && (x2 - radius <= x) && (y2 + radius >= y) && (y2 - radius <= y)) {
+        var output = document.getElementById('output');
+        output.value = "P2!";
+        dragSM = 2;
+    }
+
+    // If we are starting a drag
+    if (dragSM != 0) {
+        canvas.onmousemove = mouseMove;
+    }
+}
+
+function mouseUp(e) {
+
+    var output = document.getElementById('output');
+    output.value = "Mouse up!";
+    dragSM = 0;
+    canvas.onmousemove = null;
+}
+
+function mouseMove(e) {
+    if (dragSM != 0) {
+        var canvas = document.getElementById('bezier');
+
+        var x = e.pageX - canvas.offsetLeft;
+        var y = e.pageY - canvas.offsetTop;
+
+        var output = document.getElementById('output');
+        output.value = "Drag!";
+
+        if (dragSM == 1) {
+            var x1 = document.getElementById('x1');
+            var y1 = document.getElementById('y1');
+            x1.value = reverseX(x);
+            x1.value = Math.round(x1.value * 10000) / 10000;
+            y1.value = reverseY(y);
+            y1.value = Math.round(y1.value * 10000) / 10000;
+            if (x1.value < 0) { x1.value = 0; }
+            if (x1.value > 1) { x1.value = 1; }
+        } else if (dragSM == 2) {
+            var x2 = document.getElementById('x2');
+            var y2 = document.getElementById('y2');
+            x2.value = reverseX(x);
+            x2.value = Math.round(x2.value * 10000) / 10000;
+            y2.value = reverseY(y);
+            y2.value = Math.round(y2.value * 10000) / 10000;
+            if (x2.value < 0) { x2.value = 0; }
+            if (x2.value > 1) { x2.value = 1; }
+        }
+        updateCanvas();
+    }
+}
+
+initCanvas();
+updateCanvas();
+
+
+ +

{{draft}}

+ +

Esta es una herramienta de ejemplo que te permitirá editar y ver de manera gráfica una curva de Bézier. Esta no es una herramienta realmente útil, pero ¡lo será!

+ +

{{EmbedLiveSample("Tool", 1000, 2000)}}

+
+ +

 

diff --git a/files/es/web/css/tools/index.html b/files/es/web/css/tools/index.html new file mode 100644 index 0000000000..59cd1febfa --- /dev/null +++ b/files/es/web/css/tools/index.html @@ -0,0 +1,28 @@ +--- +title: Herramientas +slug: Web/CSS/Herramientas +tags: + - CSS +translation_of: Web/CSS/Tools +--- +
 
+ +

CSS ofrece una serie de características poderosas que puede ser difíciles de usar, o tener un gran número de parámetros, por lo que es muy útil visualizarlos mientras se trabaja en ellos. Esta página ofrece enlaces a una serie de herramientas que le ayudarán a construir sus estilos usando estas caracteristicas.

+ +

{{LandingPageListSubpages}}

+ +

Otras herramientas

+ +
    +
  • +

    Animación CSS - Stylie

    +
    • +
  • Para comprobar la información de la pantalla del dispositivo (helpful in {{Glossary("responsive web design")}}) - mydevice.io
    • +
  • Menus CSS- cssmenumaker.com
    • +
+ +

Temas relacionados

+ + diff --git a/files/es/web/css/transiciones_de_css/index.html b/files/es/web/css/transiciones_de_css/index.html deleted file mode 100644 index 62142638c4..0000000000 --- a/files/es/web/css/transiciones_de_css/index.html +++ /dev/null @@ -1,700 +0,0 @@ ---- -title: Transiciones de CSS -slug: Web/CSS/Transiciones_de_CSS -tags: - - CSS - - Gecko - - Transiciones de CSS -translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions ---- -

{{ SeeCompatTable() }}

- -

Las transiciones CSS, parte del borrador de la especificación CSS3, proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ejemplo, si cambias el color de un elemento de blanco a negro, normalmente el cambio es instantáneo. Al habilitar las transiciones CSS, el cambio sucede en un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleración que puedes personalizar.

- -
Nota: como la especificación de las transiciones CSS todavía se encuentra en fase de borrador, a todas las propiedades asociadas con ellas se les añade el prefijo "-moz-" para usarse en Gecko. Para la compatibilidad con WebKit, se aconseja usar también el prefijo "-webkit-" y para la compatibilidad con Opera, el prefijo "-o-". Es decir, por ejemplo,  la propiedad de transición se especificaría como -moz-transition, -webkit-transition y -o-transition.
- -

Las propiedades de transición CSS

- -

Las transiciones CSS se controlan mediante la propiedad abreviada {{ cssxref("transition") }}. Es preferible utilizar este método porque de esta forma se evita que la longitud de la lista de parámetros sea diferente, lo que puede dar lugar a tener que emplear un tiempo considerablemente largo en depurar el código CSS.

- -

Puedes controlar los componentes individuales de la transición usando las siguientes subpropiedades:

- -
-
{{ cssxref("transition-property") }}
-
Especifica el nombre o nombres de las propiedades CSS a las que deberían aplicarse las transiciones. Sólo las propiedades que se enumeran aquí son animadas durante las transiciones; los cambios en el resto de las propiedades suceden de manera instantánea como siempre.
-
{{ cssxref("transition-duration") }}
-
Especifica la duración en la que sucederán las transiciones. Puedes especificar una única duración que se aplique a todas las propiedades durante la transición o valores múltiples que permitan a cada propiedad de transición un período de tiempo diferente.
-
{{ cssxref("transition-timing-function") }}
-
Especifica la curva cúbica bézier que se usa para definir cómo se computan los valores intermedios para las propiedades.
-
{{ cssxref("transition-delay") }}
-
Define el tiempo de espera entre el momento en que se cambia una propiedad y el inicio de la transición.
-
- -

Detectar la finalización de una transición

- -

Hay un único acontecimiento que se desencadena cuando se completan las transiciones. En Firefox, el evento es transitionend, en Opera, OTransitionEnd y en WebKit es webkitTransitionEnd. Consulta la tabla de compatibilidades al final de la página si deseas más información. El evento transitionend ofrece dos propiedades:

- -
-
propertyName
-
Una cadena que indica el nombre de la propiedad CSS cuya transición se completó.
-
elapsedTime
-
Un float que indica el número de segundos que la transición se había estado ejecutando en el momento en que el acontecimiento se desencadenó. Este valor no está afectado por el valor de {{ cssxref("transition-delay") }}.
-
- -

Como es habitual, puedes usar el método {{ domxref("element.addEventListener()") }} para monitorizar este acontecimiento:

- -
el.addEventListener("transitionend", updateTransition, true);
-
- -
Nota: el evento "transitionend" no se dispara si la transición se anula debido a que el valor de la propiedad de animación es modificado antes de que la transición se complete.
- -

Propiedades que pueden ser animadas

- -

Las transiciones y las animaciones CSS pueden usarse para animar las siguientes propiedades.

- -
Nota: el conjunto de propiedades que puede animarse está sujeto a cambios, por lo tanto se recomienda evitar incluir cualquier propiedad en la lista que no anime porque en un futuro podría provocar resultados inesperados.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipo de valor
{{ cssxref("background-color") }}{{cssxref("<color>")}}
{{ cssxref("background-image") }}solo degradado; no está implementado en Firefox (see {{ bug(536540) }})
{{ cssxref("background-position") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("background-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-color") }} (including sub-properties){{cssxref("<color>")}}
{{ cssxref("border-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("border-width") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("border-spacing") }}{{cssxref("<length>")}}
{{ cssxref("bottom") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-box-flex") }}número
{{ cssxref("box-shadow") }}sombra
{{ cssxref("color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-count") }}número
{{ cssxref("-moz-column-gap") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-rule-color") }}{{cssxref("<color>")}}
{{ cssxref("-moz-column-rule-width") }}{{cssxref("<length>")}}, palabras clave
{{ cssxref("-moz-column-width") }}{{cssxref("<length>")}}
{{ cssxref("clip") }}rectágulo
{{ svgattr("fill") }}pintar
{{ svgattr("fill-opacity") }}valor de opacidad
{{ svgattr("flood-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("font-size") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("font-size-adjust") }}números, palabras clave
{{ cssxref("font-stretch") }}palabras clave
{{ cssxref("font-weight") }}números| palabras clave (excluyendo bolder, lighter)
{{ cssxref("height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-image-region") }}rect()
{{ cssxref("left") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("letter-spacing") }}{{cssxref("<length>")}}
{{ svgattr("lighting-color") }}{{cssxref("<color>")}} | palabras clave
{{ cssxref("line-height") }}número | {{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("margin") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("marker-offset") }}{{cssxref("<length>")}}
{{ cssxref("max-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("max-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-height") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("min-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("opacity") }}número
{{ cssxref("outline-color") }}{{cssxref("<color>")}}
{{ cssxref("outline-offset") }}entero
{{ cssxref("-moz-outline-radius") }} (including sub-properties){{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("outline-width") }}{{cssxref("<length>")}}
{{ cssxref("padding") }} (including sub-properties){{cssxref("<length>")}}
{{ cssxref("right") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stop-color") }}{{cssxref("<color>")}} | palabras clave
{{ svgattr("stop-opacity") }}valor de opacidad
{{ svgattr("stroke") }}pintar
{{ svgattr("stroke-dasharray") }}dasharray
{{ svgattr("stroke-dashoffset") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ svgattr("stroke-miterlimit") }}miterlimit
{{ svgattr("stroke-opacity") }}valor de opacidad
{{ svgattr("stroke-width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-indent") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("text-shadow") }}sombra
{{ cssxref("top") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("-moz-transform-origin") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, keywords
{{ cssxref("-moz-transform") }}transform-function
{{ cssxref("vertical-align") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}, palabras clave
{{ cssxref("visibility") }}visibilidad
{{ cssxref("width") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("word-spacing") }}{{cssxref("<percentage>")}} | {{cssxref("<length>")}}
{{ cssxref("z-index") }}entero
- -

Cuando las listas de valores de propiedades tienen longitudes diferentes

- -

Si cualquier lista de valores de propiedades es más corta que las otras, sus valores se repiten para hacer que coincidan. Por ejemplo:

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s;
-}
-
- -

Se considera como si fuera:

- -
div {
-  transition-property: opacity, left, top, height;
-  transition-duration: 3s, 5s, 3s, 5s;
-}
- -

De manera similar, si cualquier lista de valores de propiedades es más larga que la de {{ cssxref("transition-property") }}, se trunca, de forma que si tienes la siguiente CSS:

- -
div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s, 2s, 1s;
-}
- -

Se interpreta como:

- -
div {
-  transition-property: opacity, left;
-  transition-duration: 3s, 5s;
-}
- -

Funciones de intervalos de transición

- -

Las funciones de intervalos determinan el cálculo de los valores intermedios de la transición. La función de intervalo puede especificarse proporcionando el gráfico de la función correspondiente, como lo definen los cuatro puntos que definen una cúbica bézier:

- -

- -

En lugar de especificar directamente una bézier, existen valores de intervalos predeterminados:

- -
    -
  • ease, equivalente a cubic-bezier(0.25, 0.1, 0.25, 1.0)
    • -
  • linear, equivalente a cubic-bezier(0.0, 0.0, 1.0, 1.0)
    • -
  • ease-in, equivalente a cubic-bezier(0.42, 0, 1.0, 1.0)
    • -
  • ease-out, equivalente a cubic-bezier(0, 0, 0.58, 1.0)
    • -
  • ease-in-out, equivalente a cubic-bezier(0.42, 0, 0.58, 1.0)
    • -
- -

Ejemplos

- -

Una muestra del efecto de transición

- -

Este sencillo ejemplo proporciona demostraciones de distintos efectos de transición sin excesivos adornos.

- -

En primer lugar, el HTML para crear los elementos sobre los que probaremos nuestras transiciones:

- -
<ul>
-  <li id="long1">Transición larga, gradual...</li>
-  <li id="fast1">Transición muy rápida...</li>
-  <li id="delay1">Transición larga de un minuto de retraso...</li>
-  <li id="easeout">Usar intervalos de alejamiento...</li>
-  <li id="linear">Usar intervalos lineales...</li>
-  <li id="cubic1">Usar cúbica bézier(0.2, 0.4, 0.7, 0.8)...</li>
-</ul>
-
- -

Cada elemento tiene su propia id.; la CSS se encarga del resto. Veamos un par de ejemplos.

- -

Usar un retraso

- -

Este ejemplo realiza una transición de tamaño de fuente de cuatro segundos con dos segundos de retraso entre el momento en que el usuario pasa el ratón por encima del elemento y el comienzo del efecto de animación:

- -
#delay1 {
-  position: relative;
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-  font-size: 14px;
-}
-
-#delay1:hover {
-  transition-property: font-size;
-  transition-duration: 4s;
-  transition-delay: 2s;
-  font-size: 36px;
-}
-
- -

Usar una función de intervalos de transición lineales

- -

De manera predeterminada, la función de intervalos que se usa para computar los pasos intermedios durante la secuencia de animación proporciona una curva suave de aceleración y desaceleración para el efecto de animación. Si prefieres que el efecto mantenga una velocidad constante a lo largo de la animación, puedes especificar que deseas usar la función de intervalos de transición linear, tal y como se muestra a continuación.

- -
transition-timing-function: linear;
-
- -

Existen distintas funciones de intervalos estándares disponibles; consulta {{ cssxref("transition-timing-function") }} para tener más detalles.

- -

Especificar una función de intervalos cúbicos bézier

- -

Puedes controlar aún más el intervalo de la secuencia de animación si especificas tu propia curva cúbica bézier que describe la velocidad de animación. Por ejemplo:

- -
  transition-timing-function: cubic-bezier(0.2, 0.4, 0.7, 0.8);
-
- -

Establece una función de intervalo con una curva bézier definida por los puntos (0.0, 0.0), (0.2, 0.4), (0.7, 0.8) y (1.0, 1.0).

- -

Menús de resaltado

- -

Un uso común de CSS es resaltar elementos de un menú mientras el usuario desplaza el cursor del ratón por encima de ellos. Es fácil usar las transciones para hacer que el efecto sea aún más atractivo.

- -

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

- -

Primero configuramos el menú usando HTML:

- -
<div class="sidebar">
-  <p><a class="menuButton" href="home">Inicio</a></p>
-  <p><a class="menuButton" href="about">Acerca de</a></p>
-  <p><a class="menuButton" href="contact">Contacto Us</a></p>
-  <p><a class="menuButton" href="links">Vínculos</a></p>
-</div>
-
- -

Después construimos la CSS para implementar el aspecto de nuestro menú. Las porciones relevantes se muestran a continuación:

- -
.menuButton {
-  position: relative;
-  transition-property: background-color, color;
-  transition-duration: 1s;
-  transition-timing-function: ease-out;
-  -webkit-transition-property: background-color, color;
-  -webkit-transition-duration: 1s;
-  -o-transition-property: background-color, color;
-  -o-transition-duration: 1s;
-  text-align: left;
-  background-color: grey;
-  left: 5px;
-  top: 5px;
-  height: 26px;
-  color: white;
-  border-color: black;
-  font-family: sans-serif;
-  font-size: 20px;
-  text-decoration: none;
-  -moz-box-shadow: 2px 2px 1px black;
-  padding: 2px 4px;
-  border: solid 1px black;
-}
-
-.menuButton:hover {
-  position: relative;
-  transition-property: background-color, color;
-  transition-duration: 1s;
-  transition-timing-function: ease-out;
-  -webkit-transition-property: background-color, color;
-  -webkit-transition-duration: 1s;
-  -o-transition-property: background-color, color;
-  -o-transition-duration: 1s;
-  background-color:white;
-  color:black;
-  -moz-box-shadow: 2px 2px 1px black;
-}
-
- -

Esta CSS establece el aspecto del menú con los colores de fondo y del texto que cambian cuando el elemento está en su estado {{ cssxref(":hover") }}.

- -

En lugar de describir el efecto con todo detalle, puedes echar un vistazo a la muestra en vivo si tu navegador admite transiciones (Firefox y WebKit nightlies, Opera 10.5).

- -

Usar eventos de transición para animar un objeto

- -

En este ejemplo, una pequeña caja con texto dentro se mueve hacia atrás y hacia delante a través de la pantalla y los colores de fondo y del texto se difuminan entre dos valores mientras tiene lugar la animación.

- -

- -

- - - -

Antes de que miremos los fragmentos de código, tal vez desees echar un vistazo a la demo en vivo (suponiendo que tu navegador admita transiciones). También puedes echar un vistazo directamente a la CSS que usa.

- -

El HTML

- -

El HTML para este ejemplo es muy sencillo:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>CSS Transition Demo</title>
-    <link rel="stylesheet" href="transitions.css" type="text/css">
-    <script src="transitions.js" type="text/javascript"></script>
-  </head>
-  <body onload="runDemo()">
-    <div class="slideRight">¡Esto es una caja!</div>
-  </body>
-</html>
-
- -

Lo único que hay que observar aquí es que establecemos la clase para nuestra caja en "slideRight" inicialmente y cuando el documento haya terminado de cargarse, se ejecuta la función runDemo() del código JavaScript.

- -

La CSS

- -

Para crear nuestro efecto de animación, usamos dos clases de CSS, "slideRight" y "slideLeft". Si deseas ver el código completo de CSS, puedes mirar el archivo transitions.css en su totalidad. A continuación se muestran sólo los trozos relevantes:

- -
.slideRight {
-  position: absolute;
-  transition-property: background-color, color, left;
-  transition-duration: 5s;
-  -webkit-transition-property: background-color, color, left;
-  -webkit-transition-duration: 5s;
-  -o-transition-property: background-color, color, left;
-  -o-transition-duration: 5s;
-  background-color: red;
-  left: 0%;
-  color: black;
-}
-
- -

Observa que aquí especificamos de manera explícita la propiedad de posición. Esto es necesario porque sólo aquellos elementos cuya propiedad de posición se defina de manera expresa pueden animar su posición.

- -

La propiedad {{ cssxref("transition-property") }} se usa para enumerar las propiedades CSS que deseamos animar. En este caso, las propiedades que se van a animar son {{ cssxref("background-color") }}, {{ cssxref("color") }} y {{ cssxref("left") }}. La propiedad {{ cssxref("transition-duration") }} indica que deseamos que la animación tarde 5 segundos desde que comienza hasta que termina.

- -

Se incluyen los equivalentes WebKit y Opera para permitir que el ejemplo funcione en el software correspondiente.

- -

La clase "slideRight" se usa para especificar el punto de inicio para que la animación desplace el elemento desde el borde izquierdo hasta el borde derecho de la ventana del navegador. Como tal, define la posición y el color del elemento cuando está al principio de la secuencia de animación; concretamente, el valor para su propiedad {{ cssxref("left") }} es 0%, lo que indica que comenzará en el borde izquierdo de la ventana.

- -

Se muestra a continuación la clase "slideLeft", que define el punto final de la animación, es decir, el punto en el que concluirá la animación de izquierda a derecha y cambiaremos a una animación de derecha a izquierda.

- -
.slideLeft {
-  position: absolute;
-  transition-property: background-color, color, left;
-  transition-duration: 5s;
-  -webkit-transition-property: background-color, color, left;
-  -webkit-transition-duration: 5s;
-  -o-transition-property: background-color, color, left;
-  -o-transition-duration: 5s;
-  text-align: center;
-  background-color: blue;
-  left: 90%;
-  color: white;
-  width: 100px;
-  height: 100px;
-}
-
- -

Los valores de color aquí se han cambiado para hacer que los colores de fondo y del texto cambien durante el tiempo de la secuencia de animación. Además de esto, la propiedad {{ cssxref("left") }} está aquí al 90%.

- -

El código JavaScript

- -

Una vez que hemos establecido los extremos de la secuencia de animación, lo que tenemos que hacer es iniciar la animación. Podemos hacerlo fácilmente usando JavaScript.

- -
Nota: una vez que la compatibilidad para las animaciones CSS esté disponible, el código JavaScript no será necesario para lograr este efecto.
- -

En primer lugar, la función runDemo() que se llama cuando el documento se carga para inicializar la secuencia de animación:

- -
function runDemo() {
-  var el = updateTransition();
-
-  // Configurar un controlador de eventos para invertir la dirección
-  // cuando finalice la transición.
-
-  el.addEventListener("transitionend", updateTransition, true);
-}
-
- -

Es bastante sencillo: llama a la función updateTranslation() que definiremos enseguida, cuyo trabajo es establecer la clase para el elemento que estamos animando según la dirección en la que queramos que viaje. A continuación configura un proceso de escucha de evento para observar el evento "transitionend" que se envía cuando se completa una transición; esto nos permite saber cuándo es el momento para cambiar la clase del elemento para revertir la dirección de la animación.

- -

La función updateTransition() tiene este aspecto:

- -
function updateTransition() {
-  var el = document.querySelector("div.slideLeft");
-
-  if (el) {
-    el.className = "slideRight";
-  } else {
-    el = document.querySelector("div.slideRight");
-    el.className = "slideLeft";
-  }
-
-  return el;
-}
-
- -

Esto ubica el elemento que estamos animando al buscarlo por su nombre de clase (aquí podríamos usar una id, por supuesto, pero seguidme la corriente). En primer lugar buscamos el nombre de la clase "slideLeft". Si se encuentra, cambiamos la clase del elemento a "slideRight". Esto iniciará la transición de derecha a izquierda, puesto que es el momento de que se deslice a la izquierda si el elemento está ya en el borde derecho, que será cuando llegue el evento "transitionend" y la clase del elemento sea "slideLeft" (se deslice a la izquierda).

- -

Si no se halla ningún elemento que coincida con la clase "slideLeft", buscamos el elemento que coincida con "slideRight" y cambiamos su clase a "slideLeft", comenzando de ese modo la animación en la dirección contraria.

- -

Compatibilidad de navegadores

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavegadoresCompatibilidad básicaPropiedadEvento de transición finalizada
Internet Explorer(ninguna, a partir de IE9 pp7)------
Firefox (Gecko)4.0 (2.0)-moz-transitiontransitionend
Opera10.5-o-transitionOTransitionEnd
Safari | Chrome | WebKit3.2 | yes | yes-webkit-transitionwebkitTransitionEnd
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FuncionalidadChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FuncionalidadAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Compatibilidad básica{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Consultar también

- -
    -
  • Módulo de transiciones CSS nivel 3
    • -
  • {{ cssxref("-moz-transition") }}
    • -
  • {{ cssxref("-moz-transition-property") }}
    • -
  • {{ cssxref("-moz-transition-duration") }}
    • -
  • {{ cssxref("-moz-transition-timing-function") }}
    • -
  • {{ cssxref("-moz-transition-delay") }}
    • -
- -

{{ HTML5ArticleTOC() }}

- -

{{ languages( { "en": "en/CSS/CSS_transitions" } ) }}

diff --git a/files/es/web/css/url()/index.html b/files/es/web/css/url()/index.html new file mode 100644 index 0000000000..2ec8f41bf0 --- /dev/null +++ b/files/es/web/css/url()/index.html @@ -0,0 +1,33 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Referencia +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +--- +
{{cssref}}
+ +

La función de CSS url() usa un filtro SVG para cambiar la apariencia en la imagen de entrada.

+ +

Sintaxis

+ +
url(location)
+ +

Parámetros

+ +
+
location
+
La {{cssxref("<url>")}} de un archivo {{glossary("XML")}} que especifique un filtro SVG, y puede incluir un ancla a un elemento filtro específico.
+
+ +

Ejemplo

+ +
url(resources.svg#c1)
+ +

Ver también

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/es/web/css/user-modify/index.html b/files/es/web/css/user-modify/index.html new file mode 100644 index 0000000000..21b9593d93 --- /dev/null +++ b/files/es/web/css/user-modify/index.html @@ -0,0 +1,132 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - No estándar(2) + - Referencia CSS +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Resumen

+ +

La propiedad -moz-user-modify determina si el contenido de un elemento puede ser editado por el usuario. Se relaciona con el atributo {{htmlattrxref("contenteditable")}} .  user-focus , que es una propiedad similar, fue propuesta como parte de los borradores iniciales de un predecesor de la especificación CSS3 UI ,pero fue rechazada por el grupo de trabajo.

+ +

{{cssinfo}}

+ +

Síntaxis

+ +
/* Palabras clave valor */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Valores globales */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Valores

+ +
+
read-only
+
Valor por defecto. El contenido sólo se puede leer.
+
read-write
+
El usuario puede leer y escribir contenidos.
+
write-only
+
El usuario puede editar el contenido pero no leerlo.
+
+ +

Síntaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">El usuario puede cambiar este texto.</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Example", 300, 30)}}

+ +

Especificaciones

+ +

user-modify en una versión inicial de la especificación CSS 3 UI (Borrador de trabajo Febrero del 2000, Working Draft February 2000 que ya ha sido reeemplazado por CSS 3 UI)

+ +

Compatibilidad con los distintos navegadores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte básico{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] También soporta: -webkit-user-modify: read-write-plaintext-only (Se perderá el texto enriquecido).
+ Esta propiedad se llamó  -khtml-user-modify en Safari 2.0.

+ +

Ver además

+ +
    +
  • {{cssxref("-moz-user-focus")}}
    • +
  • {{cssxref("-moz-user-input")}}
    • +
  • {{cssxref("-moz-user-select")}}
    • +
diff --git a/files/es/web/css/valor_calculado/index.html b/files/es/web/css/valor_calculado/index.html deleted file mode 100644 index 9112bf97b5..0000000000 --- a/files/es/web/css/valor_calculado/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Valor calculado -slug: Web/CSS/Valor_calculado -tags: - - Referencia_CSS -translation_of: Web/CSS/computed_value ---- -


- {{ CSSRef() }}

-

Sumario

-

El valor computed value de una propiedad CSS es computado a partir de specified value de la siguiente forma:

-
    -
  • Mediante los valores especiales inherit y initial, y
    • -
  • Realizando el cómputo necesario para alcanzar el valor descrito en la línea de "Computed value" del sumario de la propiedad.
    • -
-

El cálculo necesario para el "Computed value" de una propiedad, normalmente implica convertir valores relativos (como los expresados en unidades 'em' o en porcentajes) a valores absolutos.

-

Por ejemplo: si un elemento tiene un valor especificado de font-size: 16px y padding-top: 2em, el valor computado de padding-top es 32px (el doble del tamaño de la fuente).

-

Sin embargo, para algunas propiedades (aquellas con porcentajes relativos a algo que necesita un formato para ser determinados, tales como width, margin-right, text-indent, y top) los valores especificados en porcentajes se tornan valores computados. Ademas,los números especificados sin unidades en la propiedad line-height se convierten en valores computados, según se especifica. Estos valores relativos que quedan tras realizar el cómputo, se hacen absolutos cuando se determina el used value.

-

El uso principal de computed value (ademas de ser un paso de transición entre specified value y used value) es inheritance, incluyendo la palabra clave inherit.

-

Notas

-

La API DOM getComputedStyle devuelve used value, en lugar de computed value.

-

Ver también

-

specified value, used value, actual value

-

 

-

 

-

 

-

 

-
-  
-

{{ languages( { "en": "en/CSS/computed_value", "fr": "fr/CSS/Valeur_calcul\u00e9e", "ja": "ja/CSS/computed_value", "pl": "pl/CSS/warto\u015b\u0107_wyliczona" } ) }}

diff --git a/files/es/web/css/valor_inicial/index.html b/files/es/web/css/valor_inicial/index.html deleted file mode 100644 index a6bbcdf32d..0000000000 --- a/files/es/web/css/valor_inicial/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Valor inicial -slug: Web/CSS/Valor_inicial -tags: - - CSS - - 'CSS:Referencias' - - Todas_las_Categorías -translation_of: Web/CSS/initial_value ---- -

-

<< Volver -

-

Resumen

-

El Valor inicial dado en el resumen de cada definición de propiedad CSS tiene un significado distinto según se trate de propiedades heredadas o no heredadas. -

Para propiedades heredadas, se usa el valor inicial, para el elemento raíz solamente, cuando no se ha especificado ningún valor para el elemento.

Para propiedades no heredadas se usa el valor inicial para todos los elementos, cuando no se especificó nigún valor para el elemento.

En CSS3 se propuso el valor initial para permitir a los autores especificar explícitamente éste valor inicial. -

-

Ver también

-

Propiedades heredadas y no heredadas, initial -


-

-
-

Categorías -

Interwiki Languages -

-
-{{ languages( { "en": "en/CSS/initial_value", "fr": "fr/CSS/Valeur_initiale", "ja": "ja/CSS/initial_value", "ko": "ko/CSS/initial_value", "pl": "pl/CSS/Warto\u015b\u0107_pocz\u0105tkowa" } ) }} diff --git a/files/es/web/css/value_definition_syntax/index.html b/files/es/web/css/value_definition_syntax/index.html new file mode 100644 index 0000000000..90d5ea8b75 --- /dev/null +++ b/files/es/web/css/value_definition_syntax/index.html @@ -0,0 +1,402 @@ +--- +title: Sintaxis de definición de valor +slug: Web/CSS/Sintaxis_definición_de_valor +translation_of: Web/CSS/Value_definition_syntax +--- +

{{CSSRef()}}

+ +

La sintaxis de definición de valores CSS, una gramática formal, se utiliza para definir el conjunto de valores válidos para una propiedad o función CSS. Además de esta sintaxis, el conjunto de valores válidos puede restringirse aún más mediante restricciones semánticas (por ejemplo, para que un número sea estrictamente positivo).

+ +

La sintaxis de definición describe qué valores están permitidos y las interacciones entre ellos. Un componente puede ser una palabra clave, algunos caracteres literales, ó un valor de tipo de dato de CSS o propiedad CSS.

+ +

Tipos de valor de los componentes

+ +

Palabras clave

+ +

Palabras clave genéricas

+ +

Una palabra clave con significado predefinido aparece literalmente, sin comillas, por ejemplo: auto, smaller or ease-in.

+ +

El caso específico de inherit e initial

+ +

Todas las propiedades CSS aceptan las palabras clave inherit e initial que son definidas vía CSS. Estas no son mostradas en la definición del valor y están implícitamente definidas.

+ +

Literales

+ +

En CSS, unos pocos caracteres pueden aparecer por su cuenta, como la barra ('/') o la coma (','), y son usadas en una propiedad o definición para separar sus partes. La coma es a menudo usada para separar valores en enumeraciones, o parámetros en funciones de tipo matemático; la barra a menudo separa partes de el valor que es semánticamente diferente, pero que tiene una sintaxis común. Típicamente, la barra es usada a veces en propiedades abreviadas para separar componentes que son del mismo tipo, pero pertenecen a diferentes propiedades.

+ +

Ambos símbolos aparecen literalmente en una definición de valor.

+ +

Tipos de dato

+ +

Tipos de dato básicos

+ +

Un tipo de dato usado vía CSS es definido una sola vez para todos los valores en la especificación. Se llaman tipos de datos básicos, estan representados por su nombre rodeados del símbolo '<' y '>': {{ cssxref("<angle>") }}, {{cssxref("<string>")}}, …

+ +

Tipos de dato no terminales

+ +

Tipos de dato poco comunes, llamados tipos de datos no terminales, están también rodeados por  '<' y '>'.

+ +

Los tipos de dato no terminales son de dos tipos::

+ +
    +
  • tipos de datos que comparten el mismo nombre de propiedad, colocados entre comillas . En este caso el tipo de dato comparte el mismo conjunto de valores de la propiedad. A menudo son usados en la definición de propiedades abreviadas.
    • +
  • tipos de datos que no comparten el mismo nombre de la propiedad. Estos tipos de datos son muy cercanos a sus tipos de datos básicos. Ellos solo difieren de los tipos de datos básicos en la ubicación física de su definición: en este caso la definición es usualmente físicamente muy cercana a la definición de la propiedad que la esta usando.
    • +
+ +

Combinadores de los valores de componentes

+ +

Corchetes

+ +

Corchetes encierran varias entidades, combinadores, y multiplicadores, luego los transforman en un solo componente. Son usados para agrupar componentes para sobreescribir las reglas de precedencia.

+ +
bold [ thin && <length> ]
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold thin 2vh
    • +
  • bold 0 thin
    • +
  • bold thin 3.5em
    • +
+ +

Pero no con:

+ +
    +
  • thin bold 3em,  porque bold esta yuxtapuesto con el componente definido por los corchetes, debe aparecer antes de él.
    • +
+ +

Yuxtaposición

+ +

Colocar varias palabras clave, literales, o tipos de datos, uno al lado del otro, solo separados por uno o varios espacios se llama yuxtaponer. Todos los componentes yuxtapuestos son obligatorios y deben aparecer en ese orden exacto.

+ +
bold <length> , thin
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em, thin
    • +
  • bold 0, thin
    • +
  • bold 2.5cm, thin
    • +
  • bold 3vh, thin
    • +
+ +

Pero no con:

+ +
    +
  • thin 1em, bold porque las entidades deben aparecer en el orden expresado
    • +
  • bold 1em thin porque las entidades son obligatorias; la coma que es un literal debe estar presente
    • +
  • bold 0.5ms, thin porque los valores ms no son de tipo {{cssxref("<length>")}}
    • +
+ +

Doble ampersand

+ +

Separar dos o mas componentes por un doble ampersand, &&, significa que todas esas entidades son obligatorias pero pueden aparecer en cualquier orden.

+ +
bold && <length>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold 1em
    • +
  • bold 0
    • +
  • 2.5cm bold
    • +
  • 3vh bold
    • +
+ +

Pero no con:

+ +
    +
  • bold porque ambos componentes deben aparecer en el valor
    • +
  • bold 1em bold porque ambos componentes deben aparecer solo una vez
    • +
+ +
Nota: yuxtaposición tiene precedencia sobre el doble ampersand, esto quiere decir que bold thin && <length> es equivalente a [ bold thin ] && <length>. Que describe a bold thin <length> ó <length> bold thin pero no a  bold <length> thin.
+ +

Barra doble

+ +

Separar dos o mas componentes por una barra doble, ||, significa que todas las entidades son opcionales: al menos una debe estar presente, y pueden aparecer en cualquier orden. Típicamente ésto es usado para definir los diferentes valores de una propiedad abreviada.

+ +
<'border-width'> || <'border-style'> || <'border-color'>
+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 1em solid blue
    • +
  • blue 1em
    • +
  • solid 1px yellow
    • +
+ +

Pero no con:

+ +
    +
  • blue yellow porque un componente debe aparecer al menos una vez.
    • +
  • bold  porque no es una palabra clave permitida como valor de ninguna de las entidades.
    • +
+ +
Nota: el doble ampersand tiene precedencia sobre la barra doble, que significa que bold || thin && <length> es equivalente a bold || [ thin && <length> ]. Describe a bold, thin, <length>, bold thin, <length> bold, o thin <length> bold pero no bold <length> bold thin porque bold, si no es omitido debe colocarse antes o después de el componente thin && <length>
+ +

Barra simple

+ +

Separar dos o mas componentes con una barra simple, |, quiere decir que todas las entidades son opciones exclusivas: exactamente una de estas opciones debe estar presente. Esto es tipicamente usado para separar una lista de posibles palabras clave.

+ +
<percentage> | <length> | left | center | right | top | bottom
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • 3%
    • +
  • 0
    • +
  • 3.5em
    • +
  • left
    • +
  • center
    • +
  • right
    • +
  • top
    • +
  • bottom
    • +
+ +

Pero no

+ +
    +
  • center 3% porque solo uno de los componentes debe estar presente
    • +
  • 3em 4.5em porque un componente debe estar presente máximo una vez.
    • +
+ +
+

Note: la barra doble tiene precedencia sobre la barra simple, quiere decir que bold | thin || <length> es equivalente a bold | [ thin || <length> ]. Describe bold, thin, <length>, <length> thin, o thin <length> pero no bold <length> porque solo una entidad de cada lado del combinador | puede estar presente.

+
+ +

Multiplicadores de valores de componentes

+ +

Un multiplicador es un símbolo que indica cuantas veces una entidad precedente puede ser repetida. Sin un multiplicador, una entidad debe aparecer exactamente una vez.

+ +

Note que los multiplicadores no pueden sumarse y tienen precedencia sobre los combinadores.

+ +

Asterisco (*)

+ +

El multiplicador asterisco indica que la entidad puede aparecer cero, una o varias veces.

+ +
bold smaller*
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de la palabra clave smaller
    • +
+ +

Suma (+)

+ +

El multiplicador suma indica que la entidad puede aparecer una o varias veces.

+ +
bold smaller+
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller y sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Pregunta (?)

+ +

El multiplicador pregunta indica que la entidad es opcional y debe aparecer cero o una vez

+ +
bold smaller?
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold
    • +
  • bold smaller
    • +
+ +

Pero no:

+ +
    +
  • bold smaller smaller porque smaller debe aparecer como máximo una vez
    • +
  • smaller bold porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Llaves ({ })

+ +

El multiplicador llaves, encierra a dos enteros A y B separados  por una coma, indica que la entidad debe aparecer al menos A veces y como mas B veces

+ +
bold smaller{1,3}
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller smaller
    • +
  • bold smaller smaller smaller
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller smaller porque smaller debe aparecer un máximo de tres veces.
    • +
  • smaller bold porque bold esta yuxtapuesto u debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Hash (#)

+ +

El multiplicador hash indica que la entidad puede repetirse una o mas veces (como con el multiplicador de suma) pero cada ocurrencia se separa por una coma (',').

+ +
bold smaller#
+ +

El ejemplo empareja con los siguientes valores:

+ +
    +
  • bold smaller
    • +
  • bold smaller, smaller
    • +
  • bold smaller, smaller, smaller y así sucesivamente
    • +
+ +

Pero no:

+ +
    +
  • bold porque smaller debe aparecer al menos una vez
    • +
  • bold smaller smaller smaller porque las diferentes ocurrencias de smaller deben estar separadas por comas
    • +
  • smaller porque bold esta yuxtapuesto y debe aparecer antes de cualquier palabra clave smaller
    • +
+ +

Sumario

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SímboloNombreDescripciónEjemplo
Combinadores
 YuxtaposiciónComponentes obligatorios que deben aparecer en el mismo ordensolid <length>
&&Doble ampersandComponentes obligatorios pero que pueden aparecer en cualquier ordenlength> && <string>
||Barra dobleAl menos uno de los componentes debe estar presente, y pueden aparecer en cualquier orden<'border-image-outset'> || <'border-image-slice'>
|Barra simpleExactamente uno de los componentes debe estar presentesmaller | small | normal | big | bigger
[ ]CorchetesAgrupa componentes para sobreescribir las reglas de precedenciabold [ thin && <length> ]
Multiplicadores
 Sin multiplicadorExactamente 1 vezsolid
*Asterisco0 or more timesbold smaller*
+Suma1 o mas vecesbold smaller+
?Pregunta0 o 1 vez (es opcional)bold smaller?
{A,B}LlavesAl menos A veces, como mas B vecesbold smaller{1,3}
#Hash1 o mas veces, pero cada ocurrencia separada por una coma (',')bold smaller#
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Values', '#value-defs', 'Value definition syntax') }}{{ Spec2('CSS3 Values') }}Desde {{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}, añade el multiplicador hash
{{ SpecName('CSS2.1', 'about.html#value-defs', 'Value definition syntax') }}{{ Spec2('CSS2.1') }}Desde {{ SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}, añade el combinador doble ampersand
{{SpecName('CSS1', '#notation-for-property-values', 'Value definition syntax') }}{{ Spec2('CSS1') }}Definición inicial
+ +

Vea también

+ +
    +
  • {{ CSS_key_concepts() }}
    • +
diff --git a/files/es/web/events/abort/index.html b/files/es/web/events/abort/index.html deleted file mode 100644 index 641d144c77..0000000000 --- a/files/es/web/events/abort/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

The abort event is fired when the loading of a resource has been aborted.

- -

Información general

- -
-
Specification
-
DOM L3
-
Interface
-
UIEvent if generated from a user interface, Event otherwise.
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe event target (the topmost target in the DOM tree).
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not.
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not.
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
diff --git a/files/es/web/events/animationend/index.html b/files/es/web/events/animationend/index.html deleted file mode 100644 index 8bca8b046f..0000000000 --- a/files/es/web/events/animationend/index.html +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: animationend -slug: Web/Events/animationend -translation_of: Web/API/HTMLElement/animationend_event ---- -

El evento animationend es lanzado cuando una animación CSS se ha completado.

- -

Información General

- -
-
Especificación
-
CSS Animations
-
Interface
-
AnimationEvent
-
Bubbles
-
Si
-
Cancelable
-
No
-
Target
-
Document, Element
-
Acción por defecto
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{ReadOnlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{ReadOnlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{ReadOnlyInline}}booleanDoes the event normally bubble?
cancelable {{ReadOnlyInline}}booleanIs it possible to cancel the event?
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{ReadOnlyInline}}FloatThe amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused. For an "animationstart" event, the elapsedTime is zero unless there was a negative value for animation-delay, in which case the event will be fired with an elapsedTime of (-1 * delay).
- -

Eventos relacionados

- -
    -
  • {{Event("animationstart")}}
    • -
  • {{Event("animationend")}}
    • -
  • {{Event("animationiteration")}}
    • -
- -

Ver también

- - diff --git a/files/es/web/events/beforeunload/index.html b/files/es/web/events/beforeunload/index.html deleted file mode 100644 index 98fb747ae9..0000000000 --- a/files/es/web/events/beforeunload/index.html +++ /dev/null @@ -1,215 +0,0 @@ ---- -title: beforeunload -slug: Web/Events/beforeunload -translation_of: Web/API/Window/beforeunload_event ---- -
El evento beforeunload es disparado cuando la ventana, el documento y sus recursos estan a punto de ser descargados. El documento todavia es visible y el evento todavia es cancelable en este punto.
- -
 
- -

Si es asignado un string a la propiedad del objeto Evento returnValue, una caja de dialogo aparece, preguntando al usuario que confirme que dejara la pagina(mirar el ejemplo de abajo).  Algunos navegadores muestran el string devuelto en una caja de dialogos, otros muestran un mensaje fijo. Si no se provee ningun valor, el evento procede silenciosamente.

- -
-

Nota:Para combatir pop-ups indeseados, los navegadores pueden no mostrar mensajes creados en manejadores del evento beforeunload a menos que se haya interactuado con la pagina, o incluso sin que se haya interactuado en nada con esta.

-
- - - - - - - - - - - - - - - - - - - - -
BurbujasNo
CancelableSi
Objetos de destinodefaultView
Interfaz{{domxref("Event")}}
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripcion
target {{readOnlyInline}}{{domxref("EventTarget")}}El evento objetivo(el objetivo superior en el arbol del DOM).
type {{readOnlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readOnlyInline}}{{jsxref("Boolean")}}El evento normalmente burbujea?
cancelable {{readOnlyInline}}{{jsxref("Boolean")}}Es posible cancelar el evento?
returnValue{{domxref("DOMString")}}El valor actual devuelto por el evento (el mensaje que se le mostrara al usuario).
- -

Ejemplos

- -
window.addEventListener("beforeunload", function (event) {
-  event.returnValue = "\o/";
-});
-
-// es equivalente a
-window.addEventListener("beforeunload", function (event) {
-  event.preventDefault();
-});
- -

Navegadores basados en WebKit no siguen las especificaciones para la caja de dialogos. Un ejemplo que funcione con distintos navegadores seria similar al siguiente:

- -
window.addEventListener("beforeunload", function (e) {
-  var confirmationMessage = "\o/";
-
-  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
-  return confirmationMessage;              // Gecko, WebKit, Chrome <34
-});
- -

Notas

- -

A partir del 25 de Mayo del 2011, la especificion HTML5 establece que llamadas a los metodos {{domxref("window.alert()")}}, {{domxref("window.confirm()")}}, y {{domxref("window.prompt()")}}pueden ser ignoradas durante este evento.Mire las especificaciones de HTML5 para mas detalles.

- -

Varios navegadores ignoran el resultado del evento y no le preguntan al usuario por confirmacion en absoluto. El documento siempre se descargara automaticamente. Firefox tiene un switch llamado dom.disable_beforeunload en about:config  para habilitar este comportamiento.

- -

Usando este manejador de evento tu pagina previene que Firefox cambie el cache de la pagina a uno en memoria bfcache. Mire Usando el almacenamiento en cache Firefox 1.5 para detalles.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificacionEstadoComentario
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Definicion inicial
- -

Compatibilidad con navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracteristicaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte basico{{CompatChrome(1.0)}}{{CompatVersionUnknown}}14123
Texto personalizado soporte removido{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}} 389.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracteristicaAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Soporte basico{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}(no) defect{{CompatVersionUnknown}}
Texto personalizado soporte removido{{CompatUnknown}}{{CompatChrome(51.0)}}{{CompatNo}}{{CompatGeckoMobile("44.0")}}   {{CompatChrome(51.0)}}
-
- -

Mire tambien

- - diff --git a/files/es/web/events/blur/index.html b/files/es/web/events/blur/index.html deleted file mode 100644 index b54ad3e6a6..0000000000 --- a/files/es/web/events/blur/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: blur (evento) -slug: Web/Events/blur -tags: - - DOM -translation_of: Web/API/Element/blur_event ---- -

El evento blur es disparado cuando un elemento ha perdido su foco. La diferencia principal entre este evento y focusout es que sólo el último se propaga (bubbles).

- -

Información General

- -
-
Especificación
-
DOM L3
-
Interfaz
-
{{domxref("FocusEvent")}}
-
Burbujas
-
No
-
Cancelable
-
No
-
Objetivo
-
Element
-
Acción por defecto
-
Ninguna.
-
- -

{{NoteStart}}El valor de  {{domxref("Document.activeElement")}} varía a traves de navegadores mientras este evento está siendo manejado ({{bug(452307)}}): IE10 lo agrega al elemento al cual el foco se movera, mientras Firefox y Chrome muy seguido lo agregan al cuerpo del documento.{{NoteEnd}}

- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}Objetivo del evento (elemento DOM)
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Si el elemento normalmente se propaga o no.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Si el evento es cancelable o no.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

Delegación de eventos

- -

Hay dos maneras de implementar la delegación de eventos para este evento: usando el evento focusout en exploradores que lo soporten, o cambiando el parámetro "useCapture" de addEventListener a true:

- -

Contenido HTML

- -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
- -

Contenido JavaScript

- -
var form = document.getElementById("form");
-form.addEventListener("focus", function( event ) {
-  event.target.style.background = "pink";
-}, true);
-form.addEventListener("blur", function( event ) {
-  event.target.style.background = "";
-}, true);
- -

{{EmbedLiveSample('Delegación_de_eventos')}}

- -

Compatibilidad en navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome para AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
-
- -

[1] Antes de Gecko 24 {{geckoRelease(24)}} la interfaz para este evento era {{domxref("Event")}}, no {{domxref("FocusEvent")}}. Vea ({{bug(855741)}}).

- -

Eventos relacionados

- -
    -
  • {{event("focus")}}
    • -
  • {{event("blur")}}
    • -
  • {{event("focusin")}}
    • -
  • {{event("focusout")}}
    • -
diff --git a/files/es/web/events/domcontentloaded/index.html b/files/es/web/events/domcontentloaded/index.html deleted file mode 100644 index ffbf3accbc..0000000000 --- a/files/es/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

El evento DOMContentLoaded es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para  finalizar la carga. Un evento muy diferente - load - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar load cuando DOMContentLoaded sería mucho más apropiado, así que úsalo con cuidado.

- -

JavaScript síncrono pausa el parseo del DOM.

- -

También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.

- -

Speeding up

- -

If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your JavaScript asynchronous and to optimize loading of stylesheets which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.

- -

General info

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
Yes
-
Cancelable
-
Yes (although specified as a simple event that isn't cancelable)
-
Target
-
Document
-
Default Action
-
None.
-
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Example

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-</script>
-
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-    console.log("DOM fully loaded and parsed");
-  });
-
-for(var i=0; i<1000000000; i++)
-{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later.
-</script>
-
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0[1]{{CompatGeckoDesktop("1")}}[1]9.0[2]9.03.1[1]
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoMobile("1")}}[1]{{CompatUnknown}}[2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]
-
- -

[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.

- -

[2] Internet Explorer 8 supports the readystatechange event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute document.documentElement.doScroll("left");, as this snippet will throw an error until the DOM is ready.

- - - -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/es/web/events/load/index.html b/files/es/web/events/load/index.html deleted file mode 100644 index f38e214839..0000000000 --- a/files/es/web/events/load/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - Evento -translation_of: Web/API/Window/load_event ---- -

El evento load se dispara cuando un recurso y sus recursos dependientes han terminado de cargar.

- -

 

- -

Ejemplos

- -

Window

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("'Todos los recursos terminaron de cargar!");
-  });
-</script>
- -

Elemento script

- -
<script>
-  var script = document.createElement("script");
-  script.addEventListener("load", function(event) {
-    console.log("Script terminó de cargarse y ejecutarse");
-  });
-  script.src = "http://example.com/example.js";
-  script.async = true;
-  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
-</script>
- -

Información general

- -
-
Especificación
-
DOM L3
-
Interfaz
-
UIEvent
-
Propagación
-
No
-
Cancelable
-
No
-
Objetivo
-
Window,Document,Element
-
Por defecto Acción
-
None.
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{readonlyInline}}{{domxref("EventTarget")}}El objetivo del evento (el objetivo superior en el árbol DOM).
type {{readonlyInline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Si el elemento normalmente se propaga (bubbles) o no.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Si el evento es cancelable o no.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window del documento)
detail {{readonlyInline}}long (float)0.
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}}Esto enlaza con la sección en los pasos que se llevan a cabo al final de cargar un documento. Los eventos 'load' también se disparan a muchos elementos. Y tenga en cuenta que hay muchos lugares en la especificación que hacen referencia a cosas que pueden "retrasar el evento de carga".
- -

Eventos relacionados

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/es/web/events/loadend/index.html b/files/es/web/events/loadend/index.html deleted file mode 100644 index 39e528634d..0000000000 --- a/files/es/web/events/loadend/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: loadend -slug: Web/Events/loadend -tags: - - eventos -translation_of: Web/API/XMLHttpRequest/loadend_event ---- -

El evento loadend es emitido cuando el progreso de la carga de un recurso se ha detenido (e.g. despues que "error", "abort", o "load" han sido emitidos). Por ejemplo, esto aplica a las llamadas de {{domxref("XMLHttpRequest")}}, y al contenido de un elemento {{htmlelement("img")}} o {{htmlelement("video")}}.

- -

Información General

- -
-
Especificación
-
Progress
-
Interfaz
-
ProgressEvent
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
{{domxref("HTMLImageElement")}}, Por Ejemplo
-
Acción por Defecto
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
- -

Eventos Relacionados

- -
    -
  • {{event("loadstart")}}
    • -
  • {{event("progress")}}
    • -
  • {{event("error")}}
    • -
  • {{event("abort")}}
    • -
  • {{event("load")}}
    • -
  • {{event("loadend")}}
    • -
- -

Ver También

- - diff --git a/files/es/web/events/pointerlockchange/index.html b/files/es/web/events/pointerlockchange/index.html deleted file mode 100644 index 2d5af4205b..0000000000 --- a/files/es/web/events/pointerlockchange/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: pointerlockchange -slug: Web/Events/pointerlockchange -translation_of: Web/API/Document/pointerlockchange_event ---- -

El evento pointerlockchange es disparado cuando el cursor del navegador es bloqueado o desbloqueado.

- -

Información general

- -
-
Specification
-
Pointer Lock
-
Interface
-
Event
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Document
-
Default Action
-
None
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

Ejemplo

- -
//Ten en cuenta que el nombre del evento, en este caso "pointerlockchange" puede variar según el navegador.
-document.addEventListener("pointerlockchange", function( event ) {
-    // El objetivo, parámetro "target", del objeto "event" es siempre el objeto "document".
-    // para recuperar el objeto que recibe el bloqueo/desbloqueo es document.pointerlockElement.
-    document.pointerLockElement;
-
-});
-
- -

Eventos relacionados

- - - -

Véase también:

- - diff --git a/files/es/web/events/transitioncancel/index.html b/files/es/web/events/transitioncancel/index.html deleted file mode 100644 index 3f9c622bd2..0000000000 --- a/files/es/web/events/transitioncancel/index.html +++ /dev/null @@ -1,163 +0,0 @@ ---- -title: transitioncancel -slug: Web/Events/transitioncancel -tags: - - DOM - - Evento - - Referencia - - eventos -translation_of: Web/API/HTMLElement/transitioncancel_event ---- -

{{SeeCompatTable}}

- -

El evento transitioncancel es lanzado cuando una transición CSS es cancelada.

- -

Véase {{domxref("GlobalEventHandlers.ontransitioncancel")}} para mas información y ejemplos.

- -

Información general

- -
-
Interfaz
-
{{domxref("TransitionEvent")}}
-
Burbuja
-
Sí
-
Cancelable
-
No
-
Objetivo
-
{{domxref("document")}}, {{domxref("element")}}
-
Acción por defecto
-
Ninguna
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropiedadTipoDescripción
target {{readonlyinline}}{{domxref("EventTarget")}}El objetivo del evento (the topmost target in the DOM tree).
type {{readonlyinline}}{{domxref("DOMString")}}El tipo de evento.
bubbles {{readonlyinline}}{{domxref("Boolean")}}Si el evento normalmente se propaga o no
cancelable {{readonlyinline}}{{domxref("Boolean")}}Si el evento es cancelable o no
propertyName{{readonlyinline}}{{domxref("DOMString")}}El nombre de la propiedad CSS asociada con la transición.
elapsedTime{{readonlyinline}}{{domxref("Float")}} -

La cantidad de tiempo que ha durado la transición, en segundos, desde el momento en que el evento fué generado. Este valor no se ve afectado por el valor de transition-delay.

-
pseudoElement{{readonlyinline}}{{domxref("DOMString")}} -

El nombre (empezando con dos "dos puntos") del pseudo-elemento CSS en el que ha ocurrido la transición (en caso de que el objetivo del evento sea dicho pseudo-elemento correspondiente al elemento), o una cadena vacía si la transición ha ocurrido en un elemento (lo que quiere decir que el objetivo del evento es dicho elemento).

-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('CSS3 Transitions', '#transitioncancel', 'transitioncancel')}}{{Spec2('CSS3 Transitions')}}Definición inicial.
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatGeckoDesktop(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

 

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatGeckoMobile(53)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Véase también

- -
    -
  • El manejador {{domxref("GlobalEventHandlers.ontransitioncancel")}}
    • -
  • La interfaz {{domxref("TransitionEvent")}}
    • -
  • {{event("transitionstart")}}, {{event("transitionend")}}
    • -
  • Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
    • -
diff --git a/files/es/web/events/transitionend/index.html b/files/es/web/events/transitionend/index.html deleted file mode 100644 index 8370f0e39e..0000000000 --- a/files/es/web/events/transitionend/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -tags: - - DOM - - Event - - Referencia - - Transiciones CSS - - Transiciones CSS3 - - TransitionEvent - - transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -

El evento transitionend es lanzado cuando una transición CSS se ha completado. Si la transición es eliminada antes de haberse completado, como cuando {{cssxref("transition-property")}} es eliminado o {{cssxref("display")}} se establece a "none", entonces el evento no será generado.

- -

Información general

- -
-
Especificación
-
{{SpecName("CSS3 Transitions")}}
-
Interfaz
-
{{domxref("TransitionEvent")}}
-
Burbuja
-
Sí
-
Cancelable
-
Sí
-
Objetivo
-
{{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}}
-
Acción
-
undefined
-
- -

Propiedades

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
propertyName {{readonlyInline}}{{domxref("DOMString")}}The name of the CSS property associated with the transition.
elapsedTime {{readonlyInline}}FloatThe amount of time the transition has been running, in seconds, as of the time the event was generated. This value is not affected by the value of transition-delay.
pseudoElement {{readonlyInline}}{{domxref("DOMString")}}The name (beginning with two colons) of the CSS pseudo-element on which the transition occured (in which case the target of the event is that pseudo-element's corresponding element), or the empty string if the transition occurred on an element (which means the target of the event is that element).
- -

Ejemplo

- -

Este ejemplo establece un manejador de evento para detectar el evento transitionend, y así cambiar el texto que se muestra dentro del elemento cuando la transición se completa.

- -
let element = document.getElementById("slidingMenu");
-element.addEventListener("transitionend", function(event) {
-  element.innerHTML = "Done!";
-}, false);
-
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("CSS3 Transitions", "#transitionend", "transitionend")}}{{Spec2('CSS3 Transitions')}}Definición inicial.
- -

Compatibilidad con navegadores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0[1]
- 36		{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}1010.5[2]
- 12
- 12.10
- 23		3.2[1]
- 7.0.6
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
- 12
- 12.10		3.2[1]
-
- -

[1] Implementado en Chrome 1.0, Android 2.1 y WebKit 3.2 como webkitTransitionEnd. Chrome 36 y WebKit 7.0.6 usan el estándar transitionend.

- -

[2] Implementado como oTransitionEnd desde Opera 10.5, como otransitionend desde la versión 12 y como el estándar transitionend desde la versión 12.10.

- -

Véase también

- -

La interfaz {{domxref("TransitionEvent")}}

- -
    -
  • {{event("transitionstart")}}, {{event("transitioncancel")}}
    • -
  • Propiedades CSS: {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.
    • -
diff --git a/files/es/web/guide/ajax/community/index.html b/files/es/web/guide/ajax/community/index.html new file mode 100644 index 0000000000..50a91de5a4 --- /dev/null +++ b/files/es/web/guide/ajax/community/index.html @@ -0,0 +1,44 @@ +--- +title: Comunidad +slug: Web/Guide/AJAX/Comunidad +tags: + - AJAX + - Todas_las_Categorías +translation_of: Web/Guide/AJAX/Community +--- +

 

+


+ Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con AJAX que pueda ser de interés. Por favor, pon aquí un enlace.

+

Mozilla

+
    +
  • La comunidad Mozilla... en inglés
    • +
+

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

+

Listas de correo

+
    +
  •  
    • +
+

 

+

Foros

+
    +
  • AJAX en + + Foros del Web +
    • +
+

Bitácoras

+
    +
  •  
    • +
+

 

+

Wikis

+
    +
  •  
    • +
+

 

+

Otros Sitios

+
    +
  •  
    • +
+

 

+

categorías

diff --git a/files/es/web/guide/ajax/comunidad/index.html b/files/es/web/guide/ajax/comunidad/index.html deleted file mode 100644 index 50a91de5a4..0000000000 --- a/files/es/web/guide/ajax/comunidad/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Comunidad -slug: Web/Guide/AJAX/Comunidad -tags: - - AJAX - - Todas_las_Categorías -translation_of: Web/Guide/AJAX/Community ---- -

 

-


- Si conoces alguna lista de correo, grupo de noticias, foro, o comunidad relacionada con AJAX que pueda ser de interés. Por favor, pon aquí un enlace.

-

Mozilla

-
    -
  • La comunidad Mozilla... en inglés
    • -
-

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }}

-

Listas de correo

-
    -
  •  
    • -
-

 

-

Foros

-
    -
  • AJAX en - - Foros del Web -
    • -
-

Bitácoras

-
    -
  •  
    • -
-

 

-

Wikis

-
    -
  •  
    • -
-

 

-

Otros Sitios

-
    -
  •  
    • -
-

 

-

categorías

diff --git a/files/es/web/guide/ajax/getting_started/index.html b/files/es/web/guide/ajax/getting_started/index.html new file mode 100644 index 0000000000..ed2bbbc33f --- /dev/null +++ b/files/es/web/guide/ajax/getting_started/index.html @@ -0,0 +1,231 @@ +--- +title: Primeros Pasos +slug: Web/Guide/AJAX/Primeros_Pasos +tags: + - AJAX + - API + - Avanzado + - Todas_las_Categorías + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +

 

+ +

Este artículo es una guía básica sobre AJAX e incluye dos ejemplos.

+ +

¿Qué es AJAX?

+ +

AJAX (JavaScript Asíncrono y XML) es un término nuevo para describir dos capacidades de los navegadores que han estado presentes por años, pero que habían sido ignoradas por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como Gmail, Google suggest y Google Maps.

+ +

Las dos capacidades en cuestión son:

+ +
    +
  • La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
    • +
  • La posibilidad de analizar y trabajar con documentos XML.
    • +
+ +

Primer Paso – Cómo realizar una petición HTTP al servidor

+ +

Para realizar una petición HTTP usando JavaScript, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase XMLHttpRequest que soportaba los métodos y las propiedades del objeto ActiveX original.

+ +

Como resultado, para crear una instancia de la clase requerida que funcione en todos los navegadores, es necesario poner:

+ +
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
+    http_request = new XMLHttpRequest();
+} else if (window.ActiveXObject) { // IE
+    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+}
+
+ +

(El código mostrado es una versión simplificada con fines ilustrativos. Para un ejemplo más realista ver el paso 3 de este artículo.)

+ +

Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml.

+ +
http_request = new XMLHttpRequest();
+http_request.overrideMimeType('text/xml');
+
+ +

El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta. Para esto se asigna la propiedad onreadystatechange del objeto al nombre de la función de JavaScript que se va a utilizar:

+ +

http_request.onreadystatechange = nameOfTheFunction;

+ +

Es importante notar que no hay paréntesis después del nombre de la función y no se pasa ningún parámetro. También es posible definir la función en ese momento, y poner en seguida las acciones que procesarán la respuesta:

+ +
http_request.onreadystatechange = function(){
+    // procesar la respuesta
+};
+
+ +

Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTP request, como se muestra a continuación:

+ +
http_request.open('GET', 'http://www.example.org/algun.archivo', true);
+http_request.send();
+
+ +
    +
  • El primer parámetro de la llamada a open() es el método HTTP request – GET, POST, HEAD o cualquier otro método que se quiera usar y sea aceptado por el servidor. El nombre del método se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no procesar la petición. Para más información sobre los métodos HTTP request visitar W3C specs
    • +
  • El segundo parámetro es el URL de la página que se esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios de terceras personas. Se debe saber el dominio exacto de todas las páginas o se obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.
    • +
  • El tercer parámetro establece si la petición es asíncrona. Si se define TRUE, la ejecución de la función de JavaScript continuará aún cuando la respuesta del servidor no haya llegado. Por esta capacidad es la A en AJAX.
    • +
+ +

El parámetro en el método send()puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:

+ +

name=value&anothername=othervalue&so=on

+ +

Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:

+ +
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+ +

De otro modo el servidor descartará la información.

+ +

Segundo Paso – Procesando la respuesta del servidor

+ +

Al enviar la petición HTTP es necesario indicar el nombre de la función JavaScript que procesará la respuesta.

+ +

http_request.onreadystatechange = nameOfTheFunction;

+ +

A continuación se verá lo que esta función realiza. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.

+ +
if (http_request.readyState == 4) {
+    // todo va bien, respuesta recibida
+} else {
+    // aun no esta listo
+}
+
+ +

La lista completa de valores para la propiedad readyState es:

+ +
    +
  • 0 (no inicializada)
    • +
  • 1 (leyendo)
    • +
  • 2 (leido)
    • +
  • 3 (interactiva)
    • +
  • 4 (completo)
    • +
+ +

(Source)

+ +

Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el sitio de la W3C. Para el próposito de este artículo sólo es importante el código 200 OK.

+ +
if (http_request.status == 200) {
+    // perfect!
+} else {
+    // hubo algún problema con la petición,
+    // por ejemplo código de respuesta 404 (Archivo no encontrado)
+    // o 500 (Internal Server Error)
+}
+
+ +

Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:

+ +
    +
  • http_request.responseText – regresará la respuesta del servidor como una cadena de texto.
    • +
  • http_request.responseXML – regresará la respuesta del servidor como un objeto XMLDocument que se puede recorrer usando las funciones de JavaScript DOM.
    • +
+ +

Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo

+ +

En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un documento HTML llamado test.html, que contiene el texto "Esto es una prueba." y después usaremos la función alert() con el contenido del archivo test.html .

+ +
<script type="text/javascript" language="javascript">
+
+    var http_request = false;
+
+    function makeRequest(url) {
+
+        http_request = false;
+
+        if (window.XMLHttpRequest) { // Mozilla, Safari,...
+            http_request = new XMLHttpRequest();
+            if (http_request.overrideMimeType) {
+                http_request.overrideMimeType('text/xml');
+                // Ver nota sobre esta linea al final
+            }
+        } else if (window.ActiveXObject) { // IE
+            try {
+                http_request = new ActiveXObject("Msxml2.XMLHTTP");
+            } catch (e) {
+                try {
+                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
+                } catch (e) {}
+            }
+        }
+
+        if (!http_request) {
+            alert('Falla :( No es posible crear una instancia XMLHTTP');
+            return false;
+        }
+        http_request.onreadystatechange = alertContents;
+        http_request.open('GET', url, true);
+        http_request.send();
+
+    }
+
+    function alertContents() {
+
+        if (http_request.readyState == 4) {
+            if (http_request.status == 200) {
+                alert(http_request.responseText);
+            } else {
+                alert('Hubo problemas con la petición.');
+            }
+        }
+
+    }
+</script>
+<span
+    style="cursor: pointer; text-decoration: underline"
+    onclick="makeRequest('test.html')">
+        Hacer una petición
+</span>
+
+ +

En este ejemplo:

+ +
    +
  • El usuario presiona el vínculo "Hacer una petición" en el navegador;
    • +
  • Esto llama la función makeRequest() que tiene como parámetro test.html que es un archivo HTML localizado en el mismo directorio;
    • +
  • La petición es realizada y después (onreadystatechange) la ejecución pasa a alertContents();
    • +
  • alertContents() verifica si la respuesta fue recibida y si es OK, si es así utiliza alert() con el contenido de test.html.
    • +
+ +

Puedes probar el ejemplo aquí y puedes ver el archivo de prueba aquí.

+ +

Nota: La línea http_request.overrideMimeType('text/xml'); arriba causaría problemas en la consola de Javascript de Firefox 1.5b, como esta descrito en https://bugzilla.mozilla.org/show_bug.cgi?id=311724, si la página llamada por XMLHttpRequest no es XML válido (por ejemplo, si es texto).

+ +

Si se obtiene Syntax Error o Not Well Formed Error en el navegador, y no se está intentando cargar una página XML con XMLHttpRequest, se puede eliminar esa línea del código.

+ +

Cuarto Paso – Trabajando con la respuesta XML

+ +

En el ejemplo anterior se utilizo la propiedad reponseText del objeto pedido para mostrar el contenido de test.html una vez que la respuesta HTTP había sido recibida. En éste se utilizará la propiedad responseXML.

+ +

Primero hay que crear un documento de XML válido. El documento (test.xml) contiene lo siguiente:

+ +
<?xml version="1.0" ?>
+<root>
+    Esto es una prueba.
+</root>
+
+ +

Para que funcione el script solo es necesario cambiar la línea de petición por:

+ +
...
+onclick="makeRequest('test.xml')">
+...
+
+ +

Y en alertContents() es necerario remplazar la línea donde aparece alert(http_request.responseText); por:

+ +
var xmldoc = http_request.responseXML;
+var root_node = xmldoc.getElementsByTagName('root').item(0);
+alert(root_node.firstChild.data);
+
+ +

De esta manera se utiliza el objeto XMLDocument dado por responseXML y se usan métodos del DOM para acceder a la información contenida en el documento XML. El archivo test.xml se encuentra aquí y el script actualizado está aquí.

+ +

Para más información sobre los metodos del DOM, visita los documentos de la implementación del DOM de Mozilla.

+ +
 
+ +

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}

diff --git a/files/es/web/guide/ajax/primeros_pasos/index.html b/files/es/web/guide/ajax/primeros_pasos/index.html deleted file mode 100644 index ed2bbbc33f..0000000000 --- a/files/es/web/guide/ajax/primeros_pasos/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Primeros Pasos -slug: Web/Guide/AJAX/Primeros_Pasos -tags: - - AJAX - - API - - Avanzado - - Todas_las_Categorías - - XMLHttpRequest -translation_of: Web/Guide/AJAX/Getting_Started ---- -

 

- -

Este artículo es una guía básica sobre AJAX e incluye dos ejemplos.

- -

¿Qué es AJAX?

- -

AJAX (JavaScript Asíncrono y XML) es un término nuevo para describir dos capacidades de los navegadores que han estado presentes por años, pero que habían sido ignoradas por muchos desarrolladores Web, hasta hace poco que surgieron aplicaciones como Gmail, Google suggest y Google Maps.

- -

Las dos capacidades en cuestión son:

- -
    -
  • La posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.
    • -
  • La posibilidad de analizar y trabajar con documentos XML.
    • -
- -

Primer Paso – Cómo realizar una petición HTTP al servidor

- -

Para realizar una petición HTTP usando JavaScript, es necesario crear una instancia de una clase que provea esta funcionalidad. Esta clase fue inicialmente introducida en Internet Explorer como un objeto ActiveX, llamado XMLHTTP. Después Mozilla, Safari y otros navegadores lo siguieron, implementando una clase XMLHttpRequest que soportaba los métodos y las propiedades del objeto ActiveX original.

- -

Como resultado, para crear una instancia de la clase requerida que funcione en todos los navegadores, es necesario poner:

- -
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
-    http_request = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE
-    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
- -

(El código mostrado es una versión simplificada con fines ilustrativos. Para un ejemplo más realista ver el paso 3 de este artículo.)

- -

Algunas versiones de los navegadores Mozilla no funcionan correctamente si la respuesta del servidor no tiene la cabecera mime de tipo XML. En ese caso es posible usar un método extra que sobreescriba la cabecera enviada por el servidor, en caso que no sea text/xml.

- -
http_request = new XMLHttpRequest();
-http_request.overrideMimeType('text/xml');
-
- -

El próximo paso es decidir qué se hará después de recibir la respuesta del servidor a la petición enviada. A estas alturas sólo es necesario decirle al objeto HTTPrequest qué función de JavaScript se encargará de procesar la respuesta. Para esto se asigna la propiedad onreadystatechange del objeto al nombre de la función de JavaScript que se va a utilizar:

- -

http_request.onreadystatechange = nameOfTheFunction;

- -

Es importante notar que no hay paréntesis después del nombre de la función y no se pasa ningún parámetro. También es posible definir la función en ese momento, y poner en seguida las acciones que procesarán la respuesta:

- -
http_request.onreadystatechange = function(){
-    // procesar la respuesta
-};
-
- -

Después de especificar qué pasará al recibir la respuesta es necesario hacer la petición. Para esto se utilizan los métodos open() y send() de la clase HTTP request, como se muestra a continuación:

- -
http_request.open('GET', 'http://www.example.org/algun.archivo', true);
-http_request.send();
-
- -
    -
  • El primer parámetro de la llamada a open() es el método HTTP request – GET, POST, HEAD o cualquier otro método que se quiera usar y sea aceptado por el servidor. El nombre del método se escribe en mayúsculas, sino algunos navegadores (como Firefox) podrían no procesar la petición. Para más información sobre los métodos HTTP request visitar W3C specs
    • -
  • El segundo parámetro es el URL de la página que se esta pidiendo. Por medida de seguridad no es posible llamar páginas en dominios de terceras personas. Se debe saber el dominio exacto de todas las páginas o se obtendrá un error de 'permiso denegado' al llamar open(). Una falla común es acceder al sitio por domain.tld e intentar llamar las páginas como www.domain.tld.
    • -
  • El tercer parámetro establece si la petición es asíncrona. Si se define TRUE, la ejecución de la función de JavaScript continuará aún cuando la respuesta del servidor no haya llegado. Por esta capacidad es la A en AJAX.
    • -
- -

El parámetro en el método send()puede ser cualquier información que se quiera enviar al servidor si se usa POST para la petición. La información se debe enviar en forma de cadena, por ejemplo:

- -

name=value&anothername=othervalue&so=on

- -

Si se quiere enviar información de esta forma, es necesario cambiar el tipo MIME de la petición usando la siguiente línea:

- -
http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
- -

De otro modo el servidor descartará la información.

- -

Segundo Paso – Procesando la respuesta del servidor

- -

Al enviar la petición HTTP es necesario indicar el nombre de la función JavaScript que procesará la respuesta.

- -

http_request.onreadystatechange = nameOfTheFunction;

- -

A continuación se verá lo que esta función realiza. En primer lugar necesita revisar el estado de la petición. Si el estado tiene el valor 4, significa que la respuesta completa del servidor ha sido recibida y es posible continuar procesándola.

- -
if (http_request.readyState == 4) {
-    // todo va bien, respuesta recibida
-} else {
-    // aun no esta listo
-}
-
- -

La lista completa de valores para la propiedad readyState es:

- -
    -
  • 0 (no inicializada)
    • -
  • 1 (leyendo)
    • -
  • 2 (leido)
    • -
  • 3 (interactiva)
    • -
  • 4 (completo)
    • -
- -

(Source)

- -

Ahora es necesario revisar el código de status de la respuesta HTTP. La lista completa de códigos aparece en el sitio de la W3C. Para el próposito de este artículo sólo es importante el código 200 OK.

- -
if (http_request.status == 200) {
-    // perfect!
-} else {
-    // hubo algún problema con la petición,
-    // por ejemplo código de respuesta 404 (Archivo no encontrado)
-    // o 500 (Internal Server Error)
-}
-
- -

Después de haber revisado el estado de la petición y el código de status de la respuesta, depende de uno hacer cualquier cosa con la información que el servidor ha entregado. Existen dos opciones para tener acceso a esa información:

- -
    -
  • http_request.responseText – regresará la respuesta del servidor como una cadena de texto.
    • -
  • http_request.responseXML – regresará la respuesta del servidor como un objeto XMLDocument que se puede recorrer usando las funciones de JavaScript DOM.
    • -
- -

Tercer Paso – "¡Ahora todo junto!" - Un sencillo ejemplo

- -

En este ejemplo se utilizará todo lo que se ha visto para hacer una petición HTTP. Se pedirá un documento HTML llamado test.html, que contiene el texto "Esto es una prueba." y después usaremos la función alert() con el contenido del archivo test.html .

- -
<script type="text/javascript" language="javascript">
-
-    var http_request = false;
-
-    function makeRequest(url) {
-
-        http_request = false;
-
-        if (window.XMLHttpRequest) { // Mozilla, Safari,...
-            http_request = new XMLHttpRequest();
-            if (http_request.overrideMimeType) {
-                http_request.overrideMimeType('text/xml');
-                // Ver nota sobre esta linea al final
-            }
-        } else if (window.ActiveXObject) { // IE
-            try {
-                http_request = new ActiveXObject("Msxml2.XMLHTTP");
-            } catch (e) {
-                try {
-                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
-                } catch (e) {}
-            }
-        }
-
-        if (!http_request) {
-            alert('Falla :( No es posible crear una instancia XMLHTTP');
-            return false;
-        }
-        http_request.onreadystatechange = alertContents;
-        http_request.open('GET', url, true);
-        http_request.send();
-
-    }
-
-    function alertContents() {
-
-        if (http_request.readyState == 4) {
-            if (http_request.status == 200) {
-                alert(http_request.responseText);
-            } else {
-                alert('Hubo problemas con la petición.');
-            }
-        }
-
-    }
-</script>
-<span
-    style="cursor: pointer; text-decoration: underline"
-    onclick="makeRequest('test.html')">
-        Hacer una petición
-</span>
-
- -

En este ejemplo:

- -
    -
  • El usuario presiona el vínculo "Hacer una petición" en el navegador;
    • -
  • Esto llama la función makeRequest() que tiene como parámetro test.html que es un archivo HTML localizado en el mismo directorio;
    • -
  • La petición es realizada y después (onreadystatechange) la ejecución pasa a alertContents();
    • -
  • alertContents() verifica si la respuesta fue recibida y si es OK, si es así utiliza alert() con el contenido de test.html.
    • -
- -

Puedes probar el ejemplo aquí y puedes ver el archivo de prueba aquí.

- -

Nota: La línea http_request.overrideMimeType('text/xml'); arriba causaría problemas en la consola de Javascript de Firefox 1.5b, como esta descrito en https://bugzilla.mozilla.org/show_bug.cgi?id=311724, si la página llamada por XMLHttpRequest no es XML válido (por ejemplo, si es texto).

- -

Si se obtiene Syntax Error o Not Well Formed Error en el navegador, y no se está intentando cargar una página XML con XMLHttpRequest, se puede eliminar esa línea del código.

- -

Cuarto Paso – Trabajando con la respuesta XML

- -

En el ejemplo anterior se utilizo la propiedad reponseText del objeto pedido para mostrar el contenido de test.html una vez que la respuesta HTTP había sido recibida. En éste se utilizará la propiedad responseXML.

- -

Primero hay que crear un documento de XML válido. El documento (test.xml) contiene lo siguiente:

- -
<?xml version="1.0" ?>
-<root>
-    Esto es una prueba.
-</root>
-
- -

Para que funcione el script solo es necesario cambiar la línea de petición por:

- -
...
-onclick="makeRequest('test.xml')">
-...
-
- -

Y en alertContents() es necerario remplazar la línea donde aparece alert(http_request.responseText); por:

- -
var xmldoc = http_request.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
- -

De esta manera se utiliza el objeto XMLDocument dado por responseXML y se usan métodos del DOM para acceder a la información contenida en el documento XML. El archivo test.xml se encuentra aquí y el script actualizado está aquí.

- -

Para más información sobre los metodos del DOM, visita los documentos de la implementación del DOM de Mozilla.

- -
 
- -

{{ languages( { "ca": "ca/AJAX/Primers_passos", "de": "de/AJAX/Getting_Started", "en": "en/AJAX/Getting_Started", "fr": "fr/AJAX/Premiers_pas", "it": "it/AJAX/Iniziare", "ja": "ja/AJAX/Getting_Started", "ko": "ko/AJAX/Getting_Started", "pl": "pl/AJAX/Na_pocz\u0105tek", "pt": "pt/AJAX/Como_come\u00e7ar", "ru": "ru/AJAX/\u0421_\u0447\u0435\u0433\u043e_\u043d\u0430\u0447\u0430\u0442\u044c", "zh-cn": "cn/AJAX/\u5f00\u59cb", "zh-tw": "zh_tw/AJAX/\u4e0a\u624b\u7bc7" } ) }}

diff --git a/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html b/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html deleted file mode 100644 index 7f8fe2155c..0000000000 --- a/files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Explicación de los datos de orientación y movimiento -slug: >- - Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained -translation_of: Web/Guide/Events/Orientation_and_motion_data_explained ---- -

{{ Draft() }}

-

Sumario

-

Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.

-
-

Atención: Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.

-
-

Acerca de los marcos de coordenadas

-

Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:

-

Marco de coordenadas terrestres

-

El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.

-
    -
  • El eje X sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).
    • -
  • El eje Y sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.
    • -
  • El eje Z es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).
    • -
-

 

-

-

 

-

Marco de coordenadas del dispositivo

-

El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo

-

axes.png

-
    -
  • El eje x está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.
    • -
  • El eje y está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.
    • -
  • El eje z es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.
    • -
-
- Nota: En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.
-

Sobre la rotación

-

La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.

-

Alpha

-

Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:

-

alpha.png

-

El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.

-

Beta

-

Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:

-

beta.png

-

El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.

-

Gamma

-

Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:

-

gamma.png

-

El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.

diff --git a/files/es/web/guide/api/vibration/index.html b/files/es/web/guide/api/vibration/index.html deleted file mode 100644 index 8c9c7b5f06..0000000000 --- a/files/es/web/guide/api/vibration/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Vibración API -slug: Web/Guide/API/Vibration -tags: - - API - - Firefox OS - - Mobile - - Principiante - - Vibración - - Vibrado - - Vibrar - - WebAPI -translation_of: Web/API/Vibration_API ---- -

La mayoría de los dispositivos modernos pueden vibrar a través del hardware, esto permite que a través del código de software se pueda emitir estas vibraciones. La Vibration API  ofrece a las aplicaciones web la capacidad de acceder a este hardware en caso este lo soporte, caso contrario el dispositivo no hace nada.

- -

Describiendo vibraciones

- -

Vibración se puede describir como un patrón de prender y apagar pulsos, los cuales pueden variar en longitud. El patrón puede consistir de un sólo número que indica cuantos milisegundos vibrará, o un arreglo de enteros describiendo un patrón de vibraciones y pausas. La vibración es controlada por un solo método:

- -

{{domxref("window.navigator.vibrate()")}}.

- -

Vibración simple

- -

Puedes iniciar una sola vibración del hardware pasando como argumento un sólo número, o un arreglo de un sólo número:

- -
window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
-
- -

Ambos ejemplos hacen vibrar el dispositivo por 200 ms.

- -

Patrones de vibración

- -

Un arreglo de valores describen que las vibraciones serán por períodos alternados, es decir, el dispositivo vibrará luego no lo hará, así según la secuencia definida. Cada valor en el arreglo es convertido a entero para luego ser interpretado alternadamente como el tiempo que el dispositivo debe vibrar y el tiempo que no debe vibrar. Ejemplo:

- -
window.navigator.vibrate([200, 100, 200]);
-
- -

Según este ejemplo el dispositivo vibrará por 200ms, luego se detiene por 100ms y luego vibra 200ms.

- -

Puedes especificar cuantas vibraciones/pausas desees, y el arreglo puede tener un tamaño par o impar. No importa que agregues una pausa como el último valor del arreglo, ya que el celular dejará de vibrar de todas formas al final de cada vibración.

- -

Cancelar vibraciones existentes

- -

Llamar {{domxref("window.navigator.vibrate()")}} con un valor de 0, arreglo vació, o arreglo que contenga 0's detendrá cualquier vibración en curso.

- -

Vibraciones continuas

- -

Algunas básicas acciones son setInterval y clearInterval que nos permitirán crear vibraciones persistentes:

- -
var intervaloDeVibrado;
-
-// Iniciar la vibración
-function iniciarVibrado(duracion) {
-	navigator.vibrate(duracion);
-}
-
-// Detiene la vibración
-function detenerVibrado() {
-	// Limpiar el intervalo y detener las vibraciones existentes
-	if(intervaloDeVibrado) clearInterval(intervaloDeVibrado);
-	navigator.vibrate(0);
-}
-
-// Iniciar las vibraciones con una determinado tiempo e intervalo
-// Asumir que el valor recibido es un entero
-function iniciarVibradoPersistente(duracion, intervalo) {
-	intervaloDeVibrado = setInterval(function() {
-		iniciarVibrado(duracion);
-	}, intervalo);
-}
- -

Claro que el código de arriba no toma en cuenta el método de utilizar un arreglo de vibración, utilizar un arreglo para vibración persistente necesitaría recalcular la suma de los elementos del arregloo y crear un intervalo basado en esos números (agregando adicionalmente las pausas)

- -

¿Por qué utilizar Vibration API?

- -

Esta API es claramente accesible a través de dispositivos móbiles. Vibration API puede servir para alertas en las aplicaciones web del celular, y sería es asombrosa cuando se utiliza en juegos o en aplicaciones pesadas. Imagínate mirando un video en tu celular y durante la escena de explosión,tu teléfono vibra un poco. O la sensación que tendría tu usuario al sentir el estallido de una bomba en el juego Bomberman.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Especificación inicial.
- -

Compatibilidad entre navegadores

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
CaracteŕisticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}
- 16 (no prefix)		{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}} {{property_prefix("webkit")}}11.0 {{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

Ver También

- - diff --git a/files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html b/files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html new file mode 100644 index 0000000000..d7c859d646 --- /dev/null +++ b/files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html @@ -0,0 +1,99 @@ +--- +title: Comunicaciones peer-to-peer (P2P) con WebRTC +slug: WebRTC/Peer-to-peer_communications_with_WebRTC +translation_of: Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC +--- +

{{SeeCompatTable}}

+

Las WebRTC APIs están diseñadas para permitir a las aplicaciones JS la creación de conexiones de tiempo real con canales de Audio, Video, y/o Datos (Data), directamente entre usuarios y a través de sus browsers, o hacia servers que soporten los protocolos WebRTC. También potencia navigator.mozGetUserMedia() para acceder a los datos de cámara y micrófono (getUserMedia() está siendo estandarizado por la Media Capture Task Force, así como las Recording APIs).

+

Las fuentes primarias de las especificaciones para WebRTC (en constante evolución), son las especificaciones WebRTC y getUserMedia, y varios de los borradores del IETF, en mayor medida en el rtcweb working group, pero también mmusic, rmcat y algunos otros.
+
+ Gran parte de la implementación en Chrome y Firefox está basada en código que fue abierto por Google en webrtc.org.

+

NOTA:  Las versiones actuales de FlashBlock pueden bloquear elementos HTML5 <video>. Si es así, dile que permita el contenido en la página, o deshabilita esa opción vía Herramientas/Add-ons.

+

Hay un buen tutorial en las características básicas de WebRTC en HTML5 Rocks. Una colección de páginas de pruebas básicas para soportar el desarrollo existe en webrtc-landing.

+

Puedes hacer simples llamadas persona-a-persona (inclusive si usan Chrome) en apprtc.appspot.com.

+

Una descripción de alto nivel de lo que sucede en una conexión RTCPeerConnection se publicó en un artículo de Mozilla Hacks (puedes ver todos los artículos sobre WebRTC aquí).

+

Basics of RTCPeerConnection call setup

+

Especificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentarios
WebRTC APIEn definición 
getUserMedia APIEn definiciónhttp://dev.w3.org/2011/webrtc/editor/getusermedia.html
+

Compatibilidad de browsers

+
+ {{CompatibilityTable}}
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básicoSí{{property_prefix("webkit")}}Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannelsA partir de Chrome 29Firefox 22{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte preliminarVia Chrome (detrás de un flag de configuración)Activado en Nightly y Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
DataChannels{{CompatUnknown}}Activado en Nightly y Aurora{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+

 

diff --git a/files/es/web/guide/css/probando_media_queries/index.html b/files/es/web/guide/css/probando_media_queries/index.html deleted file mode 100644 index dac4330054..0000000000 --- a/files/es/web/guide/css/probando_media_queries/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Probando media queries -slug: Web/Guide/CSS/probando_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -

{{SeeCompatTable}}

-

El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.

-

Creando una media query list

-

Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.

-

For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:

-
var mql = window.matchMedia("(orientation: portrait)");
-
-

Revisando el resultado de un query

-

Once your media query list has been created, you can check the result of the query by looking at the value of its matches property, which reflects the result of the query:

-
if (mql.matches) {
-  /* The device is currently in portrait orientation */
-} else {
-  /* The device is currently in landscape orientation */
-}
-
-

Recibiendo notificaciones query

-

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, you can call the addListener() method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:

-
var mql = window.matchMedia("(orientation: portrait)");
-mql.addListener(handleOrientationChange);
-handleOrientationChange(mql);
-
-

This code creates the orientation testing media query list, mql, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).

-

The handleOrientationChange() method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:

-
function handleOrientationChange(mql) {
-  if (mql.matches) {
-    /* The device is currently in portrait orientation */
-  } else {
-    /* The device is currently in landscape orientation */
-  }
-}
-
-

Terminando con las notificaciones query 

-

Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al removeListener() en el {{domxref("MediaQueryList") }}:

-
mql.removeListener(handleOrientationChange);
-
-

Compatibilidad con los navegadores

-

{{CompatibilityTable}}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico9{{CompatGeckoDesktop("6.0") }}1012.15.1
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico3.0{{CompatUnknown}}1012.15
-
-

Ver también

-
    -
  • Media queries
    • -
  • {{domxref("window.matchMedia()") }}
    • -
  • {{domxref("MediaQueryList") }}
    • -
  • {{domxref("MediaQueryListListener") }}
    • -
diff --git "a/files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" "b/files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" deleted file mode 100644 index 0038e12c74..0000000000 --- "a/files/es/web/guide/dom/events/creacion_y_activaci\303\263n_eventos/index.html" +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Creación y activación de eventos (Event) -slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos -tags: - - DOM - - Guía - - JavaScript - - Sintetico - - eventos -translation_of: Web/Guide/Events/Creating_and_triggering_events ---- -

En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.

- -

Crear eventos personalizados

- -

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

- -
var event = new Event('build');
-
-// Escucha para el evento.
-elem.addEventListener('build', function (e) { ... }, false);
-
-// Disparar event.
-elem.dispatchEvent(event);
- -

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

- -

Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.

- -

Adición de datos personalizados con CustomEvent ()

- -

    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.
- Por Ejemplo, el evento se puede crear de la siguiente manera:

- -
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
- -

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

- -
function eventHandler(e) {
-  log('The time is: ' + e.detail);
-}
-
- -

La Forma Antigua

- -

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

- -
// Creamos el evento.
-var event = document.createEvent('Event');
-
-/* Definimos el nombre del evento que es 'build'.*/
-event.initEvent('build', true, true);
-
-// Asignamos el evento.
-document.addEventListener('build', function (e) {
-  // e.target matches document from above
-}, false);
-
-// target can be any Element or other EventTarget.
-document.dispatchEvent(event);
-
-
- -

El disparo incorporado eventos

- -

    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

- -
function simulateClick() {
-  var event = new MouseEvent('click', {
-    'view': window,
-    'bubbles': true,
-    'cancelable': true
-  });
-  var cb = document.getElementById('checkbox');
-  var canceled = !cb.dispatchEvent(event);
-  if (canceled) {
-    // A handler called preventDefault.
-    alert("canceled");
-  } else {
-    // None of the handlers called preventDefault.
-    alert("not canceled");
-  }
-}
- -

Compatibilidad con los Navegadores

- -

 

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Event() constructor1511{{ CompatNo() }}11.606
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
-
- -

See also

- -
    -
  • {{domxref("document.createEvent()")}}
    • -
  • {{domxref("Event.initEvent()")}}
    • -
  • {{domxref("EventTarget.dispatchEvent()")}}
    • -
  • {{domxref("EventTarget.addEventListener()")}}
    • -
diff --git a/files/es/web/guide/dom/events/eventos_controlador/index.html b/files/es/web/guide/dom/events/eventos_controlador/index.html deleted file mode 100644 index 836b287123..0000000000 --- a/files/es/web/guide/dom/events/eventos_controlador/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Manejadores de eventos en el DOM -slug: Web/Guide/DOM/Events/eventos_controlador -translation_of: Web/Guide/Events/Event_handlers ---- -

La plataforma Web provee varias formas de recibir notificaciones de los eventos del DOM.  Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos. Esta página se enfoca en los detalles de cómo funcionan estos.

- -

Registering on-event handlers

- -

Los controladores on-event son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla,  enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser onclick, onkeypress, onfocus, etc.

- -

Pueden especificar un controlador de evento on<...> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:

- -
    -
  • Usando el HTML {{Glossary("atributo")}} llamados on{eventtype} en un elemento, por ejemplo:
    - <button onclick="return handleClick(event);">,
    • -
  • O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:
    - document.getElementById("mybutton").onclick = function(event) { ... }.
    • -
- -

Un controlador onevent

- -

Notese que cada objeto puede tener sólo un controlador on-event para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.

- -

Also note that on-event handlers are called automatically, not at the programmer's will (although you can, like  mybutton.onclick(myevent); ) since they serve more as placeholders to which a real handler function can be assigned.

- -

Non-element objects

- -

Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:

- -
xhr.onprogress = function() { ... }
- -

Details

- -

The value of HTML on<...> attributes and corresponding  JavaScript properties

- -

A handler registered via an on<...> attribute will be available via the corresponding on<...> property, but not the other way around:

- -
<div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div>
-
-<script>
-window.onload = function () {
-  var div = document.getElementById("a");
-  console.log("Attribute reflected as a property: ", div.onclick.toString());
-  // Prints: function onclick(event) { alert('old') }
-  div.onclick = function() { alert('new') };
-  console.log("Changed property to: ", div.onclick.toString());
-  // Prints: function () { alert('new') }
-  console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
-  // Prints: alert('old')
-}
-</script>
- -

For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: onblur, onerror, onfocus, onload, onscroll.)

- -

Event handler's parameters, this binding, and the return value

- -

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

- -
    -
  • event - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.
    • -
  • event, source, lineno, colno, and error for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the event parameter actually contains the error message as string.
    • -
- -

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details see the this keyword documentation.

- -

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 "The event handler processing algorithm" in the HTML specification.

- -

When the event handler is invoked

- -

TBD (non-capturing listener)

- -

Terminology

- -

The term event handler may be used to refer to:

- -
    -
  • any function or object registered to be notified of events,
    • -
  • or, more specifically, to the mechanism of registering event listeners via on... attributes in HTML or properties in web APIs, such as <button onclick="alert(this)"> or window.onload = function() { /* ... */ }.
    • -
- -

When discussing the various methods of listening to events,

- -
    -
  • event listener refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},
    • -
  • whereas event handler refers to a function registered via on... attributes or properties.
    • -
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
- -

Browser compatibility

- -

Event handler changes in Firefox 9

- -

In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.

- -

Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.

- -

Detecting the presence of event handler properties

- -

You can now detect the presence of an event handler property (that is, for example, onload), using the JavaScript in operator. For example:

- -
if ("onsomenewfeature" in window) {
-  /* do something amazing */
-}
-
- -

Event handlers and prototypes

- -

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 Window.prototype.onload anymore. In the past, event handlers (onload, 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.

diff --git a/files/es/web/guide/dom/events/index.html b/files/es/web/guide/dom/events/index.html deleted file mode 100644 index 241f94e866..0000000000 --- a/files/es/web/guide/dom/events/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Event developer guide -slug: Web/Guide/DOM/Events -tags: - - DOM - - Event - - Guide - - NeedsTranslation - - TopicStub - - events -translation_of: Web/Guide/Events ---- -

{{draft()}}

-

Everything you need to know about events will go under here. We're working on cleanup here now.

-

Docs

-

{{LandingPageListSubpages}}

diff --git a/files/es/web/guide/dom/index.html b/files/es/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/es/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

-

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

-

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ). As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers.

-

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

diff --git a/files/es/web/guide/events/creating_and_triggering_events/index.html b/files/es/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..0038e12c74 --- /dev/null +++ b/files/es/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,144 @@ +--- +title: Creación y activación de eventos (Event) +slug: Web/Guide/DOM/Events/Creacion_y_Activación_Eventos +tags: + - DOM + - Guía + - JavaScript + - Sintetico + - eventos +translation_of: Web/Guide/Events/Creating_and_triggering_events +--- +

En este artículo se muestra cómo crear y activar eventos DOM. Estos eventos son comunmente llamados eventos sinteticos, a diferencia de los eventos gatillados por el navegador.

+ +

Crear eventos personalizados

+ +

    Los eventos pueden ser creados con el constructor de eventos de la siguiente manera:

+ +
var event = new Event('build');
+
+// Escucha para el evento.
+elem.addEventListener('build', function (e) { ... }, false);
+
+// Disparar event.
+elem.dispatchEvent(event);
+ +

El codigo de ejemplo de arriba usa el metodo EventTarget.dispatchEvent().   

+ +

Este constructor es compatible con la mayoría de los navegadores modernos (con Internet Explorer es la excepción). Para un enfoque más detallado, ver la manera antigua de abajo.

+ +

Adición de datos personalizados con CustomEvent ()

+ +

    Para añadir más datos al objeto de evento, existe la interfaz CustomEvent y la propiedad detalle se puede utilizar para pasar los datos personalizados.
+ Por Ejemplo, el evento se puede crear de la siguiente manera:

+ +
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
+ +

    Esto permitirá tener acceso a los datos adicionales en el escuchador de eventos (event listener):

+ +
function eventHandler(e) {
+  log('The time is: ' + e.detail);
+}
+
+ +

La Forma Antigua

+ +

    El enfoque más para la creación de eventos utiliza APIs inspirados en Java. A continuación se muestra un ejemplo:

+ +
// Creamos el evento.
+var event = document.createEvent('Event');
+
+/* Definimos el nombre del evento que es 'build'.*/
+event.initEvent('build', true, true);
+
+// Asignamos el evento.
+document.addEventListener('build', function (e) {
+  // e.target matches document from above
+}, false);
+
+// target can be any Element or other EventTarget.
+document.dispatchEvent(event);
+
+
+ +

El disparo incorporado eventos

+ +

    Comunmente es deseable disparar un evento desde un elemento hijo, y lograr que el padre lo capture: opcionalmente con datos: 

+ +
function simulateClick() {
+  var event = new MouseEvent('click', {
+    'view': window,
+    'bubbles': true,
+    'cancelable': true
+  });
+  var cb = document.getElementById('checkbox');
+  var canceled = !cb.dispatchEvent(event);
+  if (canceled) {
+    // A handler called preventDefault.
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault.
+    alert("not canceled");
+  }
+}
+ +

Compatibilidad con los Navegadores

+ +

 

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Event() constructor1511{{ CompatNo() }}11.606
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}6
+
+ +

See also

+ +
    +
  • {{domxref("document.createEvent()")}}
    • +
  • {{domxref("Event.initEvent()")}}
    • +
  • {{domxref("EventTarget.dispatchEvent()")}}
    • +
  • {{domxref("EventTarget.addEventListener()")}}
    • +
diff --git a/files/es/web/guide/events/event_handlers/index.html b/files/es/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..836b287123 --- /dev/null +++ b/files/es/web/guide/events/event_handlers/index.html @@ -0,0 +1,132 @@ +--- +title: Manejadores de eventos en el DOM +slug: Web/Guide/DOM/Events/eventos_controlador +translation_of: Web/Guide/Events/Event_handlers +--- +

La plataforma Web provee varias formas de recibir notificaciones de los eventos del DOM.  Dos de las formas más comunes son: la general {{domxref("EventTarget.addEventListener", "addEventListener()")}} y un conjunto específico de controladores de eventos específicos. Esta página se enfoca en los detalles de cómo funcionan estos.

+ +

Registering on-event handlers

+ +

Los controladores on-event son un grupo de propiedades ofrecidas por los elementos del DOM para ayudar a manejar cómo los elementos reaccionan a los eventos. Los elementos pueden ser interactivos (por ejemplo: enlaces, botones, imagenes, formularios) or non-interactive (e.g. the base document). Los eventos pueden ser cuando se haga un click, detectar cuando se presione una tecla,  enfocarse, entre otros. Los handlers on-event son comunmente denominados como el evento al cual deben reaccionar, como ser onclick, onkeypress, onfocus, etc.

+ +

Pueden especificar un controlador de evento on<...> para un evento en particular (como {{event("click")}}) como un opbjeto determinado de diferentes formas:

+ +
    +
  • Usando el HTML {{Glossary("atributo")}} llamados on{eventtype} en un elemento, por ejemplo:
    + <button onclick="return handleClick(event);">,
    • +
  • O seteandolo {{Glossary("property/JavaScript", "property")}} desde JavaScript, por ejemplo:
    + document.getElementById("mybutton").onclick = function(event) { ... }.
    • +
+ +

Un controlador onevent

+ +

Notese que cada objeto puede tener sólo un controlador on-event para un evento dado (though that handler could call multiple sub-handlers). This is why {{domxref("EventTarget.addEventListener", "addEventListener()")}} is often the better way to get notified of events, especially when wishing to apply various event handlers independently from each other, even for the same event and/or to the same element.

+ +

Also note that on-event handlers are called automatically, not at the programmer's will (although you can, like  mybutton.onclick(myevent); ) since they serve more as placeholders to which a real handler function can be assigned.

+ +

Non-element objects

+ +

Event handlers can also be set using properties on many non-element objects that generate events, including {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }}, and others, for example:

+ +
xhr.onprogress = function() { ... }
+ +

Details

+ +

The value of HTML on<...> attributes and corresponding  JavaScript properties

+ +

A handler registered via an on<...> attribute will be available via the corresponding on<...> property, but not the other way around:

+ +
<div id="a" onclick="alert('old')">Open the Developer Tools Console to see the output.</div>
+
+<script>
+window.onload = function () {
+  var div = document.getElementById("a");
+  console.log("Attribute reflected as a property: ", div.onclick.toString());
+  // Prints: function onclick(event) { alert('old') }
+  div.onclick = function() { alert('new') };
+  console.log("Changed property to: ", div.onclick.toString());
+  // Prints: function () { alert('new') }
+  console.log("Attribute value is unchanged: ", div.getAttribute("onclick"));
+  // Prints: alert('old')
+}
+</script>
+ +

For historical reasons, some attributes/properties on the {{HTMLElement("body")}} and {{HTMLElement("frameset")}} elements actually set event handlers on their parent {{domxref("Window")}} object. (The HTML specification names these: onblur, onerror, onfocus, onload, onscroll.)

+ +

Event handler's parameters, this binding, and the return value

+ +

When the event handler is specified as an HTML attribute, the specified code is wrapped into a function with the following parameters:

+ +
    +
  • event - for all event handlers, except {{domxref("GlobalEventHandlers.onerror", "onerror")}}.
    • +
  • event, source, lineno, colno, and error for the {{domxref("GlobalEventHandlers.onerror", "onerror")}} event handler. Note that the event parameter actually contains the error message as string.
    • +
+ +

When the event handler is invoked, the this keyword inside the handler is set to the DOM element on which the handler is registered. For more details see the this keyword documentation.

+ +

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 "The event handler processing algorithm" in the HTML specification.

+ +

When the event handler is invoked

+ +

TBD (non-capturing listener)

+ +

Terminology

+ +

The term event handler may be used to refer to:

+ +
    +
  • any function or object registered to be notified of events,
    • +
  • or, more specifically, to the mechanism of registering event listeners via on... attributes in HTML or properties in web APIs, such as <button onclick="alert(this)"> or window.onload = function() { /* ... */ }.
    • +
+ +

When discussing the various methods of listening to events,

+ +
    +
  • event listener refers to a function or object registered via {{domxref("EventTarget.addEventListener()")}},
    • +
  • whereas event handler refers to a function registered via on... attributes or properties.
    • +
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}{{Spec2('HTML5 W3C')}}
+ +

Browser compatibility

+ +

Event handler changes in Firefox 9

+ +

In order to better match the specifications, and improve cross-browser compatibility, the way event handlers were implemented at a fundamental level changed in Gecko 9.0 {{ geckoRelease("9.0") }}.

+ +

Specifically, in the past, event handlers were not correctly implemented as standard IDL attributes. In Gecko 9.0, this was changed. Because of this, certain behaviors of event handlers in Gecko have changed. In particular, they now behave in all the ways standard IDL attributes behave. In most cases, this shouldn't affect web or add-on content at all; however, there are a few specific things to watch out for.

+ +

Detecting the presence of event handler properties

+ +

You can now detect the presence of an event handler property (that is, for example, onload), using the JavaScript in operator. For example:

+ +
if ("onsomenewfeature" in window) {
+  /* do something amazing */
+}
+
+ +

Event handlers and prototypes

+ +

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 Window.prototype.onload anymore. In the past, event handlers (onload, 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.

diff --git a/files/es/web/guide/events/index.html b/files/es/web/guide/events/index.html new file mode 100644 index 0000000000..241f94e866 --- /dev/null +++ b/files/es/web/guide/events/index.html @@ -0,0 +1,16 @@ +--- +title: Event developer guide +slug: Web/Guide/DOM/Events +tags: + - DOM + - Event + - Guide + - NeedsTranslation + - TopicStub + - events +translation_of: Web/Guide/Events +--- +

{{draft()}}

+

Everything you need to know about events will go under here. We're working on cleanup here now.

+

Docs

+

{{LandingPageListSubpages}}

diff --git a/files/es/web/guide/events/orientation_and_motion_data_explained/index.html b/files/es/web/guide/events/orientation_and_motion_data_explained/index.html new file mode 100644 index 0000000000..7f8fe2155c --- /dev/null +++ b/files/es/web/guide/events/orientation_and_motion_data_explained/index.html @@ -0,0 +1,48 @@ +--- +title: Explicación de los datos de orientación y movimiento +slug: >- + Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained/Orientation_and_motion_data_explained +translation_of: Web/Guide/Events/Orientation_and_motion_data_explained +--- +

{{ Draft() }}

+

Sumario

+

Cuando se utiliza la orientación y los eventos de movimiento, es importante entender cuáles son los significados de los valores en el navegador. En este artículo se proporciona información acerca de los sistemas de coordenadas en el juego y la forma de usarlos.

+
+

Atención: Actualmente, Firefox y Chrome no soporta la orientación de la misma forma. Ten cuidado con esto cuando sea imprementado en un navegador u otro.

+
+

Acerca de los marcos de coordenadas

+

Un marco de coordenadas en un sistema en el que la orientacion de los tres ejers (X, Y y Z) se definen en referencia a un objeto. Hay dos marcos de coordenadas a considerar cuando se utiliza eventos de orientación y el movimiento:

+

Marco de coordenadas terrestres

+

El marco de coordenadas de terrestres es el sistema de coordenadas fijado en el centro de la Tierra, es decir, los ejes están alineados sobre la base de la fuerza de la gravedad y la orientación norte magnético estándar. Utilizamos las letras mayúsculas ("X", "Y" y "Z") para describir los ejes del sistema de coordenadas terrestre.

+
    +
  • El eje X sigue a lo largo (profuncidad) del plano de tierra, perpendicular al eje Y y positiva hacia el este (y por lo tanto negativa hacia el oeste).
    • +
  • El eje Y sigue a lo largo(ancho) del plano de tierra, y es positivo hacia el norte verdadero (es decir, el Polo Norte, el norte no es magnético) y negativo hacia la verdadera sur.
    • +
  • El eje Z es perpendicular al plano de tierra, piensa en él como una línea trazada entre el dispositivo y el centro de la Tierra. El valor de la coordenada Z es positivo hacia arriba (distancia desde el centro de la Tierra) y negativo hacia abajo (hacia el centro de la Tierra).
    • +
+

 

+

+

 

+

Marco de coordenadas del dispositivo

+

El marco de coordenadas del dispositivo es el marco de la coordinación fijada en el centro del dispositivo. Utilizamos letras minúsculas ("x", "y" y "z") para describir los ejes de las coordenadas del del dispositivo

+

axes.png

+
    +
  • El eje x está en el plano de la pantalla y es positiva hacia la derecha y negativa hacia la izquierda.
    • +
  • El eje y está en el plano de la pantalla y es positiva hacia la parte superior y negativa hacia la parte inferior.
    • +
  • El eje z es perpendicular a la pantalla o teclado, y es positivo que se extiende hacia fuera de la pantalla.
    • +
+
+ Nota: En un teléfono o tableta, la orientación del dispositivo siempre se considera en relación con la orientación estándar de la pantalla, lo que es la orientación "retrato" en la mayoría de los dispositivos. En una computadora portátil, la orientación se considera en relación con el teclado. Si desea detectar cambios en la orientación del dispositivo con el fin de compensar, se puede utilizar el evento orientationChange.
+

Sobre la rotación

+

La rotación se describe alrededor de cualquier eje dado en términos del número de grados de diferencia entre el marco de coordenadas del dispositivo y el marco de coordenadas de la Tierra, y se mide en grados.

+

Alpha

+

Rotación alrededor del eje z - es decir, girando el dispositivo - hace que el ángulo de rotación alfa cambie:

+

alpha.png

+

El ángulo alfa es de 0 °, cuando la parte superior del dispositivo se apunta directamente hacia el polo norte de la Tierra, y aumenta a medida que el dispositivo se gira hacia la izquierda.

+

Beta

+

Rotación alrededor del eje X - es decir, inclinando el dispositivo desde o hacia el usuario - hace que el ángulo de giro beta cambie:

+

beta.png

+

El ángulo beta es de 0 ° en la parte superior e inferior del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 180 ° como el dispositivo se inclina hacia adelante y disminuye hacia -180 ° como el dispositivo se inclina hacia atrás.

+

Gamma

+

Rotación alrededor del eje Y - es decir, la inclinación del dispositivo hacia la izquierda o hacia la derecha - hace que el ángulo de giro gamma cambie:

+

gamma.png

+

El ángulo gamma es 0 °, cuando los lados izquierdo y derecho del dispositivo son la misma distancia de la superficie de la Tierra, y aumenta hacia 90 ° como el dispositivo se inclina hacia la derecha, y hacia -90 ° como el dispositivo se inclina hacia el izquierda.

diff --git a/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index 15ab72ee7f..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Advanced animations -slug: Web/Guide/HTML/Canvas_tutorial/Advanced_animations -tags: - - Canvas - - Tutoria - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

En el último capítulo hicimos unas animaciones básicas y nos familiarizamos con varias maneras de mover cosas. En esta parte examinaremos la moción misma y agregaremos la física para hacer nuestras animaciones más avanzadas.

-
- -

Dibujar una bola

- -

Vamos a usar una bola para nuestro estudio de la animación, entonces primero dibujamos la bola dentro del canvas. El siguente código lo configurará.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

Como siempre, necesitamos un entorno para dibujar. Para dibujar la bola, creamos un contenido ball lo cual contiene propiedades y un método draw().

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nada especial aquí; la bola es en realidad un circulo sencillo y se dibuja con el método {{domxref("CanvasRenderingContext2D.arc()", "arc()")}}.

- -

Agregar velocidad

- -

Ya que tenemos una bola, estamos listos agregar una animación básica así como aprendimos en el último capítulo de esta tutoría. De nuevo, {{domxref("window.requestAnimationFrame()")}} nos ayuda controlar la animación. La bola empieza moverse por agregar un vector de velocidad a la posición. Para cada fotograma, también {{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}} el canvas para quitar los circulos viejos de los fotogramas anteriores.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e) {
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Límites

- -

Si no probamos los límites, de repente nuestra bola se agota el canvas. Necesitamos verificar si las posiciones x e y están fuera de las dimensiones del canvas y invertir la direción de los vectores de velocidad. Para hacer eso, agregamos los siguentes pasos al método draw:

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Primera demo

- -

Veamos como se ve en acción hasta este punto. Dirige el ratón dentro del canvas para empezar la animación.

- - - -

{{EmbedLiveSample("First_demo", "610", "310")}}

- -

Aceleración

- -

Para convertir la moción en más auténtica, puedes jugar con la velocidad, así por ejemplo:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Esto reduce el vector vertical de velocidad para cada fotograma para que la bola termina rebotando en el suelo.

- - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

- -

Efecto de rezagar

- -

Hasta este punto hemos limpiado los fotogramas anteriores con el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}. Si reemplazas este método con un semi-transparente {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}, puedes facilmente crear un efecto de rezagar.

- -
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-ctx.fillRect(0, 0, canvas.width, canvas.height);
- - - -

{{EmbedLiveSample("Third_demo", "610", "310")}}

- -

Agregar control de ratón

- -

Para controlar la bola, podemos hacerla seguir nuestro ratón usando el evento mousemove, por ejemplo. El evento click solta la bola y la deja rebotar de nuevo.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e) {
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener('click', function(e) {
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Mueve la bola usando el ratón y suéltala haciendo click.

- -

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

- -

Breakout

- -

Este capítulo corto sólo explica algunas técnicas para crear animaciones más avanzadas. ¡Hay muchos más!  ¿Qué tal agregar una raqueta, algunos ladrillos, y convertir esta demo en un partido Breakout? Visita nuestra área de Game development para mayor información.

- -

Vea también

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index ab76918132..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,726 +0,0 @@ ---- -title: Applying styles and colors -slug: Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

En el capítulo acerca de dibujar formas, usamos unicamente los estilos de linea y de relleno por defecto. Aqui exploraremos las opciones del canvas que tenemos a nuestra disposición para hacer los dibujos un tanto más atractivos. Aprenderas como agregar diferentes colores, estilos de linea, gradiantes, patrones y sombras a tus dibujos.

-
- -

Colors

- -

Hasta ahrora nosotros solo me hemos visto metodos en el contexto de dibujo. Si quisieramos aplicar colores a las formas, hay dos importantes propiedades que podemos usar: fillStyle y strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
Configura el estilo cuando se rellenan las formas.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
Configura el estilo al contorno perimetral de las formas.
-
- -

color es una cadena que representa  un CSS {{cssxref("<color>")}}, un objeto gradiante, o un objeto patron. Miraremos en objetos de gradientes y patrones mas tarde. Por defecto, el color del trazo y del relleno son configurados en negro (valor de color CSS #000000).

- -
-

Nota:  Cuando configuras la propiedad  strokeStyle y/o fillStyle, el nuevo valor llega a ser el vador por defecto para los dibujos posteriores. Para cada forma que tu quieras en un color difrente, necesitaras reasignar las propiedades anteriores.

-
- -

Las cadenas validas que tu pueden entrar deberian, segun la especificación, ser valores de  {{cssxref("<color>")}} CSS. En el siguiente ejemplo, describimos en mismo color.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = 'orange';
-ctx.fillStyle = '#FFA500';
-ctx.fillStyle = 'rgb(255, 165, 0)';
-ctx.fillStyle = 'rgba(255, 165, 0, 1)';
-
- -

A fillStyle example

- -

En este ejemplo, usamos dos bucles for para dibujar una cuadrícula de rectangulos, cada uno de diferente color. La imagen resultante deberia ser similar a la de la screenhot. No hay nada demasiado espectacular en el proceso. Usamos dos variables i y j para generar un unico color RGB para cada celda cuadrada, modificando las componentes rojo y verde. El canal azul tiene un valor fijo. Modificando los canales, puedes generar todo tipo de paletas. Incrementando los paos, puedes lograr algo similar que se parezca a las paletas de colores que Photoshop usa.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
-                       Math.floor(255 - 42.5 * j) + ', 0)';
-      ctx.fillRect(j * 25, i * 25, 25, 25);
-    }
-  }
-}
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

A strokeStyle example

- -

Este ejemplo es similar al de arriba, pero usa la propiedad  strokeStyle para cambiar el color del contorno de las formas. Usamos el método  arc() para dibujar circulos en lugar de celdas cuadradas.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i = 0; i < 6; i++) {
-      for (var j = 0; j < 6; j++) {
-        ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
-                         Math.floor(255 - 42.5 * j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

Transparency

- -

Ademas de dibujar formas opacas en el canvas, podemos dibujar formas semi-transparentes(o translucidas). Esto se logra bien configurando la propiedad  globalAlpha o asignando un color semi-transparente al estilo del trazo u  u/y al de relleno.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
Applies the specified transparency value to all future shapes drawn on the canvas. The value must be between 0.0 (fully transparent) to 1.0 (fully opaque). This value is 1.0 (fully opaque) by default.
-
- -

The globalAlpha property can be useful if you want to draw a lot of shapes on the canvas with similar transparency, but otherwise it's generally more useful to set the transparency on individual shapes when setting their colors.

- -

Debido qaque las propiedades  strokeStyle y fillStyle aceptan valores de color rgba de CSS, podemos usar la siguiente notacion para asignar una color transparente a ellos.

- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-
- -

The rgba() function is similar to the rgb() function but it has one extra parameter. The last parameter sets the transparency value of this particular color. The valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque).

- -

A globalAlpha example

- -

In this example, we'll draw a background of four different colored squares. On top of these, we'll draw a set of semi-transparent circles. The globalAlpha property is set at 0.2 which will be used for all shapes from that point on. Every step in the for loop draws a set of circles with an increasing radius. The final result is a radial gradient. By overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. By increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0, 0, 75, 75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75, 0, 75, 75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0, 75, 75, 75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (var i = 0; i < 7; i++) {
-    ctx.beginPath();
-    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

An example using rgba()

- -

In this second example, we do something similar to the one above, but instead of drawing circles on top of each other, I've drawn small rectangles with increasing opacity. Using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255, 221, 0)';
-  ctx.fillRect(0, 0, 150, 37.5);
-  ctx.fillStyle = 'rgb(102, 204, 0)';
-  ctx.fillRect(0, 37.5, 150, 37.5);
-  ctx.fillStyle = 'rgb(0, 153, 255)';
-  ctx.fillRect(0, 75, 150, 37.5);
-  ctx.fillStyle = 'rgb(255, 51, 0)';
-  ctx.fillRect(0, 112.5, 150, 37.5);
-
-  // Draw semi transparent rectangles
-  for (var i = 0; i < 10; i++) {
-    ctx.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
-    for (var j = 0; j < 4; j++) {
-      ctx.fillRect(5 + i * 14, 5 + j * 37.5, 14, 27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Line styles

- -

There are several properties which allow us to style lines.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Sets the width of lines drawn in the future.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Sets the appearance of the ends of lines.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Sets the appearance of the "corners" where lines meet.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Establishes a limit on the miter when two lines join at a sharp angle, to let you control how thick the junction becomes.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
Returns the current line dash pattern array containing an even number of non-negative numbers.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
Sets the current line dash pattern.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
Specifies where to start a dash array on a line.
-
- -

You'll get a better understanding of what these do by looking at the examples below.

- -

A lineWidth example

- -

This property sets the current line thickness. Values must be positive numbers. By default this value is set to 1.0 units.

- -

The line width is the thickness of the stroke centered on the given path. In other words, the area that's drawn extends to half the line width on either side of the path. Because canvas coordinates do not directly reference pixels, special care must be taken to obtain crisp horizontal and vertical lines.

- -

In the example below, 10 straight lines are drawn with increasing line widths. The line on the far left is 1.0 units wide. However, the leftmost and all other odd-integer-width thickness lines do not appear crisp, because of the path's positioning.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++) {
-    ctx.lineWidth = 1 + i;
-    ctx.beginPath();
-    ctx.moveTo(5 + i * 14, 5);
-    ctx.lineTo(5 + i * 14, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

Obtaining crisp lines requires understanding how paths are stroked. In the images below, the grid represents the canvas coordinate grid. The squares between gridlines are actual on-screen pixels. In the first grid image below, a rectangle from (2,1) to (5,5) is filled. The entire area between them (light red) falls on pixel boundaries, so the resulting filled rectangle will have crisp edges.

- -

- -

If you consider a path from (3,1) to (3,5) with a line thickness of 1.0, you end up with the situation in the second image. The actual area to be filled (dark blue) only extends halfway into the pixels on either side of the path. An approximation of this has to be rendered, which means that those pixels being only partially shaded, and results in the entire area (the light blue and dark blue) being filled in with a color only half as dark as the actual stroke color. This is what happens with the 1.0 width line in the previous example code.

- -

To fix this, you have to be very precise in your path creation. Knowing that a 1.0 width line will extend half a unit to either side of the path, creating the path from (3.5,1) to (3.5,5) results in the situation in the third image—the 1.0 line width ends up completely and precisely filling a single pixel vertical line.

- -
-

Note: Be aware that in our vertical line example, the Y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current lineCap style whose default value is butt; you may want to compute consistent strokes with half-pixel coordinates for odd-width lines, by setting the lineCap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).

- -

Note also that only start and final endpoints of a path are affected: if a path is closed with closePath(), there's no start and final endpoint; instead, all endpoints in the path are connected to their attached previous and next segment using the current setting of the lineJoin style, whose default value is miter, with the effect of automatically extending the outer borders of the connected segments to their intersection point, so that the rendered stroke will exactly cover full pixels centered at each endpoint if those connected segments are horizontal and/or vertical). See the next two sections for demonstrations of these additional line styles.

-
- -

For even-width lines, each half ends up being an integer amount of pixels, so you want a path that is between pixels (that is, (3,1) to (3,5)), instead of down the middle of pixels.

- -

While slightly painful when initially working with scalable 2D graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other transformations involved. A 1.0-width vertical line drawn at the correct position will become a crisp 2-pixel line when scaled up by 2, and will appear at the correct position.

- -

A lineCap example

- -

The lineCap property determines how the end points of every line are drawn. There are three possible values for this property and those are: butt, round and square. By default this property is set to butt.

- -

- -
-
butt
-
The ends of lines are squared off at the endpoints.
-
round
-
The ends of lines are rounded.
-
square
-
The ends of lines are squared off by adding a box with an equal width and half the height of the line's thickness.
-
- -

In this example, we'll draw three lines, each with a different value for the lineCap property. I also added two guides to see the exact differences between the three. Each of these lines starts and ends exactly on these guides.

- -

The line on the left uses the default butt option. You'll notice that it's drawn completely flush with the guides. The second is set to use the round option. This adds a semicircle to the end that has a radius half the width of the line. The line on the right uses the square option. This adds a box with an equal width and half the height of the line thickness.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt', 'round', 'square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i = 0; i < lineCap.length; i++) {
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25 + i * 50, 10);
-    ctx.lineTo(25 + i * 50, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

A lineJoin example

- -

The lineJoin property determines how two connecting segments (of lines, arcs or curves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped).

- -

There are three possible values for this property: round, bevel and miter. By default this property is set to miter. Note that the lineJoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case.

- -

- -
-
round
-
Rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. The radius for these rounded corners is equal to half the line width.
-
bevel
-
Fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular corners of each segment.
-
miter
-
Connected segments are joined by extending their outside edges to connect at a single point, with the effect of filling an additional lozenge-shaped area. This setting is effected by the miterLimit property which is explained below.
-
- -

The example below draws three different paths, demonstrating each of these three lineJoin property settings; the output is shown above.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round', 'bevel', 'miter'];
-  ctx.lineWidth = 10;
-  for (var i = 0; i < lineJoin.length; i++) {
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5, 5 + i * 40);
-    ctx.lineTo(35, 45 + i * 40);
-    ctx.lineTo(75, 5 + i * 40);
-    ctx.lineTo(115, 45 + i * 40);
-    ctx.lineTo(155, 5 + i * 40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

A demo of the miterLimit property

- -

As you've seen in the previous example, when joining two lines with the miter option, the outside edges of the two joining lines are extended up to the point where they meet. For lines which are at large angles with each other, this point is not far from the inside connection point. However, as the angles between each line decreases, the distance (miter length) between these points increases exponentially.

- -

The miterLimit property determines how far the outside connection point can be placed from the inside connection point. If two lines exceed this value, a bevel join gets drawn instead. Note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterLimit property (whose default value is 10.0 in the HTML {{HTMLElement("canvas")}}), so the miterLimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.

- -

More exactly, the miter limit is the maximum allowed ratio of the extension length (in the HTML canvas, it is measured between the outside corner of the joined edges of the line and the common endpoint of connecting segments specified in the path) to half the line width. It can equivalently be defined as the maximum allowed ratio of the distance between the inside and outside points of jonction of edges, to the total line width. It is then equal to the cosecant of half the minimum inner angle of connecting segments below which no miter join will be rendered, but only a bevel join:

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • The default miter limit of 10.0 will strip all miters for sharp angles below about 11 degrees.
    • -
  • A miter limit equal to √2 ≈ 1.4142136 (rounded up) will strip miters for all acute angles, keeping miter joins only for obtuse or right angles.
    • -
  • A miter limit equal to 1.0 is valid but will disable all miters.
    • -
  • Values below 1.0 are invalid for the miter limit.
    • -
- -

Here's a little demo in which you can set miterLimit dynamically and see how this effects the shapes on the canvas. The blue lines show where the start and endpoints for each of the lines in the zig-zag pattern are.

- -

If you specify a miterLimit value below 4.2 in this demo, none of the visible corners will join with a miter extension, but only with a small bevel near the blue lines; with a miterLimit above 10, most corners in this demo should join with a miter far away from the blue lines, and whose height is decreasing between corners from left to right because they connect with growing angles; with intermediate values, the corners on the left side will only join with a bevel near the blue lines, and the corners on the right side with a miter extension (also with a decreasing height).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0, 0, 150, 150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5, 50, 160, 50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0, 100);
-  for (i = 0; i < 24 ; i++) {
-    var dy = i % 2 == 0 ? 25 : -25;
-    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Using line dashes

- -

The setLineDash method and the lineDashOffset property specify the dash pattern for lines. The setLineDash method accepts a list of numbers that specifies distances to alternately draw a line and a gap and the lineDashOffset property sets an offset where to start the pattern.

- -

In this example we are creating a marching ants effect. It is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. In a later part of this tutorial, you can learn how to do this and other basic animations.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10, 10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradients

- -

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a {{domxref("CanvasGradient")}} object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Once we've created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS {{cssxref("<color>")}}, indicating the color the gradient should reach at that offset into the transition.
-
- -

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

A createLinearGradient example

- -

In this example, we'll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
-
-}
-
- - - -

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn't matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won't be a problem.

- -

In the second gradient, we didn't assign the starting color (at position 0.0) since it wasn't strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

A createRadialGradient example

- -

In this example, we'll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the "classic" radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
-
-  var radgrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
-
-  var radgrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
-
-  var radgrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0, 0, 150, 150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0, 0, 150, 150);
-}
-
- - - -

In this case, we've offset the starting point slightly from the end point to achieve a spherical 3D effect. It's best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

- -

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn't very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Patterns

- -

In one of the examples on the previous page, we used a series of loops to create a pattern of images. There is, however, a much simpler method: the createPattern() method.

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
Creates and returns a new canvas pattern object. image is a {{domxref("CanvasImageSource")}} (that is, an {{domxref("HTMLImageElement")}}, another canvas, a {{HTMLElement("video")}} element, or the like. type is a string indicating how to use the image.
-
- -

The type specifies how to use the image in order to create the pattern, and must be one of the following string values:

- -
-
repeat
-
Tiles the image in both vertical and horizontal directions.
-
repeat-x
-
Tiles the image horizontally but not vertically.
-
repeat-y
-
Tiles the image vertically but not horizontally.
-
no-repeat
-
Doesn't tile the image. It's used only once.
-
- -

We use this method to create a {{domxref("CanvasPattern")}} object which is very similar to the gradient methods we've seen above. Once we've created a pattern, we can assign it to the fillStyle or strokeStyle properties. For example:

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
-
- -
-

Note: Like with the drawImage() method, you must make sure the image you use is loaded before calling this method or the pattern may be drawn incorrectly.

-
- -

A createPattern example

- -

In this last example, we'll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image's onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
-
-    // create pattern
-    var ptrn = ctx.createPattern(img, 'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0, 0, 150, 150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Shadows

- -

Using shadows involves just four properties:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
Indicates the horizontal distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
Indicates the vertical distance the shadow should extend from the object. This value isn't affected by the transformation matrix. The default is 0.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
Indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.
-
- -

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren't affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

- -

The shadowBlur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

- -

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

- -
-

Note: Shadows are only drawn for source-over compositing operations.

-
- -

A shadowed text example

- -

This example draws a text string with a shadowing effect.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
-
-  ctx.font = '20px Times New Roman';
-  ctx.fillStyle = 'Black';
-  ctx.fillText('Sample String', 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

We will look at the font property and fillText method in the next chapter about drawing text.

- -

Canvas fill rules

- -

When using fill (or {{domxref("CanvasRenderingContext2D.clip", "clip")}} and {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersects itself or is nested.
-
- Two values are possible:

- - - -

In this example we are using the evenodd rule.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 94c66fb05d..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: Animaciones básicas -slug: Web/Guide/HTML/Canvas_tutorial/Basic_animations -tags: - - Canvas - - HTML5 - - Intermedio - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

Ya que estamos usando JavaScript para controlar elementos {{HTMLElement("canvas")}} , también es muy fácil hacer animaciones (interactivas). En este capitulo veremos como hacer algunas animaciones básicas.

-
- -

Probablemente la mayor limitación es que una vez que se dibuja una forma, se mantiene de esa manera. Si necesitamos moverlo tenemos que volver a dibujarlo y todo lo que se dibujó antes. Se necesita mucho tiempo para volver a dibujar estructuras complejas y el rendimiento depende en gran medida de la velocidad de la computadora en la que se ejecuta.

- -

Pasos básicos de animación

- -

Estos son los pasos que necesitas para dibujar un cuadro:

- -
    -
  1. Limpiar el canvas
    - A menos que las formas que vas a dibujar llenen el canvas completo (por ejemplo, una imagen de fondo), debes borrar cualquier forma que haya dibujado previamente. La forma más fácil de hacerlo es usar el método {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}.
    2. -
  2. Guardar el estado del canvas
    - Si estás cambiando alguna configuración (como estilos, transformaciones, etc.) que afecte el estado del canvas y deseas asegurarte de que se utiliza el estado original cada vez que se dibuja una figura, debes guardar ese estado original. 
    3. -
  3. Dibujar formas animadas
    - El paso en el que realizas el renderizado del cuadro actual.
    4. -
  4. Restaurar el estado del canvas
    - Si has guardado el estado, restáuralo antes de dibujar un nuevo cuadro.
    5. -
- -

Controlando una animación

- -

Las formas se dibujan en el canvas utilizando los métodos de canvas directamente o llamando a funciones personalizadas. En circunstancias normales, solo vemos que estos resultados aparecen en el canvas cuando el script termina de ejecutarse. Por ejemplo, no es posible hacer una animación desde un bucle for.

- -

Eso significa que necesitamos una forma de ejecutar nuestras funciones de dibujo durante un período de tiempo. Hay dos formas de controlar una animación como esta.

- -

Actualizaciones Programadas

- -

Primero {{domxref("window.setInterval()")}}, {{domxref("window.setTimeout()")}}, y {{domxref("window.requestAnimationFrame()")}} son funciones que pueden ser usadas para llamar una función especifica en un periodo de tiempo establecido.

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Ejecuta una función especificada por function cada delay milisegundos.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Ejecuta una función especificada por function dentro de delay milisegundos.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Comunica al navegador que  deseas iniciar una animación y requieres que el navegador llame a las funciones especificas para actualizar la misma antes de la siguiente escena.
-
- -

Si no quieres ninguna interacción del usuario puedes usar la función setInterval() que repite la ejecución del código suministrado. Si lo que queremos es hacer un juego, podríamos usar eventos de teclado o el mouse para controlar la animación y usar setTimeout(). Al establecer los {{domxref("EventListener")}}, capturamos cualquier interacción del usuario y ejecutamos nuestras funciones de animación.

- -
-

En los siguiente ejemplo,usaremos el método para controlar animaciones {{domxref("window.requestAnimationFrame()")}}. El método requestAnimationFrame provee formas amigables y mas eficientes  para animar llamando cada marco de animación cuando el sistema esta listo para dibujar. La cantidad de devoluciones de llamadas suele ser 60 veces por segundo y podría ser reducido a menor periodo cuando se corre en un segundo plano. Para mas información acerca de los ciclos de animación, especialmente para juegos, Ver el Articulo Anatomía de un videojuego en nuestra GameZona de desarrollo de Juegos.

-
- -

Un sistema solar animado

- -

Este ejemplo animado es un pequeño modelo de nuestro sistema solar.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // limpiar canvas
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // La tierra
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Sombra
-  ctx.drawImage(earth,-12,-12);
-
-  // La luna
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // Órbita terrestre
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("Un_sistema_solar_animado", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

Un reloj animado

- -

Este ejemplo dibuja una reloj animado, mostrando la hora actual.

- -
function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // Aguja de la hora
-  ctx.save();
-  for (var i=0;i<12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Aguja del minuto
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // Escribimos la hora
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // escribimos los minutos
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // escribimos los segundos
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

{{EmbedLiveSample("Un_reloj_animado", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

Un panorama en bucle

- -

En este ejemplo, una foto panorámica avanza de izquierda a derecha. Donde usaremos una imagen del Parque Nacional de Yosemite que tomamos de Wikipedia, pero tu podrías usar cualquier imagen que sea mas grande que el canvas.

- -
var img = new Image();
-
-// Variables de usuario - personalizar estas para cambiar la imagen cuando inicie el desplazamiento
-// dirección y velocidad.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; //más bajo es más rápido
-var scale = 1.05;
-var y = -4.5; //desplazamiento vertical
-
-// Programa principal
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW > CanvasXSize) {
-        // imagen más grande que canvas
-        x = CanvasXSize - imgW;
-    }
-    if (imgW > CanvasXSize) {
-        // ancho de imagen más grande que canvas
-        clearX = imgW;
-    } else {
-        clearX = CanvasXSize;
-    }
-    if (imgH > CanvasYSize) {
-        // altura de la imagen más grande que canvas
-        clearY = imgH;
-    } else {
-        clearY = CanvasYSize;
-    }
-
-    // obtener contexto de canvas
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // establecer frecuencia de actualización
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // si la imagen es <= tamaño de Canvas
-    if (imgW <= CanvasXSize) {
-        // reiniciar, comenzar desde el principio
-        if (x > CanvasXSize) {
-            x = -imgW + x;
-        }
-        // dibujar image1 adicional
-        if (x > 0) {
-            ctx.drawImage(img, -imgW + x, y, imgW, imgH);
-        }
-        // dibujar image2 adicional
-        if (x - imgW > 0) {
-            ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
-        }
-    }
-
-    // la imagen es > tamaño de Canvas
-    else {
-        // reiniciar, comenzar desde el principio
-        if (x > (CanvasXSize)) {
-            x = CanvasXSize - imgW;
-        }
-        // dibujar image adicional
-        if (x > (CanvasXSize-imgW)) {
-            ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
-        }
-    }
-    // dibujar imagen
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // cantidad para moverse
-    x += dx;
-}
- -

Debajo esta el elemento {{HTMLElement("canvas")}} en el cual va la imagen se va ha desplazar. Nota que el ancho y el alto especificado aquí son las variables CanvasXZSize y CanvasYSize.

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

{{EmbedLiveSample("Un_panorama_en_bucle", "830", "230")}}

- -

Otros ejemplos

- -
-
Un ray-caster básico
-
Un buen ejemplo de como hacer animaciones usando como control el teclado.
-
Animaciones avanzadas
-
Vamos a echar un vistazo a algunas técnicas de animación avanzadas y física en el próximo capítulo.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html deleted file mode 100644 index 17136d7a7e..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: Uso básico de Canvas -slug: Web/Guide/HTML/Canvas_tutorial/Basic_usage -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Dibujando_formas")}}
- -
-

Comenzamos este tutorial observando el elemento  {{HTMLElement("canvas")}}. Al final de esta página, sabrás como configurar el entorno 2D de canvas y habrás dibujado el primer ejemplo en tu navegador.

-
- -

El elemento <canvas>

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

A primera vista, un elemento {{HTMLElement("canvas")}} es parecido al elemento {{HTMLElement("img")}}, con la diferencia que este no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos - {{htmlattrxref("width", "canvas")}} y {{htmlattrxref("height", "canvas")}}. Ambos son opcionales y pueden ser definidos usando propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara con 300 pixels ancho y 150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse al tamaño de su layout. Si el tamaño del CSS no respeta el ratio del canvas inicial, este aparecerá distorsionado.

- -
-

Nota: Si su renderizado se ve distorsionado, pruebe especificar los atributos width y height explícitamente en los atributos del <canvas> , y no usando CSS.

-
- -

El atributo id no está especificado para el elemento  <canvas> pero es uno de los atributos globales de HTML el cual puede ser aplicado a cualquier elemento HTML (como class por ejemplo). Siempre es buena idea proporcionar un id porque esto hace más fácil identificarlo en un script.

- -

El elemento <canvas> puede ser estilizado como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el canvas. Mas adelante veremos cómo se hace esto en un capítulo dedicado en este tutorial. Cuando no tenemos reglas de estilo aplicadas al canvas, este será completamente transparente.

- -
-

Contenido alternativo

- -

El elemento <canvas> se diferencia de un tag {{HTMLElement("img")}} en que, como los elementos {{HTMLElement("video")}}, {{HTMLElement("audio")}} o {{HTMLElement("picture")}}, es fácil definir contenido alternativo (fallback content) para mostrarse en navegadores viejos que no soporten el elemento <canvas>, como versiones de Internet Explorer previas a la versión 9 o navegadores de texto. Siempre debes proporcionar contenido alternativo para mostrar en estos navegadores.

- -

Proporcionar contenido alternativo es muy explicito: solo debemos insertar el contenido alterno dentro del elemento <canvas>. Los navegadores que no soporten <canvas> ignoraran el contenedor y mostrarán el contenido indicado dentro de este. Navegadores que soporten <canvas> ignorarán el contenido en su interior (de las etiquetas), y mostrarán el canvas normalmente.

- -

Por ejemplo, podremos proporcionar un texto descriptivo del contenido del canvas o proveer una imagen estática del contenido rederizado. Nos podría quedar algo así:

- -
<canvas id="stockGraph" width="150" height="150">
-  current stock price: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Etiqueta </canvas> requerida

- -

De manera distinta al elemento {{HTMLElement("img")}}, el elemento {{HTMLElement("canvas")}} requiere cerrar la etiqueta  (</canvas>).

- -
-

Note: Aunque las versiones anteriores del navegador Safari de Apple no requeria el cierre de la etiqueta, la especificacion indica que es necesaria, asi que tu deberias incluir esta para asegurarte la compatibilidad. Aquellas versiones de Safari (anteriores versiones a 2.0) renderizaran el contenido de regreso agregandolo al canvas mismo a no ser que utilice trucos de CSS para enmascararlo. Afortunadamente, los usuarios de aquellas versiones de Safari son raros hoy en dia.

-
- -

Si el contenido alternativo no se necesita, un simple <canvas id="foo" ...></canvas> es completamente compatible con todos los navegadores que soportan canvas.

- -

El contexto de renderización

- -

{{HTMLElement("canvas")}} crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES.

- -

El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento  {{HTMLElement("canvas")}} tiene un method llamado  getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo. getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

La primera linea regresa el nodo DOM para el elemento {{HTMLElement("canvas")}} llamando al metodo  {{domxref("document.getElementById()")}}. Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo getContext().

- -
-

Comprobando soporte

- -

El contenido de regreso que es mostrado en navegadores los cuales no soportan {{HTMLElement("canvas")}}. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo getContext(). Con un trozo de codigo parecido al que viene debajo:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-
-
-
- -

Un esqueleto de plantilla

- -

Aqui esta una plantilla minimalista, la cual usaremos como punto de partida para posteriores ejemplos.

- -
<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podria tambien ser llamada usando {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, o cualquier otro manejador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.

- -

Aqui esta como la plantilla se ve en acción:

- -

{{EmbedLiveSample("Un_esqueleto_de_plantilla", 160, 160)}}

- -

Un simple ejemplo

- -

Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectangulos que se intersectan, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.

- -
<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 55, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 55, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

Este ejemplo quedaría así:

- -

{{EmbedLiveSample("Un_simple_ejemplo", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Dibujando_formas")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html b/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html deleted file mode 100644 index 3467533e93..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html +++ /dev/null @@ -1,513 +0,0 @@ ---- -title: Dibujando formas con canvas -slug: Web/Guide/HTML/Canvas_tutorial/Dibujando_formas -tags: - - Canvas - - HTML - - HTML Canvas - - HTML5 - - Intermedio - - Tutorial - - graficos -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
- -
-

Ahora que hemos preparado nuestro entorno canvas, podemos entrar en detalles de como dibujar en el canvas. Al final de este artículo, habrás aprendido  como dibujar rectángulos, triángulos, líneas, arcos y curvas, dándote familiaridad con algunas figuras básicas. Trabajar con rutas es esencial cuando dibujamos objetos sobre el canvas y veremos como se puede hacer eso.

-
- -

La cuadrícula

- -

Antes de que podamos empezar a dibujar, necesitamos hablar sobre la cuadrícula del canvas o el espacio de coordenadas. La plantilla HTML de la página anterior tenía un elemento canvas con un 'height' y un 'width' de 150 píxeles. A la derecha, puedes ver este canvas con la cuadrícula por defecto superpuesta. Normalmente una unidad en la cuadrícula corresponde a un píxel en el elemento canvas. El origen de esta cuadrícula está posicionado en la esquina superior izquierda (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior izquierda del cuadrado azul es de 'x' pixeles desde la izquierda y 'y' pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posicion diferente, girar la cuadrícula e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas común.

- -

Dibujando rectángulos

- -

A diferencia de SVG, {{HTMLElement("canvas")}} solo soporta una forma primitiva: rectangulos. Todas las otras formas deben ser creadas por la combinación de uno o más trazos, listas de puntos conectados por líneas. Afortunadamente, tenemos una variedad de funciones para dibujar trazos  que hacen posible componer formas muy complejas.

- -
-

Primero veamos el rectángulo. Aquí hay tres funciones que podemos usar en el canvas para dibujarlos:

- -
-
fillRect(x, y, width, height)
-
Dibuja un rectángulo relleno.
-
strokeRect(x, y, width, height)
-
Dibuja el contorno de un rectángulo.
-
clearRect(x, y, width, height)
-
Borra un área rectangular especificada, dejándola totalmente transparente.
-
- -

Cada una de estas tres funciones toma los mismos parámetros. X e Y especifican la posición del canvas (en relación con el origen) desde la esquina superior izquierda del rectángulo. Tambien especifica los parámetros de anchura y altura que proporcionan el tamaño del rectángulo.

- -

A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.

- -

Ejemplo de forma rectangular

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25,25,100,100);
-    ctx.clearRect(45,45,60,60);
-    ctx.strokeRect(50,50,50,50);
-  }
-}
- -

El resultado de este ejemplo se muestra a continuación.

- -

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

La función fillRect() dibuja un cuadrado grande negro de 100 píxeles en cada lado. La función clearRect() luego borra un cuadrado de 60x60 píxeles del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro del cuadrado borrado.

- -

En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo de diferentes formas.

- -

A diferencia de las funciones de trazo que veremos en la próxima sección, las tres funciones del rectángulo dibujan inmediatamente en el canvas.

- -

Dibujando trazos

- -

Crear formas mediante trazos requiere algunos pasos adicionales.

- -
    -
  1. Primero, se crea el trazo.
    2. -
  2. A continuación, se usan comandos de dibujo para dibujar dentro del trazo.
    3. -
  3. Después, se cierra el trazo.
    4. -
  4. Una vez el trazo ha sido creado, se le puede dar contorno o relleno para renderizarlo.
    5. -
- -

Estas son las funciones que se usan para llevar a cabo estos pasos:

- -
-
beginPath()
-
Crea un nuevo trazo. Una vez creado, los comandos de dibujo futuros son aplicados dentro del trazo y usados para construir el nuevo trazo hacia arriba.
-
closePath()
-
Cierra el trazo de tal forma que los comandos de dibujo futuros son, una vez más redireccionados al contexto.
-
stroke()
-
Dibuja el contorno de la forma.
-
fill()
-
Dibuja una forma solida rellenando el área del trazo.
-
- -

El primer paso para crear un trazo es llamar la función beginPath(). Internamente, los trazos son guardados como una lista de subtrazos (lineas, arcos, etc) los cuales juntos crean una forma. Todo tiempo que sea llamado este método la lista es reseteada y podemos empezar a dibujar nuevas formas.

- -
Nota: Cuando el trazo actual este vacio, como aparece inmediatamente despues de llamar la función beginPath(), o en un canvas nuevo, el primer comando para la construcción del trazo es siempre tratada como un moveTo(), independientemente de cual es el trazo actual. Por esta razón casi siempre querrás específicamente setear tu posición de inicio despues de resetear un trazo.
- -

El segundo paso es llamar los métodos que específican los trazos a crear. Los veremos en seguida.

- -

El tercero, y un paso opcional, es llamar a la función closePath(). Este método trata de cerrar la forma dibujando una linea recta desde el punto actual al inicio. Si la forma ya ha sido cerrada o hay solamente un punto en la lista, la función hace nada.

- -
Nota: Cuando llamas a la función fill(), cualquier forma abierta es cerrada automaticamente, de tal forma que no tendrás que llamar a la función closePath(). Este no es el caso cuando llamas a la función stroke().
- -

Dibujando un triangulo

- -

Por ejemplo, el código para dibujar un triangulo luciría como el siguiente:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75,50);
-    ctx.lineTo(100,75);
-    ctx.lineTo(100,25);
-    ctx.closePath();
-    ctx.fill();
-  }
-}
-
- -

El resultado lucirá así:

- -

{{EmbedLiveSample("Drawing_a_triangle", 160, 160)}}

- -

Moviendo la pluma

- -

Una función muy útil, la cual realmente no dibuja algo pero convierte parte de la lista de trazos descrita arriba, es la función moveTo(). Puedes, probablemente, pensar mejor de esta como levantar el lápiz o la pluma de un punto en un pedazo de papel y ponerlo en el siguiente punto.

- -
-
moveTo(x, y)
-
Mueve la pluma a las coordenadas específicadas por x e y.
-
- -

Cuando el canvas es inicializado ó la función beginPath() es llamada, querrás usar la función moveTo() para colocar el punto de inicio en alguna otra parte. Podríamos usar moveTo() para dibujar trazos sin conectar. Toma un vistazo a la cara sonriente de abajo. He marcado los lugares donde use el método moveTo() (las líneas rojas).

- -

Para intentar esto por tí mismo, puedes usar el pequeño código de abajo. Solo pégalo dentro de la función draw() que vimos antes.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75,75,50,0,Math.PI*2,true); // Círculo externo
-    ctx.moveTo(110,75);
-    ctx.arc(75,75,35,0,Math.PI,false);   // Boca (contra reloj)
-    ctx.moveTo(65,65);
-    ctx.arc(60,65,5,0,Math.PI*2,true);  // Ojo izquierdo
-    ctx.moveTo(95,65);
-    ctx.arc(90,65,5,0,Math.PI*2,true);  // Ojo derecho
-    ctx.stroke();
-  }
-}
-
- -

El resultado luce así:

- -

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -

Si quisieras ver las líneas conectadas, puedes remover las líneas de código que llaman moveTo().

- -
-

Nota: Para aprender más sobre la función arc(), vea los {{anch("Arcs")}} a continuación.

-
- -

Líneas

- -

Para dibujar lineas rectas usa el método lineTo().

- -
-
lineTo(x, y)
-
Dibuja una línea desde la posición actual del dibujo a la posición específicada por x e y.
-
- -

Este método toma dos argumentos x e y, los cuales son las coordenadas del punto final de la linea. El punto de inicio es dependiente de los trazos previamente dibujados, donde el punto final del trazo anterior es el punto inicial para el siguiente, etc. El punto de inicio también puede ser cambiado usando el método moveTo().

- -

El ejemplo siguiente dibuja dos triángulos, uno rellenado y el otro contorneado.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Triángulo rellenado
-    ctx.beginPath();
-    ctx.moveTo(25,25);
-    ctx.lineTo(105,25);
-    ctx.lineTo(25,105);
-    ctx.fill();
-
-    // Triángulo contorneado
-    ctx.beginPath();
-    ctx.moveTo(125,125);
-    ctx.lineTo(125,45);
-    ctx.lineTo(45,125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

Esto comienza llamando a beginPath() para empezar una nueva forma. Entonces usamos el método moveTo() para mover el punto de inicio a la posición deseada. Debajo de esto dos líneas son dibujadas lo cual pinta dos lados del triángulo.

- -

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Te darás cuenta de la diferencia entre el triángulo rellenado y el contorneado. Esto es, como se menciona arriba, porque las formas son automáticamente cerradas cuando un trazo es rellenado, pero no cuando esta contorneado. Si sacamos el closePath() para el triángulo contorneado, solamente dos líneas serian dibujadas, no un triángulo completo.

- -

Arcos

- -

Para dibujar arcos o circulos usamos el método arc(). También puedes usar arcTo(), pero su implementación es un poco menos confiable, así que no lo cubriremos aquí.

- -
-
arc(x, y, radius, startAngle, endAngle, anticlockwise)
-
Dibuja un arco.
-
- -

Este método toma cinco parámetros: x e y son las coordenadas del centro del círculo en el cual el arco debería ser dibujado. radius se explica por sí solo. Los parámetros startAngle y endAngle definen el punto de inicio y punto final del arco en radianes a lo largo de la curva del círculo. Estos son medidos desde el eje x. El parámetro anticlockwise es un valor Booleano el cual cuando es verdadero (true) dibuja el arco al contrario de las manecillas del reloj, de lo contrario el arco es dibujado al sentido de las manecillas del reloj.

- -
-

Nota: Los ángulos en la función del arco (arc) son medidos en radianes, no en grados. Para convertir grados a radianes puedes usar la siguiente expresión en Javascript: radians = (Math.PI/180)*degrees.

-
- -

El siguiente ejemplo es un poco más complejo que otros que hemos visto arriba. Esto dibuja 12 diferentes arcos, todos con diferentes ángulos y rellenos.

- -

Las dos sentencias for son para iterar a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo trazo llamando beginPath(). En el código, cada uno de los parámetros para el arco estan en una variable para su entendimiento, pero no es necesario esto en la vida real.

- -

Las coordenadas x e y deberían ser suficientemente claras. radius y startAngle estan arreglados. El endAngle inicia en 180 grados (la mitad de un círculo) en la primera columna y es incrementado por pasos de 90 grados, culminando en un círculo completo en la última columna.

- -

El parámetro clockwise resulta, en la primera y tercera fila siendo dibujado como un arco al sentido de las manecillas de reloj y la segunda y cuarta fila como arcos al contrario de las manecillas de reloj. Finalmente, la estructura if hace los arcos contorneados a la mitad desde arriba y los arcos hacia abajorellenados a la mitad.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    for(var i=0;i<4;i++){
-      for(var j=0;j<3;j++){
-        ctx.beginPath();
-        var x              = 25+j*50;               // Coordenada x
-        var y              = 25+i*50;               // Coordenada y
-        var radius         = 20;                    // Radio del arco
-        var startAngle     = 0;                     // Punto inicial del círculo
-        var endAngle       = Math.PI+(Math.PI*j)/2; // Punto final del círculo
-        var anticlockwise  = i%2==0 ? false : true; // Sentido de las manecillas del reloj y contrario a ellas
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i>1){
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
-{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} - -

Curvas Bezier curvas cuadráticas

- -

El siguiente tipo de trazos disponibles son las  curvas Bézier, en sus dos variantes, cúbicas y cuadráticas. Son usadas generalmente para dibujar complejas formas orgánicas.

- -
-
quadraticCurveTo(cp1x, cp1y, x, y)
-
Dibuja una curva cuadrática de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.
-
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-
Dibuja una curva cúbica de Bézier desde la posición actual de la pluma hasta el punto final especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y (cp2x, cp2y).
-
- -

La diferencia entre estos puede describirse mejor utilizando la imagen de la derecha. Una curva cuadrática de Bézier tiene un punto inicial y un punto final (puntos azules) y un solo punto de control (indicado por el punto rojo), mientras que una curva cúbica de Bézier utiliza dos puntos de control.

- -

Los parámetros x e y de ambos métodos son las coordenadas del punto final. cp1x y cp1y son las coordenadas del primer punto de control, y cp2x y cp2y son las coordenadas del segundo punto de control.

- -

El uso de curvas cuadráticas y cúbicas Bézier puede ser bastante difícil, ya que a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos respuesta visual directa en cuanto a lo que estamos haciendo. Esto hace bastante difícil dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si tienes el tiempo y, sobre todo, la paciencia, se pueden crear formas mucho más complejas.

- -

No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas que se dibujan que finalmente dan lugar a una forma completa.

- -

Curvas de Bezier cuadraticas

- -

Este ejemplo usa multiples curvas cuadraticas de Bézier para renderizar un globo de voz.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75,25);
-    ctx.quadraticCurveTo(25,25,25,62.5);
-    ctx.quadraticCurveTo(25,100,50,100);
-    ctx.quadraticCurveTo(50,120,30,125);
-    ctx.quadraticCurveTo(60,120,65,100);
-    ctx.quadraticCurveTo(125,100,125,62.5);
-    ctx.quadraticCurveTo(125,25,75,25);
-    ctx.stroke();
-  }
-}
-
- -

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Curvas cúbicas Bezier

- -

Este ejemplo dibuja un corazon usanco curvas cúbicas de Bézier.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75,40);
-    ctx.bezierCurveTo(75,37,70,25,50,25);
-    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
-    ctx.bezierCurveTo(20,80,40,102,75,120);
-    ctx.bezierCurveTo(110,102,130,80,130,62.5);
-    ctx.bezierCurveTo(130,62.5,130,25,100,25);
-    ctx.bezierCurveTo(85,25,75,37,75,40);
-    ctx.fill();
-  }
-}
-
- -

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Rectangles

- -

In addition to the three methods we saw in {{anch("Drawing rectangles")}}, which draw rectangular shapes directly to the canvas, there's also the rect() method, which adds a rectangular path to a currently open path.

- -
-
rect(x, y, width, height)
-
Draws a rectangle whose top-left corner is specified by (x, y) with the specified width and height.
-
- -

When this method is executed, the moveTo() method is automatically called with the parameters (0,0). In other words, the current pen position is automatically reset to the default coordinates.

- -

Making combinations

- -

So far, each example on this page has used only one type of path function per shape. However, there's no limitation to the number or types of paths you can use to create a shape. So in this final example, let's combine all of the path functions to make a set of very famous game characters.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext){
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx,12,12,150,150,15);
-    roundedRect(ctx,19,19,150,150,9);
-    roundedRect(ctx,53,53,49,33,10);
-    roundedRect(ctx,53,119,49,16,6);
-    roundedRect(ctx,135,53,49,33,10);
-    roundedRect(ctx,135,119,25,49,10);
-
-    ctx.beginPath();
-    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
-    ctx.lineTo(31,37);
-    ctx.fill();
-
-    for(var i=0;i<8;i++){
-      ctx.fillRect(51+i*16,35,4,4);
-    }
-
-    for(i=0;i<6;i++){
-      ctx.fillRect(115,51+i*16,4,4);
-    }
-
-    for(i=0;i<8;i++){
-      ctx.fillRect(51+i*16,99,4,4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83,116);
-    ctx.lineTo(83,102);
-    ctx.bezierCurveTo(83,94,89,88,97,88);
-    ctx.bezierCurveTo(105,88,111,94,111,102);
-    ctx.lineTo(111,116);
-    ctx.lineTo(106.333,111.333);
-    ctx.lineTo(101.666,116);
-    ctx.lineTo(97,111.333);
-    ctx.lineTo(92.333,116);
-    ctx.lineTo(87.666,111.333);
-    ctx.lineTo(83,116);
-    ctx.fill();
-
-    ctx.fillStyle = "white";
-    ctx.beginPath();
-    ctx.moveTo(91,96);
-    ctx.bezierCurveTo(88,96,87,99,87,101);
-    ctx.bezierCurveTo(87,103,88,106,91,106);
-    ctx.bezierCurveTo(94,106,95,103,95,101);
-    ctx.bezierCurveTo(95,99,94,96,91,96);
-    ctx.moveTo(103,96);
-    ctx.bezierCurveTo(100,96,99,99,99,101);
-    ctx.bezierCurveTo(99,103,100,106,103,106);
-    ctx.bezierCurveTo(106,106,107,103,107,101);
-    ctx.bezierCurveTo(107,99,106,96,103,96);
-    ctx.fill();
-
-    ctx.fillStyle = "black";
-    ctx.beginPath();
-    ctx.arc(101,102,2,0,Math.PI*2,true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89,102,2,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
-
-// A utility function to draw a rectangle with rounded corners.
-
-function roundedRect(ctx,x,y,width,height,radius){
-  ctx.beginPath();
-  ctx.moveTo(x,y+radius);
-  ctx.lineTo(x,y+height-radius);
-  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
-  ctx.lineTo(x+width-radius,y+height);
-  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
-  ctx.lineTo(x+width,y+radius);
-  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
-  ctx.lineTo(x+radius,y);
-  ctx.quadraticCurveTo(x,y,x,y+radius);
-  ctx.stroke();
-}
-
- -
-

The resulting image looks like this:

- -

{{EmbedLiveSample("Making_combinations", 160, 160)}}

- -

We won't go over this in detail, since it's actually surprisingly simple. The most important things to note are the use of the fillStyle property on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for bits of drawing you do often can be very helpful and reduce the amount of code you need, as well as its complexity.

- -

We'll take another look at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill color for paths from the default color of black to white, and then back again.

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

-
-
- -

 

diff --git a/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html b/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index 967710de49..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Hit regions and accessibility -slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.
- -
El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.
- -

Fallback content

- -

The content inside the <canvas> ... </canvas> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at html5accessibility.com demonstrates how this can be done:

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

See the video how NVDA reads this example by Steve Faulkner.

- -

ARIA rules

- -

Accessible Rich Internet Applications (ARIA) defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See ARIA and ARIA techniques for more information.

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

Hit regions

- -

Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
Adds a hit region to the canvas.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
Removes the hit region with the specified id from the canvas.
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
Removes all hit regions from the canvas.
-
- -

You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.

- -
<canvas id="canvas"></canvas>
-<script>
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    alert('hit region: ' + event.region);
-  }
-});
-</script>
- -

The addHitRegion() method also takes a control option to route events to an element (that is a descendant of the canvas):

- -
ctx.addHitRegion({control: element});
- -

This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this codepen demo.

- -

Focus rings

- -

When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the drawFocusIfNeeded property can be used.

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
If a given element is focused, this method draws a focus ring around the current path.
-
- -

Additionally, the scrollPathIntoView() method can be used to make an element visible on the screen if focused, for example.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
Scrolls the current path or a given path into the view.
-
- -

See also

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/es/web/guide/html/canvas_tutorial/index.html b/files/es/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index da5b0b3cc9..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Tutorial Canvas -slug: Web/Guide/HTML/Canvas_tutorial -tags: - - Canvas - - HTML5 - - graficos -translation_of: Web/API/Canvas_API/Tutorial ---- -

- -

<canvas> es un elemento HTML el cual puede ser usado para dibujar gráficos usando scripts (normalmente JavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (y no tan simples) animaciones. Las imágenes a la derecha muestran algunos ejemplos de implementaciones <canvas>  las cuales se verán en un futuro en este tutorial.

- -

<canvas>  fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados en Gecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El <canvas> es un elemento parte de las especificaciones de la WhatWG Web applications 1.0 mejor conocida como HTML5.

- -

En este tutorial se describe cómo usar el elemento <canvas> para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

- -

Antes de Empezar

- -

Usar el elemento <canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos del HTML y JavaScript. El elemento <canvas> no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

- -

En este Tutorial

- - - -

Vea también

- - - -

Nota a los contribuyentes

- -

Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.

- -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html deleted file mode 100644 index 145e2734f0..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Optimizing canvas -slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -

{{HTMLElement("canvas")}} es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.

-

A continuación una lista de tips par mejorar el rendimiento:

-
    -
  • Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.
    • -
  • Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
    • -
  • Avoid floating-point coordinates and use integers instead.
    • -
  • Avoid unnecessary canvas state changes.
    • -
  • Render screen differences only, not the whole new state.
    • -
  • Utilice varios lienzos en capas para escenas complejas.
    • -
  • Evite la propiedad shadowBlur siempre que sea posible.
    • -
  • Con las animaciones, use {{domxref("window.requestAnimationFrame()")}}.
    • -
  • Probar el rendimiento con JSPerf.
    • -
-

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}

diff --git a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html deleted file mode 100644 index 14ccc9c4a5..0000000000 --- a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Pixel manipulation with canvas -slug: Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas -translation_of: Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}
- -
-

Hasta ahora, no habíamos mirado los píxeles reales de nuestro canvas. Con el objeto ImageData, puedes leer y escribir directamente un array de datos para manipular píxeles.

- -

También veremos cómo se puede controlar el suavizado de la imagen (antialiasing) y cómo guardar imágenes de tu canvas.

-
- -

El objeto ImageData

- -

El objeto {{domxref("ImageData")}} representa los datos pixelados subyacentes de un área de un objeto lienzo. Contiene los siguientes atributos de sólo lectura:

- -
-
width
-
El ancho de la imagen en píxeles.
-
height
-
La altura de la imagen en píxeles.
-
data
-
Un objeto {{jsxref("Uint8ClampedArray")}} que representa un array unidimensional, contiene información en formato RGBA, con valores desde 0 hasta 255 (incluído).
-
- -

La propiedad data devuelve un  {{jsxref("Uint8ClampedArray")}}, al que se puede acceder para ver los datos originales del pixel; cada pixel está representado por cuatro valores (rojo, verde, azul, y alfa, en ese orden; esto es, formato "RGBA"). Cada componente de color se representa con un valor entero entre 0 y 255. Dentro del array, cada componente ocupa un índice consecutivo, comenzando con 0 desde el punto superior izquierdo, continuando de izquierda a derecha y de arriba hacia abajo, a través del array.

- -

El {{jsxref("Uint8ClampedArray")}} contiene alto × ancho × 4 bytes de datos, con valores de índice en el rango entre 0 y (alto×ancho×4)-1.

- -

Por ejemplo, para leer el valor del componente azul del pixel en la columna 200, fila 50 de una imagen, deberías hacer lo siguiente:

- -

blueComponent = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2];

- -

Si se le da un conjunto de coordenadas (X e Y), puede que termine haciendo algo así:

- -
var xCoord = 50;
-var yCoord = 100;
-var canvasWidth = 1024;
-
-function getColorIndicesForCoord(x, y, width) {
-  var red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-}
-
-var colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-var redIndex = colorIndices[0];
-var greenIndex = colorIndices[1];
-var blueIndex = colorIndices[2];
-var alphaIndex = colorIndices[3];
-
-var redForCoord = imageData.data[redIndex];
-var greenForCoord = imageData.data[greenIndex];
-var blueForCoord = imageData.data[blueIndex];
-var alphaForCoord = imageData.data[alphaIndex];
-
- -

O, en ES6 sería algo así:

- -
const xCoord = 50;
-const yCoord = 100;
-const canvasWidth = 1024;
-
-const getColorIndicesForCoord = (x, y, width) => {
-  const red = y * (width * 4) + x * 4;
-  return [red, red + 1, red + 2, red + 3];
-};
-
-const colorIndices = getColorIndicesForCoord(xCoord, yCoord, canvasWidth);
-
-const [redIndex, greenIndex, blueIndex, alphaIndex] = colorIndices;
-
- -

You may also access the size of the pixel array in bytes by reading the Uint8ClampedArray.length attribute:

- -
var numBytes = imageData.data.length;
-
- -

Creando un objeto ImageData

- -

Para crear un objeto nuevo y vacío tipo ImageData, debes usar el método  {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Hay dos versiones del método createImageData():

- -
var myImageData = ctx.createImageData(width, height);
- -

Esto crea un nuevo objeto ImageData con las dimensiones especificadas. Todos los pixels tienen valor correspondiente a negro - transparente (0,0,0,0).

- -

También puedes crear un nuevo objeto ImageData con las mismas dimensiones que otro objeto, especificado por anotherImageData. Los píxels del nuevo objeto tienen valor negro - transparente. ¡Esto no es una copia de los datos de la imagen!

- -
var myImageData = ctx.createImageData(anotherImageData);
- -

Getting the pixel data for a context

- -

To obtain an ImageData object containing a copy of the pixel data for a canvas context, you can use the getImageData() method:

- -
var myImageData = ctx.getImageData(left, top, width, height);
- -

This method returns an ImageData object representing the pixel data for the area of the canvas whose corners are represented by the points (left,top), (left+width, top), (left, top+height), and (left+width, top+height). The coordinates are specified in canvas coordinate space units.

- -
-

Note: Any pixels outside the canvas are returned as transparent black in the resulting ImageData object.

-
- -

This method is also demonstrated in the article Manipulating video using canvas.

- -

A color picker

- -

In this example we are using the getImageData() method to display the color under the mouse cursor. For this, we need the current position of the mouse with layerX and layerY, then we look up the pixel data on that position in the pixel array that getImageData() provides us. Finally, we use the array data to set a background color and a text in the <div> to display the color.

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
-             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);
-
- -

{{ EmbedLiveSample('A_color_picker', 610, 240) }}

- -

Painting pixel data into a context

- -

You can use the putImageData() method to paint pixel data into a context:

- -
ctx.putImageData(myImageData, dx, dy);
-
- -

The dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.

- -

For example, to paint the entire image represented by myImageData to the top left corner of the context, you can simply do the following:

- -
ctx.putImageData(myImageData, 0, 0);
-
- -

Grayscaling and inverting colors

- -

In this example we iterate over all pixels to change their values, then we put the modified pixel array back to the canvas using putImageData(). The invert function simply subtracts each color from the max value 255. The grayscale function simply uses the average of red, green and blue. You can also use a weighted average, given by the formula x = 0.299r + 0.587g + 0.114b, for example. See Grayscale on Wikipedia for more information.

- - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  var data = imageData.data;
-
-  var invert = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      data[i]     = 255 - data[i];     // red
-      data[i + 1] = 255 - data[i + 1]; // green
-      data[i + 2] = 255 - data[i + 2]; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var grayscale = function() {
-    for (var i = 0; i < data.length; i += 4) {
-      var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
-      data[i]     = avg; // red
-      data[i + 1] = avg; // green
-      data[i + 2] = avg; // blue
-    }
-    ctx.putImageData(imageData, 0, 0);
-  };
-
-  var invertbtn = document.getElementById('invertbtn');
-  invertbtn.addEventListener('click', invert);
-  var grayscalebtn = document.getElementById('grayscalebtn');
-  grayscalebtn.addEventListener('click', grayscale);
-}
-
- -

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

- -

Zooming and anti-aliasing

- -

With the help of the {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} method, a second canvas and the {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property, we are able to zoom into our picture and see the details.

- -

We get the position of the mouse and crop an image of 5 pixels left and above to 5 pixels right and below. Then we copy that one over to another canvas and resize the image to the size we want it to. In the zoom canvas we resize a 10×10 pixel crop of the original canvas to 200×200.

- -
zoomctx.drawImage(canvas,
-                  Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);
- -

Because anti-aliasing is enabled by default, we might want to disable the smoothing to see clear pixels. You can toggle the checkbox to see the effect of the imageSmoothingEnabled property (which needs prefixes for different browsers).

- - - - - -
var img = new Image();
-img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-img.onload = function() {
-  draw(this);
-};
-
-function draw(img) {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-  var zoomctx = document.getElementById('zoom').getContext('2d');
-
-  var smoothbtn = document.getElementById('smoothbtn');
-  var toggleSmoothing = function(event) {
-    zoomctx.imageSmoothingEnabled = this.checked;
-    zoomctx.mozImageSmoothingEnabled = this.checked;
-    zoomctx.webkitImageSmoothingEnabled = this.checked;
-    zoomctx.msImageSmoothingEnabled = this.checked;
-  };
-  smoothbtn.addEventListener('change', toggleSmoothing);
-
-  var zoom = function(event) {
-    var x = event.layerX;
-    var y = event.layerY;
-    zoomctx.drawImage(canvas,
-                      Math.abs(x - 5),
-                      Math.abs(y - 5),
-                      10, 10,
-                      0, 0,
-                      200, 200);
-  };
-
-  canvas.addEventListener('mousemove', zoom);
-}
- -

{{ EmbedLiveSample('Zoom_example', 620, 490) }}

- -

Guardando las imágenes

- -

The {{domxref("HTMLCanvasElement")}} provides a toDataURL() method, which is useful when saving images. It returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

- -
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/png')")}}
-
Default setting. Creates a PNG image.
-
{{domxref("HTMLCanvasElement.toDataURL", "canvas.toDataURL('image/jpeg', quality)")}}
-
Creates a JPG image. Optionally, you can provide a quality in the range from 0 to 1, with one being the best quality and with 0 almost not recognizable but small in file size.
-
- -

Once you have generated a data URI from you canvas, you are able to use it as the source of any {{HTMLElement("image")}} or put it into a hyper link with a download attribute to save it to disc, for example.

- -

You can also create a {{domxref("Blob")}} from the canvas.

- -
-
{{domxref("HTMLCanvasElement.toBlob", "canvas.toBlob(callback, type, encoderOptions)")}}
-
Creates a Blob object representing the image contained in the canvas.
-
- -

See also

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

diff --git a/files/es/web/guide/html/categorias_de_contenido/index.html b/files/es/web/guide/html/categorias_de_contenido/index.html deleted file mode 100644 index b9c4fb6061..0000000000 --- a/files/es/web/guide/html/categorias_de_contenido/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Categorías de contenido -slug: Web/Guide/HTML/categorias_de_contenido -tags: - - Avanzado - - Guía - - HTML - - HTML5 - - Web -translation_of: Web/Guide/HTML/Content_categories ---- -

Cada elemento {{web.link("/es/docs/Web/HTML", "HTML")}} es miembro de una o más categorías de contenido — estas categorías agrupan elementos que comparten características comunes. Esta es una agrupación flexible (en realidad no crea una relación entre los elementos de estas categorías), pero ayuda a definir y describir el comportamiento compartido de las categorías y sus reglas asociadas, especialmente cuando te encuentras con sus intrincados detalles. También es posible que los elementos no sean miembros de ninguna de estas categorías.

- -

Hay tres tipos de categorías de contenido:

- -
    -
  • Categoría de contenido principal — que describe reglas comunes compartidas por muchos elementos.
    • -
  • Categorías de contenido relacionado con formularios — que describe reglas comunes a los elementos relacionados con formularios.
    • -
  • Categorías de contenido específico — que describe categorías raras compartidas solo por unos pocos elementos, a veces, solo en un contexto específico.
    • -
- -
-

Nota: Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las partes relevantes de la especificación HTML.

-
- -

Un diagrama de Venn que muestra cómo se interrelacionan las distintas categorías de contenido. Las siguientes secciones explican estas relaciones en texto.

- -

Categorías de contenido principal

- -

Contenido de metadatos

- -

Los elementos pertenecientes a la categoría contenido de metadatos modifican la presentación o el comportamiento del resto del documento, establecen enlaces a otros documentos o transmiten otra información fuera de banda.

- -

Los elementos que pertenecen a esta categoría son {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.

- -

Flujo de contenido

- -

Los elementos que pertenecen a la categoría de flujo de contenido suelen contener texto o contenido incrustado. Son: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.

- -

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

- -
    -
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • -
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • -
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • -
  • {{HTMLElement("style")}}, si está presente el atributo {{deprecated_inline()}} {{HTMLAttrxRef("scoped", "style")}}
    • -
- -

Contenido de sección

- -

Los elementos que pertenecen al modelo de contenido de secciones crean una {{web.link("/es/docs/Sections_and_Outlines_of_an_HTML5_document", "sección en el esquema actual")}} que define el alcance de los elementos {{HTMLElement("header")}}, {{HTMLElement("footer")}} y {{anch("Contenido del encabezado")}}.

- -

Los elementos que pertenecen a esta categoría son {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} y {{HTMLElement("section")}}.

- -
-

No confundas este modelo de contenido con la categoría de {{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots", "seccionado raíz")}}, que aísla su contenido del esquema regular.

-
- -

Contenido del encabezado

- -

El contenido del encabezado define el título de una sección, ya sea que esté marcado por un elemento {{anch("Contenido de sección")}} explícito o definido implícitamente por el contenido del encabezado en sí mismo.

- -

Los elementos que pertenecen a esta categoría son {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} y {{HTMLElement("hgroup")}}.

- -
-

Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.

-
- -
-

Nota: El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.

-
- -

Contenido de redacción

- -

El contenido de redacción define el texto y el marcado que contiene. Las series de contenido de redacción forman párrafos.

- -

Los elementos que pertenecen a esta categoría son: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} y texto sin formato (no solo consiste de espacios en blanco).

- -

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

- -
    -
  • {{HTMLElement("a")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • -
  • {{HTMLElement("del")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("ins")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • -
  • {{HTMLElement("map")}}, si solo incluye contenido de redacción
    • -
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • -
- -

Contenido incrustado

- -

El contenido incrustado importa otro recurso o inserta contenido de otro lenguaje de marcado o espacio de nombres en el documento. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}} y {{HTMLElement("video")}}.

- -

Contenido interactivo

- -

El contenido interactivo incluye elementos diseñados específicamente para la interacción del usuario. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
- Algunos elementos pertenecen a esta categoría solo bajo condiciones específicas:

- -
    -
  • {{HTMLElement("audio")}}, si está presente el atributo {{HTMLAttrxRef("controls", "audio")}}
    • -
  • {{HTMLElement("img")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "img")}}
    • -
  • {{HTMLElement("input")}}, si el atributo {{HTMLAttrxRef("type", "input")}} no está en estado oculto
    • -
  • {{HTMLElement("menu")}}, si el atributo {{HTMLAttrxRef("type", "menu")}} está en la barra de estado de herramientas
    • -
  • {{HTMLElement("object")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "object")}}
    • -
  • {{HTMLElement("video")}}, si está presente el atributo {{HTMLAttrxRef("controls", "video")}}
    • -
- -

Contenido palpable

- -

El contenido es palpable cuando no está vacío ni oculto; es contenido que se presenta y es sustantivo. Los elementos cuyo modelo es flujo de contenido o contenido de redacción deben tener, por lo menos, un nodo que sea palpable.

- -

Contenido asociado a formulario

- -

El contenido asociado a un formulario comprende elementos que tienen un formulario de propietario, expuesto mediante un atributo form. El propietario de un formulario es el elemento {{HTMLElement("form")}} que lo contiene o el elemento cuya identificación se especifica en el atributo form.

- -
    -
  • {{HTMLElement("button")}}
    • -
  • {{HTMLElement("fieldset")}}
    • -
  • {{HTMLElement("input")}}
    • -
  • {{deprecated_inline()}} {{HTMLElement("keygen")}}
    • -
  • {{HTMLElement("label")}}
    • -
  • {{HTMLElement("meter")}}
    • -
  • {{HTMLElement("object")}}
    • -
  • {{HTMLElement("output")}}
    • -
  • {{HTMLElement("progress")}}
    • -
  • {{HTMLElement("select")}}
    • -
  • {{HTMLElement("textarea")}}
    • -
- -

Esta categoría contiene varias subcategorías:

- -
-
enumerado
-
Elementos que se enumeran en las colecciones IDL {{DOMxRef("HTMLFormElement.elements", "form.elements")}} y fieldset.elements. Contiene: {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}} {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
etiquetable
-
Elementos que se pueden asociar con elementos {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
transmisible
-
Elementos que se pueden utilizar para construir el conjunto de datos del formulario cuando se envía el formulario. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
reiniciable
-
Elementos que se pueden ver afectados cuando se restablece o reinicia un formulario. Contiene {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
-
- -

Categorías secundarias

- -

Hay algunas clasificaciones secundarias de elementos que también puede ser útil tener en cuenta.

- -

Elementos de soporte de scripts

- -

Los elementos de soporte de scripts son elementos que no contribuyen directamente a la salida renderizada de un documento. En cambio, sirven para admitir scripts, ya sea conteniendo o especificando directamente el código del script, o especificando datos que serán utilizados por los scripts.

- -

Los elementos que admiten scripts son:

- -
    -
  • {{HTMLElement("script")}}
    • -
  • {{HTMLElement("template")}}
    • -
- -

Modelo de contenido transparente

- -

Si un elemento tiene un modelo de contenido transparente, entonces su contenido debe estar estructurado de manera que sea HTML 5 válido, incluso si el elemento transparente fuera eliminado y reemplazado por elementos secundarios.

- -

Por ejemplo, los elementos {{HTMLElement("del")}} y {{HTMLElement("ins")}} son transparentes:

- -
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
-
- -

Si esos elementos fueran eliminados, este fragmento seguiría siendo HTML válido (si no es Español correcto).

- -
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
-
- -

Otros modelos de contenido

- -

Seccionado raíz.

diff --git a/files/es/web/guide/html/content_categories/index.html b/files/es/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..b9c4fb6061 --- /dev/null +++ b/files/es/web/guide/html/content_categories/index.html @@ -0,0 +1,175 @@ +--- +title: Categorías de contenido +slug: Web/Guide/HTML/categorias_de_contenido +tags: + - Avanzado + - Guía + - HTML + - HTML5 + - Web +translation_of: Web/Guide/HTML/Content_categories +--- +

Cada elemento {{web.link("/es/docs/Web/HTML", "HTML")}} es miembro de una o más categorías de contenido — estas categorías agrupan elementos que comparten características comunes. Esta es una agrupación flexible (en realidad no crea una relación entre los elementos de estas categorías), pero ayuda a definir y describir el comportamiento compartido de las categorías y sus reglas asociadas, especialmente cuando te encuentras con sus intrincados detalles. También es posible que los elementos no sean miembros de ninguna de estas categorías.

+ +

Hay tres tipos de categorías de contenido:

+ +
    +
  • Categoría de contenido principal — que describe reglas comunes compartidas por muchos elementos.
    • +
  • Categorías de contenido relacionado con formularios — que describe reglas comunes a los elementos relacionados con formularios.
    • +
  • Categorías de contenido específico — que describe categorías raras compartidas solo por unos pocos elementos, a veces, solo en un contexto específico.
    • +
+ +
+

Nota: Una explicación comparativa más detallada de estas categorías de contenido y su funcionalidad está más allá del alcance de este artículo; para eso, posiblemente desees leer las partes relevantes de la especificación HTML.

+
+ +

Un diagrama de Venn que muestra cómo se interrelacionan las distintas categorías de contenido. Las siguientes secciones explican estas relaciones en texto.

+ +

Categorías de contenido principal

+ +

Contenido de metadatos

+ +

Los elementos pertenecientes a la categoría contenido de metadatos modifican la presentación o el comportamiento del resto del documento, establecen enlaces a otros documentos o transmiten otra información fuera de banda.

+ +

Los elementos que pertenecen a esta categoría son {{HTMLElement("base")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.

+ +

Flujo de contenido

+ +

Los elementos que pertenecen a la categoría de flujo de contenido suelen contener texto o contenido incrustado. Son: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("picture")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} and Text.

+ +

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

+ +
    +
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • +
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • +
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#attr-itemprop", "itemprop")}}
    • +
  • {{HTMLElement("style")}}, si está presente el atributo {{deprecated_inline()}} {{HTMLAttrxRef("scoped", "style")}}
    • +
+ +

Contenido de sección

+ +

Los elementos que pertenecen al modelo de contenido de secciones crean una {{web.link("/es/docs/Sections_and_Outlines_of_an_HTML5_document", "sección en el esquema actual")}} que define el alcance de los elementos {{HTMLElement("header")}}, {{HTMLElement("footer")}} y {{anch("Contenido del encabezado")}}.

+ +

Los elementos que pertenecen a esta categoría son {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} y {{HTMLElement("section")}}.

+ +
+

No confundas este modelo de contenido con la categoría de {{web.link("/es/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Sectioning_roots", "seccionado raíz")}}, que aísla su contenido del esquema regular.

+
+ +

Contenido del encabezado

+ +

El contenido del encabezado define el título de una sección, ya sea que esté marcado por un elemento {{anch("Contenido de sección")}} explícito o definido implícitamente por el contenido del encabezado en sí mismo.

+ +

Los elementos que pertenecen a esta categoría son {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} y {{HTMLElement("hgroup")}}.

+ +
+

Aunque es probable que tenga contenido de encabezado, {{HTMLElement("header")}} no es contenido de encabezado en sí mismo.

+
+ +
+

Nota: El elemento {{HTMLElement("hgroup")}} se eliminó de la especificación HTML del W3C antes de que se finalizara HTML 5, pero sigue siendo parte de la especificación WHATWG y la mayoría de los navegadores lo admiten por lo menos parcialmente.

+
+ +

Contenido de redacción

+ +

El contenido de redacción define el texto y el marcado que contiene. Las series de contenido de redacción forman párrafos.

+ +

Los elementos que pertenecen a esta categoría son: {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} y texto sin formato (no solo consiste de espacios en blanco).

+ +

Algunos otros elementos pertenecen a esta categoría, pero solo si se cumple una condición específica:

+ +
    +
  • {{HTMLElement("a")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("area")}}, si es descendiente de un elemento {{HTMLElement("map")}}
    • +
  • {{HTMLElement("del")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("ins")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("link")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • +
  • {{HTMLElement("map")}}, si solo incluye contenido de redacción
    • +
  • {{HTMLElement("meta")}}, si está presente el atributo {{web.link("/es/docs/HTML/Global_attributes#itemprop", "itemprop")}}
    • +
+ +

Contenido incrustado

+ +

El contenido incrustado importa otro recurso o inserta contenido de otro lenguaje de marcado o espacio de nombres en el documento. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{HTMLElement("picture")}}, {{SVGElement("svg")}} y {{HTMLElement("video")}}.

+ +

Contenido interactivo

+ +

El contenido interactivo incluye elementos diseñados específicamente para la interacción del usuario. Los elementos que pertenecen a esta categoría incluyen: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+ Algunos elementos pertenecen a esta categoría solo bajo condiciones específicas:

+ +
    +
  • {{HTMLElement("audio")}}, si está presente el atributo {{HTMLAttrxRef("controls", "audio")}}
    • +
  • {{HTMLElement("img")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "img")}}
    • +
  • {{HTMLElement("input")}}, si el atributo {{HTMLAttrxRef("type", "input")}} no está en estado oculto
    • +
  • {{HTMLElement("menu")}}, si el atributo {{HTMLAttrxRef("type", "menu")}} está en la barra de estado de herramientas
    • +
  • {{HTMLElement("object")}}, si está presente el atributo {{HTMLAttrxRef("usemap", "object")}}
    • +
  • {{HTMLElement("video")}}, si está presente el atributo {{HTMLAttrxRef("controls", "video")}}
    • +
+ +

Contenido palpable

+ +

El contenido es palpable cuando no está vacío ni oculto; es contenido que se presenta y es sustantivo. Los elementos cuyo modelo es flujo de contenido o contenido de redacción deben tener, por lo menos, un nodo que sea palpable.

+ +

Contenido asociado a formulario

+ +

El contenido asociado a un formulario comprende elementos que tienen un formulario de propietario, expuesto mediante un atributo form. El propietario de un formulario es el elemento {{HTMLElement("form")}} que lo contiene o el elemento cuya identificación se especifica en el atributo form.

+ +
    +
  • {{HTMLElement("button")}}
    • +
  • {{HTMLElement("fieldset")}}
    • +
  • {{HTMLElement("input")}}
    • +
  • {{deprecated_inline()}} {{HTMLElement("keygen")}}
    • +
  • {{HTMLElement("label")}}
    • +
  • {{HTMLElement("meter")}}
    • +
  • {{HTMLElement("object")}}
    • +
  • {{HTMLElement("output")}}
    • +
  • {{HTMLElement("progress")}}
    • +
  • {{HTMLElement("select")}}
    • +
  • {{HTMLElement("textarea")}}
    • +
+ +

Esta categoría contiene varias subcategorías:

+ +
+
enumerado
+
Elementos que se enumeran en las colecciones IDL {{DOMxRef("HTMLFormElement.elements", "form.elements")}} y fieldset.elements. Contiene: {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}} {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
etiquetable
+
Elementos que se pueden asociar con elementos {{HTMLElement("label")}}. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
transmisible
+
Elementos que se pueden utilizar para construir el conjunto de datos del formulario cuando se envía el formulario. Contiene {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
reiniciable
+
Elementos que se pueden ver afectados cuando se restablece o reinicia un formulario. Contiene {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
+
+ +

Categorías secundarias

+ +

Hay algunas clasificaciones secundarias de elementos que también puede ser útil tener en cuenta.

+ +

Elementos de soporte de scripts

+ +

Los elementos de soporte de scripts son elementos que no contribuyen directamente a la salida renderizada de un documento. En cambio, sirven para admitir scripts, ya sea conteniendo o especificando directamente el código del script, o especificando datos que serán utilizados por los scripts.

+ +

Los elementos que admiten scripts son:

+ +
    +
  • {{HTMLElement("script")}}
    • +
  • {{HTMLElement("template")}}
    • +
+ +

Modelo de contenido transparente

+ +

Si un elemento tiene un modelo de contenido transparente, entonces su contenido debe estar estructurado de manera que sea HTML 5 válido, incluso si el elemento transparente fuera eliminado y reemplazado por elementos secundarios.

+ +

Por ejemplo, los elementos {{HTMLElement("del")}} y {{HTMLElement("ins")}} son transparentes:

+ +
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
+
+ +

Si esos elementos fueran eliminados, este fragmento seguiría siendo HTML válido (si no es Español correcto).

+ +
<p>Sostenemos que estas verdades son <del><em>sagradas e innegablemente</em></del> <ins>evidentes por sí mismas</ins>.</p>
+
+ +

Otros modelos de contenido

+ +

Seccionado raíz.

diff --git a/files/es/web/guide/html/html5/constraint_validation/index.html b/files/es/web/guide/html/html5/constraint_validation/index.html new file mode 100644 index 0000000000..04182a8fec --- /dev/null +++ b/files/es/web/guide/html/html5/constraint_validation/index.html @@ -0,0 +1,345 @@ +--- +title: Validación de restricciones +slug: HTML/HTML5/Validacion_de_restricciones +tags: + - CSS + - Guía + - HTML5 + - NecesitaContenido + - Selectores +translation_of: Web/Guide/HTML/HTML5/Constraint_validation +--- +

La creación de formularios web siempre ha sido una tarea compleja. Mientras armar el formulario en sí es fácil, verificar si cada campo tiene un valor que es válido y coherente es aun más difícil, e informar al usuario acerca del problema puede convertirse en un dolor de cabeza. HTML5 introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y validación de restricciones para facilitar el trabajo de revisar el contenido del formulario de lado del cliente. Se pueden usar restricciones básicas y comunes, sin la necesidad de JavaScript, estableciendo nuevos atributos; para restricciones más complejas se puede usar la API de Validación de Restricciones de HTML.

+ +
Nota: La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones de lado del servidor. Aunque se esperen menos envíos con formularios inválidos, sí se pueden seguir recibiendo datos inválidos, en navegadores sin soporte (por ejemplo, navegadores sin HTML y sin JavaScript) o por chicos malos que traten de burlar las restricciones de la aplicación. Por lo tanto, como en HTML4, también tendrás que validar las restricciones de captura del lado del servidor, de modo que sea consistente con las que se hacen del lado del cliente.
+ +

Restricciones intrínsecas y básicas

+ +

En HTML5, las restricciones básicas son declaradas de dos formas:

+ +
    +
  • Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo email creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.
    • +
  • Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.
    • +
+ +

Tipos de captura semánticos

+ +

Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:

+ + + + + + + + + + + + + + + + + + + + + +
Tipo de inputDescripciónIncumplimiento asociado
<input type="URL">El valor debe ser una URL absoluta, es decir, una de las siguientes: +
    +
  • una URI válida (como se define en RFC 3986)
    • +
  • una IRI válida, sin un componente de query (como se define en RFC 3987)
    • +
  • una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en RFC 3987)
    • +
  • una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en RFC 3987)
    • +
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
 <input type="email">El valor debe obedecer a la producción ABNF: 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) donde: +
    +
  • atext está definido en  RFC 5322, y representa una letra US-ASCII (A-Z y a-z), un dígito (0-9) o uno de los siguientes caracteres especiales: ! # $ % & ' * + - / = ? ` { } | ~,
    • +
  • ldh-str está definido en RFC 1034, y representa letras US-ASCII, combinadas con dígitos y el símbolo - agrupados en palabras separadas por un punto (.).
    • +
+ +
Nota: si se estableció el atributo {{ htmlattrxref("multiple", "input") }}, se pueden definir distintas direcciones de correo, separadas por coma, para este control. Si cualquiera de ellas no satisface la condición descrita aquí, se ejecuta el incumplimiento de restricción por tipo no coincidente.
+ 		Incumplimiento de restricción por tipo no coincidente (Type mismatch)
+ +

Nótese que la mayoría de los tipos de input no tienen restricciones intrínsecas, puesto que algunos simplemente son excluidos de la validación de restricciones, o tienen un algoritmo de sanitización que transforma los valores incorrectos a uno valor correcto predeterminado. 

+ +

Atributos relacionados con validaciones

+ +

Los siguientes atributos son usados para describir restricciones básicas:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoTipos de input que soportan el atributoValores posiblesDescripciónIncumplimiento asociado
{{ htmlattrxref("pattern", "input") }}text, search, url, tel, email, passwordUna expresión regular de JavaScript (compilada con las banderas global, ignoreCase, y multiline de ECMAScript 5 desabilitadas)El valor debe coincidir con el patrón.Incumplimiento de restricción por incompatibilidad de patrones (Pattern mismatch)
{{ htmlattrxref("min", "input") }}range, numberUn número válidoEl valor debe ser mayor o igual al de este atributo.Incumplimiento de restricción por flujo insuficiente (Underflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("max", "input") }}range, numberUn número válidoEl valor debe ser menor o igual al de este atributoIncumplimiento de restricción por desborde (Overflow)
date, month, weekUna fecha válida
datetime, datetime-local, timeUna fecha y hora válidos
{{ htmlattrxref("required", "input") }}text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file; también en los elementos {{ HTMLElement("select") }} y {{ HTMLElement("textarea") }}ninguno, pues éste es un atributo de tipo Boolean: su presencia representa true, y su ausencia representa falseDebe tener un valor (si se establece).Incumplimiento de restricción por ausencia (Missing)
{{ htmlattrxref("step", "input") }}dateUn número entero de díasA menos que se establezca el atributo con la literal any, el valor debe ser min + un enter múltiplo del valor de este atributo.Incumplimiento de restricción por inconsistencia de paso (Step mismatch)
monthUn número entero de meses
weekUn número entero de semanas
datetime, datetime-local, timeUn número entero de segundos
range, numberUn entero
{{ htmlattrxref("maxlength", "input") }}text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}Una longitud en enterosEl número de caracteres (puntos de código) no debe exceder el valor del atributo.Incumplimiento de restricción por ser muy largo (Too long)
+ +

Proceso de validación de restricciones

+ +

La validación de restricciones se hace a través de la API de Validación de Restricciones, ya sea en un elemento de formulario individual o a nivel de formulario, en el elemento {{ HTMLElement("form") }} mismo. La validación de restricciones se hace de las siguientes maneras:

+ +
    +
  • Invocando a la función checkValidity() de una interfaz DOM relacionada con formas (HTMLInputElement, HTMLSelectElement, HTMLButtonElement o HTMLTextAreaElement), la cual evalúa las restricciones para este elemento únicamente, permitiendo que un script obtenga esta información. (Esto lo hace comúnmente el agente usuario cuando determina cuál de las pseudo-clases CSS, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)
    • +
  • Invocando a la función checkValidity() en la interfaz HTMLFormElement, llamada validación estática de restricciones.
    • +
  • Enviando el formulario en sí, llamado validación interactiva de restricciones.
    • +
+ +
Nota: + +
    +
  • Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.
    • +
  • Invocando al método send() en la interfaz HTMLFormElement no invoca a la validación de restricciones. en otras palabras, este método envía los datos del formulario al servidor aunque no se satisfagan las restricciones.
    • +
+
+ +

Restricciones complejas usando la API de Restricciones de HTML5

+ +

Usando JavaScript y la API de Restricciones, es posible implementar restricciones más complejas, por ejemplo, restricciones que combinen varios campos, o que involucren cálculos complejos.

+ +

Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como onchange) para calcular si la restricción no se cumple, y entonces usar el método field.setCustomValidity() para establecer el resultado de la validación: una cadena vacía significa que la restricción se satisfizo, y cualquier otro texto significa que hay un error, siendo el texto el mensaje que se mostrará al usuario.

+ +

Restricciones que combinan varios campos: Validación de código postal

+ +

El formato de código postal varía de un país a otro. No sólo la mayoría de los países permiten un prefijo opcional con el código del país (como D- en Alemania, F- en Francia o Suiza), sino que algunos países tienen códigos postales con solamente un número fijo de dígitos; otros, como el Reino Unido, tienen estructuras más complejas, permitiendo letras en posiciones específicas.

+ +
+

Nota: Esto no es una guía completa para una biblioteca de validación de código postal, sino más bien una demostración de conceptos clave.

+
+ +

Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:

+ +
<form>
+    <label for="ZIP">Código postal : </label>
+    <input type="text" id="ZIP">
+    <label for="Country">País : </label>
+    <select id="Country">
+      <option value="ch">Suiza</option>
+      <option value="fr">Francia</option>
+      <option value="de">Alemania</option>
+      <option value="nl">Países Bajos</option>
+    </select>
+    <input type="submit" value="Validar">
+</form>
+ +

Esto mostrará el siguiente formulario: 

+ +

+ +

Primero, escribimos una función que revisará las restricciones en sí:

+ +
function checkZIP() {
+  // Para cada país, se define el patrón para el código postal
+  var constraints = {
+    ch : [ '^(CH-)?\\d{4}$', "El código postal de Suiza debe tener cuatro dígitos: p.ej. CH-1950 o 1950" ],
+    fr : [ '^(F-)?\\d{5}$' , "El código postal de Francia debe tener cinco dígitos: p.ej. F-75012 o 75012" ],
+    de : [ '^(D-)?\\d{5}$' , "El código postal de Alemania debe tener cinco dígitos: p-ej. D-12345 o 12345" ],
+    nl : [ '^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$',
+                    "El código postal de Países Bajos debe tener cuatro dígitos, seguidos de dos letras excepto SA, SD y SS" ]
+  };
+
+  // Se lee el ID del país
+  var country = document.getElementById("Country").value;
+
+  // Se obtiene el campo del código postal
+  var ZIPField = document.getElementById("ZIP");
+
+  // Se crea el validador de la restricción
+  var constraint = new RegExp(constraints[country][0], "");
+    console.log(constraint);
+
+
+  // ¡Se hace la revisión!
+  if (constraint.test(ZIPField.value)) {
+    // El código postal cumple la restricción, usamos la API de Restricciones para indicarlo
+    ZIPField.setCustomValidity("");
+  }
+  else {
+    // El código postal no cumple la restricción, usamos la API de Restricciones para
+    // dar un mensaje sobre el formato requerido para este país
+    ZIPField.setCustomValidity(constraints[country][1]);
+  }
+}
+
+ +

Entonces, enlazamos este código al evento onchange del elemento {{ HTMLElement("select") }} y al evento oninput del elemento {{ HTMLElement("input") }}:

+ +
window.onload = function () {
+    document.getElementById("Country").onchange = checkZIP;
+    document.getElementById("ZIP").oninput = checkZIP;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de código postal.

+ +

Limitando el tamaño de un archivo antes de ser subido

+ +

Otra restricción común es limitar el tamaño de un archivo que será subido. Verificar esto de lado del cliente antes de que el archivo sea transmitido al servidor requiere combinar la API de Validación de Restricciones, y especialmente la función field.setCustomValidity(), con otra API de JavaScript, la File API.

+ +

Aquí está la parte de HTML:

+ +
<label for="FS">Selecciona un archivo menor a 75KB : </label>
+<input type="file" id="FS">
+ +

Esto muestra lo siguiente:

+ +

+ + + +

Con JavaScript, leemos el archivo seleccionado, usamos el método File.size() para obtener su tamaño, lo comparamos con el límite fijo (hard coded), y llamamos a la API de Validación de Restricciones para informar al navegador si no se cumple la restricción:

+ +
function checkFileSize() {
+  var FS = document.getElementById("FS");
+  var files = FS.files;
+
+  // Si hay (por lo menos) un archivo seleccionado
+  if (files.length > 0) {
+     if (files[0].size > 75 * 1024) { // Validar la restricción
+       FS.setCustomValidity("El archivo seleccionado no debe ser mayor a 75KB");
+       return;
+     }
+  }
+  // No hay incumplimiento de la restricción
+  FS.setCustomValidity("");
+}
+ + + +

Finalmente, anclamos el método al evento requerido:

+ +
window.onload = function () {
+  document.getElementById("FS").onchange = checkFileSize;
+}
+ +

Puedes ver aquí un ejemplo en vivo de la validación de tamaño de archivos.

+ +

Estilos visuales de validación de restricciones

+ +

Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.

+ +

Controlando el aspecto de los elementos

+ +

El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.

+ +

Pseudo-clases :required y :optional

+ +

Las pseudo-clases :required y :optional permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.

+ +

Pseudo-clase :-moz-placeholder

+ +

Véase ::placeholder (experimental).

+ +

Pseudo-clases :valid :invalid

+ +

Las pseudo-clases :valid e :invalid son usadas para representar elementos <input> cuyo contenido es válido o inválido, respectivamente, acorde a las configuraciones de captura. Estas clases permiten al usuario estilizar elementos de formulario válidos e inválidos, para hacer más fácil el identificar elementos que tienen valores correctos o incorrectos.

+ +

Estilos predeterminados

+ +

Controlando el texto de incumplimiento de restricciones

+ +

El atributo x-moz-errormessage

+ +

El atributo x-moz-errormessage es una extensión de Mozilla que te permite especificar el mensaje de error que se mostrará cuando un campo no es validado exitosamente.

+ +
+

Nota: Esta extensión no es estándar.

+
+ +

element.setCustomValidity() de la API de Validación de Restricciones

+ +

El método element.setCustomValidity(error) es usado para establecer un mensaje de error personalizado para mostrar cuando el formulario es enviado. El método toma una cadena de texto como parámetro con el error. Si el error es una cadena no vacía, el método asume que la validación no fue exitosa, y despliega el mensaje con el error indicado. Si el error es una cadena vacía, el elemento es considerado válido, y restablece el mensaje de error.

+ +

Objeto ValidityState de la API de Validación de Restricciones

+ +

La interfaz de DOM ValidityState representa los estados de validez en los que puede estar un elemento, respecto a la validación de restricciones. En conjunto, ayudan a explicar por qué el valor de un elemento falló en la validación, si no es válido.

+ +

Examples of personalized styling

+ +

HTML4 fallback

+ +

Trivial fallback

+ +

JS fallback

+ +

Conclusión

diff --git a/files/es/web/guide/html/html5/html5_parser/index.html b/files/es/web/guide/html/html5/html5_parser/index.html new file mode 100644 index 0000000000..591fcbe865 --- /dev/null +++ b/files/es/web/guide/html/html5/html5_parser/index.html @@ -0,0 +1,64 @@ +--- +title: Analizador de HTML5 +slug: HTML/HTML5/HTML5_Parser +tags: + - HTML + - HTML5 + - para_revisar +translation_of: Web/Guide/HTML/HTML5/HTML5_Parser +--- +

{{ gecko_minversion_header("2") }}{{ draft() }}

+

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

+

El nuevo analizador presenta estas mejoras importantes:

+
    +
  • Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.
    • +
  • El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.
    • +
  • Las llamadas a innerHTML son mucho más rápidas.
    • +
  • Se han corregido decenas de errores relacionados desde hace tiempo con el analizador.
    • +
+

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

+

Conductas del analizador modificadas

+

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

+

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

+

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

+

Llamar a document.write () durante el análisis

+

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

+

Algunos contextos en los que no debes llamar a document.write() incluyen:

+ +

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

+

Falta de repetición del análisis

+

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

+

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

+
    +
  • Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página fallará el análisis. IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.
    • +
  • Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse. Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.
    • +
  • En un script alineado, con el fin de utilizar las cadenas literales </script> y <!-- , deberías evitar que se analicen literalmente, expresándolas como \u003c/script> y \u003c!-- . La práctica anterior de escapar de la cadena </script> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior). Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.
    • +
+

Mejora del rendimiento con el análisis especulativo

+

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

+

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

+

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: {{ HTMLElement('area') }}, {{ HTMLElement('base') }}, {{ HTMLElement('br') }}, {{ HTMLElement('col') }}, {{ HTMLElement('command') }}, {{ HTMLElement('embed') }}, {{ HTMLElement('hr') }}, {{ HTMLElement('img') }}, {{ HTMLElement('input') }}, {{ HTMLElement('keygen') }}, {{ HTMLElement('link') }}, {{ HTMLElement('meta') }}, {{ HTMLElement('param') }}, {{ HTMLElement('source') }} and {{ HTMLElement('wbr') }}. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como {{ HTMLElement ('p') }} del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

+

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

+
<script>
+  document.write ("<div>");
+  document.write ("<p> Aquí va el contenido. </ p>");
+  document.write ("</ div>");
+</ script>
+<!-- Aquí va el HTML sin script. -->
+
+
+

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

+
<script>document.write("<div>");</script>
+<p>El contenido va aquí.</p>
+<script>document.write("</div>");</script>
+
+
+

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo

+

{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}

diff --git a/files/es/web/guide/html/html5/index.html b/files/es/web/guide/html/html5/index.html new file mode 100644 index 0000000000..054d21d534 --- /dev/null +++ b/files/es/web/guide/html/html5/index.html @@ -0,0 +1,199 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - API + - CSS3 + - Gráficos(2) + - HTML + - HTML5 + - Multimedia + - SVG + - conectividad + - graficos + - mejoras + - nuevo +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5  es la última versión de HTML. El término representa dos conceptos diferentes:

+ +
    +
  • Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.
    • +
  • Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance. A este conjunto se le llama HTML5 y amigos, a menudo reducido a HTML5 .
    • +
+ +

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta página referencía numerosos recursos sobre las tecnologías de HTML5, clasificados en varios grupos según su función.

+ +
    +
  • Semántica: Permite describir con mayor precisión cuál es su contenido.
    • +
  • Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
    • +
  • Sin conexión y almacenamiento: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.
    • +
  • Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como lo son audio y video nativamente.
    • +
  • Gráficos y efectos 2D/3D: Proporciona una amplia gama de nuevas características que se ocupan de los gráficos en la web como lo son canvas 2D, WebGL, SVG, etc.
    • +
  • Rendimiento e Integración: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.
    • +
  • Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.
    • +
  • CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.
    • +
+ +
+
+

SEMÁNTICA

+ +
+
Secciones y contenidos en HTML5
+
Un vistazo al nuevo esquema y secciones de un documento HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.
+
Uso de audio y video en HTML5
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.
+
+ +
+
Formularios en HTML5
+
Un mirada a la mejora de los formularios web en HTML5: La API de validación de restricción, varios atributos nuevos, nuevos valores para el {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.
+
Nuevos elementos semánticos
+
Junto a las secciones , los medios de comunicación y elementos de formularios, se crearon muchos nuevos elementos como: {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, o {{HTMLElement("meter")}}, aumentando la cantidad de elementos de HTML5 validos. +
+
+
Mejora en {{HTMLElement("iframe")}}
+
Uso de atributos de {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, y  {{htmlattrxref("srcdoc", "iframe")}} los autores ahora pueden precisar el nivel de seguridad y la reproduccion deseada de un elemento {{HTMLElement("iframe")}}.
+
MathML
+
Permite integrar directamente fórmulas matemáticas.
+
+
Introducción a HTML5
+
En este artículo se explica cómo indicar al navegador que está utilizando HTML5 en su diseño web o aplicación web.
+
Analizador de HTML5 compatible
+
El programa de análisis, lo que convierte los bytes de un documento HTML en un DOM, se ha ampliado y ahora define con precisión el comportamiento a utilizar en todos los casos, incluso cuando se trata de HTML inválido. Esto conduce a una mayor previsibilidad e interoperabilidad entre los navegadores compatibles con HTML5.
+
+ +

CONECTIVIDAD

+ +
+
Web Sockets
+
Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.
+
Eventos de servidor enviados
+
Permite a un servidor "colocar" eventos en un cliente, en lugar del clásico paradigma  donde el servidor podría enviar datos sólo en respuesta a la petición de un cliente.
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y servicio de videoconferencia de control directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
+
+ +

Sin Conexión Y ALMACENAMIENTO

+ +
+
Recursos sin conexión: el caché de la aplicación
+
Firefox es totalmente compatible con la especificación de recursos sin conexión de HTML5. La mayoría de los otros recursos sin conexión tienen soporte en un cierto nivel.
+
Eventos  con y sin conexión
+
Firefox 3 soporta WHATWG, eventos con y sin conexión, que permiten a las aplicaciones y extensiones detectar si hay o no una conexión a Internet, así como tambien, detectar cuando la conexión se pierde o se recupera.
+
WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)
+
Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.
+
IndexedDB
+
Es un estándar de Internet para el almacenamiento de grandes cantidades de datos estructurados en el navegador y para las búsquedas de alto rendimiento de estos datos mediante índices.
+
Uso de archivos desde aplicaciones web
+
El soporte para la nueva API de archivos de HTML5 ha sido añadido a Gecko, por lo que es posible que las aplicaciones de Internet accedan a los archivos locales seleccionados por el usuario. Esto incluye el apoyo para la selección de varios archivos utilizando el {{HTMLElement("input")}} de tipo file del elemento HTML múltiples atributos. También esta FileReader.
+
+ +

MULTIMEDIA

+ +
+
Usando HTML5 de audio y video
+
Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. +
+
+
WebRTC
+
Esta tecnología, donde RTC es sinónimo de comunicación en tiempo real, permite conectar con otras personas y controlar servicios de videoconferencia directamente en el navegador, sin necesidad de un plugin o una aplicación externa.
+
Usando la API de la cámara
+
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
+
Track and WebVTT
+
El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. WebVTT es un formato de pista de texto.
+
+ +

3D, GRAFICOS & EFECTOS

+ +
+
Canvas Tutorial
+
Conozca el nuevo elemento {{HTMLElement("canvas")}}  y cómo dibujar gráficos y otros objetos en Firefox
+
API de texto para elementos <canvas> 
+
El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .
+
WebGL
+
WebGL trae gráficos en 3D para la Web mediante la introducción de una API que se ajusta estrechamente a OpenGL ES 2.0 que se puede utilizar en elementos <canvas> HTML5  .
+
SVG
+
Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.
+
+
+
+
+
+
+
+ +
+

RESULTADOS e INTEGRACIÓN

+ +
+
Web Workers
+
Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.
+
XMLHttpRequest Nivel 2
+
Permite buscar de forma asíncrona algunas partes de la página, mostrando contenido dinámico, que varía según el tiempo y las acciones del usuario. Esta es la tecnología detrás de Ajax.
+
+ +
+
Motores JIT compilación de JavaScript
+
La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.
+
History API
+
Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.
+
El atributo contentEditable: transformar su sitio web en una wiki!
+
HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.
+
Arrastrar y soltar
+
La API de arrastrar y soltar (drag and drop) permite soporte para arrastrar y soltar elementos dentro y entre sitios web. Esto también proporciona una API simple para el uso de extensiones y aplicaciones basadas ​​en Mozilla.
+
Gestión del foco en HTML
+
Los nuevos atributos HTML5 activeElement y hasFocus son soportados.
+
Manejadores de protocolo basados ​​en web
+
Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo navigator.registerProtocolHandler().
+
requestAnimationFrame
+
Permite controlar la renderización de  animaciones para obtener un óptimo rendimiento.
+
Fullscreen API
+
Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.
+
API Pointer Lock
+
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
+
Eventos en línea y fuera de línea
+
+
+
Para construir una buena aplicación web offline-funcional, lo que necesita saber cuando su aplicación esta realmente sin conexión. Dicho sea de paso, también es necesario saber cuando su solicitud sea devuelta a un estado de conexión de nuevo.
+
+
+
+ +

ACCESO al dispositivo

+ +
+
Usando la API de la cámara
+
Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.
+
Eventos táctiles
+
Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.
+
El uso de geolocalización
+
Permite a los navegadores localizar la posición del usuario mediante geolocalización.
+
Detección de la orientación del dispositivo
+
Obtiene la información cuando el dispositivo en el que se ejecuta el navegador, cambia de orientación. Esto puede ser utilizado como un dispositivo de entrada (por ejemplo, para hacer que los juegos que reaccionan a la posición del dispositivo) o adaptar el diseño de una página a la orientación de la pantalla (vertical u horizontal).
+
API Pointer Lock
+
Permite bloquear el puntero al contenido, por lo que los juegos y aplicaciones similares no pierden el foco cuando el puntero alcanza el límite de la ventana.
+
+ +

CSS3 STYLING

+ +

CSS  se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. Esto se refiere a menudo como CSS3,  aunque CSS no es una especificación monolítica más y los diferentes módulos no están todos en el nivel 3: algunos están en el nivel 1 y otros en el nivel 4, con todos los niveles intermedios cubiertos.

+ +
+
Nuevas características de diseño de fondo
+
Ahora es posible poner una sombra a un cuadro, con box-shadow y varios fondos se pueden ajustar.
+
+ +
+
Bordes mas "lujosos"
+
Ahora no sólo es posible utilizar las imágenes con los estilos de bordes, utilizando {{cssxref("border-image")}} y asociando sus propiedades asociadas a longhand, aunque los bordes redondeados son apoyados a través de propiedades {{cssxref("border-radius")}} .
+
Animación de su estilo
+
Utilizando Transiciones CSS para animar entre los diferentes estados o utilizando animaciones CSS para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.
+
Tipografía mejorada
+
Los autores tienen un mejor control para usar la tipografía. Se puede controlar el texto {{cssxref("text-overflow")}} y guiones y también puede poner una sombra  o controlar con mayor precisión sus decoraciones . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla @font-face .
+
Nuevos diseños de presentación
+
Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el CSS diseño de varias columnas , y el cuadro de distribución flexible de CSS .
+
+
+
diff --git a/files/es/web/guide/html/html5/introduction_to_html5/index.html b/files/es/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..091a90f7af --- /dev/null +++ b/files/es/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,16 @@ +--- +title: Introducción a HTML5 +slug: HTML/HTML5/Introducción_a_HTML5 +tags: + - HTML + - HTML5 +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +


+ HTML5, algunas de cuyas características inicialmente comenzaron a llegar a Gecko 1.8.1, es la versión más reciente de HTML estándar. Ofrece nuevas características que proporcionan no solo una amplia compatibilidad de medios, sino también una compatibilidad mejorada para la creación de aplicaciones web que pueden interactuar de una manera más sencilla y efectiva con el usuario, sus datos locales y los servidores.

+

Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones. Debido a esto, algunos navegadores no admiten aún determinadas características. Sin embargo, Gecko (y por extensión, Firefox) tiene una compatibilidad inicial muy buena para HTML5 y se continúa trabajando para que sea compatible con cada vez más características. Puedes encontrar una lista de las características de HTML5 que admite Gecko en la página principal de HTML5.

+

El tipo de documento HTML5

+

El tipo de documento para HTML5 es muy sencillo. Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:

+
<!DOCTYPE html>
+

Este tipo de documento tan sencillo hará que incluso aquellos navegadores que no admiten actualmente HTML5 entren en modo estándar, lo que significa que interpretarán conforme a HTML5 las partes establecidas hace tiempo, al ignorar las nuevas características de HTML5 que no admiten.

+

{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}

diff --git a/files/es/web/guide/html/introduction_alhtml_clone/index.html b/files/es/web/guide/html/introduction_alhtml_clone/index.html deleted file mode 100644 index 991cf90181..0000000000 --- a/files/es/web/guide/html/introduction_alhtml_clone/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: Introducción al HTML -slug: Web/Guide/HTML/Introduction_alhtml_clone -tags: - - HTML ---- -

Cuando miras una página web en el navegador, lo que ves a simple vista son palabras. Estas palabras normalmente tienen algunas características, como diferentes tamaños y colores. En algunos casos la página web puede mostrar imágenes o incluso vídeos. Otras veces, formularios donde puedes introducir o buscar información, o personalizar la apariencia de la página que estás viendo. La página también puede contener animaciones y contenidos que cambian mientras el resto de la página se mantiene sin cambios.

- -

Varias tecnologías (como CSS, JavaScript, Flash, AJAX, JSON) pueden usarse para definir los elementos que componen una página web. Sin embargo, en el nivel más bajo, una página web se define usando HTML (HyperText Markup Language). Sin HTML, no habría páginas web.

- -

Este artículo proporciona una introducción al HTML. Si alguna vez te has preguntado qué ocurre detrás de tu navegador web, este artículo es el mejor lugar para empezar a aprender.

- -

Una breve historia del HTML

- -

A finales de la década de los 80s, Tim Berners-Lee estuvo trabajando como físico en CERN (las siglas inglesas de la Organización Europea para la Investigación Nuclear). Ideó un sistema para que los científicos pudieran compartir documentos a través de internet. Antes de su invención, las comunicaciones por Internet sólo permitían transmitir texto plano, empleando tecnologías como el email, FTP (File Transfer Protocol), y Usenet- tecnología en la que se basan los foros de internet. La invención del HTML permitió el uso de un modelo de contenido almacenado en un servidor central, que podía ser mostrado en un terminal local mediante un navegador. Esto simplificó el acceso al contenido y habilitó la posibilidad de mostrar contenido "enriquecido" (como un sofisticado texto formateado y visualización de imagenes).

- -

¿Qué es el HTML?

- -

HTML es un lenguaje de etiquetas. Indica al navegador como tiene que mostrar el contenido. El HTML separa el "contenido" (palabras, imágenes, audio, video, etc.) de la "presentación" (la definición del tipo de contenido y las instrucciones de cómo esos contenidos tienen que mostrarse). El HTML emplea un conjunto de elementos predefinidos que permiten identificar los distintos tipos de elementos. Estos elementos contienen una o más etiquetas que contienen o expresan el contenido. Estas etiquetas suelen ir encapsuladas entre los símbolos <>, y las etiquetas de cierre (que indican el final de un determinado contenido) están precedidas por una barra /.

- -

Por ejemplo, el elemento párrafo consiste en una etiqueta de inicio como esta "<p>" y una de cierre "</p>". El siguiente ejemplo muestra un párrafo que está contenido dentro del elemento párrafo en HTML:

- -
-
<p>Mi perro odia el pescado.</p>
-
- -

Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:

- -

{{ EmbedLiveSample("Spl1", 400, 50) }}

- -

El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.

- -

Los elementos que contienen contenidos, normalmente suelen contener también otros elementos. Por ejemplo, el elemento énfasis (etiqueta <em>) puede estar dentro del elemento párrafo:

- -
-
<p>Mi perro <em>odia</em> el pescado.</p>
-
- -

Cuando se muestre se verá del siguiente modo:

- -

{{ EmbedLiveSample("Spl2", 400, 50) }}

- -

Algunos elementos no contienen otros elementos.  Como es el caso de la etiqueta imagen ("<img>") que simplemente especifica el nombre del archivo que contiene la imagen como atributo:

- -
<img src="smileyface.jpg">
- -

En ocasiones, suele ponerse una barra "/" al final de la etiqueta, justo antes del cierre de la misma ">" para indicar el final de la misma "/>". Aunque se trata de algo opcional en HTML, en XHTML es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).

- -

El resto de este artículo describe con un mayor detalle los conceptos descritos en esta sección. Además, si quieres ver HTML en acción, pásate por Mozilla Thimble, que es un editor online  interactivo que enseña cómo escribir HTML. Además, en el HTML Elements podrás ver una lista de los elementos HTML disponibles, así como una descripción de los mismos y el uso de cada uno de ellos.

- -

Elementos — los bloques básicos de construcción

- -

El HTML consiste en una serie de elementos. Los Elementos definen el significado semántico del contenido. Todos los Elementos están incluídos entre dos grandes etiquetas, que a su vez contienen otras etiquetas. Por ejemplo, el elemento "<p>" indica un párrafo; el elemento "<img>" indica una imagen. Mira la página HTML Elements para ver una lista completa de todos los elementos.

- -

Algunos elementos tienen un significado muy preciso, como "esto es una imagen", "esto es un encabezado" o "esto es una lista ordenada". Otros elementos resultan menos específicos, como "esto es una sección de una página" o "esto es parte de un texto". Finalmente otros elementos son usados por razones técnicas, como "esto es la información identificativa de la página que no debe ser mostrada". De un modo y otro, todos los elementos del HTML tienen un determinado valor semántico.

- -

Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:

- -
<html>
-  <body>
-
-    <p>Mi perro <em>odia</em> el pescado.</p>
-
-  </body>
-</html>
- -

Como puedes ver, los elementos <html> encierran el resto del documento, y el elemento <body> encierra el contenido de la página. Esta estructura crece con las ramas de un árbol, donde los elementos <body> y <p> son las ramas que crecen del tronco que es <html>. Esta estructura jerárquica es lo que se denomina DOM: siglas inglesas del Documento Objeto Modelo (Document Object Model).

- -

Etiquetas

- -

Los documentos HTML están escritos en texto plano. Pueden ser escritos mediante editores de texto capaces de guardar contenido de texto plano (aunque la mayor parte de los creadores de código HTML prefieren editores especializados que resaltan las partes de código propias de la sintaxis del HTML y muestran el DOM). Los nombres de las Etiquetas, pueden escribirse en mayúsculas o en minúsculas. Aunque, el W3C (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el XHTML requiere de las minúsculas).

- -

El código HTML contenido entre los signos de menor que ("<") al comienzo y mayor que (">") al final, tienen un significado especial. Es lo que denominamos etiquetas. He aquí un ejemplo sencillo:

- -
<p>Esto es texto dentro de un párrafo.</p>
-
- -

En este ejemplo hay una etiqueta de comienzo y otra de cierre. Las etiquetas de cierre son las mismas que las etiquetas de comienzo sólo que contienen una barra justo después del signo menor que. Muchos elementos de HTML se escriben empleando las dos etiquetas de comienzo y final. Las etiquetas de comiezo y final de un elemento deben estar adecuadamente anidadas, esto significa que las etiquetas de cierre deben escribirse en el orden inverso al de las etiquetas de inicio. La regla del anidamiento de etiquetas tiene que cumplirse de forma escrupulosa para poder escribir código válido.

- -

Esto es un ejemplo de código válido:

- -
<em>Me <strong>refiero</strong> a eso</em>.
-
- -

Esto es un ejemplo de código inválido:

- -
Invalido: <em>Me <strong>refiero</em> a eso</strong>.
- -

Observa que en el ejemplo válido, la etiqueta de cierre para el elemento anidado está situada antes de la etiqueta de cierre del elemento que la contenedor.

- -
-

Hasta la adopción de las reglas revisadas del HTML5, los navegadores no interpretaban los códigos no válidos del mismo modo y provocaban distintos resultados cuando se encontraban con estas partes de código. Los navegadores eran tolerantes con los autores de código Web, pero por desgracia no todos de la misma forma, llevando a situaciones impredecibles a la hora de interpretar códigos no válidos de HTML. Pero esos días han acabado tras la última evolución de los navegadores como Internet Explorer 10, Firefox 4, Opera 11.60, Chrome 18 o Safari 5, a medida que han implementado las nuevas normas de interpretación de código HTML no válido. Aquí puede ver el resultado de un código invalido para el mismo arbol DOM en todos los navegadores modernos.

-
- -

Algunos elementos no contienen texto o ningún otro elemento. Es lo que se denominan elementos vacíos y no necesitan etiquetas de cierre. Este es un ejemplo:

- -
<img src="smileyface.jpg">
- -

Mucha gente marca los elementos vacíos usando una barra al final de la etiqueta, justo antes del simbolo mayor que (necesario en los códigos de XHTML).

- -
<img src="smileyface.jpg" />
- -

En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.

- -

Atributos

- -

La etiqueta de comienzo puede contener información adicional, tal y como puede verse en el siguiente ejemplo. Dicha información es lo que se conoce como atributos. Los atributos suelen consistir en dor partes:

- -
    -
  • Un atributo nombre (name).
    • -
  • Un atributo valor (value).
    • -
- -

Algunos atributos sólo pueden tener un único valor. Son atributos Booleanos y pueden ser incluidos para especificar el nombre del atributo, o dejar su valor vacío. Así los siguientes tres ejemplos tienen el mismo significado:

- -
<input required="required">
-
-<input required="">
-
-<input required>
-
- -

Los valores de los atributos que constan de una sola palabra o un número se pueden escribir tal cual, pero en cuanto hay dos o más cadenas de caracteres en el valor, éstos deben escribirse entre comillas. Están permitidas tanto las comillas simples ('), como las comillas dobles (") aunque muchos desarrolladores prefieren utilizar siempre comillas simples para que el código sea menos ambiguo para la vista y para evitar errores. El siguiente es semejante error..:Attribute values that consist of a single word or number may be written as they are, but as soon as there are two or more strings of characters in the value, it must be written within quotation marks. Both single quotes (') and double quotes (") are allowed. Many developers prefer to always use quotes to make the code less ambiguous to the eye and to avoid mistakes. El siguiente código sería un error:

- -
<p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)
- -

En este ejemplo suponemos que el valor del atributo es "foo bar" pero al no haber comillas en el código se interpreta como si se hubiera escrito así:

- -
<p class="foo" bar="">
- -

Nombre de caracteres referenciados

- -

Los Caraceteres Referenciados  (a veces llamados entidades) son combinaciones de caracteres que sirven para mostrar en el navegador símbolos que tienen un significado especial en el código HTML. Por ejemplo, HTML interpreta que el símbolo menor que y mayor que son delimitadores de una etiqueta. Si quieres que estos simbolos sean mostrados en el contenido del texto, debemos usar los nombres de referencia de estos caracteres. Aquí están los cuatro caracteres referenciados más comunes, que no estaría de más que memorizases:

- -
    -
  • &gt; representa el carater mayor que (>)
    • -
  • &lt; representa el caracter menor que (<)
    • -
  • &amp; representa el caracter ampersand (&)
    • -
  • &quot; representa el caracter de comillas dobles (")
    • -
- -

Hay muchas más entidades, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.

- -

Tipo de documento y comentarios

- -

Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración doctype en la primera línea. En el HTML actual esto se escribe del siguiente modo:

- -
<!DOCTYPE html>
- -

El doctype tiene una historia larga y complicada, pero todo lo que necesitas saber ahora es que el doctype le dice al navegador que interprete el código HTML y CSS de acuerdo a los estándares web del W3C y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar peculiaridades.)

- -

HTML tiene un mecanismo para poder introducir comentarios al código que no serán mostrados en la página cuando esta sea interpretada o leída por un navegador web. Esto suele emplearse para añadir explicaciones al código, o dejar notas para explicar a otras personas cómo trabaja el código de la página, o simplemente para dejar recordatorios para uno mismo. Los comentarios en HTML están contenidos entre los siguientes símbolos:

- -
<!-- Esto es un comentario de texto -->
- -

Un pequeño documento pero completo

- -

Colocando todas estas explicaciones juntas, aquí os dejamos un pequeño ejemplo de un documento HTML completo. Puedes copiar este código en un editor de textos, guardarlo como myfirstdoc.html y cargarlo en un navegador. Asegurate de estar usando los códigos de caracteres UTF-8. Dado que este documento no utiliza estilos (CSS) su apariencia será muy plana, pero sólo se trata de un pequeño comienzo.

- -
<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>A tiny document</title>
-</head>
-<body>
-  <h1>Main heading in my document</h1>
-  <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
-  <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
-</body>
-</html>
-
diff --git a/files/es/web/guide/html/using_html_sections_and_outlines/index.html b/files/es/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..145f89d9ae --- /dev/null +++ b/files/es/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,411 @@ +--- +title: Secciones y esquema de un documento HTML5 +slug: Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +

La especificación HTML5 trae muchos nuevos elementos a los desarrolladores web, permitiéndoles describir la estructura de un documento web con semántica estandarizada. Este documento describe estos elementos y cómo usarlos para definir el esquema de cualquier documento.

+ +
+

A lo largo de este documento se empleará la palabra esquema en el sentido de esqueleto estructural o tabla de contenido, similar a cómo el índice de un libro muestra la estructura jerárquica de su contenido. Asimismo, usaremos algoritmo de esquematizado al proceso de construir el esquema infiriéndolo del contenido.

+
+ +

Estructura de un documento HTML 4

+ +

La estructura de un documento, por ejemplo la estructura semántica de lo que está entre <body> y </body> es fundamental para presentar la página al usuario. HTML4 usa la idea de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por un elemento divisor HTML ({{HTMLElement("div")}}) con elementos de cabecera HTML ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, o {{HTMLElement("h6")}}) en él, definiendo sus títulos. La relación de estos elementos divisor y de cabecera HTML desemboca en la estructura del documento y su esquema.

+ +

Entonces el siguiente marcado:

+ +
+
<div class="seccion" id="zorro" >
+<h1>El zorro</h1>
+<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+<div class="subseccion" id="zorro-habitat" >
+<h2>Hábitat</h2>
+<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+</div>
+</div>
+
+
+ +

genera el siguiente esquema:

+ +
1. El zorro
+   1.1 Hábitat
+
+ +

Los elementos {{HTMLElement("div")}} no son obligatorios para definir una nueva sección. La sola presencia de un elemento de cabecera HTML es suficiente para implicar una nueva sección. Entonces,

+ +
<h1>El zorro</h1>
+<p>En esta sección discutiremos sobre los aspectos menos conocidos del zorro.
+... bla, bla, bla ...
+<h2>Hábitat</h2>
+<p>El zorro necesita un nido en donde poner sus huevos, de ahí que necesite árboles.
+...bla, bla, bla...
+<h2>Costrumbres</h2>
+<h1>El oso</h1>
+
+ +

genera el siguiente esquema:

+ +
1. El zorro
+   1.1 Hábitat
+   1.2 Costumbres
+2. El oso
+
+ +

Problemas resueltos por HTML5

+ +

La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:

+ +
    +
  1. El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos class hace imposible la automatización del algoritmo de esquematizado ("¿Es ese {{HTMLElement("div")}} parte del esquema de la página, definiendo una sección o subsección?" o "¿es un {{HTMLElement("div")}} sólo de presentación, sólo usado para estilo?"). En otras palabras, la especificación HTML4 es muy imprecisa de lo que es una sección y cómo ese ámbito está definido. La generación automatizada del esquema es importante, especialmente para tecnologías de apoyo, que son capaces de adaptar la forma en que presentan información a los usuarios de acuerdo a la estructura del documento. HTML5 quita la necesidad de elementos {{HTMLElement("div")}} del algoritmo de esquematizado introduciendo un nuevo elemento, {{HTMLElement("section")}}, el elemento de sección HTML.
    2. +
  2. Mezclar varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel de los elementos de cabecera HTML Headings Element para que el esquema se mantenga. Esto se resuelve en HTML5 con los recientemente introducidos elementos de seccionado ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} y {{HTMLElement("aside")}}) son siempre subsecciones dentro de la sección que las contiene, sin importar qué secciones son creadas por cabeceras internas.
    3. +
  3. Debido a que cada elemento de cabecera HTML es parte del esquema, no es posible describir un subtítulo o título secundario (por ejemplo, <h1>Mozart</h1><h2>El genio salzburgués</h2> crea el esquema 1. Mozart 1.1 El genio salzburgués). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup> crea el esquema 1. Mozart).
    4. +
  4. En HTML4, cada sección es parte del esquema del documento. Pero los documentos no son lineales a veces. Un documento puede tener secciones especiales conteniendo información que no es parte del flujo principal, aunque esté relacionado a él, como un bloque de publicidad o una caja de explicación. HTML5 introduce el elemento {{HTMLElement("aside")}} permitiendo a dichas secciones no ser parte del esquema principal.
    5. +
  5. Otra vez, en HTML4, debido a que cada sección es parte del esquema del documento, no hay forma de tener una sección conteniendo información relacionada no al documento pero sí al sitio entero, como logos, menús, tablas de contenidos, o información de derechos de autor y notas legales. Para ese propósito, HTML5 introduce tres elementos de sección específicos: {{HTMLElement("nav")}} para colecciones de enlaces, como una tabla de contenidos, {{HTMLElement("footer")}} y {{HTMLElement("header")}} información relacionada con el sitio.
    6. +
+ +

De manera más general, HTML5 trae precisión a las características de seccionado y cabecera, permitiendo a los esquemas de documento ser predecibles y usados por el navegador para mejorar la experiencia del usuario.

+ +

El algoritmo de esquematizado de HTML5

+ +

Definiendo secciones en HTML5

+ +

Todo el contenido incluido dentro del elemento {{HTMLElement("body")}} es parte de una sección. Las secciones en HTML5 pueden ser anidadas. Además de la sección principal, definida por el elemento {{HTMLElement("body")}}, los límites de la sección son definidos explícita o implícitamente. La secciones definidas explícitamente son el contenido definido en las etiquetas {{HTMLElement("body")}},  {{HTMLElement("section")}},  {{HTMLElement("article")}},  {{HTMLElement("aside")}}, {{HTMLElement("footer")}},  {{HTMLElement("header")}}, y {{HTMLElement("nav")}}.

+ +
Nota: Cada sección puede tener su propia jerarquía de cabeceras. Por lo tanto, incluso una sección anidada puede tener un elemento {{HTMLElement("h1")}}. Consulte también Definiendo cabeceras en HTML5.
+ +

Ejemplo:

+ +
<section>
+  <h1>El pato</h1>
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+  <aside>
+    <p>otros estudiosos del pato
+  </aside>
+</section>
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

El bloque de HTML define dos secciones de alto nivel:

+ +
<section>
+  <h1>El pato</h1>
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+   <aside>
+    <p>otros estudiosos del pato
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

La primera sección tiene tres subsecciones:

+ +
<section>
+  <h1>El pato</h1>
+
+  <section>
+    <h1>Introducción</h1>
+    <p>En esta sección, ampliaremos nuestro concepto del pato.
+  </section>
+
+  <section>
+    <h1>Hábitat</h1>
+    <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar.
+  </section>
+
+  <aside>
+    <p>Otros estudiosos del lobo
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company
+</footer>
+ +

Esto genera la siguiente estructura:

+ +
1. El pato
+   1.1 Introducción
+   1.2 Hábitat
+   1.3 Section (aside)
+
+ +

Definiendo cabeceras en HTML5

+ +

Mientras que los elementos de seccionado en HTML definen la estructura de un documento, un esquema también necesita cabeceras para ser útil. La regla básica es simple: el primer elemento de cabecera HTML (uno de los {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) define la cabecera de la sección actual.

+ +

Los elementos de cabecera tienen un rango dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango más alto, y {{HTMLElement("h6")}} tiene el rango más bajo. Los rangos relativos importan sólo en una sección; el esquema es determinado por las secciones, no por el rango de cabeceras de las secciones. Por ejemplo, este código:

+ +
<section>
+  <h1>La mosca</h1>
+  <p>El esta sección hablaremos de la mosca, una criatura adorable.
+    ... bla, bla, bla ...
+  <section>
+    <h2>Hábitat</h2>
+    <p>Únicamente se han divisado colonias de moscas en los montes de....
+        ...bla, bla, bla ...
+  </section>
+</section>
+<section>
+  <h3>El mosquito</h3>
+  <p>A continuación, otra rareza a punto de extinguirse, el mosquito.
+     ...bla, bla, bla...
+</section>
+ +

Genera el siguiente esquema:

+ +
1. La mosca
+   1.1 Hábitat
+2. El mosquito
+ +

Nótese que el rango del elemento de cabecera (en el ejemplo, {{HTMLElement("h1")}} para la primera sección de más alto nivel, {{HTMLElement("h2")}} para la subsección y {{HTMLElement("h3")}} para la segunda sección de alto nivel) no es importante. (Cualquier rango puede ser usado como la cabecera de una sección explícitamente definida, aunque esta práctica no es recomendada).

+ +

Seccionado implícito

+ +

Debido a que los elementos de seccionado HTML5 no son obligatorios para definir un esquema, para mantener la compatibilidad con la web existente dominada por HTML4, hay una forma de definir secciones sin ellas. Esto es llamado seccionado implícito.

+ +

Los elementos de cabecera ({{HTMLElement("h1")}} a {{HTMLElement("h6")}}) definen un nuevo seccionado implícito cuando ellos no son el primer encabezado de sus secciones padre. La forma en que esta sección implícita es posicionada en el esquema es definida por su rango relativo con la cabecera anterior en su sección padre. Si es de un rango más bajo que la cabecera anterior, abre una sub-sección implícita de la sección. Este código:

+ +
<section>
+  <h1>El águila</h1>
+  <p> ....
+
+  <h3 class="subsec-implicita">Hábitat</h3>
+  <p> ...
+</section>
+ +

Genera el siguiente esquema:

+ +
1. El águila
+   1.1 Hábitat (impícitamente definido mediante <h3>)
+
+ +

Si es del mismo rango que la cabecera anterior, cierra la sección previa  (¡que puede haber sido explícita!) y abre una nueva sección implícita del mismo nivel: 

+ +
<section>
+  <h1>El águila</h1>
+  <p>...
+  <h1 class="secc-implicita">El buitre</h1>
+  <p>...
+</section>
+ +

genera el siguiente esquema: 

+ +
1. El águila
+2. El buitre (implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)
+
+ +

Si es de un rango más alto que el encabezamiento anterior, cierra la sección anterior y abre una nueva sección implícita al más alto nivel:

+ +
<body>
+  <h1>Colores</h1>
+  <h2>Rojo</h2>
+  <p> ...
+  <section>
+    <h3>Amarillo</h3>
+    <p> ...
+    <h3>Verde</h3>
+      <p> ...
+    <h2>Sabores</h2>
+      <p>...
+  </section>
+</body>
+ +

generando el siguiente esquema:

+ +
1. Colores
+   1.1 Rojo (implícitamente con <h2> )
+   1.2 Amarillo(explícitamente con <section> )
+   1.3 Verde (impícitamente con <h3>, cerrando el <h3> previo)
+2. Sabores (implícitamente con <h2>, cerrando el <section> previo)
+
+ +

Éste no es el esquema que uno podría observando las etiquetas de encabezamiento. Para hacer que tu marcado sea entendible para una persona que eche un vistazo rápido al código, es una buena práctica

+ +
    +
  • Usar etiquetas explícitas para abrir y cerrar secciones.
    • +
  •  Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. 
    • +
+ +

Sin embargo, esto no es requerido por la especificación HTML5. Si encuentra que los navegadores están generando el esquema de su documento en formas inesperadas, verifique si tiene secciones que están cerradas implícitamente por elementos de cabecera.

+ +

Una excepción a la regla de que ese rango de cabecera debe corresponderse con el nivel de anidamiento de sección es para secciones que pueden ser reutilizadas en múltiples documentos. Por ejemplo, una sección puede ser almacenada en un sistema de gestión de contenidos y ensamblada en documentos en tiempo de ejecución. En este caso, una buena práctica es comenzar en {{HTMLElement("h1")}} para el nivel de cabecera más alto de la sección reusable. El nivel anidado de la sección reusable será determinado por la jerarquía de la sección del documento en el que aparece. Las etiquetas de secciones aún son útiles en este caso.

+ +

Sobreescribiendo seccionamiento implícito

+ +

A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:

+ +
    +
  • Una sección cuyo encabezado principal es acompañado de otro encabezado , cuyo propósito es adornar o aportar cierta información al encabezado principal, pero sin oscurecerlo a la hora de formar el esquema estructural: + 
    <section>
+  <h1>La flauta mágica</h1>
+  <h2>Ópera en dos actos del genio salzburgués</h2>
+</section>
    + +

    genera el siguiente esquema, que claramene no es el que se desea:

    + + 
    1. La flauta mágica
+   1.1 Ópera en dos actos del genio salzburgués
+
    +
    • +
  • El encabezado secundario puede ser usado por una lista de etiquetas: + 
    <section>
+  <h1>Secciones y esquema del documento</h1>
+  <h2>HTML, HTML5, secciones, esquema</h2>
+</section>
    + +

    genera el siguiente esquema, que tampoco es el que se desea:

    + + 
    1. Secciones y esquema del documento
+   1.1 HTML, HTML5, secciones, esquema
    +
    • +
+ +

Debido al seccionado implícito, esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras ({{HTMLElement("hgroup")}} introducido en HTML5). Esto oculta todas las cabeceras del grupo, excepto la primera, permitiendo una sobreescritura del seccionado implícito. Observa las diferencias:

+ +
<section>
+  <hgroup>
+    <h1>La flauta mágica</h1>
+    <h2>Ópera en dos actos del genio salzburgués</h2>
+  </hgroup>
+  ... algún contenido ...
+</section>
+
+ +

genera el siguiente esquema, que es el que se desea:

+ +
1. La flauta mágica
+ +

Secciones desacopladas

+ +

Piensa por un momento en una sección A que contiene una subsección B. A veces es conveniente que B mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de A, dando lugar a esquemas más claros.

+ +

Existen elementos, cuyo propósito habitual es introducir contenido externo a la página: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} y {{HTMLElement("td")}}.
+  Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.

+ +

Además, el elemento de partida para formar el esquema del documento es  {{HTMLElement("body")}}, el cual por ser la raíz,  se encuentra ya desacoplada de forma natural, en el sentido de que no se puede ir más arriba en el contexto.

+ +

Ejemplo:

+ +
<section>
+  <h1>Bach</h1>
+  <section>
+    <h2>Introducción</h2>
+    <p>...
+  </section>
+  <section>
+    <h2>La Pasión según S. Mateo</h2>
+    <p> Bla, bla, bla ...
+    <blockquote>
+       <h1>Friedich Nietzsche
+       <p>“Esa semana he ido a escuchar tres veces la Pasión según san Mateo del divino Bach, y en cada una de ellas con el mismo sentimiento de máxima admiración. Una persona que -como yo- ha olvidado completamente el cristianismo no puede evitar oírla como si se tratase de uno de los evangelios”
+    </blockquote>
+  </section>
+</section>
+ +

Este ejemplo resulta en el siguiente esquema:

+ +
1. Bach
+   1.1 Introducción
+   1.2 La Pasión según s. Mateo
+ +

Este esquema no contiene el esquema interno del elemento {{HTMLElement("blockquote")}} que, debido a la propia naturaleza del elemento, se desacopla. Observa bien que el elemento  {{HTMLElement("blockquote")}} , a pesar de todo, contiene un esquema propio bien estructurado.

+ +

Secciones fuera del esquema

+ +

HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:

+ +
    +
  1. El elemento sección lateral HTML ({{HTMLElement("aside")}}) define una sección que, aunque relacionada al elemento principal, no pertenece al flujo principal,  como una caja de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al esquema principal.
    2. +
  2. El elemento sección de navegación ({{HTMLElement("nav")}}) define una sección que contiene enlaces de navegación. Pueden ser muchas en un documento, por ejemplo, uno con enlaces internos a la página, como una tabla de contenidos, y otro con enlaces navegacionales. Estos enlaces no son parte del flujo principal y esquema y pueden ser inicialmente no generadas por lectores de pantalla y tecnología de apoyo similar.
    3. +
  3. El elemento de sección de cabecera ({{HTMLElement("header")}}) define una cabecera de página, típicamente conteniendo el logo y nombre del sitio y posiblemente un menú horizontal. A pesar de su nombre, no está posicionado necesariamente al principio de la página.
    4. +
  4. El elemento HTML de pie de página ({{HTMLElement("footer")}}) define un pie de página, típicamente conteniendo el derecho de autor y notas legales y a veces algunos enlaces. A pesar de su nombre, no es necesario que esté posicionado al final de la página.
    5. +
+ +

Direcciones y tiempo de publicación en elementos de seccionado

+ +

El autor de un documento a veces quiere publicar alguna información de contacto, como el nombre del autor y su dirección. HTML4 permite eso vía el elemento {{HTMLElement("address")}}, que ha sido extendido en HTML5.

+ +

Un documento puede ser hecho de diferentes secciones de diferentes autores. Una sección de otro autor diferente al autor de la página principal es definido usando el elemento {{HTMLElement("article")}}. Consecuentemente, el elemento {{HTMLElement("address")}} está ahora enlazado al ancestro más cercano, {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

De manera similar, el elemento HTML5 {{HTMLElement("time")}}, con su atributo booleano establecido {{htmlattrxref("pubdate", "time")}}, representa la fecha de publicación asociada a todo el documento, respectivamente al artículo, relacionado a su ancestro más cercano {{HTMLElement("body")}} o {{HTMLElement("article")}}.

+ +

Usando elementos HTML5 en navegadores no HTML5

+ +

Los elementos de sección y cabecera deben funcionar en la mayoría de navegadores no HTML5. Aunque no estén soportados, no necesitan una interfaz DOM especial y sólo necesitan la aplicación de CSS específico como a los elementos no conocidos se les aplica estilos como display:inline por defecto:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

Obviamente el desarrollador web puede aplicar estilos sobre ellos de forma diferente, pero mantener en mente que en un navegador no HTML5 la aplicación de estilos por defecto es diferente para lo que es esperado para esos elementos. También se debe notar que el elemento {{HTMLElement("time")}} no ha sido incluido, debido a que la aplicación de estilos por defecto de él en un navegador no HTML5 es el mismo que el estilo en un navegador compatible con HTML5.
+
+ Este método tiene sin embargo sus limitaciones, así como algunos navegadores no permiten la aplicación de estilos en elementos no soportados. Este es el caso de Internet Explorer (version 8 e inferior), que necesita un script específico para permitirlo:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

Esta sección significa que, en el caso de Internet Explorer (8 e inferior), el scripting debe estar habilitado para mostrar seccionamiento en HTML5 y elementos de cabecera apropiadamente. Si no, estas no serán mostradas, lo que puede ser problemático dado que estos elementos probablemente definen la estructura de toda la página. Esto es el porqué de un elemento {{HTMLElement("noscript")}} explícito debe ser añadido para este caso.

+ +
<noscript>
+   <strong>Warning !</strong>
+   Because your browser does not support HTML5, some elements are simulated using JScript.
+   Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+</noscript>
+ +

Esto nos lleva al siguiente código para permitir el soporte de las secciones y elementos de cabecera en navegadores no HTML5, incluso para Internet Explorer (8 e inferiores), con una apropiada compatibilidad hacia atrás donde este último navegador es configurado para no usar scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>Warning !</strong>
+     Because your browser does not support HTML5, some elements are simulated using JScript.
+     Unfortunately your browser has disabled scripting. Please enable it in order to display this page.
+  </noscript>
+<![endif]-->
+ +

Conclusión

+ +

Los nuevos elementos semánticos introducidos en HTML5 suponen la posibilidad de describir la estructura y el esquema de un documento web de una manera estándar. Representan una gran ventaja para las personas que utilizan navegadores HTML5 y necesitan la estructura para ayudarles a utilizar la página, por ejemplo las personas que necesitan la ayuda de una tecnología de apoyo. Estos nuevos elementos semánticos son fáciles de usar y con muy poco esfuerzo pueden funcionar también en navegadores no HTML5. Por lo tanto deben ser usados sin restricciones.

+ +
{{HTML5ArticleTOC()}}
diff --git a/files/es/web/guide/mobile/index.html b/files/es/web/guide/mobile/index.html new file mode 100644 index 0000000000..684d3df672 --- /dev/null +++ b/files/es/web/guide/mobile/index.html @@ -0,0 +1,75 @@ +--- +title: Desarrollo Web Móvil +slug: Web/Guide/Movil +tags: + - Intermedio + - NecesitaEjemplo +translation_of: Web/Guide/Mobile +--- +

Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de Firefox OS. O podría estar interesado en detalles sobre Firefox para Android.

+ +

Hemos organizado esta documentación en dos secciones, diseñando para dispositivos móviles y desarrollo para diferentes navegadores. Vea también la guía a la amigabilidad móvil para desarrolladores web de Jason Grlicky.

+ +

Diseñando para dispositivos móviles

+ +

Los dispositivos móviles tienen características de hardware bastante diferentes comparados con los ordenadores de escritorio/sobremesa o portátiles. Obviamente sus pantallas son usualmente más pequeñas, pero además habitualmente también cambian automáticamente su orientación, entre retrato o paisaje, según el usuario rota el dispositivo. Por lo general tienen pantallas táctiles para la entrada de datos por parte del usuario. APIs como la geolocalización o la orientación, o bien no son soportadas en ordenadores de escritorio o son mucho menos útiles, y estas APIs ofrecen a los usuarios móviles nuevas formas de interactuar con su sitio web.

+ +

Trabajando con pantallas pequeñas

+ +

Diseño web adaptable es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:

+ +
    +
  • diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y
    • +
  • el uso de media queries para incluir condicionalmente reglas CSS adecuadas para el ancho y alto de la pantalla.
    • +
+ +

La etiqueta meta viewport ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.

+ +

Trabajando con pantallas táctiles

+ +

Para usar una pantalla táctil necesitará trabajar con eventos DOM Touch. No tendrá la posibilidad de usar la pseudo-clase CSS :hover y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre diseñar para pantallas táctiles.

+ +

Puede usar el media query -moz-touch-enabled para cargar una CSS diferente en un dispositivo con pantalla táctil.

+ +

Optimizando imágenes

+ +

Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la altura de pantalla, anchura y proporción de píxeles.

+ +

También puede hacer uso de propiedades CSS para implementar efectos visuales como gradientes y sombras sin utilizar imágenes para ello.

+ +

APIs móviles

+ +

Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la orientación y la geolocalización.

+ +

Desarrollo para diferentes navegadores

+ +

Escribir código para diferentes navegadores (cross-browser)

+ +

Para crear sitios web que funcionen aceptablemente en diferentes navegadores móviles:

+ +
    +
  • Intente evitar características específicas de un navegador, como las propiedades CSS prefijadas por el proveedor (vendor-prefixed).
    • +
  • Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.
    • +
  • Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.
    • +
+ +

Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (vendor-prefixed) como -webkit-linear-gradient, es mejor incluir las otras versiones prefijadas de la propiedad linear-gradient (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla linear-gradient.

+ +

Vea esta lista de propiedades específicas para Gecko, esta lista de propiedades específicas para WebKit y la tabla de propiedades específicas de proveedores (vendor-specific) de Peter Beverloo.

+ +

Usar herramientas como CSS Lint puede ayudar a encontrar problemas como este en el código y preprocesadores como SASS y LESS pueden ser de ayuda para crear código compatible con diferentes navegadores.

+ +

Precaución al husmear el agente de usuario (user agent)

+ +

Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (user agent) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.

+ +

Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo.

+ +

Probar en múltiples navegadores

+ +

Compruebe su sitio web en múltiples navegadores. Esto significa probarlo en múltiples plataformas — al menos iOS y Android.

+ + diff --git a/files/es/web/guide/movil/index.html b/files/es/web/guide/movil/index.html deleted file mode 100644 index 684d3df672..0000000000 --- a/files/es/web/guide/movil/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Desarrollo Web Móvil -slug: Web/Guide/Movil -tags: - - Intermedio - - NecesitaEjemplo -translation_of: Web/Guide/Mobile ---- -

Esta página proporciona una visión general de algunas de las principales técnicas necesarias para diseñar sitios web que funcionen bien en dispositivos móviles. Si está buscando información sobre el proyecto Firefox OS de Mozilla, consulte la página de Firefox OS. O podría estar interesado en detalles sobre Firefox para Android.

- -

Hemos organizado esta documentación en dos secciones, diseñando para dispositivos móviles y desarrollo para diferentes navegadores. Vea también la guía a la amigabilidad móvil para desarrolladores web de Jason Grlicky.

- -

Diseñando para dispositivos móviles

- -

Los dispositivos móviles tienen características de hardware bastante diferentes comparados con los ordenadores de escritorio/sobremesa o portátiles. Obviamente sus pantallas son usualmente más pequeñas, pero además habitualmente también cambian automáticamente su orientación, entre retrato o paisaje, según el usuario rota el dispositivo. Por lo general tienen pantallas táctiles para la entrada de datos por parte del usuario. APIs como la geolocalización o la orientación, o bien no son soportadas en ordenadores de escritorio o son mucho menos útiles, y estas APIs ofrecen a los usuarios móviles nuevas formas de interactuar con su sitio web.

- -

Trabajando con pantallas pequeñas

- -

Diseño web adaptable es un término para un conjunto de técnicas que permiten a su sitio web adaptar su diseño según el entorno de visualización — lo más evidente, el tamaño y orientación de la pantalla — cambie. Incluye técnicas como:

- -
    -
  • diseño CSS fluido, para hacer que la página se adapte sin problemas según cambie el tamaño de la ventana del navegador y
    • -
  • el uso de media queries para incluir condicionalmente reglas CSS adecuadas para el ancho y alto de la pantalla.
    • -
- -

La etiqueta meta viewport ordena al navegador que muestre su sitio web a la escala adecuada para el dispositivo del usuario.

- -

Trabajando con pantallas táctiles

- -

Para usar una pantalla táctil necesitará trabajar con eventos DOM Touch. No tendrá la posibilidad de usar la pseudo-clase CSS :hover y tendrá que diseñar elementos interactivos como botones para respetar el hecho de que los dedos son más gordos que el puntero del ratón. Vea este artículo sobre diseñar para pantallas táctiles.

- -

Puede usar el media query -moz-touch-enabled para cargar una CSS diferente en un dispositivo con pantalla táctil.

- -

Optimizando imágenes

- -

Para ayudar a los usuarios cuyos dispositivos tienen un bajo o caro ancho de banda, puede optimizar las imágenes cargando sólo aquellas apropiadas para el tamaño y resolución del dispositivo. Es algo que se hace en la CSS consultando la altura de pantalla, anchura y proporción de píxeles.

- -

También puede hacer uso de propiedades CSS para implementar efectos visuales como gradientes y sombras sin utilizar imágenes para ello.

- -

APIs móviles

- -

Finalmente, puede aprovechar las nuevas posibilidades ofrecidas por los dispositivos móviles, como la orientación y la geolocalización.

- -

Desarrollo para diferentes navegadores

- -

Escribir código para diferentes navegadores (cross-browser)

- -

Para crear sitios web que funcionen aceptablemente en diferentes navegadores móviles:

- -
    -
  • Intente evitar características específicas de un navegador, como las propiedades CSS prefijadas por el proveedor (vendor-prefixed).
    • -
  • Si necesita utilizar estas características, compruebe si otros navegadores implementan sus propias versiones e inclúyalas igualmente.
    • -
  • Para navegadores que no soportan estas características, ofrezca una alternativa aceptable.
    • -
- -

Por ejemplo, si establece un gradiente como fondo para cierto texto usando una propiedad prefijada por el proveedor (vendor-prefixed) como -webkit-linear-gradient, es mejor incluir las otras versiones prefijadas de la propiedad linear-gradient (gradiente linear). Si no lo hace, asegúrese al menos de que el fondo por defecto contrasta con el texto. Así, la página será al menos usable en un navegador al que no esté dirigida su regla linear-gradient.

- -

Vea esta lista de propiedades específicas para Gecko, esta lista de propiedades específicas para WebKit y la tabla de propiedades específicas de proveedores (vendor-specific) de Peter Beverloo.

- -

Usar herramientas como CSS Lint puede ayudar a encontrar problemas como este en el código y preprocesadores como SASS y LESS pueden ser de ayuda para crear código compatible con diferentes navegadores.

- -

Precaución al husmear el agente de usuario (user agent)

- -

Es preferible para los sitios web usar las técnicas enumeradas anteriormente con el objetivo de detectar características específicas del dispositivo, como el tamaño de pantalla y las pantallas táctiles, y adaptarse a ellas adecuadamente. Pero a veces esto no es práctico y los sitios web recurren a analizar la cadena de agente de usuario del navegador (user agent) para intentar distinguir entre ordenadores de escritorio, tabletas y teléfonos, y servir diferente contenido a cada tipo de dispositivo.

- -

Si hace esto, asegúrese de que su algoritmo es correcto y no está sirviendo el tipo equivocado de contenido a un dispositivo porque no entiende la cadena de un agente de usuario particular. Vea esta guía para usar la cadena de agente de usuario para determinar el tipo de dispositivo.

- -

Probar en múltiples navegadores

- -

Compruebe su sitio web en múltiples navegadores. Esto significa probarlo en múltiples plataformas — al menos iOS y Android.

- - diff --git a/files/es/web/guide/performance/usando_web_workers/index.html b/files/es/web/guide/performance/usando_web_workers/index.html deleted file mode 100644 index db4dbc07e3..0000000000 --- a/files/es/web/guide/performance/usando_web_workers/index.html +++ /dev/null @@ -1,633 +0,0 @@ ---- -title: Usando Web Workers -slug: Web/Guide/Performance/Usando_web_workers -translation_of: Web/API/Web_Workers_API/Using_web_workers ---- -

Los Web Workers dedicados proveen un medio sencillo para que el contenido web ejecute scripts en hilos en segundo plano. Una vez creado, un worker puede enviar mensajes a la tarea creada mediante envio de mensajes al manejador de eventos especificado por el creador. Sin embargo, los workers trabajan dentro de un contexto global diferente de la ventana actual (usar el atajo  {{ domxref("window") }} en lugar de {{ domxref("window.self","self") }} con el fin de obtener el scope actual dentro de un {{ domxref("Worker") }} retornaría, de hecho, un error).

- -

El hilo worker puede realizar tareas sin interferir con la interfaz de usuario. Ademas, pueden realizar I/O usando XMLHttpRequest (aunque el responseXML y los atributos channel son siempre null).

- -

Para documentacion de referencia acerca de workers busca {{ domxref("Worker") }} ; este articulo complementa ese ofreciendo ejemplos y detalles adicionales. Para una lista de las funciones disponibles sobre workers, visita  Functions and interfaces available to workers.

- -

Acerca de seguridad de hilos

- -

La interfaz  {{ domxref("Worker") }} crea hilos a nivel de SO reales, y la concurrencia puede causar effectos interesantes en tu código si no eres cuidadoso. Sin embargo, en el caso de los web workers, el control cuidadoso de los puntos de comunicacion con otros hilos indica que es realmente muy dificil causar problemas de concurrencia. No existe acceso a componentes no-hilo seguros o al DOM y debes pasar la informacion entrante o saliente del hilo a traves de objetos serializados. Así que debes poner esfuerzo para causar problemas en tu código.

- -

Creando un web worker

- -

Crear un nuevo worker es simple.  Sólo tienes que llamar el constructor {{ domxref("Worker.Worker", "Worker()") }}, especificando la URI de un script a ejecutar en el hilo del worker (worker thread), y, si deseas poder recibir notificaciones del worker, establece la propiedad  {{domxref("Worker.onmessage")}} del worker a una función de manejo de eventos apropiada.

- -
-
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Called back by the worker!\n");
-};
-
- -

Alternativamente, puedes usar addEventListener() :

- -
-
var myWorker = new Worker("my_task.js");
-
-myWorker.addEventListener("message", function (oEvent) {
-  console.log("Called back by the worker!\n");
-}, false);
-
-myWorker.postMessage(""); // start the worker.
-
- -

La Línea 1 en  este ejemplo crea un nuevo worker (worker thread). La Línea 3 configura un manejador de eventos (listener) para encargarse de los eventos message del worker. Este manejador de eventos se llamará cuando el worker llame a su propia función {{domxref("Worker.postMessage()")}}. Finalmente, la Linea 7 inicia el worker (worker thread).

- -
Nota : La URI pasada como parámetro del constructor de Worker debe obedecer la política same-origin policy . Actualmente hay desacuerdo entre los desarolladores de navegadores sobre qué URIs son del mismo origen; Gecko 10.0 {{ geckoRelease("10.0") }} y posteriores sí permiten data URIs e Internet Explorer 10 no permite Blob URIs como un script válido para los workers.
- -

Pasando datos

- -

Los datos pasan entre la página principal y los workers son copiados, no compartidos. Los objetos se serializan a medida que se entregan al worker, y posteriormente, se deserializan en el otro extremo. La página y el worker no comparten la misma instancia, por lo que el resultado final es que un duplicado es creado en cada extremo. La mayoría de los navegadores implementan esta característica como structured cloning.

- -

Antes de continuar, vamos a crear con fines didácticos una función llamada emulateMessage() que simulará el comportamiento de un valor el cual es clonado y no compartido durante el paso desde un worker a la página principal o viceversa:

- -
function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-alert(typeof example1); // object
-alert(typeof emulateMessage(example1)); // number
-
-// test #2
-var example2 = true;
-alert(typeof example2); // boolean
-alert(typeof emulateMessage(example2)); // boolean
-
-// test #3
-var example3 = new String("Hello World");
-alert(typeof example3); // object
-alert(typeof emulateMessage(example3)); // string
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-alert(typeof example4); // object
-alert(typeof emulateMessage(example4)); // object
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Object
- -

A Un valor que es clonado y no compartido se denomina mensaje. De vuelta con los workers, los mensajes pueden ser enviados hacia y desde el hilo principal empleando postMessage(). Los eventos de mensaje {{domxref("MessageEvent.data", "data")}} atributo contienen datos devueltos desde el worker.

- -

example.html: (la página principal):

- -
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");
- -

my_task.js (el worker):

- -
postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
-  postMessage("Hi " + oEvent.data);
-};
- -
Note: Como siempre, los hilos en segundo plano -incluyendo workers- no pueden manipular el DOM. Si acciones tomadas por el hilo en segundo planos resultarían en cambios en el DOM, deberian enviar mensajes a sus creadores para llevarlos a cabo.
- -

The structured cloning algorithm can accept JSON and a few things that JSON can't like circular references.

- -

Ejemplos pasando datos

- -

Example #1: Crear un "eval() asíncrono" genérico

- -

El siguiente ejemplo muestra como usar un worker para ejecutar asíncronamente cualquier tipo de código en Javascript a traves de eval dentro del worker:

- -
// Syntax: asyncEval(code[, listener])
-
-var asyncEval = (function () {
-
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-
-})();
- -

Ejemplo de uso:

- -
// asynchronous alert message...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// asynchronous print message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// asynchronous void...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
- -

Ejemplo #2: Paso avanzado de JSON Data y creación de un sistema de conmutación

- -

Si tiene que pasar datos complejos y tienes que llamar a muchas funciones diferentes tanto en la página principal como en el Worker, puede crear un sistema como el siguiente.

- -

example.html (the main page):

- -
<!doctype html>
-<html>
-<head>
-<meta charset="UTF-8"  />
-<title>MDN Example - Queryable worker</title>
-<script type="text/javascript">
-  /*
-    QueryableWorker instances methods:
-     * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-     * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-     * terminate(): terminates the Worker
-     * addListener(name, function): adds a listener
-     * removeListener(name): removes a listener
-    QueryableWorker instances properties:
-     * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-  */
-  function QueryableWorker (sURL, fDefListener, fOnError) {
-    var oInstance = this, oWorker = new Worker(sURL), oListeners = {};
-    this.defaultListener = fDefListener || function () {};
-    oWorker.onmessage = function (oEvent) {
-      if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) {
-        oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh);
-      } else {
-        this.defaultListener.call(oInstance, oEvent.data);
-      }
-    };
-    if (fOnError) { oWorker.onerror = fOnError; }
-    this.sendQuery = function (/* queryable function name, argument to pass 1, argument to pass 2, etc. etc */) {
-      if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; }
-      oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) });
-    };
-    this.postMessage = function (vMsg) {
-      //I just think there is no need to use call() method
-      //how about just oWorker.postMessage(vMsg);
-      //the same situation with terminate
-      //well,just a little faster,no search up the prototye chain
-      Worker.prototype.postMessage.call(oWorker, vMsg);
-    };
-    this.terminate = function () {
-      Worker.prototype.terminate.call(oWorker);
-    };
-    this.addListener = function (sName, fListener) {
-      oListeners[sName] = fListener;
-    };
-    this.removeListener = function (sName) {
-      delete oListeners[sName];
-    };
-  };
-
-  // your custom "queryable" worker
-  var oMyTask = new QueryableWorker("my_task.js" /* , yourDefaultMessageListenerHere [optional], yourErrorListenerHere [optional] */);
-
-  // your custom "listeners"
-
-  oMyTask.addListener("printSomething", function (nResult) {
-    document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!"));
-  });
-
-  oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) {
-    alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)");
-  });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li>
-    <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
-</html>
- -

my_task.js (el worker):

- -
// your custom PRIVATE functions
-
-function myPrivateFunc1 () {
-  // do something
-}
-
-function myPrivateFunc2 () {
-  // do something
-}
-
-// etc. etc.
-
-// your custom PUBLIC functions (i.e. queryable from the main page)
-
-var queryableFunctions = {
-  // example #1: get the difference between two numbers:
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // example #2: wait three seconds
-  waitSomething: function () {
-      setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000);
-  }
-};
-
-// system functions
-
-function defaultQuery (vMsg) {
-  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
-  // do something
-}
-
-function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) {
-  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) {
-    queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1);
-  } else {
-    defaultQuery(oEvent.data);
-  }
-};
- -

Es un método posible para conmutar el contenido de cada mensaje de cada mainpage-worker y viceversa.

- -

Pasando datos mediante transferencia de propiedades (objetos transferibles)

- -

Google Chrome 17 y Firefox 18 implementan un método adicional para enviar ciertos tipos de objetos desde o hacia el worker con un mejor rendimiento. Estos objetos se denominan objetos transferibles (transferable objects), es decir, objetos que implementan la interfaz {{domxref("Transferable")}}. Los objetos transferibles se transfieren de un contexto a otro con una operación "zero-copy". Esto supone una gran mejora de rendimiento al enviar grandes cantidades de datos. Piensa en ello como un paso por referencia si vienes del mundo de C/C++.  Sin embargo, a diferecia del paso por referencia, la "versión" original no queda disponible una vez transferida. Su contenido es transferido al nuevo contexto. Por ejemplo, cuando se transfiere un {{domxref("ArrayBuffer")}} de tu aplicacion al Worker, el contenido del {{domxref("ArrayBuffer")}} original se vacía y no se puede utilizar posteriormente. Su contenido es (literalmente) transferido al contexto del Worker.

- -
// Create a 32MB "file" and fill it.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i < uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
-
- -

Para más información sobre los objetos transferibles, visita HTML5Rocks .

- -

Spawning subworkers

- -

Workers may spawn more workers if they wish.  So-called subworkers must be hosted within the same origin as the parent page.  Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page.  This makes it easier for workers to keep track of where their dependencies are.

- -

Subworkers are currently not supported in Chrome. See crbug.com/31666 .

- -

Embedded workers

- -

There is not an "official" way to embed the code of a worker within a web page as for the {{ HTMLElement("script") }} elements. But a {{ HTMLElement("script") }} element which does not have a src attribute and has a type attribute that does not identify an executable mime-type will be considered a data block element, that JavaScript could use.  "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>MDN Example - Embedded worker</title>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
-  var myVar = "Hello World!";
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
-  function pageLog (sMsg) {
-    // Use a fragment: browser will only render/reflow once.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its mime-type is text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its mime-type is text/javascript.
-
-  // In the past...:
-  // blob builder existed
-  // ...but now we use Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Creating a new document.worker property containing all our "text/js-worker" scripts.
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Start the worker.
-  window.onload = function() { document.worker.postMessage(""); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
-</html>
- -

The embedded worker is now nested into a new custom document.worker property.

- -

Tiempos fuera e intervalos

- -

Los trabajadores pueden usar tiempos fuera e intervalos de la misma forma que el "hilo principal".  Esto puede ser útil, por ejemplo, si quieres tener a tu hilo trabajador corriendo codigo periodicamente en lugar de sin parar.

- -

Ver setTimeout() , clearTimeout() , setInterval() , y clearInterval() para más detalles. Ver también: JavaScript Timers.

- -

Terminating a worker

- -

If you need to immediately terminate a running worker, you can do so by calling the worker's terminate() method:

- -
myWorker.terminate();
- -

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

- -

Workers may close themselves by calling their own {{ ifmethod("nsIWorkerScope", "close") }} method:

- -
self.close();
- -

Manejo de errores

- -

When a runtime error occurs in worker, its onerror event handler is called.  It receives an event named error which implements the ErrorEvent interface.  The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

- -

The error event has the following three fields that are of interest:

- -
-
message
-
A human-readable error message.
-
filename
-
The name of the script file in which the error occurred.
-
lineno
-
The line number of the script file on which the error occurred.
-
- -

Accediendo al objeto navigator

- -

Los workers pueden acceder al objeto navigator, el cuál está disponible dentro de su scope actual. Este contiene los siguientes strings que pueden ser usados para identificar el navegador, al igual que puede realizarse usando scripts normales:

- -
    -
  • appName
    • -
  • appVersion
    • -
  • platform
    • -
  • userAgent
    • -
- -

Importing scripts and libraries

- -

Worker threads have access to a global function, importScripts() , which lets them import scripts or libraries into their scope.  It accepts as parameters zero or more URIs to resources to import; all of the following examples are valid:

- -
importScripts();                        /* imports nothing */
-importScripts('foo.js');                /* imports just "foo.js" */
-importScripts('foo.js', 'bar.js');      /* imports two scripts */
-
- -

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{ domxref("window.setTimeout()") }}) will still be functional though. Function declarations after the importScripts() method are also kept, since these are always evaluated before the rest of the code.

- -
Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() .  This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.
- -

Examples

- -

This section provides several examples of how to use DOM workers.

- -

Performing computations in the background

- -

One way workers are useful is to allow your code to perform processor-intensive calculations without blocking the user interface thread.  In this example, a worker is used to calculate Fibonacci numbers.

- -

The JavaScript code

- -

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

- -
var results = [];
-
-function resultReceiver(event) {
-  results.push(parseInt(event.data));
-  if (results.length == 2) {
-    postMessage(results[0] + results[1]);
-  }
-}
-
-function errorReceiver(event) {
-  throw event.data;
-}
-
-onmessage = function(event) {
-  var n = parseInt(event.data);
-
-  if (n == 0 || n == 1) {
-    postMessage(n);
-    return;
-  }
-
-  for (var i = 1; i <= 2; i++) {
-    var worker = new Worker("fibonacci.js");
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };
- -

The worker sets the property onmessage  to a function which will receive messages sent when the worker object's  postMessage() is called.  (Note that this differs from defining a global variable of that name, or defining a function with that name.   var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the  web page that created the worker.)  This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

- -

The HTML code

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8"  />
-    <title>Test threads fibonacci</title>
-  </head>
-  <body>
-
-  <div id="result"></div>
-
-  <script language="javascript">
-
-    var worker = new Worker("fibonacci.js");
-
-    worker.onmessage = function(event) {
-      document.getElementById("result").textContent = event.data;
-      dump("Got: " + event.data + "\n");
-    };
-
-    worker.onerror = function(error) {
-      dump("Worker error: " + error.message + "\n");
-      throw error;
-    };
-
-    worker.postMessage("5");
-
-  </script>
-  </body>
-</html>
-
- -

The web page creates a div element with the ID  result , which gets used to display the result, then spawns the worker.  After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

- -

Finally, a message is sent to the worker to start it.

- -

Try this example .

- -

Performing web I/O in the background

- -

You can find an example of this in the article Using workers in extensions .

- -

Dividing tasks among multiple workers

- -

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

- -

example coming soon

- -

Creating workers from within workers

- -

The Fibonacci example shown previously demonstrates that workers can in fact spawn additional workers.  This makes it easy to create recursive routines.

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Dedicated workers{{CompatChrome(3)}}{{CompatGeckoDesktop(1.9.1)}}{{CompatIE(10)}}{{CompatOpera(10.60)}}{{CompatSafari(4)}}
Shared workers{{CompatChrome(3)}}{{CompatNo}}{{CompatNo}}{{CompatOpera(10.60)}}{{CompatSafari(5)}}
Passing data using structured cloning . {{CompatChrome(13)}}{{CompatGeckoDesktop(8)}}{{CompatIE(10)}}{{CompatOpera(11.50)}}{{CompatSafari(5.1)}}
Passing data using  transferable objects17 {{ property_prefix("webkit") }}
- {{CompatChrome(21)}}		{{CompatGeckoDesktop(18)}}{{CompatNo}}{{CompatOpera(15)}}{{CompatSafari(6)}}
Global {{ domxref("window.URL", "URL") }}10 as webkitURL
- {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}6 as webkitURL
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Dedicated workers---0.163.5 (1.9.1)---115
Shared workers---{{ CompatNo() }}------------
Passing data using structured cloning . ---0.168---------
Passing data using  transferable objects---18---------
-
- -

See also

- - diff --git a/files/es/web/guide/usando_objetos_formdata/index.html b/files/es/web/guide/usando_objetos_formdata/index.html deleted file mode 100644 index 13f4c9635a..0000000000 --- a/files/es/web/guide/usando_objetos_formdata/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Usando Objetos FormData -slug: Web/Guide/Usando_Objetos_FormData -translation_of: Web/API/FormData/Using_FormData_Objects -translation_of_original: Web/Guide/Using_FormData_Objects ---- -

Los objetos FormData le permiten compilar un conjunto de pares clave/valor para enviar mediante XMLHttpRequest. Están destinados principalmente para el envío de los datos del formulario, pero se pueden utilizar de forma independiente con el fin de transmitir los datos tecleados. Los datos transmitidos estarán en el mismo formato que usa el método submit() del formulario para enviar los datos si el tipo de codificación del formulario se establece en "multipart/form-data".

- -

Creación de un objeto FormData desde cero

- -

Usted mismo puede construir un objeto FormData instanciándolo y después añadiendo campos a la instancia usando su método  append() , tal y como se muestra:

- -
var formData = new FormData();
-
-formData.append("username", "Groucho");
-formData.append("accountnum", 123456); // number 123456 is immediately converted to string "123456"
-
-// HTML file input user's choice...
-formData.append("userfile", fileInputElement.files[0]);
-
-// JavaScript file-like object...
-var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
-var blob = new Blob([content], { type: "text/xml"});
-
-formData.append("webmasterfile", blob);
-
-var request = new XMLHttpRequest();
-request.open("POST", "http://foo.com/submitform.php");
-request.send(formData);
-
- -
Nota: Los campos "userfile" y "webmasterfile" contienen ambos un archivo. El número asignado al campo "accountnum" es inmediatamente convertido a string por el método FormData.append() (el valor del campo puede ser un {{ domxref("Blob") }}, {{ domxref("File") }}, o una cadena de texto; si el valor no es ni un Blob, ni un File, será convertido a un string).
- -

Este ejemplo construye una instancia de FormData que almacenará los valores de los campos "username", "accountnum", "userfile" y "webmasterfile", entonces usará el método send() de XMLHttpRequest para enviar los datos del formulario. El campo "webmasterfile" es un Blob. Un objeto Blob representa un objeto de tipo similar a un fichero que es inalterable y que almacenará datos en formato raw. Los Blobs representan datos que no necesariamente tendrán un formato Javascript nativo. La interfaz {{ domxref("File") }} está basada en Blob, y hereda su funcionalidad y la amplía para dar soporte a archivos que estén en el sistema del usuario. Para construir un Blob, puede invocar al constructor del objeto Blob.

- -

Recuperando un objeto FormData de un formulario HTML 

- -

Para construir un objeto FormData que contenga los datos de un {{ HTMLElement("form") }} existente, especifique ese elemento form cuando cree el objeto FormData:

- -
var formData = new FormData(someFormElement);
-
- -

Por ejemplo:

- -
var formElement = document.getElementById("myFormElement");
-var request = new XMLHttpRequest();
-request.open("POST", "submitform.php");
-request.send(new FormData(formElement));
-
- -

También puede añadir datos adicionales al objeto FormData antes de enviarlo. Así:

- -
var formElement = document.getElementById("myFormElement");
-formData = new FormData(formElement);
-formData.append("serialnumber", serialNumber++);
-request.send(formData);
- -

Esto le permite aumentar los datos del formulario antes de enviarlos para incluir información adicional que no necesariamente debiera ser editable por el usuario en el formulario.

- -

Enviando archivos usando objetos FormData

- -

También puede enviar archivos usando FormData. Simplemente incluye un elemento {{ HTMLElement("input") }} de tipo {{ domxref("File") }}:

- -
<form enctype="multipart/form-data" method="post" name="fileinfo">
-  <label>Your email address:</label>
-  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
-  <label>Custom file label:</label>
-  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
-  <label>File to stash:</label>
-  <input type="file" name="file" required />
-  <input type="submit" value="Stash the file!" />
-</form>
-<div id="output"></div>
-
- -

Luego puede enviarlo usando código como el siguiente:

- -
var form = document.forms.namedItem("fileinfo");
-form.addEventListener('submit', function(ev) {
-
-  var
-    oOutput = document.getElementById("output"),
-    oData = new FormData(document.forms.namedItem("fileinfo"));
-
-  oData.append("CustomField", "This is some extra data");
-
-  var oReq = new XMLHttpRequest();
-  oReq.open("POST", "stash.php", true);
-  oReq.onload = function(oEvent) {
-    if (oReq.status == 200) {
-      oOutput.innerHTML = "Uploaded!";
-    } else {
-      oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
-    }
-  };
-
-  oReq.send(oData);
-  ev.preventDefault();
-}, false);
-
- -
-

Nota: el método especificado en el formulario será usado por encima del método utilizado en en la llamada a open().

-
- -

También puede añadir un {{ domxref("File") }} o un {{ domxref("Blob") }} directamente al objeto {{ domxref("XMLHttpRequest/FormData", "FormData") }} de la siguiente manera:

- -
data.append("myfile", myBlob, "filename.txt");
-
- -

Cuando se usa el método append es posible usar, de manera opcional, un tercer parámetro para pasarle un nombre de fichero dentro de la cabecera Content-Disposition que será enviada al servidor. Cuando no se especifica (o el parámetro no es soportado), el nombre "blob" es el que será utilizado.

- -

Además, puede usar FormData con jQuery si asigna las opciones correctas:

- -
var fd = new FormData(document.getElementById("fileinfo"));
-fd.append("CustomField", "This is some extra data");
-$.ajax({
-  url: "stash.php",
-  type: "POST",
-  data: fd,
-  processData: false,  // tell jQuery not to process the data
-  contentType: false   // tell jQuery not to set contentType
-});
-
- -

Envío de formularios y carga de archivos vía AJAX sin  objetos FormData

- -

Si quiere saber cómo serializar y enviar vía AJAX un formulario sin utilizar objetos FormData, por favor leer este párrafo .

- -

Vea también

- - diff --git a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html b/files/es/web/html/anipular_video_por_medio_de_canvas/index.html deleted file mode 100644 index a3ae61673d..0000000000 --- a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: Manipular video por medio de canvas -slug: Web/HTML/anipular_video_por_medio_de_canvas -tags: - - Canvas - - Firefox 3.5 - - Video - - para_revisar -translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas ---- -

{{ fx_minversion_header (3.5) }}

-

Al combinar las capacidades del elemento video introducido en Firefox 3.5 con un elemento canvas , puedes manipular los datos de video en tiempo real para incorporar una variedad de efectos visuales que se mostrarán en el video.  Este artículo, adaptado de esta entrada del blog de Paul Rouget, muestra cómo realizar una inserción croma (también conocida como el "efecto pantalla verde") utilizando el código JavaScript.

-

Ver este ejemplo en vivo .

-

El contenido del documento

-

El documento XHTML que se utiliza para representar este contenido se muestra a continuación.

-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <style>
-      body {
-        background: black;
-        color:#CCCCCC;
-      }
-      #c2 {
-        background-image: url(foo.png);
-        background-repeat: no-repeat;
-      }
-      div {
-        float: left;
-        border :1px solid #444444;
-        padding:10px;
-        margin: 10px;
-        background:#3B3B3B;
-      }
-    </style>
-    <script type="text/javascript;version=1.8" src="main.js"></script>
-  </head>
-
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"/>
-      <canvas id="c2" width="160" height="96"/>
-    </div>
-  </body>
-</html>
-
-

Los puntos clave a tener en cuenta son:

-
    -
  1. Este documento establece dos elemento canvas , con los identificadores de c1 y c2 .  Canvas c1 se utiliza para mostrar la imagen actual del video original, mientras que c2 se utiliza para mostrar el video después de realizar la manipulación con el efecto croma; c2 se carga previamente con la imagen fija que se utilizará para sustituir el fondo verde en el video.
    2. -
  2. El código JavaScript es importado de un script llamado main.js ; este script utiliza JavaScript 1.8 características, de modo que la versión se especifica en la línea 22 al importar la secuencia de comandos.
    3. -
  3. Cuando se carga el documento, se ejecuta el método processor.doLoad() de main.js.
    4. -
-

El código JavaScript

-

El código JavaScript en main.js consta de tres métodos.

-

Inicializar el reproductor de croma

-

El método doLoad() se llama cuando el documento XHTML se carga inicialmente.  La función de este método es preparar las variables necesarias para el código de procesamiento del croma y la creación de un detector de eventos para que podamos detectar cuándo inicia el usuario la reproducción del video.

-
  doLoad: function() {
-    this.video = document.getElementById("video");
-    this.c1 = document.getElementById("c1");
-    this.ctx1 = this.c1.getContext("2d");
-    this.c2 = document.getElementById("c2");
-    this.ctx2 = this.c2.getContext("2d");
-    let self = this;
-    this.video.addEventListener("play", function() {
-        self.width = self.video.videoWidth / 2;
-        self.height = self.video.videoHeight / 2;
-        self.timerCallback();
-      }, false);
-  },
-
-

Este código obtiene referencias a los elementos del documento XHTML que son de particular interés, a saber, el elemento video y los dos elementos canvas.  También recupera las referencias a los contextos gráficos para cada uno de los dos elementos canvas.  Estos serán utilizados cuando estamos haciendo de verdad el efecto croma.

-

Luego addEventListener() es llamado para empezar a ver el elemento video de forma que podamos obtener una notificación cuando el usuario presione el botón de reproducción en el video.  En respuesta al usuario que inicia la reproducción, el código obtiene la anchura y la altura de video, reduciendo a la mitad cada uno (vamos a reducir a la mitad el tamaño del video, cuando llevamos a cabo la manipulación efecto croma). A continuación, llama al método timerCallback() para iniciar el visionado del video y la computación del efecto visual.

-

La devolución de llamada del temporizador

-

La devolución de llamada del temporizador se llama inicialmente cuando el video comienza a reproducirse (cuando tiene lugar el evento "reproducir"), a continuación, toma la responsabilidad por la que se establece a sí mismo para ser llamado periódicamente, a fin de poner en marcha el efecto croma para cada imagen.

-
  timerCallback: function() {
-    if (this.video.paused || this.video.ended) {
-      return;
-    }
-    this.computeFrame();
-    let self = this;
-    setTimeout(function () {
-        self.timerCallback();
-      }, 0);
-  },
-
-

Lo primero que la devolución de llamada hace es comprobar si el video se está aún reproduciendo, y si no lo está, la devolución de llamada regresa inmediatamente sin hacer nada.

-

A continuación, llama al método computeFrame(), que lleva a cabo la manipulación del efecto croma en la imagen de video actual.

-

Lo último que la devolución de llamada hace es llamar a setTimeout() para programarse para ser llamado lo más pronto posible.  En el mundo real, es probable que programes esto en función de la velocidad de fotogramas del video.

-

Manipulación de los datos de la imagen del video

-

El método computeFrame(), que se muestra a continuación, se encarga de ir a buscar realmente un fotograma de datos y realizar el efecto croma.

-
  computeFrame: function() {
-    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
-    let l = frame.data.length / 4;
-
-    for (let i = 0; i < l; i++) {
-      let r = frame.data[i * 4 + 0];
-      let g = frame.data[i * 4 + 1];
-      let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
-        frame.data[i * 4 + 3] = 0;
-    }
-    this.ctx2.putImageData(frame, 0, 0);
-    return;
-  }
-
-

Cuando esta rutina es llamada, el elemento video muestra el fotograma de datos de video más reciente, que tiene este aspecto:

-

video.png

-

En la línea 2, ese fotograma de video se copia al contexto gráfico ctx1 del primer lienzo, especificando como alto y ancho los valores que previamente guardamos para dibujar el fotograma a mitad de tamaño.  Ten en cuenta que puedes pasar simplemente el elemento de video al método drawImage() del contexto para dibujar el fotograma de video actual en dicho contexto.  El resultado es:

-

sourcectx.png

-

Línea 3 obtiene una copia de los datos gráficos del actual fotograma de video llamando al método getImageData() en el primer contexto.  Esto proporciona los datos de imagen en píxeles de 32 bits sin procesar que podemos después manipular.  Línea 4 calcula el número de píxeles de la imagen al dividir entre cuatro el tamaño total de los datos de la imagen del fotograma.

-

El bucle for que comienza en la línea 6 explora a través de los píxeles del fotograma, extrayendo los valores rojo, verde y azul para cada píxel, y compara los valores frente a números predeterminados que se utilizan para detectar la pantalla verde que se reemplazará por la imagen de fondo fija importada de foo.png .

-

Cada píxel de datos de imagen del fotograma que se encuentra que está dentro de los parámetros que se consideran parte de la pantalla verde tiene su valor alfa reemplazado por un cero, lo que indica que el píxel es totalmente transparente.  Como resultado, la imagen final tiene toda el área de pantalla verde 100% transparente, de modo que cuando se dibuja en el contexto de destino en la línea 13, el resultado es una superposición sobre el fondo estático.

-

La imagen resultante tiene este aspecto:

-

output.png

-

Esto se hace en varias ocasiones mientras el video se reproduce, de manera que fotograma tras fotograma se procesa y se muestra con el efecto de croma.

-

Ver este ejemplo en vivo .

-

Consulta también

- -

{{ languages ( { "en": "En/Manipulating_video_using_canvas" } ) }}

diff --git a/files/es/web/html/atributos/accept/index.html b/files/es/web/html/atributos/accept/index.html deleted file mode 100644 index b98ff8b644..0000000000 --- a/files/es/web/html/atributos/accept/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: 'HTML el atributo: accept' -slug: Web/HTML/Atributos/accept -tags: - - Accept - - Archivo - - Entrada - - Input - - Referencia - - atributo -translation_of: Web/HTML/Attributes/accept ---- -

El atributo accept toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. La propiedad «accept» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.

- -

Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.

- -

Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <input> como este:

- -
<input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
- -

Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:

- -
<input type="file" id="soundFile" accept="audio/*">
-<input type="file" id="videoFile" accept="video/*">
-<input type="file" id="imageFile" accept="image/*">
- -

El atributo accept no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.

- -

Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.

- -

Ejemplos

- -

Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.

- -
-
<p>
-	<label for="soundFile">Selecciona un archivo de audio:</label>
-	<input type="file" id="soundFile" accept="audio/*">
-	</p>
-	<p>
-	<label for="videoFile">Selecciona un archivo de video:</label>
-	<input type="file" id="videoFile" accept="video/*">
-	</p>
-	<p>
-	<label for="imageFile">Selecciona algunas imágenes:</label>
-	<input type="file" id="imageFile" accept="image/*" multiple>
-	</p>
- -

{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}

- -

Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo multiple para obtener más información.

-
- -

Especificadores de tipo de archivo únicos

- -

Un especificador de tipo de archivo único es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo file. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:

- -
    -
  • Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: .jpg, .pdf, o .doc.
    • -
  • Una cadena de tipo MIME válida, sin extensiones.
    • -
  • La cadena audio/* significa "cualquier archivo de audio".
    • -
  • La cadena video/* significa "cualquier archivo de video".
    • -
  • La cadena image/* significa "cualquier archivo de imagen".
    • -
- -

El atributo accept toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:

- -
<input type="file" accept="image/*,.pdf">
- -

Usar inputs de archivo

- -

Un ejemplo básico

- -
<form method="post" enctype="multipart/form-data">
- <div>
-   <label for="file">Elige el archivo a cargar</label>
-   <input type="file" id="file" name="file" multiple>
- </div>
- <div>
-   <button>Enviar</button>
- </div>
-</form>
- - - -

Esto produce la siguiente salida:

- -

{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}

- -
-

Nota: También puedes encontrar este ejemplo en GitHub; consulta código fuente y también puedes verlo funcionando en vivo.

-
- -

Independientemente del dispositivo o sistema operativo del usuario, el <input> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.

- -

La inclusión del atributo multiple, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <input>, omite el atributo multiple.

- -

Limitar los tipos de archivo aceptados

- -

A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.

- -

Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:

- -
    -
  • accept="image/png" o accept=".png" — Acepta archivos PNG.
    • -
  • accept="image/png, image/jpeg" o accept=".png, .jpg, .jpeg" — Acepta archivos PNG o JPEG.
    • -
  • accept="image/*" — Acepta cualquier archivo con un tipo MIME de image/*. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).
    • -
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Acepta cualquier cosa que huela a un documento de MS Word.
    • -
- -

Veamos un ejemplo más completo:

- -
<form method="post" enctype="multipart/form-data">
-  <div>
-    <label for="profile_pic">Elige el archivo para cargar</label>
-    <input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png">
-  </div>
-  <div>
-    <button>Enviar</button>
-  </div>
-</form>
- - - -

{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - -
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}{{Spec2('HTML5.1')}}
- -

Compatibilidad del navegador

- - - -

{{Compat("html.elements.attribute.accept")}}

- -

Ve también

- -
    -
  • {{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}
    • -
  • {{web.link("/es/docs/Web/API/File", "API de File")}}
    • -
diff --git a/files/es/web/html/atributos/autocomplete/index.html b/files/es/web/html/atributos/autocomplete/index.html deleted file mode 100644 index b8546e368d..0000000000 --- a/files/es/web/html/atributos/autocomplete/index.html +++ /dev/null @@ -1,180 +0,0 @@ ---- -title: The HTML autocomplete attribute -slug: Web/HTML/Atributos/autocomplete -translation_of: Web/HTML/Attributes/autocomplete ---- -

El atributo autocomplete  está disponible en varios tipos de  {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. autocomplete  permite a los desarrolladores web especificar qué permisos si los hay {{Glossary("user agent")}}  debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.

- -

 

- -

Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ​​ingresados ​​por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.

- -

Si un elemento {{HTMLElement("input")}} no tiene el atributo autocomplete , entonces los navegadores usan el atributo autocomplete del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.

- -

Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}

- -
-

Para proveer el autocompletado, el navegador necesita del los elementos <input>:

- -
    -
  1. Que tengan name y/o id
    2. -
  2. Pertenezcan a un elemento <form>
    3. -
  3. Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}
    4. -
-
- -

Valores

- -
-
"off"
-
The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. -
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
-
-
"on"
-
The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.
-
"name"
-
The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components: -
-
"honorific-prefix"
-
The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".
-
"given-name"
-
The given (or "first") name.
-
"additional-name"
-
The middle name.
-
"family-name"
-
The family (or "last") name.
-
"honorific-suffix"
-
The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
-
"nickname"
-
A nickname or handle.
-
-
-
"email"
-
An email address.
-
"username"
-
A username or account name.
-
"new-password"
-
A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.
-
"current-password"
-
The user's current password.
-
"organization-title"
-
A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".
-
"organization"
-
A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".
-
"street-address"
-
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
-
"address-line1", "address-line2", "address-line3"
-
Each individual line of the street address. These should only be present if the "street-address" is also present.
-
"address-level4"
-
The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.
-
"address-level3"
-
The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.
-
"address-level2"
-
The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
-
"address-level1"
-
The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
-
"country"
-
A country code.
-
"country-name"
-
A country name.
-
"postal-code"
-
A postal code (in the United States, this is the ZIP code).
-
"cc-name"
-
The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.
-
"cc-given-name"
-
A given (first) name as given on a payment instrument like a credit card.
-
"cc-additional-name"
-
A middle name as given on a payment instrument or credit card.
-
"cc-family-name"
-
A family name, as given on a credit card.
-
"cc-number"
-
A credit card number or other number identifying a payment method, such as an account number.
-
"cc-exp"
-
A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".
-
"cc-exp-month"
-
The month in which the payment method expires.
-
"cc-exp-year"
-
The year in which the payment method expires.
-
"cc-csc"
-
The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.
-
"cc-type"
-
The type of payment instrument (such as "Visa" or "Master Card").
-
"transaction-currency"
-
The currency in which the transaction is to take place.
-
"transaction-amount"
-
The amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.
-
"language"
-
A preferred language, given as a valid BCP 47 language tag.
-
"bday"
-
A birth date, as a full date.
-
"bday-day"
-
The day of the month of a birth date.
-
"bday-month"
-
The month of the year of a birth date.
-
"bday-year"
-
The year of a birth date.
-
"sex"
-
A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.
-
"tel"
-
A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: -
-
"tel-country-code"
-
The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.
-
"tel-national"
-
The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".
-
"tel-area-code"
-
The area code, with any country-internal prefix applied if appropriate.
-
"tel-local"
-
The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "tel-local-prefix" for "555" and "tel-local-suffix" for "6502".
-
-
-
"tel-extension"
-
A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.
-
"impp"
-
A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".
-
"url"
-
A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.
-
"photo"
-
The URL of an image representing the person, company, or contact information given in the other fields in the form.
-
- -

See the WHATWG Standard for more detailed information.

- -
-

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply to the <input> by virtue of its type. See {{bug(654072)}}.

-
- -

Administrative levels in addresses

- -

The four administrative level fields ("address-level1" through "address-level4") describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

- -

"address-level1" always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

- -

Form layout flexibility

- -

Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

- -

Variations

- -

The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

- -

United States

- -

A typical home address within the United States looks like this:

- -

432 Anywhere St
- Exampleville CA 95555

- -

In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus "address-level1" is the state, or "CA" in this case.

- -

The second-least specific portion of the address is the city or town name, so "address-level2" is "Exampleville" in this example address.

- -

United States addresses do not use levels 3 and up.

- -

United Kingdom

- -

The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.

- -

China

- -

China can use as many as three administrative levels: the province, the city, and the district.

diff --git a/files/es/web/html/atributos/index.html b/files/es/web/html/atributos/index.html deleted file mode 100644 index 03e7d8baee..0000000000 --- a/files/es/web/html/atributos/index.html +++ /dev/null @@ -1,677 +0,0 @@ ---- -title: Referencia de Atributos HTML -slug: Web/HTML/Atributos -tags: - - HTML - - Referencia - - Web - - atributo -translation_of: Web/HTML/Attributes ---- -

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

- -

Lista de Atributos

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Nombre del AtributoElementosDescripción
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.
accept-charset{{ HTMLElement("form") }}Lista de juegos de caracteres soportados.
accesskeyAtributos GlobalesDefine una tecla que activa o agrega un foco al elemento.
action{{ HTMLElement("form") }}La URL del programa que procesa la información enviada en el formulario.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica el alineamiento horizontal del elemento.
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}Texto alternativo en caso de que la imagen no se pueda mostrar.
async{{ HTMLElement("script") }}Indica que el script debería ejecutarse asincrónicamente.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}El elemento debería recibir foco automáticamente después de haberse cargado la página.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}El audio o video debería empezar lo antes posible.
autosave{{ HTMLElement("input") }}Previous values should persist dropdowns of selectable values across page loads.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} -

Color de fondo del elemento.

- -
-

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.

-
-
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} -

El ancho del borde.

- -
-

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.

-
-
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene un rango de tiempo multimedia almacenado.
challenge{{ HTMLElement("keygen") }}Cadena de desafío que se envía junto con la clave pública.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara la codificación de caracteres de la página o del script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica que el elemento debería estar marcado al cargar la página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene una URL que apunta a la fuente de la cita o cambio.
classAtributo GlobalUsualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
code{{ HTMLElement("applet") }}Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.
codebase{{ HTMLElement("applet") }}Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} -

Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.

- -
-

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.

-
-
cols{{ HTMLElement("textarea") }}Define el número de columnas en un área de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de columnas que una celda debe contener.
content{{ HTMLElement("meta") }}Un valor asociado con http-equiv o name dependiendo del contexto.
contenteditableAtributo GlobalIndica si el contenido del elemento es editable.
contextmenuAtributo GlobalDefine el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el navegador debe mostrar controles de reproduccion al usuario.
coords{{ HTMLElement("area") }}Un conjunto de valores que especifican las coordenadas del area.
data{{ HTMLElement("object") }}Especifica la URL del recurso.
data-*Atributo GlobalPermite asociar atributos presonalizados a un elemento HTML.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica la fecha y hora asociadas con el elemento.
default{{ HTMLElement("track") }}Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.
defer{{ HTMLElement("script") }}Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo GlobalDefine la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si el usuario puede interactuar con el elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica que el hipervínculo es utilizado para descargar un recurso.
draggableAtributo GlobalDefine si el elemento puede ser arrastrado.
dropzoneAtributo GlobalIndica que el elemento acepta contenido soltado en el mismo.
enctype{{ HTMLElement("form") }}Define el tipo de contenido del formulario cuando el método del mismo es POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describe elementos que pertenecen a éste.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el formulario al que pertenece el elemento.
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs de los elementos <th> que aplican a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} -

Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.

- -
-

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

-
-
hiddenAtributo GlobalEvita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script
high{{ HTMLElement("meter") }}Indica el menor valor del rango alto.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}La URL de un recurso asociado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica el lenguaje del recurso asociado.
http-equiv{{ HTMLElement("meta") }}Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.
icon{{ HTMLElement("command") }} -

Especifica una imagen relacionada con el comando.

- -
-

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

-
-
idAtributo GlobalIdentificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.
ismap{{ HTMLElement("img") }}Indica que la imagen es parte de un mapa de imagen del servidor.
itempropAtributo GlobalIndica que el elemento contiene el valor de la propiedad especificada de un conjunto.
keytype{{ HTMLElement("keygen") }} -

Especifica el tipo de clave generada.

- -
-

Nota: RSA es el valor por defecto.

-
-
kind{{ HTMLElement("track") }}Specifies the kind of text track.
label{{ HTMLElement("track") }}Especifica el título de la pista con un formato legible por el usuario.
langAtributo GlobalDefine el lenguaje utilizado en el elemento.
language{{ HTMLElement("script") }}Define el lenguage (de programación) utilizado en el elemento.
list{{ HTMLElement("input") }}Identifica una serie de valores predefinidos para ser sugeridos al usuario.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.
low{{ HTMLElement("meter") }}Indica el valor mas alto del rango bajo.
manifest{{ HTMLElement("html") }}Especifica la URL del manifiesto de cache para el documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el máximo valor aceptado.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define el mayor número de caracteres aceptados.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.
method{{ HTMLElement("form") }}Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínimo aceptado.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si múltiples valores pueden ser ingresados.
muted{{ HTMLElement("video") }}Indica si el audio será silenciado inicialmente al cargar la página.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.
novalidate{{ HTMLElement("form") }}Este atributo indica que el formulario no debe ser validado cuando se envíe.
open{{ HTMLElement("details") }}Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum{{ HTMLElement("meter") }}Indica el valor numérico óptimo.
pattern{{ HTMLElement("input") }}Define una expresion regular con la cual el valor del elemento debe ser validado.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.
poster{{ HTMLElement("video") }}Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el recurso o partes del mismo deben ser precargadas.
pubdate{{ HTMLElement("time") }}Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).
radiogroup{{ HTMLElement("command") }} -

Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.

- -
-

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

-
-
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si el elemento puede ser editado por el usuario.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica la relación entre el objeto destino y el objeto enlace.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si se requiere rellenar o no este elemento.
reversed{{ HTMLElement("ol") }}Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.
rows{{ HTMLElement("textarea") }}Define el número de filas en un área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de filas que una celda de una tabla debe abarcar.
sandbox{{ HTMLElement("iframe") }}Lista de restricciones a ser desactivadas en el iframe.
scope{{ HTMLElement("th") }}Define las celdas que la cabecera definió en este elemento.
scoped{{ HTMLElement("style") }}Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.
seamless{{ HTMLElement("iframe") }}Indica si el iframe debe ser cargado como parte del mismo documento.
selected{{ HTMLElement("option") }}Define un valor que será seleccionado al cargar la página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: circle, defaul, plygon y rect.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define el ancho del elemento (en píxeles). Si el atributo del elemento es del tipo text o password entonces es el número de caracteres.
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}Define los tamaños en los que el icono puede ser cargado.
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}Indica el número de columnas que se agrupan.
spellcheckAtributo GlobalIndica si se permite la corrección ortográfica para el elemento.
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}La URL del contenido integrable.
srcdoc{{ HTMLElement("iframe") }}Especifica el contenido de la página incluida.
srclang{{ HTMLElement("track") }}Especifica el lenguaje del contenido de la pista.
srcset{{ HTMLElement("img") }}
start{{ HTMLElement("ol") }}Define el número inicial de la lista (si es diferente a 1).
step{{ HTMLElement("input") }}Indica el valor del incremento para un valor numerico o de fecha.
styleAtributo GlobalDefine los estilos CSS que anulan los estilos establecidos previamente.
summary{{ HTMLElement("table") }} -

Contiene una descripción del contenido de la tabla.

- -

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.

-
tabindexAtributo GlobalSobrescribe el orden de tabulacion del navegador y usa el especificado.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} -

Especifica el marco destino en un vínculo.

- -

Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.

-
titleAtributo GlobalTexto a ser mostrado cuando el cursor esté sobre el elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define el tipo de elemento.
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }} -

Indica la URL parcial de un image map asociado con el elemento.

- -
-

Note: Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}

-
-
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define el valor predeterminado a ser mostrado al cargar la página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} -

Para los elementos enumerados aquí, esto establece el ancho del elemento.

- -
-

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

-
-
wrap{{ HTMLElement("textarea") }}Indica la forma en la cual el texto debe ser envuelto.
- -

Contenido versus atributos IDL

- -

En HTML, la mayoria de los atributos tiene dos caras: el atributo de contenido y el atributo IDL

- -

El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a setAttribute("maxlength", "42") en ese elemento.

- -

El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como element.foo.. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.

- -

La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el type por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines input.type="foobar", el elemento <input> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el type del atributo IDL retornara el string "text".

- -

Los atributos IDL no son siempre strings; por ejemplo, input.maxlength es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces input.maxlength siempre retornara un numero y cuando definas input,maxlength, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del  estandar de JavaScript para conversiones de tipo.

- -

Los atributos IDL pueden reflejar otros tipos como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen las reglas de diseño en la especificacion, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (select.size, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.

- -

Ver Tambien

- - diff --git a/files/es/web/html/atributos/min/index.html b/files/es/web/html/atributos/min/index.html deleted file mode 100644 index 4060bd81f4..0000000000 --- a/files/es/web/html/atributos/min/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: 'HTML el atributo: min' -slug: Web/HTML/Atributos/min -tags: - - Atributos - - Restricción de validación - - atributo - - min -translation_of: Web/HTML/Attributes/min ---- -
-

El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.

- -

Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.

- -

Sintaxis

- -
-

Si any no se establece explícitamente, los valores válidos para el número, los tipos de entrada de fecha/hora y los tipos de entrada de range son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <input type="number" min="10" step="2">, cualquier entero par, 10 o mayor, es válido. Si se omite, <input type="number">, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el step predeterminado es 1. Para que 4.2 sea válido, step se debería haber configurado en any, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <input type="number" min="-5.2">

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <input type="" />
Tipo del inputEjemploEjemplo
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" min="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T19:30">
{{HTMLElement("input/number", "number")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="range" min="60" step="5" max="100">
- -
-

Nota: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase :invalid

-
-
- -

Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.

- -

Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.

- - - - - - - - - - - - - - - - - -
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos
Tipo del inputSintaxisEjemplo
{{HTMLElement("meter")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
- -

Impacto en step

- -

Los valores de {{HTMLAttrxRef("min", "input")}} y step definen cuáles son los valores válidos, incluso si el atributo step no está incluido, como el step predeterminado de 0.

- -

Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:

- -
input:invalid {
-  border: solid red 3px;
-}
- -

Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo step, en donde el valor predeterminado es 1.

- -
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
- -

Dado que step tiene el valor predeterminado de 1, los valores válidos incluyen 7.2, 8.2, 9.2 y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.

- -

{{EmbedLiveSample("Impacto_en_step",200,55)}}

- -

Si no se incluye explícitamente, step tiene como valor predeterminado 1 para número y range, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.

-
- -

Compatibilidad del navegador

- - - -

{{Compat("html.elements.attributes.min")}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML5 W3C') }}
- -

Problemas de accesibilidad

- -

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.

- -

Ve también

- -
    -
  • {{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}
    • -
  • {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}
    • -
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}
    • -
  • {{DOMxRef('Constraint_validation')}}
    • -
  • {{DOMxRef('validityState.rangeUnderflow')}}
    • -
  • {{CSSxRef(':out-of-range')}}
    • -
  • {{HTMLElement('input')}}
    • -
  • Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}
    • -
diff --git a/files/es/web/html/atributos/minlength/index.html b/files/es/web/html/atributos/minlength/index.html deleted file mode 100644 index 23056673e2..0000000000 --- a/files/es/web/html/atributos/minlength/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: 'HTML el atributo: minlength' -slug: Web/HTML/Atributos/minlength -tags: - - Entrada - - Input - - Referencia - - atributo - - minlength - - textarea -translation_of: Web/HTML/Attributes/minlength ---- -

El atributo minlength define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <input> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.

- -

El <input> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo true. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.

- -

Ejemplos

- -

Al agregar minlength="5", el valor debe estar vacío o tener cinco caracteres o más para ser válido.

- -
<label for="fruit">Ingresa un nombre de fruta que tenga al menos 5 letras</label> <input type="text" minlength="5" id="fruit">
- -

Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea null (vacío) o tenga cinco o más caracteres. Lima no es válido, limón es válido.

- -
input {
-  border: 2px solid currentcolor;
-}
-input:invalid {
-  border: 2px dashed red;
-}
-input:invalid:focus {
-  background-image: linear-gradient(pink, lightgreen);
-}
- -

{{EmbedLiveSample('Ejemplos', '100%', 200)}}

- -

Especificaciones

- - - - - - - - - - - - - - - - - - -
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}{{Spec2('HTML5.1')}}
- -

Compatibilidad del navegador

- - - -

{{Compat("html.elements.attribute.minlength")}}

- -

Ve también

- -
    -
  • {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}
    • -
  • {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}
    • -
  • {{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}
    • -
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}
    • -
diff --git a/files/es/web/html/atributos/multiple/index.html b/files/es/web/html/atributos/multiple/index.html deleted file mode 100644 index cbf465b0b8..0000000000 --- a/files/es/web/html/atributos/multiple/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: 'HTML el atributo: multiple' -slug: Web/HTML/Atributos/multiple -tags: - - Atributos - - Resticción de validación - - atributo -translation_of: Web/HTML/Attributes/multiple ---- -

El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.

- -

Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo file, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo file dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.

- -

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.

- -
<input type="email" multiple name="emails" id="emails">
- -

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.

- -

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic).

- -
<input type="file" multiple name="uploads" id="uploads">
- -

Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.

- -

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.

- -
<select multiple name="drawfs" id="drawfs">
-  <option>Gruñón</option>
-  <option>Feliz</option>
-  <option>Dormilón</option>
-  <option>Tímido</option>
-  <option>Estornudo</option>
-  <option>Tontín</option>
-  <option>Doc</option>
-</select>
- -

Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.

- -

Ejemplos

- -

input para correoᵉ

- -
<label for="emails">¿A quién deseas enviar un correo electrónico?</label>
-<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
-
-<datalist id="drawfemails">
-  <option value="gruñón@woodworkers.com">Gruñón</option>
-  <option value="feliz@woodworkers.com">Feliz</option>
-  <option value="dormilón@woodworkers.com">Dormilón</option>
-  <option value="tímido@woodworkers.com">Tímido</option>
-  <option value="estornudo@woodworkers.com">Estornudo</option>
-  <option value="tontín@woodworkers.com">Tontín</option>
-  <option value="doc@woodworkers.com">Doc</option>
-</datalist>
- - - -

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.

- -

Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.

- -

{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}

- -

input de tipo file

- -

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:

- -
<form method="post" enctype="multipart/form-data">
-  <p>
-    <label for="uploads">
-       Elige las imágenes que deseas cargar:
-    </label>
-    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
-  </p>
-  <p>
-    <label for="text">Elige un archivo de texto para cargar: </label>
-    <input type="file" id="text" name="text" accept=".txt">
- </p>
-  <p>
-    <input type="submit" value="Enviar">
-  </p>
-</form>
- -

{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}

- -

Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin file.

- -

Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como ?uploads=img1.jpg&uploads=img2.svg. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el post. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.

- -

select

- -

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.

- -
<form method="get" action="#">
-<p>
- <label for="dwarfs">Selecciona los leñadores que te gusten:</label>
-  <select multiple name="drawfs" id="drawfs">
-    <option>gruñón@woodworkers.com</option>
-    <option>feliz@woodworkers.com</option>
-    <option>dormilón@woodworkers.com</option>
-    <option>tímido@woodworkers.com</option>
-    <option>estornudo@woodworkers.com</option>
-    <option>tontín@woodworkers.com</option>
-    <option>doc@woodworkers.com</option>
-  </select>
-</p>
-<p>
- <label for="favoriteOnly">Selecciona tu favorito:</label>
-  <select name="favoriteOnly" id="favoriteOnly">
-    <option>gruñón@woodworkers.com</option>
-    <option>feliz@woodworkers.com</option>
-    <option>dormilón@woodworkers.com</option>
-    <option>tímido@woodworkers.com</option>
-    <option>estornudo@woodworkers.com</option>
-    <option>tontín@woodworkers.com</option>
-    <option>doc@woodworkers.com</option>
-  </select>
-</p>
-<p>
-  <input type="submit" value="Enviar">
-</p>
-</form>
- -

{{EmbedLiveSample("select", 600, 120) }}

- -

Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.

- -
/* descomenta este CSS para que el multiple tenga la misma altura que single */
-
-/*
-select[multiple] {
-  height: 1.5em;
-  vertical-align: top;
-}
-select[multiple]:focus,
-select[multiple]:active {
-  height: auto;
-}
-*/
- -

Hay varias formas de seleccionar varias opciones en un elemento <select> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas Ctrl, Comando o Mayús y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <select>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando Arriba y Teclas del cursor hacia abajo para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando Espacio, pero el soporte varía entre los navegadores.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML5 W3C') }}
- -

Problemas de accesibilidad

- -

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".

- -

Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}="1" en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un select, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.

- -

Ve también

- -
    -
  • {{HTMLElement('input')}}
    • -
  • {{htmlelement('select')}}
    • -
  • {{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}
    • -
diff --git a/files/es/web/html/atributos_de_configuracion_cors/index.html b/files/es/web/html/atributos_de_configuracion_cors/index.html deleted file mode 100644 index f7453daa96..0000000000 --- a/files/es/web/html/atributos_de_configuracion_cors/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Atributos de configuración CORS -slug: Web/HTML/Atributos_de_configuracion_CORS -translation_of: Web/HTML/Attributes/crossorigin ---- -

En HTML5, algunos elementos HTML que dan soporte para CORS, tales como {{ HTMLElement("img") }} o {{ HTMLElement("video") }}, tienen un atributo crossorigin  (propiedad crossOrigin), que les permite configurar las peticiones CORS de los datos que se cargan. Estos atributos están enumerados, y tienen los siguientes valores posibles:

- - - - - - - - - - - - - - - - -
Palabra claveDescripción
anonymousCORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales.
use-credentialsCORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales.
- -

Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.

- -

Una clave inválida y un string vacío serán gestionados como  una clave anónima.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidad de navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/accesskey/index.html b/files/es/web/html/atributos_globales/accesskey/index.html deleted file mode 100644 index cb8bbcc16c..0000000000 --- a/files/es/web/html/atributos_globales/accesskey/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: accesskey -slug: Web/HTML/Atributos_Globales/accesskey -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/accesskey ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global accesskey provee un indicio para generar un atajo de teclado para el elemento actual . Este atributo consiste en una lista de caracteres separada por espacios (un único punto de código Unicode). El explorador usa el primero que existe en la distribución del teclado de la computadora .

- -

La operación para activar el accesskey depende del explorador y su plataforma .

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 WindowsLinuxMac
FirefoxAlt + Shift + teclaEn Firefox 14 o posteriores, Control + Alt + tecla
- En Firefox 13 o anteriores, Control + tecla
Internet ExplorerAlt + teclaN/A
Google ChromeAlt + teclaControl + Alt + tecla
SafariAlt + teclaN/AControl + Alt + tecla
OperaShift + Esc abre una lista de contenidos , los cuales son accesibles a través de accesskey , después se puede elegir un item presionando  tecla
- -

Notar que Firefox puede  personalizar la tecla de modificación requerida por  las preferencias del usuario .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el útlimo snapshot  {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Snapshot  de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Snapshot de  {{SpecName('HTML WHATWG')}}. De {{SpecName('HTML4.01')}},  varios caracteres pueden se pueden establecer como el accesskey . Tambien puede establecerse sobre cualquier elemento.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}Solo soportado en {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }} y {{ HTMLElement("textarea") }}
- -

Compatibilidad con exploradores

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/autocapitalize/index.html b/files/es/web/html/atributos_globales/autocapitalize/index.html deleted file mode 100644 index d1f8fc446c..0000000000 --- a/files/es/web/html/atributos_globales/autocapitalize/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: autocapitalización -slug: Web/HTML/Atributos_Globales/autocapitalize -tags: - - Atributos globales - - HTML - - Reference - - Referencia - - autocapitalización -translation_of: Web/HTML/Global_attributes/autocapitalize ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El {{web.link("/es/docs/Web/HTML/Global_attributes", "atributo global")}} {{HTMLAttrxRef("autocapitalize", "input")}} es un atributo enumerado que controla si la entrada de texto se escribe en mayúsculas automáticamente a medida que el usuario la introduce/edita. El atributo debe tomar uno de los siguientes valores:

- -
    -
  • off o none, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)
    • -
  • on o sentences, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • words, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • characters, todas las letras de manera predeterminada deben estar en mayúsculas
    • -
- -

El atributo {{HTMLAttrDef("autocapitalize")}} no afecta el comportamiento al escribir en un teclado físico. En cambio, afecta el comportamiento de otros mecanismos de entrada, como teclados virtuales en dispositivos móviles y entrada de voz. El comportamiento de tales mecanismos es que a menudo ayudan a los usuarios escribiendo en mayúscula automáticamente la primera letra de las oraciones. El atributo {{HTMLAttrDef("autocapitalize")}} permite a los autores redefinir ese comportamiento por elemento.

- -

El atributo {{HTMLAttrDef("autocapitalize")}} nunca hace que se habilite la autocapitalización para un elemento {{HTMLElement("input")}} con un atributo {{HTMLAttrxRef("type", "input")}} cuyo valor es {{HTMLAttrDef("url")}}, {{HTMLAttrDef("email")}} o {{HTMLAttrDef("password")}}.

- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{ Spec2('HTML WHATWG') }}
- -

Compatibilidad del navegador

- - - -

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/es/web/html/atributos_globales/class/index.html b/files/es/web/html/atributos_globales/class/index.html deleted file mode 100644 index ba82c66e65..0000000000 --- a/files/es/web/html/atributos_globales/class/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: class -slug: Web/HTML/Atributos_Globales/class -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/class ---- -

{{HTMLSidebar("Global_attributes")}}
- El atributo global class es una lista de las clases del elemento separada por espacios . Las clases permiten a CSS y Javascript seleccionar y acceder a elementos específicos a través de los selectores de clase o funciones como el método {{domxref("document.getElementsByClassName")}} del DOM.

- -

Aunque la especificación no define los requerimientos para el nombre de las clases , se alienta a los desarrolladores web a usar nombres que describan el propósito semántico del elemento, en lugar de la presentación del elemento (e.g., atributo para describir un atributo en lugar de itálica, aunque un elemento de esta clase puesde ser presentado por itálica). Los nombres semanticos permanecen lógicos incluso si la presentación de la página cambia .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComment
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName('HTML4.01')}}, class es ahora un verdadero atributo global .
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Soportado en todos los elementos pero {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísitcaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] class es un atributo global verdadero solo desde Firefox 32.

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/contenteditable/index.html b/files/es/web/html/atributos_globales/contenteditable/index.html deleted file mode 100644 index 9db8119af2..0000000000 --- a/files/es/web/html/atributos_globales/contenteditable/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: contenteditable -slug: Web/HTML/Atributos_Globales/contenteditable -tags: - - Atributos globales - - HTM - - Referencia -translation_of: Web/HTML/Global_attributes/contenteditable ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global  contenteditable es un atributo enumerado que indica si el elemento debe de ser editable por el usuario . Si es así, el explorador modifca su widget para permitir la edición . El atributo debe de tener alguno de los siguientes valores :

- -
    -
  • true o una string vacia , que indica que el elemento debe de ser editable .
    • -
  • false , que indica que el elemento no debe ser editable.
    • -
- -

Si este atributo no se establece , el valor de default es heredado  de su elemento padre .

- -

Este es un atributo enumerado y no uno booleano . Esto significa que el uso explicito de uno de los valores true , false o la cadena vacía es obligatorio y que una código como <label contenteditable>Example Label</label> no esta permitido . El uso correcto es <label contenteditable="true">Example Label</label>.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.
- -

Compatiblidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Ver también

- -
    -
  •  atributos globales
    • -
  • {{domxref("HTMLElement.contentEditable")}} and {{domxref("HTMLElement.isContentEditable")}}
    • -
diff --git a/files/es/web/html/atributos_globales/contextmenu/index.html b/files/es/web/html/atributos_globales/contextmenu/index.html deleted file mode 100644 index 9cc32f7ace..0000000000 --- a/files/es/web/html/atributos_globales/contextmenu/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: contextmenu -slug: Web/HTML/Atributos_Globales/contextmenu -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/contextmenu ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global  contextmenu es el  id de un  {{HTMLElement("menu")}} para nosotros como el menu contextual para este elemento .

- -

Un menu contextual  es un menu que aparece sobre la interacción del usuario , como por ejemplo un click derecho . HTML5 ahora permite modificar este menú . Aquí hay unos ejemplos de implementación , incluyendo menús anidados .

- -
-

Ejemplo

- -

 

- -
<body contextmenu="share">
-  <menu type="context" id="share">
-    <menu label="share">
-      <menuitem label="Twitter" onclick="window.open('https://twitter.com/intent/tweet?text=Hurra! Estos aprendiendo sobre ContextMenuI en MDN a través de Mozilla ');"></menuitem>
-      <menuitem label="Facebook" onclick="window.open('https://facebook.com/sharer/sharer.php?u=https://https://developer.mozilla.org/en/HTML/Element/Using_HTML_context_menus');"></menuitem>
-    </menu>
-  </menu>
-  <ol>
-    <li>En cualquier parte del ejemplo puedes compartir la página en twitter y Facebook usando el menú de compartir de tu menú contextual.</li>
-    <li><pre contextmenu="changeFont" id="fontSizing">En este elemento específico de la lista , puedes cambiar el tamaño del texto usando  las acciones "Incremenrar/Decrementar" de tu menú contextual ./pre></li>
-    <menu type="context" id="changeFont">
-      <menuitem label="Increase Font" onclick="incFont()"></menuitem>
-      <menuitem label="Decrease Font" onclick="decFont()"></menuitem>
-    </menu>
-    <li contextmenu="ChangeImage" id="changeImage">En la imagen de abajo , puedes accionar la accion "Cambio de Imagen " en tu menú contextual .</li><br />
-    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
-    <menu type="context" id="ChangeImage">
-      <menuitem label="Change Image" onclick="changeImage()"></menuitem>
-    </menu>
-  </ol>
-</body>
-
- -

en conjunto con este Javascript

- -
function incFont(){
-  document.getElementById("fontSizing").style.fontSize="larger";
-}
-function decFont(){
-  document.getElementById("fontSizing").style.fontSize="smaller";
-}
-function changeImage(){
-  var j = Math.ceil((Math.random()*39)+1);
-  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
-}
- -

resulta en :

- -
{{EmbedLiveSample("ContextMenu_Example",550,200)}}
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo }}{{ CompatGeckoDesktop(9) }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatNo }}{{ CompatGeckoDesktop(20) }}{{ CompatNo }}{{ CompatNo }}
-
- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/data-_star_/index.html b/files/es/web/html/atributos_globales/data-_star_/index.html deleted file mode 100644 index 436b156299..0000000000 --- a/files/es/web/html/atributos_globales/data-_star_/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: data-* -slug: Web/HTML/Atributos_Globales/data-* -translation_of: Web/HTML/Global_attributes/data-* ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Los atributos globales data-* forman una clase de atributos , llamados atributos de datos modificables , permite a la información propietaria ser intercambiada entre el HTML y su representación en el DOM que puede ser usada por scripts . Todos esos datos modificables están disponibles a través de la interface del elemento {{domxref("HTMLElement")}} , el atributo se establece encendido . La propiedad  {{domxref("HTMLElement.dataset")}} otorga acceso a ellos . 

- -

El * puede ser remplazado por cualquier nombre siguiedo las reglas de producción de nombres xml con las siguientes restricciones :

- -
    -
  • el nombre no debe de empezar con xml , cualquiera sea el caso usado para estas letras.
    • -
  • el nombre no debe de contener algún punto y coma (U+003A) .
    • -
  • el nombre no debe de contener letras mayúsculas de la A a la Z .
    • -
- -

Notar que la propiedad {{domxref("HTMLElement.dataset")}} es un {{domxref("StringMap")}} y que el nombre del atributo de datos modificabledata-test-value será accesible a través de HTMLElement.dataset.testValue como cualquier guión  (U+002D) es reemplazado por la versión en mayúscula de la siguiente letra (camelcase) . 

- - - -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Snapshot de   {{SpecName('HTML WHATWG')}}, definición inicial.
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop(6) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile(6) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

- -

Ver también 

- -
    -
  • atributos globales .
    • -
  • La propiedad  {{domxref("HTMLElement.dataset")}} que permite el acceso y modifica estos valores .
    • -
diff --git a/files/es/web/html/atributos_globales/dir/index.html b/files/es/web/html/atributos_globales/dir/index.html deleted file mode 100644 index 4bcd43eb40..0000000000 --- a/files/es/web/html/atributos_globales/dir/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: dir -slug: Web/HTML/Atributos_Globales/dir -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/dir ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global dir es un atributo enumerado que indica la direccionalidad del texto de los elementos . Puede tener los siguientes valores : 

- -
    -
  • ltr , significa izquierda a derecha y es usado para los lenguajes que son escritos de izquierda a derecha ( como el Inglés ) .
    • -
  • rtl , significa derecha a izquierda y es usado para los lenguajes que son escritos de la derecha a la izquierda (como el árabe ) .
    • -
  • auto , permite al agente usuario decidir . Usa un algoritmo básico mientras parsea los caracteres dentro de un elemento hasta que encuentra un elemento con una direccionalidad fuerte , después aplica esa direccionalidad a todo el elemento .
    • -
- -
-

Notas de uso

- -

Este atributo es obligatorio para el elemento  {{ HTMLElement("bdo") }} donde este tiene un significado semántico diferente.

- -
    -
  • Este atributo no es heredado por el elemento {{ HTMLElement("bdi") }} . Si no se establece , su valor es auto .
    • -
  • Este atributo puede ser anulado por las propiedades de CSS  {{ cssxref("direction") }} y {{ cssxref("unicode-bidi") }} , si una página CSS está activa y el elemento soporta estas propiedades.
    • -
  • Mientras la direccionalidad del texto esté semánticamente relacionada con su contenido y no con su presentación , se recomienda que los desarrolladores web usen este atributo en lugar de propiedades de CSS relacionadas ,  cuando sea posible . De esta forma , el texto se mostrará correctamente incluso en un explorador que no soporte CSS o que tenga CSS desactivado .
    • -
  • El valor auto debe de ser usada para datos con una direccionalidad desconocida , com datos procedentes de la entrada de usuario , eventualmente almacenados en una base de datos .
    • -
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, sin cambio desde  {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, desde  {{SpecName('HTML4.01')}} añadió el valor auto y ahora es un verdadero atributo global .
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Soportado en todos los elementos pero no en {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y {{HTMLElement("script")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracteristicaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

See also

- - diff --git a/files/es/web/html/atributos_globales/draggable/index.html b/files/es/web/html/atributos_globales/draggable/index.html deleted file mode 100644 index 2aee2d8443..0000000000 --- a/files/es/web/html/atributos_globales/draggable/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: draggable -slug: Web/HTML/Atributos_Globales/draggable -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/draggable ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global draggable es un atributo enumerado que indica si el elemento puede ser arrastrado , usando el {{domxref("HTML_Drag_and_Drop_API","HTML Drag and Drop API")}} . Puede tener los siguientes valores :

- -
    -
  • true , indica que el elemento puede ser arrastrado.
    • -
  • false, indica que el elemento no puede ser arrastrado .
    • -
- -

Si este atriuto no se establece , su valor por default es auto , significando que el comportamiento debe de ser el definido por default en el explorador .

- -

Este es un atributo enumerado  y no uno booleano . Esto signigica que el uso explícito de uno de los valores true o false es obligatorio y que una declaración como <label draggable>Example Label</label> no está permitida . El uso correcto es  <label draggable="true">Example Label</label>.

- -

Por default , unicamente el texto , las imagenes y los vínculos pueden ser arrastrados . Para todos los demás elementos el evento {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}}  debe de ser establecido para el mecanismo de arrastrar y soltar para que funcione , como se muestra en este ejemplo .

- -

 

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-draggable-attribute", "draggable")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

 

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/dropzone/index.html b/files/es/web/html/atributos_globales/dropzone/index.html deleted file mode 100644 index 27abb8f133..0000000000 --- a/files/es/web/html/atributos_globales/dropzone/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Atributos_Globales/dropzone -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/dropzone ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global dropzone es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la API Drag and Drop . Pueden tener los siguientes valores :

- -
    -
  • copy , indica que el soltado creará una copia del elemento que fue arrastrado .
    • -
  • move , indica que el elemento que fue arrastrado será movido a su nueva localización .
    • -
  • link, indica que creara un link para el dato arrastrado.
    • -
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Snapshot de  {{SpecName('HTML WHATWG')}}, definición inicial .
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico {{ CompatUnknown() }}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CataracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown}}{{ CompatNo }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

Ver también 

- -
    -
  • Tos los atributos globales 
    • -
diff --git a/files/es/web/html/atributos_globales/hidden/index.html b/files/es/web/html/atributos_globales/hidden/index.html deleted file mode 100644 index bc29d88b5a..0000000000 --- a/files/es/web/html/atributos_globales/hidden/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: hidden -slug: Web/HTML/Atributos_Globales/hidden -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/hidden ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global hidden es un atributo Booleano que indica que el elemento todavía no está , o ya no es relevante . Por ejemplo , puede ser usado para ocultar elelementos de la página que no pueden ser usados hasta que el proceso de login se haya completado . El explorador no dibujará dichos elementos .

- -

Esta atributo no debe de usarse para ocultar contenido que pudera ser legítimamente mostrado . Por ejemplo , no debe de ser usado para ocultar paneles de pestañas o una interfaz con pestañas , ya que esta es una decisión de estilo y otro estilo mostrandolos lo llevaría a una página perfectamente mostrada .

- -

Los elementos ocultos no deben de ser vinculados desde elementos no ocultos y elementos que son descendientes de un elemento oculto todavía activo ;  lo que significa que los elementos del script pueden todavía ejecutarse y los elementos de formulario pueden todavía enviarse .

- -
-

Nota:  Cambiando el valor de la propiedad CSS {{cssxref("display")}} de un elemento con el atributo hidden  sobrecarga el comportamiento . For ejemplo , un elemeneto diseñado display : flex será mostrado en la pantalla independientemente de que el atributo hidden esté presente .

-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}} -

Define el dibujado por default sugerido del atributo hidden usando CSS

-
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("2") }}11{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

Ver también 

- - diff --git a/files/es/web/html/atributos_globales/id/index.html b/files/es/web/html/atributos_globales/id/index.html deleted file mode 100644 index 3dd947cf27..0000000000 --- a/files/es/web/html/atributos_globales/id/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: id -slug: Web/HTML/Atributos_Globales/id -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/id ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).

- -

El valor de este atributo es una cadena de caracteres opaca: es decir,  el autor del sitio no debe usarlo para proporcionar información. De forma particular, en sentido semántico por ejemplo, no debe ser derivado de la misma cadena.

- -

El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo class, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma, como por medio de un script interactuando con el DOM.

- -
-

Nota: El uso de caracteres a excepción de letras en ASCII, dígitos, '_', '-' y '.' pueden ocasionar problemas de compatibilidad, por no ser permitidos en HTML 4. A pesar de que esta limitación ha sido removida en HTML 5, un ID debe iniciar con una letra para asegurar la compatibilidad.

-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Sin cambios desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambios de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, ahora acepta '_', '-' and '.' si no se encuentra al principio del id. También es un atributo global verdadero.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos a excepción de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.
- -

Compatibilidad en navegadores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
AtributoChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
AtributoAndroidChrome para AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}[1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

[1] class es un atributo global verdadero desde Firefox 32.

- -

Ver también

- -
    -
  • Todos los atributos globales.
    • -
  • {{domxref("Element.id")}} que se asemeja a este atributo.
    • -
diff --git a/files/es/web/html/atributos_globales/index.html b/files/es/web/html/atributos_globales/index.html deleted file mode 100644 index 86769245c6..0000000000 --- a/files/es/web/html/atributos_globales/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: Atributos globales -slug: Web/HTML/Atributos_Globales -tags: - - Atributos globales - - HTML - - Referencia - - Web -translation_of: Web/HTML/Global_attributes ---- -
{{HTMLSidebar("Atributos_globales")}}
- -

Los atributos globales son atributos comunes a todos los elementos HTML; se pueden usar en todos los elementos, aunque es posible que no tengan ningún efecto en algunos elementos.

- -

Los atributos globales se pueden especificar en todos los {{web.link("/es/docs/Web/HTML/Element", "elementos HTML")}}, incluso aquellos no especificados en el estándar. Eso significa que cualquier elemento no estándar debe permitir estos atributos, aunque el uso de esos elementos significa que el documento ya no es compatible con HTML5. Por ejemplo, los navegadores compatibles con HTML5 ocultan el contenido marcado como <foo hidden>...</foo>, aunque <foo> no sea un elemento HTML válido.

- -

Además de los atributos globales HTML básicos, también existen los siguientes atributos globales:

- -
    -
  • {{HTMLAttrDef("xml:lang")}} y {{HTMLAttrDef("xml:base")}} — estos se heredan de las especificaciones XHTML y están en desuso, pero se mantienen por motivos de compatibilidad.
    • -
  • Los múltiples atributos {{web.link("/es/docs/Web/Accessibility/ARIA", "aria-*")}}, utilizados para mejorar la accesibilidad.
    • -
  • Los atributos de {{web.link("/es/docs/Web/Guide/Events/Event_handlers", "control de eventos")}}: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwaiting.
    • -
- -

Lista de atributos globales

- -
-
{{web.link("/es/docs/Web/HTML/Global_attributes/accesskey", "accesskey")}}
-
Proporciona una pista para generar un atajo de teclado para el elemento actual. Este atributo consta de una lista de caracteres separados por espacios. El navegador debe utilizar el primero que exista en la distribución del teclado del ordenador.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/autocapitalize", "autocapitalize")}}
-
Controla si la entrada de texto se pone en mayúsculas automáticamente a medida que el usuario la introduce o edita. Puede tener los siguientes valores: -
    -
  • off o none, no se aplica capitalización automática (todas las letras están predeterminadas en minúsculas)
    • -
  • on o sentences, la primera letra de cada oración de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • words, la primera letra de cada palabra de manera predeterminada tiene una letra mayúscula; todas las demás letras están predeterminadas en minúsculas
    • -
  • characters, todas las letras de manera predeterminada deben estar en mayúsculas
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/class", "class")}}
-
Una lista separada por espacios de las clases del elemento. Las clases permiten que CSS y JavaScript seleccionen y accedan a elementos específicos a través de los {{web.link("/es/docs/Web/CSS/Class_selectors", "selectores de clase")}} o funciones como el método {{DOMxRef("document.getElementsByClassName()")}}.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/contenteditable", "contenteditable")}}
-
Un atributo enumerado que indica si el usuario debe poder editar el elemento. Si es así, el navegador modifica su «widget» para permitir la edición. El atributo debe tomar uno de los siguientes valores: -
    -
  • true o la cadena vacía, la cual indica que el elemento debe ser editable;
    • -
  • false, el cual indica que el elemento no debe ser editable.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/contextmenu", "contextmenu")}} {{Obsolete_Inline}}
-
El {{anch("attr-id", "id")}} de un {{HTMLElement ("menu")}} para usar como el menú contextual para este elemento.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/data-*", "data-*")}}
-
Forma una clase de atributos, denominados atributos de datos personalizados, que permiten el intercambio de información de propiedad entre el {{web.link("/es/docs/Web/HTML", "HTML")}} y su representación {{Glossary("DOM")}} que pueden utilizar los scripts. Todos estos datos personalizados están disponibles a través de la interfaz {{DOMxRef("HTMLElement")}} del elemento en el que está configurado el atributo. La propiedad {{DOMxRef("HTMLElement.dataset")}} les da acceso.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/dir", "dir")}}
-
Un atributo enumerado que indica la direccionalidad del texto del elemento. Puede tener los siguientes valores: -
    -
  • ltr, que significa de izquierda a derecha y s debe usar para idiomas que se escriben de izquierda a derecha (tal como el Español);
    • -
  • rtl, que significa de derecha a izquierda y se utiliza para idiomas que se escriben de derecha a izquierda (tal como el Árabe);
    • -
  • auto, permite que el agente de usuario decida. Utiliza un algoritmo básico ya que analiza los caracteres dentro del elemento hasta que encuentra un carácter con una direccionalidad fuerte, luego aplica esa direccionalidad a todo el elemento.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/draggable", "draggable")}}
-
Un atributo enumerado que indica si el elemento se puede arrastrar mediante la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores: -
    -
  • true, indica que el elemento se puede arrastrar
    • -
  • false, indica que el elemento no se puede arrastrar.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/dropzone", "dropzone")}} {{deprecated_inline}}
-
Un atributo enumerado que indica qué tipos de contenido se pueden colocar en un elemento, utilizando la {{web.link("/es/docs/DragDrop/Drag_and_Drop", "API de arrastrar y soltar")}}. Puede tener los siguientes valores: -
    -
  • copy, indica que soltar creará una copia del elemento que se arrastró
    • -
  • move, indica que el elemento que se arrastró se moverá a esta nueva ubicación.
    • -
  • link, creará un enlace a los datos arrastrados.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/exportparts", "exportparts")}} {{Experimental_Inline}}
-
Se utiliza para exportar de forma transitiva partes de sombras de un árbol de sombras anidado a un árbol contenedor de luz.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/hidden", "hidden")}}
-
Un atributo booleano indica que el elemento aún no es o ya no es relevante. Por ejemplo, se puede utilizar para ocultar elementos de la página que no se pueden utilizar hasta que se haya completado el proceso de inicio de sesión. El navegador no representará tales elementos. Este atributo no se debe utilizar para ocultar contenido que se podría mostrar legítimamente.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/id", "id")}}
-
Define un identificador (ID) único que debe ser único en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), al escribir un script o al aplicarle estilo (con CSS).
-
{{web.link("/es/docs/Web/HTML/Global_attributes/inputmode", "inputmode")}}
-
Proporciona una pista a los navegadores sobre el tipo de configuración de teclado virtual que se debe utilizar al editar este elemento o su contenido. Se usa principalmente en elementos {{HTMLElement("input")}}, pero se puede usar en cualquier elemento mientras esté en modo {{HTMLAttrxRef("contenteditable")}}.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/is", "is")}}
-
Te permite especificar que un elemento HTML estándar se debe comportar como un elemento integrado personalizado registrado (consulta {{web.link("/es/docs/Web/Web_Components/Using_custom_elements", "Uso de elementos personalizados")}} para obtener más detalles).
-
- -
-

Nota: Los atributos item* son parte de Función de microdatos HTML de WHATWG.

-
- -
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemid", "itemid")}}
-
El identificador único y global de un artículo.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemprop", "itemprop")}}
-
Se usa para agregar propiedades a un elemento. Se puede especificar a cada elemento HTML un atributo itemprop, donde un itemprop consiste en un par de nombre y valor.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemref", "itemref")}}
-
Las propiedades que no son descendientes de un elemento con el atributo itemscope se pueden asociar con el elemento usando un itemref. Proporciona una lista de IDs de elementos (no itemids) con propiedades adicionales en otras partes del documento.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemscope", "itemscope")}}
-
itemscope (normalmente) funciona junto con {{HTMLAttrxRef("itemtype")}} para especificar que el HTML contenido en un bloque es sobre un elemento en particular. itemscope crea el «Item» y define el alcance del itemtype asociado con él. itemtype es una URL válida de un vocabulario (tal como schema.org) que describe el elemento y las propiedades de su contexto.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/itemtype", "itemtype")}}
-
Especifica la URL del vocabulario que se utilizará para definir itemprops (propiedades del elemento) en la estructura de datos. {{HTMLAttrxRef("itemscope")}} se utiliza para establecer el alcance de la estructura de datos en la que estará activo el vocabulario establecido por itemtype.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/lang", "lang")}}
-
Ayuda a definir el idioma de un elemento: el idioma en el que se encuentran los elementos no editables o el idioma en el que el usuario debe escribir los elementos editables. El atributo contiene una “etiqueta de idioma” (compuesta de “subetiquetas de idioma” separadas por guiones) en el formato definido en Etiquetas para identificar idiomas (BCP47). {{anch("attr-xml:lang", "xml:lang")}} tiene prioridad sobre él.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/part", "part")}}
-
Una lista separada por espacios de los nombres de las partes del elemento. Los nombres de las partes permiten que CSS seleccione y aplique estilo a elementos específicos en la sombra de un árbol mediante el pseudoelemento {{CSSxRef("::part")}}.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/slot", "slot")}}
-
Asigna un espacio en la sombra de un árbol {{web.link("/es/docs/Web/Web_Components/Shadow_DOM", "DOM de sombra")}} a un elemento: Un elemento con un atributo slot es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor del atributo {{HTMLAttrxRef("name", "slot")}} coincide con el valor del atributo slot.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/spellcheck", "spellcheck")}}
-
Un atributo enumerado define si se puede verificar el elemento para detectar errores ortográficos. Puede tener los siguientes valores: -
    -
  • true, el cual indica que, si es posible, el elemento se debe revisar para detectar errores ortográficos;
    • -
  • false, indica que el elemento no se debe revisar para detectar errores ortográficos.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/style", "style")}}
-
Contiene declaraciones de estilo {{web.link("/en-US/docs/Web/CSS", "CSS")}} que se aplicarán al elemento. Ten en cuenta que se recomienda que los estilos se definan en un archivo o archivos separados. Este atributo y el elemento {{HTMLElement("style")}} principalmente tienen el propósito de permitir un estilo rápido, por ejemplo, con fines de prueba.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/tabindex", "tabindex")}}
-
Un atributo entero que indica si el elemento puede tomar el foco de entrada (es enfocable), si debe participar en la navegación secuencial del teclado y, de ser así, en qué posición. Puede tomar varios valores: -
    -
  • un valor negativo significa que el elemento se debe poder enfocar, pero no debe ser accesible mediante la navegación secuencial del teclado;
    • -
  • 0 significa que el elemento se debe poder enfocar y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo está definido por la convención de la plataforma;
    • -
  • un valor positivo significa que el elemento se debe poder enfocar y ser accesible mediante la navegación secuencial del teclado; el orden en el que se enfocan los elementos es el valor creciente del {{anch("attr-tabindex", "tabindex")}}. Si varios elementos comparten el mismo tabindex, su orden relativo sigue sus posiciones relativas en el documento.
    • -
-
-
{{web.link("/es/docs/Web/HTML/Global_attributes/title", "title")}}
-
Contiene un texto que representa información de advertencia relacionada con el elemento al que pertenece. Normalmente, pero no necesariamente, dicha información se puede presentar al usuario como información sobre herramientas.
-
{{web.link("/es/docs/Web/HTML/Global_attributes/translate", "translate")}} {{Experimental_Inline}}
-
Un atributo enumerado que se utiliza para especificar si los valores de atributo de un elemento y los valores de sus hijos de nodo {{DOMxRef("Text")}} se deben traducir cuando la página está localizada, o si se deben dejar sin cambios. Puede tener los siguientes valores: -
    -
  • la cadena vacía y yes, indican que el elemento se traducirá.
    • -
  • no, lo cual indica que el elemento no se traducirá.
    • -
-
-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow Parts")}}Se agregaron los atributos globales part y exportparts.
{{SpecName("HTML5.2", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML5.2")}}Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5.1")}}, se han añadido itemid, itemprop, itemref, itemscope y itemtype.
{{SpecName("HTML5.1", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML5.1")}}Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML5 W3C")}}, ha sido añadido contextmenu, draggable, dropzone y spellcheck.
{{SpecName("HTML5 W3C", "dom.html#global-attributes", "Atributos globales")}}{{Spec2("HTML5 W3C")}}Instantánea de {{SpecName("HTML WHATWG")}}. De {{SpecName("HTML4.01")}}, se introduce el concepto de atributos globales y dir, lang, style, id, class, tabindex, accesskey, y title ahora son verdaderos atributos globales.
- xml:lang que inicialmente formaba parte de XHTML, ahora también forma parte de HTML.
- Se han agregado hidden, data-*, contenteditable y translate.
{{SpecName("HTML4.01")}}{{Spec2("HTML4.01")}}No hay atributos globales definidos. Varios atributos que se convertirán en atributos globales en especificaciones posteriores se definen en un subconjunto de elementos.
- class y style son compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.
- dir es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.
- id es compatible con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} y {{HTMLElement("title")}}.
- lang es compatible con todos los elementos excepto {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} y {{HTMLElement("script")}}.
- tabindex solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} y {{HTMLElement("textarea")}}.
- accesskey solo es compatible con {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} t {{HTMLElement("textarea")}}.
- title es compatibles con todos los elementos excepto {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} y {{HTMLElement("title")}}.
- -

Compatibilidad del navegador

- - - -

{{Compat("html.global_attributes")}}

- -

Ve también

- -
    -
  • Las interfaces {{DOMxRef("Element")}} y {{DOMxRef("GlobalEventHandlers")}} que permiten consultar la mayoría de los atributos globales.
    • -
diff --git a/files/es/web/html/atributos_globales/is/index.html b/files/es/web/html/atributos_globales/is/index.html deleted file mode 100644 index aa57cab27d..0000000000 --- a/files/es/web/html/atributos_globales/is/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: is -slug: Web/HTML/Atributos_Globales/is -tags: - - Atributos globales - - HTML - - Referencia - - is -translation_of: Web/HTML/Global_attributes/is ---- -
{{HTMLSidebar("Global_attributes")}}
- -

La construcción is global attribute permite especificar que un elemento HTML estándar se debería comportar como un elemento personalizado provisto originalmente por el lenguaje (para más detalles, vea Utilizando elementos personalizados).

- -

Este atributo puede ser utilizado sólo si nombre del elemento personalizado especificado ha sido definido extósamente en el documento actual, y extiende el tipo de elemento al que está siendo aplicado.

- -

Ejemplos

- -

El siguiente código fue tomado de nuestro ejemplo word-count-web-component (véalo también en vivo).

- -
// Crea una clase para el elemento
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Siempre llamar a super al comienzo del constructor
-    super();
-
-    // Contenido del constructor omitido para mayor brevedad
-    ...
-
-  }
-}
-
-// Define el nuevo elemento
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilidad de navegadores

- - - -

{{Compat("html.global_attributes.is")}}

- -

Vea también

- - - -

 

diff --git a/files/es/web/html/atributos_globales/itemid/index.html b/files/es/web/html/atributos_globales/itemid/index.html deleted file mode 100644 index 72ce64456e..0000000000 --- a/files/es/web/html/atributos_globales/itemid/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: itemid -slug: Web/HTML/Atributos_Globales/itemid -translation_of: Web/HTML/Global_attributes/itemid ---- -

Resumen

- -

El atributo Itemid es un identificador global y único de un item.

- -

Los atributos Itemid attributes sólo se pueden especificar en elmentos que tiene atributos tanto de itemscope como itemtype. Además, el itemid sólo puede ser especficiado en elemento con un atributo itemscope cuyo correspondiente itemtype hace referencia o define un vocabulario que soporte identificadores globales.

- -

Un vocabulario de itemtype nos proporcionará el significado exacto de un identificador global definido dentro del vocabulario. El vocabulario definirá si varios item con el mismo identificador global puede co-existir y, si están permitidos, cómo item con el mismo identificador son gestionados.

- -

Nota: La definición de  itemid hecha por Whatwg.org dice que debe ser una URL. No parece que sea el caso de el ejemplo que se muestra más abajo. Sin embargo la definición de facto es que un itemid es un identificador único, así que los apropiado es URB. Esta inconsistencia refleja sin dudarlo la naturaleza incompleta de la espeficicación Microdata.

- -

Ejemplo

- -

HTML

- -
<dl itemscope
-    itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8">
-<dt>Título <dd itemprop="titulo">The Reality Dysfunction
-<dt>Autor <dd itemprop="autor">Peter F. Hamilton
-<dt>Fecha de publicación
-<dd><time itemprop="fechapublicacion" datetime="26-01-1996">26 Enero 1996</time> </dl>
- -

Datos estructurados

- - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtype: itemid -
http://vocab.example.net/book: urn:isbn:0-330-34032-8
-
itemproptituloThe Reality Dysfunction
itempropautor -
Peter F. Hamilton
-
itempropfechapublicacion26-01-1996
- -

Resultado

- -

{{ EmbedLiveSample('HTML', '', '', '', 'Web/HTML/Global_attributes/itemid') }}

- -

Especificaciones

- - - - - - - - - - - - - - -
EspecificaciónEstad
itemidNota WG - No está siendo ya activamente desarrollado.
diff --git a/files/es/web/html/atributos_globales/itemprop/index.html b/files/es/web/html/atributos_globales/itemprop/index.html deleted file mode 100644 index 232af938aa..0000000000 --- a/files/es/web/html/atributos_globales/itemprop/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: itemprop -slug: Web/HTML/Atributos_Globales/itemprop -tags: - - atributo - - metatag -translation_of: Web/HTML/Global_attributes/itemprop ---- -

Podemos dar más información al motor de búsqueda acerca de imágenes o datos adentro de cualquier tipo de etiquetas , como las propiedades : actores , clasificación ,genero . Para etiquetar las propiedades de un elemento , usa el atributo itemprop . Por ejemplo , para identificar al actor de una película añadir itemprop="director" al elemento que encierra el nombre del director.

- -

Aquí hay un ejemplo .

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1 itemprop="name">Avatar</h1>
-  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
-  <span itemprop="genre">Ciencia ficcion</span>
-  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
-</div>
- -

 

- -

             Para más información acerca de los atributos relacionados consultar  https://schema.org/docs/gs.html

diff --git a/files/es/web/html/atributos_globales/itemref/index.html b/files/es/web/html/atributos_globales/itemref/index.html deleted file mode 100644 index 9dac55140b..0000000000 --- a/files/es/web/html/atributos_globales/itemref/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: itemref -slug: Web/HTML/Atributos_Globales/itemref -translation_of: Web/HTML/Global_attributes/itemref ---- -

Resumen

- -

Las propiedades que no son descendientes de un elemento con el atributo itemscope pueden ser asociadas con el elemento usando un itemref . Itemref provee una lista de ids de los elementos (no itemids) con propiedades adicionales en otras partes dentro del documento .

- -

El atributo itemref puede ser solo especificado en elementos que tienen un atributo itemscope especificado .

- -

Nota: el atributo itemref no es parte del modelo de micro datos . Es solamente un constructor sintáctico que ayuda a los autores en el ingreso de anotaciones a las páginas donde los datos que se van a anotar no siguen una estructura de arbol conveniente . Por ejemplo , permite a los autores marcar los datos en una tabla para que cada columna defina un item separado mientras se mantienen las propiedades en las celdas .

- -
-

Ejemplo

- -

HTML

- -
-
<div itemscope id="amanda" itemref="a b"></div>
-<p id="a">Name: <span itemprop="name">Amanda</span> </p>
-<div id="b" itemprop="band" itemscope itemref="c"></div>
-<div id="c">
-    <p>Band: <span itemprop="name">Jazz Band</span> </p>
-    <p>Size: <span itemprop="size">12</span> players</p>
-</div>
-
-
- -
-

Datos estructurados 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
id'sitemscopeitemref (nombre de itemprop )(valor de itemprop)
id=amandaitemscopeitemref=a,b   
id=a  itempropnameAmanda
id=bitemscopeitemref=c band 
id=c  itempropBandJazz Band
  itempropSize12
- -

Resultado

- -

{{ EmbedLiveSample('Example', '', '', '', 'Web/HTML/Global_attributes/itemref') }}

- -

EspecificaciónEditEdit

- - - - - - - - - - - - - - -
EspecificaciónEstatus
itemrefNota WG  - No se encuentra activamente en desarrollo
-
-
diff --git a/files/es/web/html/atributos_globales/itemscope/index.html b/files/es/web/html/atributos_globales/itemscope/index.html deleted file mode 100644 index b57fc1c6bc..0000000000 --- a/files/es/web/html/atributos_globales/itemscope/index.html +++ /dev/null @@ -1,284 +0,0 @@ ---- -title: itemscope -slug: Web/HTML/Atributos_Globales/itemscope -tags: - - Ejemplo - - itemscope - - itemtype -translation_of: Web/HTML/Global_attributes/itemscope ---- -
{{HTMLSidebar("Global_attributes")}}
- -

itemscope es un atributo global booleano que define el scope asociado del metadata. Especificando el atributo itemscope en un elemento crea un nuevo item, cuyos resultados estan en los numeros de pares name-value asociados con el elemento. Un atributo relativo, {{htmlattrxref("itemtype")}}, es usado para especificar el URL valido de un medio/recipe (como lo es schema.org) que describe que el item es de propiedad contextual. En cada uno de los siguientes ejemplos, el medio/recipe es de schema.org.

- -

Todos los elementos HTML pueden tener un atributo itemscope especifico. Un elemento itemscope no tiene un asociado itemtype pero tiene un sociado itemref.

- -
-

Nota: Encuentra mas acerca del atributo itemtype en http://schema.org/Thing

-
- -

Ejemplo simple

- -

HTML

- -

El siguiente ejemplo especifica que el atributo itemscope. El ejemplo especificado en el itemtype es "http://schema.org/Movie", y especifica tres atributos itemprop relativos.

- -
<div itemscope itemtype="http://schema.org/Movie">
-  <h1 itemprop="nombre">Avatar</h1>
-  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
-  <span itemprop="genero">Ciencia ficcion</span>
-  <a href="https://youtu.be/0AY1XIkX7bY" itemprop="trailer">Trailer</a>
-</div>
-
- -

 

- -

Esctructura de informacion

- -

La siguiente tabla muestran los datos esctructurados mostrados en el anterior ejemplo.

- -

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeItemtypeMovie
itemprop(itemprop name)(itemprop value)
itempropdirectorJames Cameron
itempropgeneroCiencia Ficcion
itempropnombreAvatar
itemprophttps://youtu.be/0AY1XIkX7bYTrailer
- -

itemscope Atributos ID

- -

Cuando especificas el atributo itemscope para un elemento, un nuevo item es creado. El item consiste de un grupo de pares de name-value. Para elementos con un atributo itemscope y un atributo itemtype, podrias tambien especificar un {{htmlattrxref("id")}} attribute. Puedes usar el atributo id para establecer un identificador global para el nuevo item. Un identificador global permite que los items relativos a otros items encuentren paginas atraves de la Web.

- -

Ejemplo

- -

Hay 4 atributos itemscope en el siguiente ejemplo. Cada atributo itemscope establecen el scope correspondiente a sus atributos itemtype. El itemtypes, Recipe, AggregateRating, y NutritionInformation en el siguiente ejemplo son parte de la informacion estructura por medio de schema.org, se especifico el primer itemtype, http://schema.org/Recipe.

- -
<div itemscope itemtype="http://schema.org/Recipe">
-<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
-<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
-<p>By <span itemprop="author" itemscope itemtype="http://schema.org/Person">
-<span itemprop="name">Carol Smith</p></span>
-</span>
-<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
-November 5, 2009</p></time>
-<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
- <span itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
- <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
-Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
- Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
- Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
- Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
- <span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
- Serving size: <span itemprop="servingSize">1 medium slice<br></span>
- Calories per serving: <span itemprop="calories">250 cal<br></span>
- Fat per serving: <span itemprop="fatContent">12 g<br></span>
-</span>
-<p>Ingredients:<br>
-  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
-  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
- ... </p>
-
-Directions: <br>
-  <div itemprop="recipeInstructions">
-    1. Cut and peel apples<br>
-    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
-    ...
-  </div>
-</div>
- -

Resultados

- -

HTML

- -

Los siguientes son un ejemplo renderizado resultado del codigo del anterior ejemplo.

- -

{{EmbedLiveSample('Example', '500', '550', '', 'Web/HTML/Global_attributes/itemscope')}}

- -

Structured data

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
itemscopeitemtypeMedio/Recipe
itempropnameGrandma's Holiday Apple Pie
itempropimagehttps://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
itempropdatePublished2009-11-05
itempropdescriptionThis is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTimePT30M
itempropcookTimePT1H
itemproptotalTimePT1H30M
itemproprecipeYield1 9" pie (8 servings)
itemproprecipeIngredientThinly-sliced apples: 6 cups
itemproprecipeIngredientWhite sugar: 3/4 cup
itemproprecipeInstructions1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
itempropauthor [Person]
itempropnameCarol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]
itempropratingValue4.0
itempropreviewCount35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]
itempropservingSize1 medium slice
itempropcalories250 cal
itempropfatContent12 g
- -
-

Note: Una herramienta practica para extraer estructuras microdata del HTML es Structured Data Testing Tool de Google. Pruebalo en el HTML del ejemplo anterior.

-
- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - -
EspecificacionesEstadosComentario
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
- - - - - -

{{Compat("html.global_attributes.itemscope")}}

- -

Ver tambien

- -
    -
  • Otros atributos globales diferentes
    • -
  • Otro, microdata relativo, atributos globales: -
      -
    • {{htmlattrxref("itemid")}}
      • -
    • {{htmlattrxref("itemprop")}}
      • -
    • {{htmlattrxref("itemref")}}
      • -
    • {{htmlattrxref("itemscope")}}
      • -
    • {{htmlattrxref("itemtype")}}
      • -
    -
    • -
diff --git a/files/es/web/html/atributos_globales/lang/index.html b/files/es/web/html/atributos_globales/lang/index.html deleted file mode 100644 index dcea33a66f..0000000000 --- a/files/es/web/html/atributos_globales/lang/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: lang -slug: Web/HTML/Atributos_Globales/lang -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/lang ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global lang participa en la definición del lenguaje del elemento , el lenguaje en que están escritos los elementos no editables o el lenguaje en el cual los elementos editables deberían de estar escritos . La etiqueta contiene un valor sencillo de entrada en el formato que define el documento tags para identificar lenguajes  (BCP47) de la IETF . Si el contenido de la etiqueta es la cadena vacía , el lenguaje se establece como desconocido , si el contenido de la etiqueta no es válido respecto al documento BCP47 , se establece como inválido . 

- -

Incluso si el atributo lang está establecido , puede que no se tome en cuenta , ya que el atributo xml:lang tiene prioridad . Leer el algoritmo para determinar el lenguaje  de el contenido de un elemento para ver como es determinado el lenguaje en todos los casos.

- -

Para la pseudo clase { cssxref(":lang") }} de CSS,  dos nombres invalidos de lenguaje son diferentes si sus nombres son diferentes .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}, comportandose con xml:lang  y el algoritmo de determinación del lenguaje . También es un verdadero atributo global .
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos menos en {HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, y  {{HTMLElement("script")}}.
- -

Compatibilidad en exploradores 

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

 

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/slot/index.html b/files/es/web/html/atributos_globales/slot/index.html deleted file mode 100644 index ed2b8688db..0000000000 --- a/files/es/web/html/atributos_globales/slot/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: slot -slug: Web/HTML/Atributos_Globales/slot -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/slot ---- -
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
- -

El atributo global slot asigna un espacio en un shadow DOM árbol shadow a un elemento: Un elemento con un atributo slot es asignado al espacio creado por el elemento {{HTMLElement("slot")}} cuyo valor de atributo {{htmlattrxref("name", "slot")}} coincide con el valor de ese atributo slot.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
- -

Compatibilidad de navegadores

- - - -

{{Compat("html.global_attributes.slot")}}

- -

Vea también

- - diff --git a/files/es/web/html/atributos_globales/spellcheck/index.html b/files/es/web/html/atributos_globales/spellcheck/index.html deleted file mode 100644 index c6ced2de46..0000000000 --- a/files/es/web/html/atributos_globales/spellcheck/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: spellcheck -slug: Web/HTML/Atributos_Globales/spellcheck -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/spellcheck ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global spellcheck es un atributo enumerado que define si el elemento debe de ser verificado por errores de deletreado. Puede tener los siguientes valores :

- -
    -
  • true , que indica que elemento debe de ser checado para errores de deletreado si es posible .
    • -
  • false , que indica que el elemento no debe de ser checado para errores de deletreado .
    • -
- -

Si este atributo no está establecido , su valor por default es de tipo elemento y definido por el explorador . El valor por default puede der heredado  ,  lo que significa que el contenido del elemento será checado para errores de deletreado solo si el ancestro más cercano tiene un estado de spellcheck  con valor true .

- -

Puedes consultar este artículo para ver un ejemplo comprensivo del uso de este atributo. 
-  

- -

Este es un atributo enumerado y no unoBooleano . Esto significa que el uso explícito de uno de los valores true o false es obligatorio y que una escritura como <label spellcheck>Example Label</label> no está permitida . El uso correcto es <label spellcheck="true">Example Label</label>.

- -

Este atributo es meramente un indicio para el explorador : los exploradores no son obligados a tener disponibilidad para verificar los errores de deletreado , incluso si el atributo spellcheck es establecido como true y el explorador soporta verificación de deletreado .

- -

El valor por default de este atributo es dependiente del explorador y del elemento :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Explorador{{ HTMLElement("html") }}{{ HTMLElement("textarea") }}{{ HTMLElement("input") }}othersComment
FirefoxfalsefalsefalseinheritedWhen layout.spellcheckDefault is 0
falsetrueinheritedinheritedWhen layout.spellcheckDefault is 1 (default value)
falsetruetrueinheritedWhen layout.spellcheckDefault is 2
SeamonkeyfalsefalsefalseinheritedWhen layout.spellcheckDefault is 0
falsetrueinheritedinheritedWhen layout.spellcheckDefault is 1 (default value)
falsetruetrueinheritedWhen layout.spellcheckDefault is 2
CaminofalsefalsefalseinheritedWhen layout.spellcheckDefault is 0
falsetrueinheritedinheritedWhen layout.spellcheckDefault is 1
falsetruetrueinheritedWhen layout.spellcheckDefault is 2 (default value)
Chromefalsetrue?inherited
Internet Explorerfalsetrue?inherited
Operafalsetrue?inherited
Safarifalsetrue?inherited
- -

Espeficicaciones

- - - - - - - - - - - - - - - - - - - -
EspeficifaciónEstatusComentario
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, declaración inicial
- -

Compatibilidad con exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("1.8.1") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo() }}{{ CompatUnknown}}{{ CompatGeckoMobile("1.8.1") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/style/index.html b/files/es/web/html/atributos_globales/style/index.html deleted file mode 100644 index 1da99e039b..0000000000 --- a/files/es/web/html/atributos_globales/style/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: style -slug: Web/HTML/Atributos_Globales/style -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/style ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global style contiene declaraciones de estilo  CSS a ser aplicados a un elemento . Notar que es recomandado para los estilos ser definidos en archivo o archivos separados . Este atributo y el elemento  {{ HTMLElement("style") }} tienen principalmente el propósito de permitir el estilizamiento rápido , por ejemplo para propósitos de pruebas .

- -

Nota de uso : Este atributo no debe de ser usado para comunicar información semántica . Incluso si todo el estilo es removido , una página debería mantenerse semánticamente correcta . Típicamente no debe de ser usado para ocultar información irrelevante ; esto debe de hacerse usando el atributo hidden .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último  snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin  cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora un verdadero atributo global .
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos menos en  {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, y {{HTMLElement("title")}}.
{{ SpecName("CSS3 Style", "", "") }}{{Spec2("CSS3 Style")}}Define el contenido del atributo style .
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísiticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -

 

- -

Ver también

- - diff --git a/files/es/web/html/atributos_globales/tabindex/index.html b/files/es/web/html/atributos_globales/tabindex/index.html deleted file mode 100644 index 2159639208..0000000000 --- a/files/es/web/html/atributos_globales/tabindex/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: tabindex -slug: Web/HTML/Atributos_Globales/tabindex -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/tabindex ---- -

{{HTMLSidebar("Global_attributes")}}

- -

Nota: El valor máximo para tabindex no debe de exceder 32767 (sección 17.11.1 del W3C). Si no se especifica, el valor asignado por defecto es -1.

- -

El atributo global tabindex indica si su elemento puede ser enfocado, y si participa en la navegación secuencial del teclado (usualmente con la tecla Tab, de ahí el nombre). Acepta un entero como valor, con diferentes resultados que dependen de dicho valor:

- -
    -
  • un valor negativo (usualmente tabindex="-1") significa que el elemento debe ser enfocado, pero no debe de ser accesible a través de la navegación secuencial del teclado. Es útil para crear widgets accesibles con JavaScript.
    • -
  • tabindex="0" significa que el elemento debe ser enfocado y ser accesible a través de la navegación secuencial del teclado, pero su orden relativo es definido por convención de la plataforma.
    • -
  • un valor positivo significa que debe poder recoger el foco y alcanzable a través de la navegación secuencial del teclado; su orden relativo es definido por el valor del atributo: la secuencia sigue el aumento del número de tabindex. Si varios elementos comparten el mismo tabindex, su orden relativo sigue la posición relativa en el documento.
    • -
  • Un elemento con valor 0, un valor inválido o sin valor de tabindex, debe de ser posicionado después de elementos con un tabindex postivo en el orden de navegación secuencial del teclado.
    • -
- -

Puede consultar este artículo para ver una explicación compresiva de la administración de la recepción de foco.

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Snapshot de {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, el atributo es ahora soportado en todos los elementos  (atributos globales).
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Solo soportado en {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, y {{HTMLElement("textarea")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
-
- - - -

Ver también 

- -
    -
  • atributos globales .
    • -
  • {{domxref("HTMLElement.tabindex")}} que refleja este atributo .
    • -
diff --git a/files/es/web/html/atributos_globales/title/index.html b/files/es/web/html/atributos_globales/title/index.html deleted file mode 100644 index ab8e0dd92f..0000000000 --- a/files/es/web/html/atributos_globales/title/index.html +++ /dev/null @@ -1,138 +0,0 @@ ---- -title: title -slug: Web/HTML/Atributos_Globales/title -tags: - - Atributos globales - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/title ---- -

{{HTMLSidebar("Global_attributes")}}

- -

El atributo global title contiene un texto representado información relacionada al elemento al cual pertenece . Tal información puede típicamente , pero no necesariamente , ser presentada al usuario como un tip . Aquí hay algunos usos típicos para este atributo :

- -
    -
  • Vínculo : el título o la descripción del documento vinculado 
    • -
  • Elemento mediático como una imagen : una descripción o créditos asociados
    • -
  • Párrafo : una nota de pié de página o comentario acerca de este 
    • -
  • Cita : alguna información sobre el autor y otros datos .
    • -
- -

Si este atributo es omitido  , significa que el título del ancestro más cercano de este elemento es todavía relevante para este (puede usarse legítimamente como un tip para ese elemento ) . Si el atributo es establecido como la cadena vacía , significa explícitamente que el título de su ancestro más  cercano no es relevante para este elemento ( y no debería de usarse en el tip para ese elemento )

- -

Semánticas adicionales se adjuntan a los atributos de title de los elementos {{ HTMLElement("link") }}, {{ HTMLElement("abbr") }}, {{ HTMLElement("input") }} y {{ HTMLElement("menuitem") }} 

- -

El atributo title puede contener varias líneas . Cada  U+000A LINE FEED (LF) insertada representa una línea nueva . Se debe tener precaución ya que esto significa que :

- -
<p>Líneas nuevas en title deben de tomarse en cuenta , como esta <abbr title="Este es un título multilínea">ejemplo </abbr>.</p>
-
- -

define un título de dos líneas .

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, sin cambio desde {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. Desde {{SpecName("HTML4.01")}}, es ahora  un verdadero atributo global.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Soportado en todos los elementos pero no en {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, y {{HTMLElement("title")}}.
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte multi línea{{CompatUnknown}}{{CompatGeckoDesktop(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Soporte multi línea{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(12)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

Ver también

- -
    -
  • atributos globales .
    • -
  • {{domxref("HTMLElement.title")}} que refleja a este atributo .
    • -
diff --git a/files/es/web/html/atributos_globales/translate/index.html b/files/es/web/html/atributos_globales/translate/index.html deleted file mode 100644 index 5182acec3c..0000000000 --- a/files/es/web/html/atributos_globales/translate/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: translate -slug: Web/HTML/Atributos_Globales/translate -tags: - - Atributos globales - - Experimental - - HTML - - Referencia -translation_of: Web/HTML/Global_attributes/translate ---- -

{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}

- -

El atributo global translate  es un atributo enumerado que es usado para especificar si los valores del atributo de un elemento y los valores de sus nodos hijos de Texto serán traducidos cuando la página es localizada , o si se debe de dejarlos sin cambio . Puede tener los siguientes valores : 

- -
    -
  • Cadena vacía y "yes" , que indica que el elemento debe de ser traducido cuando la página es localizada .
    • -
  • "no", que indica que el elemento no debe de ser traducido .
    • -
- -

 

- -

Especificaciones

- - - - - - - - - - - - - - - - - - - -
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial
- -

Compatibilidad en exploradores

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
CaracterísticaAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatNo }}{{ CompatNo }}{{CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
-
- -

 

- -

Ver también

- -
    -
  • atributos globales 
    • -
  • La propiedad  {{domxref("HTMLElement.translate")}} que refleja a este atributo 
    • -
diff --git a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html b/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html deleted file mode 100644 index 26cf4a2599..0000000000 --- a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: x-ms-acceleratorkey -slug: Web/HTML/Atributos_Globales/x-ms-acceleratorkey -translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey ---- -
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
- -

 

- -

La x-ms-acceleratorkeypropiedad proporciona una forma de declarar que una tecla de aceleración se ha asignado a un elemento.

- -

Esta propiedad propietaria es específica de Internet Explorer y Microsoft Edge.

- -

La x-ms-acceleratorkeypropiedad le permite exponer una notificación en el árbol de accesibilidad a los lectores de pantalla y otras tecnologías de asistencia de que existe una clave de aceleración. Este atributo no proporciona el comportamiento de la clave del acelerador. Debe proporcionar controladores de eventos de teclado, como por ejemplo onkeypress, onkeydowno onkeyup, para procesar las teclas de aceleración en el documento.

- -

 

- -

Sintaxis

- -
<button x-ms-acceleratorkey="string">...</button>
- -

Valor

- -

Tipo: String

- -

Nombre de la tecla de aceleración, por ejemplo: Ctrl+B or Ctrl+S.

- -

Ver también

- - diff --git a/files/es/web/html/attributes/accept/index.html b/files/es/web/html/attributes/accept/index.html new file mode 100644 index 0000000000..b98ff8b644 --- /dev/null +++ b/files/es/web/html/attributes/accept/index.html @@ -0,0 +1,169 @@ +--- +title: 'HTML el atributo: accept' +slug: Web/HTML/Atributos/accept +tags: + - Accept + - Archivo + - Entrada + - Input + - Referencia + - atributo +translation_of: Web/HTML/Attributes/accept +--- +

El atributo accept toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. La propiedad «accept» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.

+ +

Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.

+ +

Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <input> como este:

+ +
<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ +

Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:

+ +
<input type="file" id="soundFile" accept="audio/*">
+<input type="file" id="videoFile" accept="video/*">
+<input type="file" id="imageFile" accept="image/*">
+ +

El atributo accept no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.

+ +

Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.

+ +

Ejemplos

+ +

Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.

+ +
+
<p>
+	<label for="soundFile">Selecciona un archivo de audio:</label>
+	<input type="file" id="soundFile" accept="audio/*">
+	</p>
+	<p>
+	<label for="videoFile">Selecciona un archivo de video:</label>
+	<input type="file" id="videoFile" accept="video/*">
+	</p>
+	<p>
+	<label for="imageFile">Selecciona algunas imágenes:</label>
+	<input type="file" id="imageFile" accept="image/*" multiple>
+	</p>
+ +

{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}

+ +

Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo multiple para obtener más información.

+
+ +

Especificadores de tipo de archivo únicos

+ +

Un especificador de tipo de archivo único es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo file. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:

+ +
    +
  • Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: .jpg, .pdf, o .doc.
    • +
  • Una cadena de tipo MIME válida, sin extensiones.
    • +
  • La cadena audio/* significa "cualquier archivo de audio".
    • +
  • La cadena video/* significa "cualquier archivo de video".
    • +
  • La cadena image/* significa "cualquier archivo de imagen".
    • +
+ +

El atributo accept toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:

+ +
<input type="file" accept="image/*,.pdf">
+ +

Usar inputs de archivo

+ +

Un ejemplo básico

+ +
<form method="post" enctype="multipart/form-data">
+ <div>
+   <label for="file">Elige el archivo a cargar</label>
+   <input type="file" id="file" name="file" multiple>
+ </div>
+ <div>
+   <button>Enviar</button>
+ </div>
+</form>
+ + + +

Esto produce la siguiente salida:

+ +

{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}

+ +
+

Nota: También puedes encontrar este ejemplo en GitHub; consulta código fuente y también puedes verlo funcionando en vivo.

+
+ +

Independientemente del dispositivo o sistema operativo del usuario, el <input> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.

+ +

La inclusión del atributo multiple, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <input>, omite el atributo multiple.

+ +

Limitar los tipos de archivo aceptados

+ +

A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.

+ +

Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:

+ +
    +
  • accept="image/png" o accept=".png" — Acepta archivos PNG.
    • +
  • accept="image/png, image/jpeg" o accept=".png, .jpg, .jpeg" — Acepta archivos PNG o JPEG.
    • +
  • accept="image/*" — Acepta cualquier archivo con un tipo MIME de image/*. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).
    • +
  • accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — Acepta cualquier cosa que huela a un documento de MS Word.
    • +
+ +

Veamos un ejemplo más completo:

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Elige el archivo para cargar</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Enviar</button>
+  </div>
+</form>
+ + + +

{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}{{Spec2('HTML5.1')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.attribute.accept")}}

+ +

Ve también

+ +
    +
  • {{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}
    • +
  • {{web.link("/es/docs/Web/API/File", "API de File")}}
    • +
diff --git a/files/es/web/html/attributes/autocomplete/index.html b/files/es/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..b8546e368d --- /dev/null +++ b/files/es/web/html/attributes/autocomplete/index.html @@ -0,0 +1,180 @@ +--- +title: The HTML autocomplete attribute +slug: Web/HTML/Atributos/autocomplete +translation_of: Web/HTML/Attributes/autocomplete +--- +

El atributo autocomplete  está disponible en varios tipos de  {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. autocomplete  permite a los desarrolladores web especificar qué permisos si los hay {{Glossary("user agent")}}  debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.

+ +

 

+ +

Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ​​ingresados ​​por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.

+ +

Si un elemento {{HTMLElement("input")}} no tiene el atributo autocomplete , entonces los navegadores usan el atributo autocomplete del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.

+ +

Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}

+ +
+

Para proveer el autocompletado, el navegador necesita del los elementos <input>:

+ +
    +
  1. Que tengan name y/o id
    2. +
  2. Pertenezcan a un elemento <form>
    3. +
  3. Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}
    4. +
+
+ +

Valores

+ +
+
"off"
+
The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. +
Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.
+
+
"on"
+
The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.
+
"name"
+
The field expects the value to be a person's full name. Using "name" rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following autocomplete values if you do need to break the name down into its components: +
+
"honorific-prefix"
+
The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".
+
"given-name"
+
The given (or "first") name.
+
"additional-name"
+
The middle name.
+
"family-name"
+
The family (or "last") name.
+
"honorific-suffix"
+
The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".
+
"nickname"
+
A nickname or handle.
+
+
+
"email"
+
An email address.
+
"username"
+
A username or account name.
+
"new-password"
+
A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.
+
"current-password"
+
The user's current password.
+
"organization-title"
+
A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".
+
"organization"
+
A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".
+
"street-address"
+
A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.
+
"address-line1", "address-line2", "address-line3"
+
Each individual line of the street address. These should only be present if the "street-address" is also present.
+
"address-level4"
+
The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.
+
"address-level3"
+
The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.
+
"address-level2"
+
The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.
+
"address-level1"
+
The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.
+
"country"
+
A country code.
+
"country-name"
+
A country name.
+
"postal-code"
+
A postal code (in the United States, this is the ZIP code).
+
"cc-name"
+
The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.
+
"cc-given-name"
+
A given (first) name as given on a payment instrument like a credit card.
+
"cc-additional-name"
+
A middle name as given on a payment instrument or credit card.
+
"cc-family-name"
+
A family name, as given on a credit card.
+
"cc-number"
+
A credit card number or other number identifying a payment method, such as an account number.
+
"cc-exp"
+
A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".
+
"cc-exp-month"
+
The month in which the payment method expires.
+
"cc-exp-year"
+
The year in which the payment method expires.
+
"cc-csc"
+
The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.
+
"cc-type"
+
The type of payment instrument (such as "Visa" or "Master Card").
+
"transaction-currency"
+
The currency in which the transaction is to take place.
+
"transaction-amount"
+
The amount, given in the currency specified by "transaction-currency", of the transaction, for a payment form.
+
"language"
+
A preferred language, given as a valid BCP 47 language tag.
+
"bday"
+
A birth date, as a full date.
+
"bday-day"
+
The day of the month of a birth date.
+
"bday-month"
+
The month of the year of a birth date.
+
"bday-year"
+
The year of a birth date.
+
"sex"
+
A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.
+
"tel"
+
A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: +
+
"tel-country-code"
+
The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.
+
"tel-national"
+
The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".
+
"tel-area-code"
+
The area code, with any country-internal prefix applied if appropriate.
+
"tel-local"
+
The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use "tel-local-prefix" for "555" and "tel-local-suffix" for "6502".
+
+
+
"tel-extension"
+
A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.
+
"impp"
+
A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".
+
"url"
+
A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.
+
"photo"
+
The URL of an image representing the person, company, or contact information given in the other fields in the form.
+
+ +

See the WHATWG Standard for more detailed information.

+ +
+

Note: The autocomplete attribute also controls whether Firefox will — unlike other browsers — persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply to the <input> by virtue of its type. See {{bug(654072)}}.

+
+ +

Administrative levels in addresses

+ +

The four administrative level fields ("address-level1" through "address-level4") describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.

+ +

"address-level1" always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.

+ +

Form layout flexibility

+ +

Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.

+ +

Variations

+ +

The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.

+ +

United States

+ +

A typical home address within the United States looks like this:

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus "address-level1" is the state, or "CA" in this case.

+ +

The second-least specific portion of the address is the city or town name, so "address-level2" is "Exampleville" in this example address.

+ +

United States addresses do not use levels 3 and up.

+ +

United Kingdom

+ +

The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.

+ +

China

+ +

China can use as many as three administrative levels: the province, the city, and the district.

diff --git a/files/es/web/html/attributes/crossorigin/index.html b/files/es/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..f7453daa96 --- /dev/null +++ b/files/es/web/html/attributes/crossorigin/index.html @@ -0,0 +1,123 @@ +--- +title: Atributos de configuración CORS +slug: Web/HTML/Atributos_de_configuracion_CORS +translation_of: Web/HTML/Attributes/crossorigin +--- +

En HTML5, algunos elementos HTML que dan soporte para CORS, tales como {{ HTMLElement("img") }} o {{ HTMLElement("video") }}, tienen un atributo crossorigin  (propiedad crossOrigin), que les permite configurar las peticiones CORS de los datos que se cargan. Estos atributos están enumerados, y tienen los siguientes valores posibles:

+ + + + + + + + + + + + + + + + +
Palabra claveDescripción
anonymousCORS, las solicitudes de este elemento no tendrán establecido el indicador de credenciales.
use-credentialsCORS, las solicitudes de este elemento tendrán marcado el indicador de credenciales; esto significa que la solicitud proporcionará credenciales.
+ +

Por defecto, es decir cuando el atributo no es específicado, CORS no se usa. La palabra clave "anonymous" indica que no habrá intercambio de credenciales de usuario a través de las cookies, ni por parte del cliente con certificados SSL o autenticación HTTP como se describe en la sección de terminología de la especificación CORS.

+ +

Una clave inválida y un string vacío serán gestionados como  una clave anónima.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilidad de navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + diff --git a/files/es/web/html/attributes/index.html b/files/es/web/html/attributes/index.html new file mode 100644 index 0000000000..03e7d8baee --- /dev/null +++ b/files/es/web/html/attributes/index.html @@ -0,0 +1,677 @@ +--- +title: Referencia de Atributos HTML +slug: Web/HTML/Atributos +tags: + - HTML + - Referencia + - Web + - atributo +translation_of: Web/HTML/Attributes +--- +

Los elementos en HTML tienen atributos; estos son valores adicionales que configuran los elementos o ajustan su comportamiento de diversas formas para cumplir los criterios de los usuarios.

+ +

Lista de Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Nombre del AtributoElementosDescripción
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Lista de tipos aceptados por el servidor, usualmente un tipo de archivo.
accept-charset{{ HTMLElement("form") }}Lista de juegos de caracteres soportados.
accesskeyAtributos GlobalesDefine una tecla que activa o agrega un foco al elemento.
action{{ HTMLElement("form") }}La URL del programa que procesa la información enviada en el formulario.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}Especifica el alineamiento horizontal del elemento.
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}Texto alternativo en caso de que la imagen no se pueda mostrar.
async{{ HTMLElement("script") }}Indica que el script debería ejecutarse asincrónicamente.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indica si los controles en este formulario pueden tener por defecto sus valores completados automáticamente por el navegador.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}El elemento debería recibir foco automáticamente después de haberse cargado la página.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}El audio o video debería empezar lo antes posible.
autosave{{ HTMLElement("input") }}Previous values should persist dropdowns of selectable values across page loads.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

Color de fondo del elemento.

+ +
+

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("background-color") }} en su lugar.

+
+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

El ancho del borde.

+ +
+

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("border") }} en su lugar.

+
+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Contiene un rango de tiempo multimedia almacenado.
challenge{{ HTMLElement("keygen") }}Cadena de desafío que se envía junto con la clave pública.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}Declara la codificación de caracteres de la página o del script.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}Indica que el elemento debería estar marcado al cargar la página.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}Contiene una URL que apunta a la fuente de la cita o cambio.
classAtributo GlobalUsualmente empleado con CSS para aplicar estilos a elementos con propiedades en comun.
code{{ HTMLElement("applet") }}Especifica la URL del archivo de tipo applet a ser cargado y ejecutado.
codebase{{ HTMLElement("applet") }}Este atributo contiene la URL absoluta o relativa del directorio donde los archivos de applets (.class) referenciados en el codigo se encuentran almacenados.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

Este atributo establece el color de texto utilizando un nombre de color o en formato hexadecimal #RRGGBB.

+ +
+

Nota: Este atributo se mantiene como referencia. Por favor usa la propiedad CSS {{ Cssxref("color") }} en su lugar.

+
+
cols{{ HTMLElement("textarea") }}Define el número de columnas en un área de texto.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de columnas que una celda debe contener.
content{{ HTMLElement("meta") }}Un valor asociado con http-equiv o name dependiendo del contexto.
contenteditableAtributo GlobalIndica si el contenido del elemento es editable.
contextmenuAtributo GlobalDefine el ID del elemento {{ HTMLElement("menu") }} que servira como menú de contexto para otro elemento.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el navegador debe mostrar controles de reproduccion al usuario.
coords{{ HTMLElement("area") }}Un conjunto de valores que especifican las coordenadas del area.
data{{ HTMLElement("object") }}Especifica la URL del recurso.
data-*Atributo GlobalPermite asociar atributos presonalizados a un elemento HTML.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}Indica la fecha y hora asociadas con el elemento.
default{{ HTMLElement("track") }}Indica que la pista debe estar habilitada a menos que las preferencias del usuario indiquen algo diferente.
defer{{ HTMLElement("script") }}Indica que el código debe ser ejecutado despues de que la página este cargada.
dirAtributo GlobalDefine la dirección del texto. Los valores permitidos son ltr (Izquierda-a-Derecha) o rtl (Derecha-a-Izquierda).
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica la dirección del texto asociada con el elemento al momento de enviar el formulario.
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si el usuario puede interactuar con el elemento.
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica que el hipervínculo es utilizado para descargar un recurso.
draggableAtributo GlobalDefine si el elemento puede ser arrastrado.
dropzoneAtributo GlobalIndica que el elemento acepta contenido soltado en el mismo.
enctype{{ HTMLElement("form") }}Define el tipo de contenido del formulario cuando el método del mismo es POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describe elementos que pertenecen a éste.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica el formulario al que pertenece el elemento.
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}Indica la acción del elemento, anulando la acción definida en {{ HTMLElement("form") }}.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDs de los elementos <th> que aplican a este elemento.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Especifica la altura de los elementos enumerados aquí. Para todos los demás elementos, usa la propiedad CSS {{cssxref("height")}} en su lugar.

+ +
+

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

+
+
hiddenAtributo GlobalEvita la prestación del elemento dado, manteniendo los elementos secundarios, p.ej. los elementos de script
high{{ HTMLElement("meter") }}Indica el menor valor del rango alto.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}La URL de un recurso asociado.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica el lenguaje del recurso asociado.
http-equiv{{ HTMLElement("meta") }}Indica una directiva que puede alterar el comportamiento de la pagina y como es leida por los exploradores.
icon{{ HTMLElement("command") }} +

Especifica una imagen relacionada con el comando.

+ +
+

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

+
+
idAtributo GlobalIdentificador el elemento para acceder al mismo desde CSS o Javascript, este indicador debe ser unico para cada elemento.
ismap{{ HTMLElement("img") }}Indica que la imagen es parte de un mapa de imagen del servidor.
itempropAtributo GlobalIndica que el elemento contiene el valor de la propiedad especificada de un conjunto.
keytype{{ HTMLElement("keygen") }} +

Especifica el tipo de clave generada.

+ +
+

Nota: RSA es el valor por defecto.

+
+
kind{{ HTMLElement("track") }}Specifies the kind of text track.
label{{ HTMLElement("track") }}Especifica el título de la pista con un formato legible por el usuario.
langAtributo GlobalDefine el lenguaje utilizado en el elemento.
language{{ HTMLElement("script") }}Define el lenguage (de programación) utilizado en el elemento.
list{{ HTMLElement("input") }}Identifica una serie de valores predefinidos para ser sugeridos al usuario.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}Indica si el medio debe volver a ser reproducido desde el principio al llegar al final.
low{{ HTMLElement("meter") }}Indica el valor mas alto del rango bajo.
manifest{{ HTMLElement("html") }}Especifica la URL del manifiesto de cache para el documento.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indica el máximo valor aceptado.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Define el mayor número de caracteres aceptados.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}Da un indicio del tipo de medio para el cual el recurso vinculado fue creado.
method{{ HTMLElement("form") }}Define el método HTTP a emplear para enviar el formulario. Puede ser GET (predeterminado) o POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indica el valor mínimo aceptado.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indica si múltiples valores pueden ser ingresados.
muted{{ HTMLElement("video") }}Indica si el audio será silenciado inicialmente al cargar la página.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}Nombre del elemento. Por ejemplo utilizado por el servidor para identificar los campos en el envio de formularios.
novalidate{{ HTMLElement("form") }}Este atributo indica que el formulario no debe ser validado cuando se envíe.
open{{ HTMLElement("details") }}Indica si los detalles de la página seran mostrados cuando cargue la misma.
optimum{{ HTMLElement("meter") }}Indica el valor numérico óptimo.
pattern{{ HTMLElement("input") }}Define una expresion regular con la cual el valor del elemento debe ser validado.
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Indica si se enviara un ping o notificacion a la URL del recurso cuando el usuario utlize el vinculo.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Proporciona una sugerencia al usuario de lo que puede ser introducido en el campo.
poster{{ HTMLElement("video") }}Una URL que indica un cuadro a mostrar hasta que el usuario reproduzca o navegue en el video.
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}Indica si el recurso o partes del mismo deben ser precargadas.
pubdate{{ HTMLElement("time") }}Indica si esta fecha y tiempo concuerda con la fecha y tiempo del {{ HTMLElement("article") }} mas cercano (ancestro).
radiogroup{{ HTMLElement("command") }} +

Indica los nombres de los comandos de tipo radio, que seran alternados si el comando en si es alternado. Este atributo debe ser omitido si el tipo de comando no es radio.

+ +
+

Note: El elemento {{ HTMLElement("command") }} es obsoleto y no se recomienda su uso.

+
+
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indica si el elemento puede ser editado por el usuario.
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}Especifica la relación entre el objeto destino y el objeto enlace.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indica si se requiere rellenar o no este elemento.
reversed{{ HTMLElement("ol") }}Indica si la lista debe ser mostrada en orden descendente en vez de ascendente.
rows{{ HTMLElement("textarea") }}Define el número de filas en un área de texto.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}Define el número de filas que una celda de una tabla debe abarcar.
sandbox{{ HTMLElement("iframe") }}Lista de restricciones a ser desactivadas en el iframe.
scope{{ HTMLElement("th") }}Define las celdas que la cabecera definió en este elemento.
scoped{{ HTMLElement("style") }}Indica si el estilo será aplicado sólo al elemento inmediato superior (padre). de no ser definido, el estilo se aplicara de forma global.
seamless{{ HTMLElement("iframe") }}Indica si el iframe debe ser cargado como parte del mismo documento.
selected{{ HTMLElement("option") }}Define un valor que será seleccionado al cargar la página.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}Define una región seleccionable para hacer hipervínculos asociados con una forma asociada a una figura para crear un mapa. Los valores para este atributo son: circle, defaul, plygon y rect.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Define el ancho del elemento (en píxeles). Si el atributo del elemento es del tipo text o password entonces es el número de caracteres.
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}Define los tamaños en los que el icono puede ser cargado.
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}Indica el número de columnas que se agrupan.
spellcheckAtributo GlobalIndica si se permite la corrección ortográfica para el elemento.
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}La URL del contenido integrable.
srcdoc{{ HTMLElement("iframe") }}Especifica el contenido de la página incluida.
srclang{{ HTMLElement("track") }}Especifica el lenguaje del contenido de la pista.
srcset{{ HTMLElement("img") }}
start{{ HTMLElement("ol") }}Define el número inicial de la lista (si es diferente a 1).
step{{ HTMLElement("input") }}Indica el valor del incremento para un valor numerico o de fecha.
styleAtributo GlobalDefine los estilos CSS que anulan los estilos establecidos previamente.
summary{{ HTMLElement("table") }} +

Contiene una descripción del contenido de la tabla.

+ +

Nota: Este atributo ha sido desaprovado, se recomienda incluir un elemento {{ HTMLElement("caption") }} en la tabla.

+
tabindexAtributo GlobalSobrescribe el orden de tabulacion del navegador y usa el especificado.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} +

Especifica el marco destino en un vínculo.

+ +

Valores especiales: "_blank" indica una nueva ventana, "_parent" indica el marco padre del marco que contiene el código fuente, "_self" indica el marco donde está el código fuente y "_top" indica la ventana completa del navegador.

+
titleAtributo GlobalTexto a ser mostrado cuando el cursor esté sobre el elemento.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}Define el tipo de elemento.
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }} +

Indica la URL parcial de un image map asociado con el elemento.

+ +
+

Note: Este atributo no puede ser usado si el elemento {{ HTMLElement("img") }} desciende de un {{ HTMLElement("button") }} o {{ HTMLElement("a") }}

+
+
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}Define el valor predeterminado a ser mostrado al cargar la página.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

Para los elementos enumerados aquí, esto establece el ancho del elemento.

+ +
+

Nota: En algunos casos, como los {{ HTMLElement("div") }}, este es un atributo de referencia, en donde debes usar la propiedad CSS {{ Cssxref("height") }} en su lugar.

+
+
wrap{{ HTMLElement("textarea") }}Indica la forma en la cual el texto debe ser envuelto.
+ +

Contenido versus atributos IDL

+ +

En HTML, la mayoria de los atributos tiene dos caras: el atributo de contenido y el atributo IDL

+ +

El atributo de contenido es aquel que se define desde el contenido (Codigo HTML) y puedes definirlo u obtenerlo con {{domxref("element.setAttribute()")}} o {{domxref("element.getAttribute()")}}. El atributo de contenido es siempre un string incluso cuando el valor esperado en un integer. Por ejemplo, para definir el maxlength de un {{HTMLElement("input")}} a 42 usando el atributo de contenido, se debe llamar a setAttribute("maxlength", "42") en ese elemento.

+ +

El atributo IDL, tambien conocido como propiedad JavaScript. Estos son atributos que se pueden leer o definir usando JavaScript como element.foo.. El atributo IDL siempre va a usar (pero puede transformarse) en el atributo de contenido subyacente para retornar un valor cuando lo obtiene y lo guarda en el atributo de contenido cuando es definido. En otras palabras el atributo IDL, en esencia, refleja los atributos de contenido.

+ +

La mayoria del tiempo, los atributos IDL pueden retornar sus valores como realmente son usados. Por ejemplo, el type por defecto para los elementos {{HTMLElement("input")}} es "texto", entonces si defines input.type="foobar", el elemento <input> sera de tipo texto (en apariencia y comportamiento) pero el valor del Atributo de contenido "type" sera "foobat". De cualquier manera, el type del atributo IDL retornara el string "text".

+ +

Los atributos IDL no son siempre strings; por ejemplo, input.maxlength es un numero (marcado como long). Cuando se usan atributos IDL, lees o defines valores del tipo deseado, entonces input.maxlength siempre retornara un numero y cuando definas input,maxlength, esperara un numero. Si se le entrega otro tipo, se convierte antomaticamente a numero como se especifica en las reglas del  estandar de JavaScript para conversiones de tipo.

+ +

Los atributos IDL pueden reflejar otros tipos como un long sin asignacion, URL's, booleanos, etc. Desafortunadamente no hay reglas claras y el comportamiento que los atributos IDL en conjunto con sus respectivos atributos de contenido depende del mismo atributo. La mayoria del tiempo, siguen las reglas de diseño en la especificacion, pero algunas veces no lo hacen. Las especificaciones HTML tratan de ser lo mas amigables para el dasarrollador como es posible, pero por varias razones (mayormente historicas), algunos aributos se comportan de forma extraña (select.size, por ejemplo) y debes leer las especificaciones para comprender como éste se comporta exactamente.

+ +

Ver Tambien

+ + diff --git a/files/es/web/html/attributes/min/index.html b/files/es/web/html/attributes/min/index.html new file mode 100644 index 0000000000..4060bd81f4 --- /dev/null +++ b/files/es/web/html/attributes/min/index.html @@ -0,0 +1,162 @@ +--- +title: 'HTML el atributo: min' +slug: Web/HTML/Atributos/min +tags: + - Atributos + - Restricción de validación + - atributo + - min +translation_of: Web/HTML/Attributes/min +--- +
+

El atributo {{HTMLAttrxRef("min", "input")}} define el valor mínimo que es aceptable y válido para el {{HTMLElement("input")}} que contiene el atributo. Si el {{web.link("/es/docs/Web/HTML/Element/input#attr-value", "value")}} del elemento es menor que esto, el elemento falla la {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricción de validación")}}. Este valor debe ser menor o igual que el valor del atributo {{HTMLAttrxRef("max", "input")}}. Si se especifica un valor para {{HTMLAttrxRef("min", "input")}} que no es un número válido, la entrada no tiene un valor mínimo.

+ +

Válido para los tipos de entrada numérica, incluidos los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}} y {{HTMLElement("input/range", "range")}}, y el elemento {{htmlelement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} es un número que especifica el valor mínimo de un control de formulario para ser considerado válido.

+ +

Sintaxis

+ +
+

Si any no se establece explícitamente, los valores válidos para el número, los tipos de entrada de fecha/hora y los tipos de entrada de range son iguales a la base de paso a paso: el valor {{HTMLAttrxRef("min", "input")}} y los incrementos del valor del paso, hasta el valor {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}, si se especifica. Por ejemplo, si tienes <input type="number" min="10" step="2">, cualquier entero par, 10 o mayor, es válido. Si se omite, <input type="number">, cualquier número entero es válido, pero los flotantes, como 4.2, no son válidos, ya que el step predeterminado es 1. Para que 4.2 sea válido, step se debería haber configurado en any, 0.1, 0.2, o cualquiera, el valor mínimo tendría que ser un número terminado en 0.2 , como <input type="number" min="-5.2">

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} por <input type="" />
Tipo del inputEjemploEjemplo
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" min="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T19:30">
{{HTMLElement("input/number", "number")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<input type="range" min="60" step="5" max="100">
+ +
+

Nota: Cuando los datos ingresados por el usuario no se adhieren al valor mínimo establecido, el valor se considera inválido en la restricción de validación y coincidirá con la pseudoclase :invalid

+
+
+ +

Consulta {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Validación del lado del cliente")}} y {{DOMxRef("ValidityState.rangeUnderflow", "rangeUnderflow")}} para más información.

+ +

Para el elemento {{HTMLElement('meter')}}, el atributo {{HTMLAttrxRef("min", "input")}} define el límite numérico inferior del rango medido. Debe ser menor que el valor mínimo (atributo {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}), si se especifica. En ambos casos, si se omite, el valor predeterminado es 1.

+ + + + + + + + + + + + + + + + + +
Sintaxis para valores {{HTMLAttrxRef("min", "input")}} para otros elementos
Tipo del inputSintaxisEjemplo
{{HTMLElement("meter")}}{{web.link("/es/docs/Web/CSS/number", "number")}}<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

Impacto en step

+ +

Los valores de {{HTMLAttrxRef("min", "input")}} y step definen cuáles son los valores válidos, incluso si el atributo step no está incluido, como el step predeterminado de 0.

+ +

Agrega un gran borde rojo alrededor de los {{HTMLElement("input")}}s no válidos:

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

Luego define un {{HTMLElement("input")}} con un valor mínimo de 7.2, omitiendo el atributo step, en donde el valor predeterminado es 1.

+ +
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
+ +

Dado que step tiene el valor predeterminado de 1, los valores válidos incluyen 7.2, 8.2, 9.2 y así sucesivamente. El valor 8 no es válido. Dado que incluye un valor no válido, los navegadores compatibles mostrarán el valor como no válido.

+ +

{{EmbedLiveSample("Impacto_en_step",200,55)}}

+ +

Si no se incluye explícitamente, step tiene como valor predeterminado 1 para número y range, y 1 tipo de unidad (segundo, semana, mes, día) para los {{HTMLElement("input")}}s de tipo fecha/hora.

+
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.attributes.min")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{ Spec2('HTML5 W3C') }}
+ +

Problemas de accesibilidad

+ +

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("min", "input")}}, asegúrate de que el usuario comprenda este requisito mínimo. Posiblemente sea suficiente proporcionar instrucciones dentro de un {{HTMLElement('label')}}. Si proporcionas instrucciones fuera de las etiquetas, lo cual permite un posicionamiento y un diseño más flexibles, considera usar {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute", "aria-labelledby")}} o {{web.link("/es/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-descriptionsby_attribute", "aria-describedby")}}.

+ +

Ve también

+ +
    +
  • {{web.link("/es/docs/Web/HTML/Attributes/step", "step")}}
    • +
  • {{web.link("/es/docs/Web/HTML/Attributes/max", "max")}}
    • +
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "restricciones de validación")}}
    • +
  • {{DOMxRef('Constraint_validation')}}
    • +
  • {{DOMxRef('validityState.rangeUnderflow')}}
    • +
  • {{CSSxRef(':out-of-range')}}
    • +
  • {{HTMLElement('input')}}
    • +
  • Los tipos {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} y {{htmlelement('meter')}}
    • +
diff --git a/files/es/web/html/attributes/minlength/index.html b/files/es/web/html/attributes/minlength/index.html new file mode 100644 index 0000000000..23056673e2 --- /dev/null +++ b/files/es/web/html/attributes/minlength/index.html @@ -0,0 +1,71 @@ +--- +title: 'HTML el atributo: minlength' +slug: Web/HTML/Atributos/minlength +tags: + - Entrada + - Input + - Referencia + - atributo + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +

El atributo minlength define el número mínimo de caracteres (como unidades de código UTF-16) que el usuario puede ingresar en un {{HTMLElement('input')}} o {{HTMLElement('textarea')}}. Debe ser un valor entero 0 o superior. Si no se especifica una longitud mínima o se especifica un número no válido, el <input> no tiene una longitud mínima. Este valor debe ser menor o igual que el valor de {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}; de lo contrario, el valor nunca será válido, puesto que es imposible cumplir con ambos criterios.

+ +

El <input> fallará la restricción de validación si la longitud del valor de texto del campo es menor que la longitud mínima de unidades de código UTF-16, con {{DOMxRef('validityState.tooShort')}} devolviendo true. La validación de la restricción solo se aplica cuando el usuario cambia el valor. Una vez que el envío falla, algunos navegadores mostrarán un mensaje de error que indica la longitud mínima requerida y la longitud actual.

+ +

Ejemplos

+ +

Al agregar minlength="5", el valor debe estar vacío o tener cinco caracteres o más para ser válido.

+ +
<label for="fruit">Ingresa un nombre de fruta que tenga al menos 5 letras</label> <input type="text" minlength="5" id="fruit">
+ +

Podemos usar pseudoclases para estilizar el elemento en función de si el valor es válido. El valor será válido siempre que sea null (vacío) o tenga cinco o más caracteres. Lima no es válido, limón es válido.

+ +
input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}
+ +

{{EmbedLiveSample('Ejemplos', '100%', 200)}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + +
EspecificaciónEstado
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'atributo minlength')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'atributo minlength')}}{{Spec2('HTML5.1')}}
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.attribute.minlength")}}

+ +

Ve también

+ +
    +
  • {{web.link("/es/docs/Web/HTML/Attributes/maxlength", "maxlength")}}
    • +
  • {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}
    • +
  • {{web.link("/es/docs/Web/HTML/Attributes/pattern", "pattern")}}
    • +
  • {{web.link("/es/docs/Web/Guide/HTML/HTML5/Constraint_validation", "Restricción de validación")}}
    • +
diff --git a/files/es/web/html/attributes/multiple/index.html b/files/es/web/html/attributes/multiple/index.html new file mode 100644 index 0000000000..cbf465b0b8 --- /dev/null +++ b/files/es/web/html/attributes/multiple/index.html @@ -0,0 +1,182 @@ +--- +title: 'HTML el atributo: multiple' +slug: Web/HTML/Atributos/multiple +tags: + - Atributos + - Resticción de validación + - atributo +translation_of: Web/HTML/Attributes/multiple +--- +

El atributo booleano {{HTMLAttrxRef("multiple", "input")}}, si se establece, significa que el control del formulario acepta uno o más valores. Válido para los {{HTMLElement("input")}}s de tipo {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/file", "file")}} y {{HTMLElement("select")}}, la forma en que el usuario opta por valores múltiples depende del control del formulario.

+ +

Dependiendo del tipo, el control de formulario puede tener una apariencia diferente si se establece el atributo {{HTMLAttrxRef("multiple", "input")}}. Para el {{HTMLElement("input")}} de tipo file, la mensajería nativa que proporciona el navegador es diferente. En Firefox, el {{HTMLElement("input")}} de tipo file dice "Ningún archivo seleccionado" cuando el atributo está presente y "Ningún archivo seleccionado", cuando no hay archivo seleccionado. La mayoría de los navegadores muestran un cuadro de lista de desplazamiento para un control {{HTMLElement("select")}} con el atributo {{HTMLAttrxRef("multiple", "input")}} establecido frente a un menú desplegable de una sola línea cuando se omite el atributo. El {{HTMLElement("input")}} {{HTMLElement("input/email", "email")}} muestra lo mismo, pero coincidirá con la pseudoclase {{CSSxRef(':invalid')}} si hay más de una dirección de correo electrónico separada por comas incluido si el atributo no está presente.

+ +

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/email", "email")}}, el usuario puede incluir cero (si no es {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} también), una o más direcciones de correo electrónico separadas por comas.

+ +
<input type="email" multiple name="emails" id="emails">
+ +

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista.

+ +

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el tipo de entrada {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla Mayús o Control y luego haciendo clic).

+ +
<input type="file" multiple name="uploads" id="uploads">
+ +

Cuando se omite el atributo, el usuario solo puede seleccionar un único archivo por {{HTMLElement("input")}}.

+ +

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones.

+ +
<select multiple name="drawfs" id="drawfs">
+  <option>Gruñón</option>
+  <option>Feliz</option>
+  <option>Dormilón</option>
+  <option>Tímido</option>
+  <option>Estornudo</option>
+  <option>Tontín</option>
+  <option>Doc</option>
+</select>
+ +

Cuando se especifica {{HTMLAttrxRef("multiple", "input")}}, la mayoría de los navegadores mostrarán un cuadro de lista de desplazamiento en lugar de un menú desplegable de una sola línea.

+ +

Ejemplos

+ +

input para correoᵉ

+ +
<label for="emails">¿A quién deseas enviar un correo electrónico?</label>
+<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
+
+<datalist id="drawfemails">
+  <option value="gruñón@woodworkers.com">Gruñón</option>
+  <option value="feliz@woodworkers.com">Feliz</option>
+  <option value="dormilón@woodworkers.com">Dormilón</option>
+  <option value="tímido@woodworkers.com">Tímido</option>
+  <option value="estornudo@woodworkers.com">Estornudo</option>
+  <option value="tontín@woodworkers.com">Tontín</option>
+  <option value="doc@woodworkers.com">Doc</option>
+</datalist>
+ + + +

Si y solo si se especifica el atributo {{HTMLAttrxRef("multiple", "input")}}, el valor puede ser una lista de direcciones de correo electrónico separadas por comas y formadas correctamente. Los espacios en blanco iniciales y finales se eliminan de cada dirección de la lista. Si el atributo {{web.link("/es/docs/Web/HTML/Attributes/required", "required")}} está presente, se requiere al menos una dirección de correo electrónico.

+ +

Algunos navegadores admiten la aparición de la {{web.link("/es/docs/Web/HTML/Attributes/list", "lista")}} de opciones del {{HTMLElement('datalist')}} para direcciones de correo electrónico posteriores cuando haya varias. Otros no lo hacen.

+ +

{{EmbedLiveSample("input_para_correoᵉ", 600, 80) }}

+ +

input de tipo file

+ +

Cuando se establece {{HTMLAttrxRef("multiple", "input")}} en el {{HTMLElement("input")}} de tipo {{HTMLElement("input/file", "file")}}, el usuario puede seleccionar uno o más archivos:

+ +
<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads">
+       Elige las imágenes que deseas cargar:
+    </label>
+    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
+  </p>
+  <p>
+    <label for="text">Elige un archivo de texto para cargar: </label>
+    <input type="file" id="text" name="text" accept=".txt">
+ </p>
+  <p>
+    <input type="submit" value="Enviar">
+  </p>
+</form>
+ +

{{EmbedLiveSample("input_de_tipo_file", 600, 80) }}

+ +

Nota la diferencia en la apariencia entre el ejemplo con {{HTMLAttrxRef("multiple", "input")}} establecido y el otro {{HTMLElement("input")}} sin file.

+ +

Cuando se envía el formulario, utilizas el {{web.link("/es/docs/Web/HTML/Element/form", "method='get'")}} el nombre de cada archivo seleccionado se habría agregado a los parámetros de la URL como ?uploads=img1.jpg&uploads=img2.svg. Sin embargo, dado que estamos asumiendo datos de formularios de {{web.link("/es/docs/Web/API/XMLHttpRequest/multipart", "multipart")}}, usamos mucho el post. Consulta el elemento {{HTMLElement('form')}} y {{web.link("/es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_method_attribute", "envío de datos del formulario")}} para obtener más información.

+ +

select

+ +

El atributo {{HTMLAttrxRef("multiple", "input")}} en el elemento {{HTMLElement("select")}} representa un control para seleccionar cero o más opciones de la lista. De lo contrario, el elemento {{HTMLElement("select")}} representa un control para seleccionar una única {{HTMLElement("option")}} de la lista de opciones. El control generalmente tiene una apariencia diferente en función de la presencia del atributo {{HTMLAttrxRef("multiple", "input")}}, y la mayoría de los navegadores muestran un cuadro de lista de desplazamiento en lugar de una lista desplegable de una sola línea cuando el atributo está presente.

+ +
<form method="get" action="#">
+<p>
+ <label for="dwarfs">Selecciona los leñadores que te gusten:</label>
+  <select multiple name="drawfs" id="drawfs">
+    <option>gruñón@woodworkers.com</option>
+    <option>feliz@woodworkers.com</option>
+    <option>dormilón@woodworkers.com</option>
+    <option>tímido@woodworkers.com</option>
+    <option>estornudo@woodworkers.com</option>
+    <option>tontín@woodworkers.com</option>
+    <option>doc@woodworkers.com</option>
+  </select>
+</p>
+<p>
+ <label for="favoriteOnly">Selecciona tu favorito:</label>
+  <select name="favoriteOnly" id="favoriteOnly">
+    <option>gruñón@woodworkers.com</option>
+    <option>feliz@woodworkers.com</option>
+    <option>dormilón@woodworkers.com</option>
+    <option>tímido@woodworkers.com</option>
+    <option>estornudo@woodworkers.com</option>
+    <option>tontín@woodworkers.com</option>
+    <option>doc@woodworkers.com</option>
+  </select>
+</p>
+<p>
+  <input type="submit" value="Enviar">
+</p>
+</form>
+ +

{{EmbedLiveSample("select", 600, 120) }}

+ +

Ten en cuenta la diferencia de apariencia entre los dos controles de formulario.

+ +
/* descomenta este CSS para que el multiple tenga la misma altura que single */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/
+ +

Hay varias formas de seleccionar varias opciones en un elemento <select> con un atributo {{HTMLAttrxRef("multiple", "input")}}. Dependiendo del sistema operativo, los usuarios del ratón pueden mantener presionadas las teclas Ctrl, Comando o Mayús y luego hacer clic en varias opciones para seleccionarlas o deseleccionarlas. Los usuarios de teclado pueden seleccionar varios elementos contiguos centrándose en el elemento <select>, seleccionando un elemento en la parte superior o inferior del rango que desean seleccionar usando Arriba y Teclas del cursor hacia abajo para subir y bajar las opciones. La selección de elementos no contiguos no es tan compatible: los elementos se deben poder seleccionar y deseleccionar presionando Espacio, pero el soporte varía entre los navegadores.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML WHATWG') }}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'Atributo multiple')}}{{ Spec2('HTML5 W3C') }}
+ +

Problemas de accesibilidad

+ +

Proporciona instrucciones para ayudar a los usuarios a comprender cómo completar el formulario y utilizar controles de formulario individuales. Indica cualquier entrada requerida y opcional, formatos de datos y otra información relevante. Cuando utilices el atributo {{HTMLAttrxRef("multiple", "input")}}, informa al usuario que se permiten múltiples valores y proporciona instrucciones sobre cómo proveer más valores, como "direcciones de correo electrónico separadas con una coma".

+ +

Configurar {{web.link("/es/docs/Web/HTML/Attributes/size", "size")}}="1" en una selección múltiple puedes hacer que aparezca como una única selección en algunos navegadores, pero luego no se expande en el enfoque, lo que perjudica la usabilidad. No hagas eso. Si cambias la apariencia de un select, e incluso si no lo haces, asegúrate de informar al usuario que se puede seleccionar más de una opción mediante otro método.

+ +

Ve también

+ +
    +
  • {{HTMLElement('input')}}
    • +
  • {{htmlelement('select')}}
    • +
  • {{web.link("/es/docs/Web/HTML/Element/input/email#Allowing_multiple_e-mail_addresses", "Permitir varias direcciones de correo electrónico")}}
    • +
diff --git a/files/es/web/html/canvas/a_basic_ray-caster/index.html b/files/es/web/html/canvas/a_basic_ray-caster/index.html deleted file mode 100644 index 7917541554..0000000000 --- a/files/es/web/html/canvas/a_basic_ray-caster/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: A basic ray-caster -slug: Web/HTML/Canvas/A_basic_ray-caster -tags: - - Avanzado - - Canvas - - Ejemplo - - Espanol(2) - - Gráficos(2) - - HTML - - Necesita traducción - - Web -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -
{{CanvasSidebar}}
- -
-

Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.

-
- -

{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}

- -

Abrir en una nueva ventana

- -

¿Por qué?

- -

 

- -

Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento <canvas> sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que ya estaba soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.

- -

El tutorial y el resumen que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.

- -

¿Cómo?

- -

La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento <canvas>  en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el tutorial sobre <canvas> vale para eso, y quería ver si podía hacer esto.

- -

Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el <canvas> es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.

- -

El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe Tricks of the Game Programming Gurus y una versión en java de un raycaster que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.

- -

Resultados

- -

El <canvas> en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.

- -

Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)

- -

El ray-caster

- -

El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un vistazo, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).

- -

¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <canvas> y a disfrutar!
-
- input.js | Level.js | Player.js | RayCaster.html | RayCaster.js | trace.css | trace.js

- -

Ver también

- - diff --git a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html deleted file mode 100644 index 7271aabfb7..0000000000 --- a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: Dibujando gráficos con canvas -slug: Web/HTML/Canvas/Drawing_graphics_with_canvas -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas ---- -
-

Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive Canvas tutorial, this page should probably be redirected there as it's now redundant but some information may still be relevant.

-
-

Introduction

-

Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables.   <canvas> está basado en la especificación de canvas WHATWG, la que a su vez está basada en el <canvas> de Apple, implementado en Safari.   Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.

-

La etiqueta <canvas> crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado.   Nos enfocaremos en la representación del contexto 2D   Para gráficos 3D, podrías usar la representación del contexto WebGL

-

El contexto de representación 2D

-

Un ejemplo sencillo

-

Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.

-
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillStyle = "rgb(200,0,0)";
-  ctx.fillRect (10, 10, 55, 50);
-
-  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-  ctx.fillRect (30, 30, 55, 50);
-}
-
- -

{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}

-

La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D.   El objeto ctx puede entonces actualmente ser renderizado para el canvas   El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect   El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.

-

El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo.   Para representar formas más complejas, se usan trayectorias.  

-

Usando trayectorias

-

La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo.   La trayectoria puede ser cerrada usando closePath   Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.

-
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillStyle = "red";
-
-  ctx.beginPath();
-  ctx.moveTo(30, 30);
-  ctx.lineTo(150, 150);
-  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
-  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
-  ctx.lineTo(30, 30);
-  ctx.fill();
-}
-
- -

{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}

-

Llamando fill() o stroke() causa que el trazo sea usado.   Para ser llenado o juntado otra vez, el trazo debe ser recreado.

-

Estado de gráficos

-

Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos   El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.

-

Un ejemplo más complicado

-

Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación.   Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual.   Todos los puntos renderizados son primero transformados por esta matriz.

-
function drawBowtie(ctx, fillStyle) {
-
-  ctx.fillStyle = "rgba(200,200,200,0.3)";
-  ctx.fillRect(-30, -30, 60, 60);
-
-  ctx.fillStyle = fillStyle;
-  ctx.globalAlpha = 1.0;
-  ctx.beginPath();
-  ctx.moveTo(25, 25);
-  ctx.lineTo(-25, -25);
-  ctx.lineTo(25, -25);
-  ctx.lineTo(-25, 25);
-  ctx.closePath();
-  ctx.fill();
-}
-
-function dot(ctx) {
-  ctx.save();
-  ctx.fillStyle = "yellow";
-  ctx.fillRect(-2, -2, 4, 4);
-  ctx.restore();
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // note that all other translates are relative to this one
-  ctx.translate(45, 45);
-
-  ctx.save();
-  //ctx.translate(0, 0); // unnecessary
-  drawBowtie(ctx, "red");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(85, 0);
-  ctx.rotate(45 * Math.PI / 180);
-  drawBowtie(ctx, "green");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(0, 85);
-  ctx.rotate(135 * Math.PI / 180);
-  drawBowtie(ctx, "blue");
-  dot(ctx);
-  ctx.restore();
-
-  ctx.save();
-  ctx.translate(85, 85);
-  ctx.rotate(90 * Math.PI / 180);
-  drawBowtie(ctx, "yellow");
-  dot(ctx);
-  ctx.restore();
-}
-
- -

{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}

-

Esto define dos métodos, lazo y punto, que son llamados 4 veces.   Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo.   el punto presenta un pequeño cuadrado negro centrado a (0,0).   Ese punto se mueve alrededor de la matriz de transformación.   El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.

-

Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original.   Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().

-

Compatibilidad con Apple <canvas>

-

En su mayor parte, <canvas> es compatible con Apple y otras implementaciones.   Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.

-

Etiqueta </canvas> requerida 

-

En la aplicación de Apple Safari, <canvas> es un elemento ejecutado de la misma manera <img> es, sino que no tiene una etiqueta de cierre.   Sin embargo, para <canvas> tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva.   Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.

-

Si no se necesita contenido de reserva, un simple <canvas id="foo" ...> </ canvas> será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.

-

Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).

-
canvas {
-  font-size: 0.00001px !ie;
-}
-

Caracteristicas adicionales  

-

Renderizando el contenido we dentro de un Canvas.

-
- Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome.   No esta permitido en paginas HTML normales. Porqué leer.
-

El canvas de Mozilla se extendio con el metodo drawWindow().   Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:

-
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
-
-

atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo.   Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).

-

Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.

-

Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas.   sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.

-

Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia.  

-
- Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja   En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina  
-

See also

- diff --git a/files/es/web/html/canvas/index.html b/files/es/web/html/canvas/index.html deleted file mode 100644 index dfdde2bf63..0000000000 --- a/files/es/web/html/canvas/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: API Canvas -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - JavaScript - - Referencia - - introducción -translation_of: Web/API/Canvas_API ---- -
{{CanvasSidebar}}
- -

Añadido en HTML5, el elemento HTML {{HTMLElement("canvas")}} se puede usar para dibujar gráficos mediante scripting en JavaScript. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.

- -

Las aplicaciones de Mozilla soportan <canvas> desde Gecko 1.8 (es decir, Firefox 1.5). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <canvas> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <canvas> a una página incluyendo un script del proyecto de Google Explorer Canvas. Google Chrome y Opera 9 también soportan <canvas>.

- -

El elemento <canvas> también se usa en WebGL para dibujar gráficos 3D con aceleración por hardware en páginas web.

- -

Ejemplo

- -

Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);
-
- -

Edita este código para ver tus cambios en tiempo real en este canvas:

- - - -

{{ EmbedLiveSample('Código_editable', 700, 360) }}

- -

Referencia

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasImageSource")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("RenderingContext")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("OffscreenCanvas")}}{{experimental_inline}}
    • -
  • {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}
    • -
-
- -

Las interfaces relacionadas con WebGLRenderingContext están en WebGL.

- -

{{domxref("CanvasCaptureMediaStream")}} está relacionado..

- -

Guías y tutoriales

- -
-
Tutorial Canvas
-
Tutorial exhaustivo que cubre tanto el uso básico de <canvas> como sus características avanzadas.
-
Fragmentos de código: Canvas
-
Algunos fragmentos de código orientados al desarrollador de extensiones usando <canvas>.
-
Demo: Un laberinto básico
-
Una demo de una animación de laberinto usando canvas.
-
Dibujar objetos DOM en un canvas
-
Cómo dibujar contenido DOM, como elementos HTML, en un canvas.
-
Manipulación de vídeo usando canvas
-
Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.
-
- -

Recursos

- -

Genéricos

- - - -

Librerías

- -
    -
  • Fabric.js es una librería open-source para canvas con capacidad de parsear SVG.
    • -
  • Kinetic.js es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.
    • -
  • Paper.js es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.
    • -
  • Origami.js es una librería ligera open-source para canvas.
    • -
  • libCanvas es un framework ligero y potente para canvas.
    • -
  • Processing.js es un port de PVL (Processing visualization language).
    • -
  • PlayCanvas es un motor open source de juegos.
    • -
  • Pixi.js es un motor open source de juegos.
    • -
  • PlotKit es una librería para hacer gráficas.
    • -
  • Rekapi es una API para animación por frames para Canvas.
    • -
  • PhiloGL es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.
    • -
  • JavaScript InfoVis Toolkit crea visualizaciones de datos 2D interactivas para Web.
    • -
  • EaselJS es una librería open source/libre que facilita el uso de canvas para arte y juegos
    • -
  • Scrawl-canvas es otra librería open-source javascript para crear y manipular elementos canvas en 2D
    • -
  • heatmap.js es una librería open-source para crear mapas (heatmaps)
    • -
- -

Especificaciones

- - - - - - - - - - - - - - - - -
EspecificaciónEstadoComentarios
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
- -

Ver también

- - diff --git "a/files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" "b/files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" deleted file mode 100644 index b44128e05d..0000000000 --- "a/files/es/web/html/consejos_para_la_creaci\303\263n_de_p\303\241ginas_html_de_carga_r\303\241pida/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: Consejos para la creación de páginas HTML de carga rápida -slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida -tags: - - Consejos - - HTML - - Rapido - - Tips -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -

Consejos para la creación de páginas HTML de carga rápida

- -

Estos consejos estan basados en conocimiento común y experimentación.

- -

Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.

- -

Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. Es tan importante para el contenido de banda ancha y puede conducir a mejoras espectaculares incluso para sus visitantes con las conexiones más rápidas.

- -

Consejos

- -

Reducir el peso de las páginas web

- -

El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.

- -

Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.

- -

Herramientas como HTML Tidy pueden quitar automáticamente espacios en blanco y las líneas en blanco adicionales de código fuente HTML valido. Otras herramientas pueden "comprimir" JavaScript al reformatear el codigo fuente o por ofuscación la fuente y la sustitución de los identificadores largos con versiones mas cortas.

- -

Minimizar el número de archivos

- -

Reducir el número de archivos referentes en una pagina web baja el número de conexiones HTTP requeridas para bajar la página.

- -

Dependiendo de la configuración de cache de un navegador, puede enviar una petición "If-Modified-Since" al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.

- -

Al reducir el número de archivos que son refereciados dentro de una página web, se reduce el tiempo necesario para que estas solicitudes se envíen, y para que  sus respuestas que se reciban.

- -

Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente se aplica la misma imagen cada vez que lo necesite para un fondo, ajustando las coordenadas el eje (X / Y) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.

- -

Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, ya que el explorador debe comprobar la fecha de modificación de cada archivo CSS o JavaScript, antes de pintar la página.

- -

Reducir la busqueda de dominios

- -

Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios que aparecen en enlace CSS (s),  JavaScript y recursos de imagen.

- -

Esto no puede ser siempre práctico; sin embargo siempre se debe tener cuidado de usar sólo el número mínimo necesario de los diferentes dominios en sus páginas.

- -

Reutilización de contenido de cache

- -

Asegúrese de que cualquier contenido que se pueden almacenar en caché, se almacena en caché, y con fechas de caducidad correspondientes.

- -

En particular, prestar atención a la cabecera "Last-Modified". Permite el eficiente almacenamiento en cache de la página; por medio de esta cabecera, la información se transmite al agente de usuario sobre el archivo que quiere cargar, por ejemplo, como cuando fue modificada por última vez. La mayoría de los servidores web añadirá automáticamente la cabecera Last-Modified para páginas estáticas (por ejemplo .html, .css), basado en la fecha de última modificación almacenada en el sistema de archivos. Con páginas dinámicas (por ejemplo, .php, .aspx), esto, por supuesto, no se puede hacer, y la cabecera no se envía.

- -

Así, en particular para las páginas que se generan de forma dinámica, un poco de investigación sobre este tema es beneficioso. Puede ser un poco complicada, pero se ahorrará mucho en las solicitudes de página en las páginas que normalmente no serían cacheable.

diff --git a/files/es/web/html/cors_enabled_image/index.html b/files/es/web/html/cors_enabled_image/index.html new file mode 100644 index 0000000000..4de4e94617 --- /dev/null +++ b/files/es/web/html/cors_enabled_image/index.html @@ -0,0 +1,115 @@ +--- +title: Imagen con CORS habilitado +slug: Web/HTML/Imagen_con_CORS_habilitado +tags: + - Avanzado + - CORS + - Canvas + - HTML + - Referencia + - Seguridad +translation_of: Web/HTML/CORS_enabled_image +--- +

La especificación HTML introduce un atributo {{ htmlattrxref("crossorigin", "img") }} para imágenes que, en conjunto con el encabezado  {{Glossary("CORS")}} apropiado, permite definir imágenes con el elemento {{ HTMLElement("img") }} que se carguen de orígenes externos dentro de un lienzo (canvas) como si estas fuesen cargadas del origen actual.

+ +

Vea el artículo "Atributos de configuración CORS" para mas detalles de como el atributo "crossorigin" es usado.

+ +

¿Qué es un "tainted" canvas? 

+ +

Aunque puedes usar imágenes sin la aprobación del CORS en el elemento canvas, hacerlo puede "manchar" el canvas. Por ejemplo, no puedes usar los métodos canvas toBlob(), toDataURL(), or getImageData(). Si los usas se lanzará un mensaje de seguridad.

+ +

Esto protegerá a los usuarios de tener información privada usada por medio de imágenes que cogen información desde otras web sin permiso.

+ +

Ejemplo: Almacenando una imagen desde un origen externo

+ +

Debes de tener un servidor de hosting de imágenes con el apropiado Access-Control-Allow-Origin header. Añadiendo el atributo crossOrigin crea un request header.

+ +

Puedes utilizar este fragemto de la configuración del servidor Apache del Boilerplate HTML5 para responder apropiadamente con este encabezado de respuesta.

+ +
<IfModule mod_setenvif.c>
+    <IfModule mod_headers.c>
+        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
+            SetEnvIf Origin ":" IS_CORS
+            Header set Access-Control-Allow-Origin "*" env=IS_CORS
+        </FilesMatch>
+    </IfModule>
+</IfModule>
+ +

Dado que está todo ordenado, serás capás de guardar esas imagenes en el almacenamiento del DOM, así como si fueran solicitados de tu dominio.

+ +
var img = new Image,
+    canvas = document.createElement("canvas"),
+    ctx = canvas.getContext("2d"),
+    src = "http://example.com/image"; // insert image url here
+
+img.crossOrigin = "Anonymous";
+
+img.onload = function() {
+    canvas.width = img.width;
+    canvas.height = img.height;
+    ctx.drawImage( img, 0, 0 );
+    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
+}
+img.src = src;
+// make sure the load event fires for cached images too
+if ( img.complete || img.complete === undefined ) {
+    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+    img.src = src;
+}
+ +

Compatibilidad con los navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico138{{ CompatNo() }}{{ CompatNo() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

También puede ver

+ + diff --git a/files/es/web/html/element/a/index.html b/files/es/web/html/element/a/index.html new file mode 100644 index 0000000000..e35402f7a5 --- /dev/null +++ b/files/es/web/html/element/a/index.html @@ -0,0 +1,321 @@ +--- +title: +slug: Web/HTML/Elemento/a +tags: + - Contenido + - Ejemplo + - Elemento + - HTML + - Principiante + - Referencia + - Web +translation_of: Web/HTML/Element/a +--- +
{{HTMLRef}}
+ +

El Elemento HTML Anchor <a> crea un enlace a otras páginas de internet, archivos o ubicaciones dentro de la misma página, direcciones de correo, o cualquier otra URL.

+ +
{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido de flujo, contenido de párrafo, contenido interactivo, contenido palpable
Contenido permitidoTransparente, que contiene contenido de flujo (excluyendo contenido interactivo) o contenido de párrafo.
Omisión de etiquetas{{no_tag_omission}}
Elementos principales permitidosCualquier elemento que acepte contenido de párrafo o cualquier elemento que acepte contenido de flujo, sin embargo simpre excluyendo los elementos <a> (de acuerdo con el principio lógico de simetría, si una etiqueta <a> como padre, no puede contener contenido interactivo, entonces el mismo contenido de <a> no puede tener una etiqueta <a> como su padre).
Roles ARIA permitidos{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
Interfaz DOM{{domxref("HTMLAnchorElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}
+
Este atributo, indica descargar a los navegadores una URL en lugar de navegar hacia ella, por lo que el usuario será dirigido para salvarla como un archivo local.  Si el atributo tiene un valor, éste se utilizará como nombre de archivo por defecto en el mensaje Guardar que se abre cuando el usuario hace clic en el enlace (sin embargo, el usuario puede cambiar el nombre antes de guardar el archivo). No hay restricciones sobre los valores permitidos, aunque: / y: \ se convertirán en guiones bajos (underscores), lo que evitará sugerencias de ruta específicas.  Se debe tener en cuenta que la mayoría de los sistemas de archivos tienen limitaciones con respecto a los símbolos de puntuación admitidos en los nombres de archivo, por lo que los navegadores ajustarán los nombres de los archivos en consecuencia. +
Notas: +
    +
  • Este atributo sólo funciona para las políticas de mismo origen (same-origin URLs).
    • +
  • Este atributo puede ser utilizado con blob: URLs y data: URLs para descargar contenido generado por JavaScript, tales como fotografías creadas por una aplicación web de edición de imágenes.
    • +
  • Si el encabezado (header) HTTP Content-Disposition: proporciona un nombre de archivo diferente al de este atributo, el encabezado HTTP tiene prioridad sobre este atributo.
    • +
  • Si Content-Disposition: está ajustado a inline, Firefox prioriza Content-Disposition, como en el caso del nombre de archivo, mientras que Chrome prioriza el atributo download.
    • +
+
+
+
{{htmlattrdef("href")}}
+
Contiene una URL o un fragmento de URL al cual apunta el enlace.
+
Un fragmento de URL es un nombre ("name") precedido por el símbolo de número (#), el cual especifíca una ubicación interna objetivo (un ID de un elemento HTML) dentro del actual documento. Las URLs no están restringidas sólo a documentos de internet basados en HTTP, sin embargo pueden utilizar cualquier protocolo soportado por el navegador. Por ejemplo, file:, ftp:, and mailto: funcionan en la mayoría de los navegadores.
+
Este atributo puede ser omitido (a partir de HTML5) para crear un enlace de marcador de posición. Un enlace de marcador de posición se parece a un enlace tradicional, pero que no dirige a algún lugar. +
+

Nota: Puede ser utilizado href="#top" o un fragmento vacío href="#" para enlazar a la parte superior de la página actual. Este comportamiento está especficado en HTML5.

+
+
+
{{htmlattrdef("hreflang")}}
+
Este atributo indica el lenguaje humano del recurso al que se enlaza. Este es únicamente informativo, sin ninguna funcionalidad incorporada. Los valores permitidos están determinados por BCP47.
+
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
Indica que referencia (referer) enviar cuado la URL es recuperada: +
    +
  • 'no-referrer' significa Referer: el encabezado no será enviado.
    • +
  • 'no-referrer-when-downgrade' significa sin Referer: el encabezado será enviado cuando se navega a un origen (origin) sin HTTPS. Este es un comportamiento por defecto.
    • +
  • 'origin' significa que el "referrer" estará en el origen (origin) de la página, no incluye la información posterior al dominio.
    • +
  • 'origin-when-cross-origin' significa que la navegación a otros orígenes (origins) será limitada al esquema (scheme), el host y el puerto, mientras que la navegación en el mismo origen (origin) incuirá la trayectoria de referencia (referrer's path).
    • +
  • 'unsafe-url' significa que la referencia (referrer) incuirá el origen(origin) y la trayectoria (path), pero no el fragmento, contraseña o nombre de usuario. Esto es inseguro, ya que puede filtrar datos desde una URL segura hacia URLs inseguras.
    • +
+
+
{{htmlattrdef("rel")}}
+
Especifica la relación del objeto de destino con el objeto de enlace. El valor es una lista separada por espacios de tipos de enlace tipos de enlace (link types).
+
{{htmlattrdef("target")}}
+
Especifica en donde desplegar la URL enlazada. Es un nombre (name of), o palabra clave (keyword for), un contexto de navegación (browsing context): una pestaña, ventana, o <iframe>. Las siguientes palabras clave (keywords) tienen significado especial: +
    +
  • _self: Carga la URL en el mismo contexto de navegación que el actual. Este es el comportamiento por defecto.
    • +
  • _blank: Carga la URL en un nuevo contexto de navegación. Usualmente es una pestaña, sin embargo, los usuarios pueden configurar los navegadores para utilizar una ventana nueva en lugar de la pestaña.
    • +
  • _parent: Carga la URL en el contexto de navegación padre (parent) del actual. Si no existe el padre, este se comporta del mismo modo que _self.
    • +
  • _top: Carga la URL en le contexto más alto de navegación (el cual es un ancestro del actual, y no tiene padre (parent)). Si no hay padre (parent), este se comporta del mismo modo que _self.
    • +
+ +
+

Nota: Cuando se utiliza target, considera agregar rel="noopener noreferrer" para evitar el uso de la API window.opener.

+
+
+
{{htmlattrdef("type")}}
+
Especifica el tipo de medio (media type) en la forma de {{Glossary("MIME type")}} para la URL enlazada. Esto es únicamente informativo, sin ninguna funcionalidad incorporada.
+
+

Obsoleto

+
+
{{htmlattrdef("charset")}} {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo define la codificación de caracteres (character encoding) de la URL enlazada. El valor debe de ser una lista delimitada por espacio y/o coma de caracteres definidos en RFC 2045. El valor por defecto es ISO-8859-1. +
+

Nota de uso: Este atributo es obsoleto en HTML5 y no debe ser utilizado por autores. Para lograr su efecto, se debe utilzar el encabezado HTTP Content-Type: en la URL enlazada.

+
+
+
{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Para utilizar con el siguiente atributo shape, este atributo utiliza una lista de números separada por comas para definir las coordenadas del enlace en la página.
+
{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo era requerido para anclas (anchors) que definían una posible ubicación dentro de la página. En HTML 4.01, id y name podían ser utilizados simultáneamente en un elemento <a> simpre y cuando tuvieran valores idénticos. +
+

Nota de uso: Este atributo es obsoleto en HTML5, se utiliza el atributo global id en su lugar.

+
+
+
{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo especifica un enlace inverso, la relación inversa del atributo rel. Fue desechado por ser muy confuso.
+
{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} only, {{obsoleteGeneric("inline","HTML5")}}
+
Este atributo era utilizado para definir una región de enlaces para crear un mapa de imagen. El valore es circle, default, polygon, y rect. El formato del atributo coords depende del valor de la forma geométrica. Para circle, el valor es x,y,r donde x y y son las coordenadas en pixel para el centro del círculo y  r es el valor del radio en pixeles. Para rect, el atributo coords debe ser x,y,w,h. Los valores x y y definen la esquina superior izquierda del rectángulo, mientras que w y h definen el ancho y el alto respectivamente. Un valor del polygon para shape requiere los valores x1,y1,x2,y2,...para coords. Cada uno de los pares x,y definen un punto en el polígono, con puntos sucesivos que son unidos por líneas rectas y el útlimo punto se une al primer punto. El valor default para shape Requiere que el área encerrada, típicamente una imágen, sea utilizada. +
Nota: Utilice el atributo usemap para el elemento {{HTMLElement("img")}} y el elemento asociado {{HTMLElement("map")}} para definir puntos de acceso (hotspots) en lugar del atributo shape.
+
+
+ +
+

+ +

Ejemplos

+ +

Enlazando a una ubicación externa

+ +
<!-- anclaje a un archivo externo -->
+<a href="https://www.mozilla.com/">
+Enlace externo
+</a>
+ +

Resultado

+ +

Enlace externo

+ +

Enlazando a otra sección de la misma página

+ +
<!-- enlace a un elemento en esta página con id="attr-href" -->
+<a href="#attr-href">
+Descripción de enlaces de la misma página
+</a>
+ +

Resultado

+ +

Descripción de enlaces de la misma página

+ +

Creando una imagen clicable

+ +

Este ejemplo utiliza una imagen que enlaza a la página de inicio de MDN. La página de inicio se abrirá en un contexto de navegación nuevo, esto es, en una nueva página o nueva ventana.

+ +
<a href="https://developer.mozilla.org/en-US/" target="_blank">
+  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
+       alt="MDN logo" />
+</a>
+ +

Resulta

+ +
+

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

+
+ +

Creando un enlace de correo

+ +

Es común crear enlaces que abren el programa de correo del usuario para permitir enviar un nuevo mensaje. Esto se hace con un enlace mailto:. Aquí tenemos un ejemplo:

+ +
<a href="mailto:nowhere@mozilla.org">Enviar correo a nowhere</a>
+ +

Resultado

+ +

Envia un correo a: nowhere

+ +

Para detalles adicionales acerca del esquema de la URL mailto, tales como incluir el asunto, el cuerpo u otros contenidos predeterminados, consultar Enlaces de correo (Email links) o {{RFC(6068)}}.

+ +

Creando un enlace a un número de teléfono

+ +

Ofrecer enlaces a números de teléfono es muy útil para los ususarios que observan documentos de internet desde computadoras portátiles conectadas a teléfonos o desde teléfonos celulares (móviles)

+ +
<a href="tel:+491570156">+49 157 0156</a>
+ +

Para detalles adicionales acerca del esquema de la URL tel, consultar {{RFC(2806)}} y {{RFC(2396)}}.

+ +

Utilizando el atributo download para guardar un  <canvas> como PNG

+ +

Si deseas permitir a los usurios descargar una elemento HTML {{HTMLElement("canvas")}} como una imagen, puedes crear un enlace con una atributo download y la información canvas como un archivo URL:

+ +
var link = document.createElement('a');
+link.innerHTML = 'download image';
+
+link.addEventListener('click', function(ev) {
+    link.href = canvas.toDataURL();
+    link.download = "mypainting.png";
+}, false);
+
+document.body.appendChild(link);
+ +

Puedes ver como funciona en: jsfiddle.net/codepo8/V6ufG/2/.

+ +

Notas

+ +

HTML 3.2 define sólo los atributos name, href, rel, rev, y title.

+ +

Recomendaciones de accesibilidad

+ +

Se abusa frecuntemente de las etiquetas de ancla (anchor tags) con el uso de los eventos onclick para crear pseudo-botones ajustando href a "#" o "javascript:void(0)" para prevenir la recarga de la página. Estos valores provocan comportamientos inesperados con los enlaces de copiado/dibujado, la apertura de enlaces en nuevas pestañas/ventanas, el guardado de enlaces (bookmarking), y cuando JavaScript está aún descargando, esto arroja errores, o es deshabilitado. Esto tambíen lleva a semánticas (semantics) incorrectas para tecnologías de asistencia (p.ej., lectores de pantalla). En estos casos, se recomienda utilizar un {{HTMLElement("button")}} en su lugar. En general, sólo se debe utilizar una ancla (anchor) para navegación utilizando una URL adecuada.

+ +

Cliceo y enfoque

+ +

Cuando se clicea sobre un {{HTMLElement("a")}} las consecuencias varían de acuerdo al navegador y el sistema operativo.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
¿Al hacer clic en un {{HTMLElement("a")}} se enfoca?
Navegadores de escritorioWindows 8.1OS X 10.9
Firefox 30.0SiSi
Chrome ≥39
+ (Chromium bug 388666)		SiSi
Safari 7.0.5N/ASólo cuando tiene un tabindex
Internet Explorer 11SiN/A
Presto (Opera 12)SiSi
+ + + + + + + + + + + + + + + + + + + + +
¿Al hacer un clic en un {{HTMLElement("a")}} se enfoca?
Navegadores móvilesiOS 7.1.2Android 4.4.4
Safari MobileSólo cuando tiene un tabindexN/A
Chrome 35???Sólo cuando tiene un tabindex
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName("Referrer Policy", "#referrer-policy-delivery-referrer-attribute", "referrer attribute")}}{{Spec2("Referrer Policy")}}Added the referrerpolicy attribute.
{{SpecName("HTML WHATWG", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "textlevel-semantics.html#the-a-element", "<a>")}}{{Spec2("HTML5 W3C")}}
{{SpecName("HTML4.01", "struct/links.html#h-12.2", "<a>")}}{{Spec2("HTML4.01")}}
+ +

Compatibilidad de navegadores

+ + + +

{{Compat("html.elements.a")}}

+ +

Consultar también

+ +
    +
  • Otros elementos comunicando a nivel semántico de texto (text-level semantics): {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • +
diff --git a/files/es/web/html/element/abbr/index.html b/files/es/web/html/element/abbr/index.html new file mode 100644 index 0000000000..8646722071 --- /dev/null +++ b/files/es/web/html/element/abbr/index.html @@ -0,0 +1,147 @@ +--- +title: +slug: Web/HTML/Elemento/abbr +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/abbr +--- +

{{HTMLRef}}

+ +

El elemento HTML <abbr> (o Elemento de Abreviación HTML) representa una abreviación o acrónimo; el atributo opcional {{htmlattrxref("title")}} puede ampliar o describir la abreviatura. Si está presente, el atributo title debe contener la descripción completa y nada más.

+ +
<p>I do <abbr title="Hypertext Markup Language">HTML</abbr></p>
+ +

El artículo Cómo marcar abreviaciones y hacerlas entendibles es una guía para aprender a usar <abbr> y elementos relacionados.

+ + + + + + + + + + + + + + + + + + + + +
Interfaz DOM{{domxref("HTMLElement")}}
Categorías de contenidoContenido dinámico, contenido estático o de texto, contenido palpable
Conteido permitidoContenido de estático o de texto
Elementos padre permitidosCualquier elemento que acepte contenido estático o de texto
+ +

Atributos

+ +

Este elemento sólo incluye los atributos globales. El atributo {{htmlattrxref("title")}} tiene un sentido específicamente semántico cuando es usado con el elemento <abbr>; debe contener una completa descripción o ampliación de la abreviación. Este texto es usualmente presentado por los navegadores como tooltip cuando se pasa el mouse sobre el elemento.

+ +

Cada elemento <abbr> usado es independiente de todos los otros; dar un <title> a uno no hace que automáticamente todos los demás adquieran la misma descripción.

+ +
+

Nota: En lenguajes con números gramaticales (especialmente lenguajes con más de dos números, como el Árabe), utiliza el mismo número gramatical en el atributo title como dentro del elemento <abbr>.

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support2.0{{CompatGeckoDesktop(1.0)}} [1]7.01.3{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Hasta Gecko 1.9.2 (Firefox 3.6), Firefox implementó la interfaz {{domxref("HTMLSpanElement")}} para este elemento en lugar de la interfaz {{domxref("HTMLElement")}}.

+ +

Estilo por defecto

+ +

El propósito de este elemento es puramente para la conveniencia del autor y por defecto todos los navegadores lo muestran en línea ({{cssxref('display')}}: inline), sin embargo su estilo por defecto varía de un navegador a otro:

+ +
    +
  • Algunos navegadores, como Internet Exlorer, no lo diseñan de manera diferente que el elemento {{HTMLElement("span")}}.
    • +
  • Opera, Firefox, y algunos otros añaden un subrayado de puntos al contenido del elemento.
    • +
  • Algunos navegadores no sólo añaden un subrayado de puntos, sino que también lo ponen en minúsculas; para evitar este estilo, añadir algo como {{cssxref('font-variant')}}: none en CSS se hace cargo de este caso.
    • +
+ +

Ver también

+ +
    +
  • Utilizando el elemento <abbr>
    • +
  • Otros elementos de nivel semántico de texto: {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.
    • +
+ +
 
diff --git a/files/es/web/html/element/acronym/index.html b/files/es/web/html/element/acronym/index.html new file mode 100644 index 0000000000..94581489a3 --- /dev/null +++ b/files/es/web/html/element/acronym/index.html @@ -0,0 +1,160 @@ +--- +title: acronym +slug: Web/HTML/Elemento/acronym +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/acronym +--- +

Definición

+ +

acromym de acromyn=acrónimo

+ +

Es el encargado para marcar estas formas abreviadas (modem, AJAX...). Además, gracias al atributo title podemos indicar la versión extendida del término.

+ +
+
Sus etiquetas son: <abbr> y </abbr> (ambas obligatorias).
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de frase.
+
+ +
+
Puede contener: cero o más elementos en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

+ <p>
+ El acrónimo de moda es:
+ <acronym lang="en" title="Asynchronous JavaScript and XML">Ajax</acronym>.
+ </p>
+ 
+
+
+ +

Estilo predeterminado

+ +

En Firefox se resalta con un "subrayado" punteado fino. vea el ejemplo:

+ +

+ <p>
+ el <abbr lang="en" title="Mocilla developer center">MDC</abbr> toma el
+ <span style='border-bottom: dotted thin;'
+ title='esto no es ni una abreviatura ni un acrónimo'>relevo</span> de lo que fue el
+ <acronym lang="en" title="DEVeloper.Mozilla.Org">Devmo</acronym>.
+ </p>
+ 
+
+ +

Cabe destacar que abbr y acronym comparten estilo predeterminado.

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Notas

+ +

El tema de las abreviaturas y acrónimos puede ser un tanto lioso. En castellano a veces cuesta saber si tal 'palabra' es una abreviatura, un acrónimo una sigla o un símbolo. Para complicarlo un poco más, resulta que el estándar html está en inglés y parece ser que las gramáticas castellana e inglesa no definen exactamente igual conceptos como abreviatura o acrónimo.

+ +

Referencia

+ +
    +
  • El elemento acronym en el estándar HTML 4.01
    • +
+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber como hacerlo consulta MDC:Como ayudar.

+
+ +

Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/address/index.html b/files/es/web/html/element/address/index.html new file mode 100644 index 0000000000..fdfacfeba1 --- /dev/null +++ b/files/es/web/html/element/address/index.html @@ -0,0 +1,163 @@ +--- +title:
+slug: Web/HTML/Elemento/address +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/address +--- +

{{HTMLRef}}

+ +

El elemento HTML <address> aporta información de contacto para su {{HTMLElement("article")}} más cercano o ancestro {{HTMLElement("body")}}; en el último caso lo aplica a todo el documento.

+ +
+

Notas de uso:

+ +
    +
  • Para representar una dirección arbitraria, una que no esté relacionada con la información de contacto, utiliza un elemento {{HTMLElement("p")}} en lugar del elemento <address>.
    • +
  • Este elemento no debe contener más información que la información de contacto, como una fecha de publicación (que pertenece al elemento {{HTMLElement("time")}}).
    • +
  • Normalmente un elemento <address> puede ser colocado dentro del elemento {{HTMLElement("footer")}} de la sección actual, si lo hay.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico, contenido palpable
Contenido permitido +

Contenido dinámico, pero no con elementos <address> anidados, no contenidos de cabecera ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), no contenido de sección ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), y no elemento {{HTMLElement("header")}} o {{HTMLElement("footer")}}.

+
Etiqueta de omisión{{no_tag_omission}}
Elementos padre permitidosCualquier elemento que acepte contenido dinámico.
Interfaz DOM +

{{domxref("HTMLElement")}} antes de Gecko 2.0 (Firefox 4), Gecko implementó este elemento usando la interfaz {{domxref("HTMLSpanElement")}}.

+
+ +

Atributos

+ +

Este elemento solo incluye los atributos globales.

+ +

Example

+ +
  <address>
+    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>
+    If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>
+    You may also want to visit us:<br>
+    Mozilla Foundation<br>
+    1981 Landings Drive<br>
+    Building K<br>
+    Mountain View, CA 94043-0801<br>
+    USA
+  </address>
+
+ +

Above HTML will output:

+ +

Image:HTML-address.png

+ +

Aunque el elemento de dirección representa el texto con el mismo estilo predeterminado de los elementos {{HTMLElement("i")}} o {{HTMLElement("em")}}, es más apropiado utilizarlo cuando se trata información de contacto, ya que transmite la información semántica adicional.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7")}}1.05.121.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ +
    +
  • Otras elementos de sección relacionados: {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}};
    • +
  • Secciones y línea generales de un documento HTML5.
    • +
diff --git a/files/es/web/html/element/applet/index.html b/files/es/web/html/element/applet/index.html new file mode 100644 index 0000000000..51282989af --- /dev/null +++ b/files/es/web/html/element/applet/index.html @@ -0,0 +1,236 @@ +--- +title: applet +slug: Web/HTML/Elemento/applet +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/applet +--- +

Definición

+ +

Permite añadir un applet Java en un documento HTML. Es un elemento Desaprobado En su lugar debe usarse el elemento object, su uso solo es válido declarando el dtd transicional.

+ +
+
Sus etiquetas son: <applet> y </applet> (ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento especial. Desaprobado
+
+ +
+
Puede contener cero o más elementos param o del tipo 'en flujo'.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributovalordescripción
Genericos
title TextoImplícitoTítulo consultivo del elemento.
style Reglas de estilo CSSImplícitoInformación de estilo en línea.
id Un 'nombre'ImplícitoIdentificador único a nivel de documento.
class Lista de clases CSSimplícitoIdentificador a nivel de documento.
dir Uno de los siguientes: "ltr" o "rtl"ImplícitoDirección del texto.
lang Código de idiomaImplícitoInformación sobre el idioma.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
declare (declare)ImplícitoInformación sobre el idioma.
classid Una direcciónImplícitoIdentifica una implementación.
codebase Una direcciónImplícitoURI base para classid, datos, archivo.
data Una direcciónImplícitoReferencia a los datos del objeto.
type Tipo MIMEImplícitoTipo de contenido de los datos.
codetype Tipo MIMEImplícitoTipo de contenido del código.
archive DireccionesImplícitoLista de URIs separados por espacios.
standby TextoImplícitoMensaje a mostrar durente la carga.
height TamañoImplícitoEspecificar nueva altura.
width TamañoImplícitoEspecificar nueva anchura.
usemap Una direcciónImplícitoUsar mapa de imágenes en el cliente.
name CDATAImplícitoEnviar como parte de un formulario.
tabindex NúmeroImplícitoPosición en el orden de tabulación.
align Uno de los siguientes: "top", "middle", "bottom", "left", "right".ImplícitoAlineación vertical u horizontal.
border PíxelesImplícitoGrosor del borde del vínculo.
hspace PíxelesImplícitoespacio horizontal.
vspace PíxelesImplícitoEspacio vertical.
 %reserved;   Reservado para posibles usos futuros.
atributovalordescripción
+ +

Ejemplos

+ +
 Ejemplo con applet:
+
+   <applet code="loquesea.class"
+            width="500" height="500">
+       <!-- Aquí los contenidos alternativos por si falla el applet. -->
+  </applet>
+
+  Lo mismo pero usando el elemento object:
+
+  <object  codetype="application/java"
+            classid="java:loquesea.class"
+            width="500" height="500">
+     <!-- Aquí los contenidos alternativos por si falla el applet. -->
+  </object>
+
+ +

 

+ +

Comentarios

+ +

El contenido de applet actúa como información alternativa para agentes de usuario que no soporten este elemento o que estén configurados para no soportar applets. En cualquier otro caso los agentes de usuario deben ignorar el contenido.

+ +

Referencia

+ + + +

secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==

diff --git a/files/es/web/html/element/area/index.html b/files/es/web/html/element/area/index.html new file mode 100644 index 0000000000..201e8745a2 --- /dev/null +++ b/files/es/web/html/element/area/index.html @@ -0,0 +1,212 @@ +--- +title: area +slug: Web/HTML/Elemento/area +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/area +--- +

Definición

+ +

area de area=área

+ +

Sirve para crear las distintas secciones en las que se puede dividir un mapas de imágenes en el cliente.

+ +
+
Sus etiquetas son: <area> (solo tiene una).
+
+ +
+
Crea una caja: No.
+
+ +
+
Es un: Elemento para mapas de imágenes.
+
+ +
+
Puede contener: Nada.
+
+ +
+
Solo puede ser hijo de: Elementos map.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
shape Indica la forma del área del mapa.Uno de los siguientes: 'rect', 'circle', 'poly', o 'default'.PD.: 'rect'
coords Indica las coordenadas (x,y) del área del mapa.Lista de: cantidades de píxeles, o porcentajes de espacio disponible. Separadas por comas.Lo fija el navegador.
href La dirección del recurso vínculado.Una dirección URI. Sensible a M/m. (o no).Lo fija el navegador.
nohref Indica que el área no es activa, no tiene enlace.Uno: 'nohref'Lo fija el navegador.
alt Describe el área o su vínculo, es necesario por que area no tiene contenido.Texto legible. Sensible a M/m.Requerido
accesskey Define una tecla de acceso rápido. Importante para la Accesibilidad.Un carácter o letra.Lo fija el navegador.
tabindex Asigna un número de posición en el orden de tabulación.Un número entre 0 y 32767.Lo fija el navegador.
Eventos: onfocus, onblur.
De transición
target Indica el marco en el que se cargará el recurso.Puede ser el nombre de un marco existente, o un nombre reservadoLo fija el navegador.
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Un mapa de imágenes dividido en dos

+ +

+ <object data="http://developer.mozilla.org/wiki-images/es/3/39/Firefoxlogo.png"
+         usemap="#map1" type="image/png"
+         width="135" height="155">
+
+   <map name="map1">
+     <area href="http://www.mozilla.com/firefox/"
+       alt="El navegador"
+       shape="rect"
+       coords="0,0,60,155">
+
+     <area href="http://www.mozilla.com/thunderbird/"
+       alt="El gestor de correo"
+       shape="rect"
+       coords="75,0,135,155">
+   </map>
+ </object>
+ 
+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

Notas

+ +
    +
  • area es un elemento antiguo con el que pueden hacerse mapas simples y poco accesibles. No se recomienda su uso, es preferible diseñar los mapas con elementos en bloque y anclas.
    • +
+ +

Referencia

+ + + +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras! Disculpen las molestias.

+ +

¿Quieres participar en su ampliación? Para saber como hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/article/index.html b/files/es/web/html/element/article/index.html new file mode 100644 index 0000000000..8df680ad6b --- /dev/null +++ b/files/es/web/html/element/article/index.html @@ -0,0 +1,60 @@ +--- +title: article +slug: Web/HTML/Elemento/article +translation_of: Web/HTML/Element/article +--- +

El Elemento article de HTML (<article>) representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la indicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.

+ +
+

Notas de uso: 

+ +
    +
  • Cuando los elementos <article> están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos <article> anidados al que representa la entrada del blog.
    • +
  • Los datos del autor de un elemento <article> pueden ser proporcionados a través del elemento {{ HTMLElement ("address") }}, pero no se aplica a los elementos <article> anidados.
    • +
  • La fecha de publicación y el tiempo de un elemento <article> pueden ser descritos con el atributo {{ htmlattrxref ("pubdate", "time") }} atributo de un elemento {{ HTMLElement("time") }}.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido dinámico
Omisión de etiquetasNinguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias
Elementos padres permitidos +

Cualquier elemento que acepte el contenido dinámico . Tenga en cuenta que un elemento <article> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.

+
Documento normativoHTML 5, sección 4.4.4
+ +

Atributos

+ +

Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.

+ +
+
+

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Consulta también

+ +
    +
  • Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }}
    • +
  • Sections and outlines of an HTML5 document.
    • +
+
+
diff --git a/files/es/web/html/element/aside/index.html b/files/es/web/html/element/aside/index.html new file mode 100644 index 0000000000..1032e47e9c --- /dev/null +++ b/files/es/web/html/element/aside/index.html @@ -0,0 +1,68 @@ +--- +title: aside +slug: Web/HTML/Elemento/aside +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - 'HTML:Referencia_de_elementos' + - para_revisar +translation_of: Web/HTML/Element/aside +--- +

El elemento HTML <aside> representa una sección de una página que consiste en contenido que está indirectamente relacionado con el contenido principal del documento. Estas secciones son a menudo representadas como barras laterales o como inserciones y contienen una explicación al margen como una definición de glosario, elementos relacionados indirectamente, como publicidad, la biografía del autor, o en aplicaciones web, la información de perfil o enlaces a blogs relacionados.

+ +
+

Notas de uso:

+ +
    +
  • No utilices el elemento <aside> para etiquetar texto entre paréntesis, ya que este tipo de texto se considera parte del flujo principal.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido dinámico
Omisión de etiquetasNinguna, tanto la etiqueta inicial y la etiqueta de cierre son obligatorias
Elementos primarios permitidos +

Cualquier elemento que acepte contenido dinámico. Ten en cuenta que un elemento <aside> no debe ser un descendiente de un elemento {{ HTMLElement ("address") }}.

+
Documento normativoHTML 5, sección 4.4.5
+ +

Atributos

+ +

Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.

+ +
+
+

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Consulta también

+ +
    +
  • Otros elementos relacionados con esta sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};
    • +
  • Secciones y líneas generales de un documento HTML 5 .
    • +
+
+
+ +

 

+ +

{{ languages ( { "en": "en/HTML/Element/aside","es":"es/docs/HTML/Elemento/aside" } ) }}

diff --git a/files/es/web/html/element/audio/index.html b/files/es/web/html/element/audio/index.html new file mode 100644 index 0000000000..02c621f421 --- /dev/null +++ b/files/es/web/html/element/audio/index.html @@ -0,0 +1,105 @@ +--- +title: Audio +slug: Web/HTML/Elemento/audio +translation_of: Web/HTML/Element/audio +--- +

El elemento audio se usa para insertar contenido de audio en un documento HTML o XHTML. El elemento audio se agregó como parte de HTML 5.

+ +
Nota: actualmente Gecko admite solamente Vorbis, en contenedores Ogg, así como formato WAV. Asimismo, el servidor debe servir el archivo mediante el tipo MIME correcto con el fin de que Gecko lo reproduzca correctamente.
+ +

Puedes usar las características API de audio mejoradas - que son específicas de Gecko - para generar y manipular directamente secuencias de audio a partir de código JavaScript. Consulta Manipular sonido a través de la API de audio mejorada para tener más detalles.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido transparente, que contiene bien un atributo src, bien uno o más elementos {{ HTMLElement("source") }}, seguido de contenido dinámico o contenido estático , sin ningún elemento de {{ HTMLElement("video") }} o <audio>.
Omisión de etiquetasNinguna, deben estar presentes tanto las etiquetas de inicio como las de cierre.
Elementos primarios permitidosCualquier elemento que acepte contenido dinámico o cualquier elemento que acepte contenido estático.
Documento normativoHTML5, sección 4.8.7
+ +

Atributos

+ +
+
autoplay
+
Un atributo booleano; si se especifica (incluso aunque el valor sea "false"), el sonido comenzará a reproducirse automáticamente en cuanto sea posible, sin detenerse para terminar de cargar los datos.
+
autobuffer {{ obsolete_inline("2.0") }}
+
Un atributo booleano; si se especifica, el sonido comenzará a reproducirse automáticamente, incluso aunque no se haya configurado para la reproducción automática. Esto continuará hasta que la caché de medios esté llena o se haya descargado el archivo de audio completo, lo que suceda primero. Debería usarse sólo si se espera que el usuario elija reproducir el audio; por ejemplo si el usuario ha navegado hasta una página usando un vínculo de "Reproducir este audio". Este atributo se eliminó de Gecko 2.0 {{ geckoRelease("2.0") }} en favor del atributo preload.
+
buffered {{ gecko_minversion_inline("2.0") }}
+
Un atributo que se puede leer para determinar qué intervalos de tiempo del multimedia se han almacenado en búfer. Este atributo contiene un objeto {{ domxref("TimeRanges") }}.
+
controls
+
Si está presente este atributo, el navegador ofrecerá controles para permitir que el usuario controle la reproducción de audio, incluyendo volumen, búsqueda y pausar/reanudar reproducción.
+
loop {{ unimplemented_inline() }} {{ bug(449157) }}
+
Un atributo booleano; si se especifica, al alcanzar el final del audio, realizaremos la búsqueda automáticamente hasta el principio.
+
mozCurrentSampleOffset {{ gecko_minversion_inline("2.0") }} {{ non-standard_inline() }}
+
La posición de desplazamiento, que se especifica como el número de muestras desde el comienzo de la secuencia de audio, en la cual el audio se está reproduciendo actualmente.
+
preload {{ gecko_minversion_inline("2.0") }} {{ bug(548523) }}
+
El objetivo de este atributo enumerado es proporcionar una sugerencia al navegador sobre qué cree el autor que proporcionará la mejor experiencia para el usuario . Puede tener uno de los siguientes valores: +
    +
  • none: sugiere bien que el autor cree que el usuario no tendrá que consultar ese video, bien que el servidor desea minimizar su tráfico; es decir, esta sugerencia indica que no se debe almacenar en caché este video;
    • +
  • metadata: sugiere que aunque el autor piensa que el usuario no tendrá que consultar ese video, es razonable capturar los metadatos (p. ej. longitud);
    • +
  • auto: sugiere que el usuario necesita tener prioridad; es decir, esta sugerencia indica que, si es necesario, se puede descargar el video completo, incluso aunque el usuario no vaya a usarlo;
    • +
  • the empty string: que es sinónimo del valor auto.
    • +
+ +

Si no está configurado, su valor predeterminado está definido por el navegador (es decir, cada navegador puede elegir su propio valor predeterminado), aunque la especificación aconseje que se establezca a metadatos.

+ +
Observaciones sobre uso: + +
    +
  • El atributo autoplay tiene prioridad sobre éste puesto que si se desea reproducir automáticamente un video, el navegador obviamente tendrá que descargarlo. La especificación permite establecer los atributos autoplay y preload.
    • +
  • La especificación no fuerza al navegador a seguir el valor de este atributo; es tan sólo una sugerencia.
    • +
+
+
+
src
+
La URL del audio que se va a insertar. Está sujeta a los Controles de acceso HTTP. Es opcional; en su lugar puedes usar el elemento source dentro del bloque de audio para especificar el audio que se va a insertar.
+
+ +

Las compensaciones de tiempo se especifican como valores float que indican el número de segundos que se va a compensar.

+ +
Nota: la definición del valor de compensación de tiempo no se ha completado en HTML 5 aún y está sujeta a cambios.
+ +

Ejemplos

+ +
<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
+       autoplay>
+  Your browser does not support the <code>audio</code> element.
+</audio>
+
+ +

Reproduce el fichero de audio adjunto a este artículo.

+ +

Interfaz DOM

+ + + +

Consulta también

+ + + +

{{ languages( { "en": "en/HTML/Element/Audio" , "fr": "fr/HTML/Element/audio" } ) }}

diff --git a/files/es/web/html/element/b/index.html b/files/es/web/html/element/b/index.html new file mode 100644 index 0000000000..e4281a9296 --- /dev/null +++ b/files/es/web/html/element/b/index.html @@ -0,0 +1,168 @@ +--- +title: b +slug: Web/HTML/Elemento/b +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/b +--- +

Definición

+ +

b de bold=negrita.

+ +

Indica que el texto debe ser representado con una variable bold, o negrita, de la tipografía que se esté usando.

+ +
+
Sus etiquetas son: <b> y </b> (Ambas obligatorias).
+
+ +
+
Crea una caja: en línea.
+
+ +
+
Está definido como: Elemento de estilo de fuente y por lo tanto en línea.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +
Atributos
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Palabras pesadas

+ +
<p>
+       Texto normal y... <b>Texto en negrita</b>
+</p>
+
+ +


+ Se visualiza así:

+ +
+

Texto normal y... Texto en negrita

+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

El inherente a su condición: negrita. Prueba el siguiente ejemplo:

+ +

+ <style>
+        span { font-weight: bolder; }
+ </style>
+
+ <p> Esto es:  <b> un elemento b </b> y esto es: <span>un span con estilo</span>  </p>
+ 
+
+ +

Notas

+ +
    +
  • El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el estilo del texto es mejor usar CSS.
    • +
+ +

 

+ +

Referencia

+ + + +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/base/index.html b/files/es/web/html/element/base/index.html new file mode 100644 index 0000000000..4912e33f0b --- /dev/null +++ b/files/es/web/html/element/base/index.html @@ -0,0 +1,158 @@ +--- +title: +slug: Web/HTML/Elemento/base +tags: + - Elemento + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/base +--- +

{{HTMLRef}}

+ +

Resumen

+ +

El elemento HTML <base> especifica la dirección URL base que se utilizará para todas las direcciones URL relativas contenidas dentro de un documento. Sólo puede haber un elemento <base> en un documento.

+ +

La dirección URL base de un documento puede ser consultado a partir de una secuencia de comandos con {{domxref('document.baseURI')}}.

+ +
Nota de uso: Si se especifican varios elementos <base>, se utilizá sólo la primera sección href y el primer valor target; los demás son ignorados.
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de ContenidoContenido de Metadatos
Contenido permitidoNinguno, es un {{Glossary("empty element")}}.
Omisión de etiquetaNo debe haber ninguna etiqueta de cierre.
Elementos padres permitidosCualquier {{HTMLElement("head")}} que no contenga ningún elemento {{HTMLElement("base")}}
Interfaz DOM{{domxref("HTMLBaseElement")}}
+ +

Attributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("href")}}
+
La dirección URL base que se usa en todo el documento para las direcciones URL relativas. Si no se especifica este atributo, este elemento debe venir antes de cualesquiera otros elementos con atributos cuyos valores son direcciones URL. Se permiten las direcciones URL absolutas y relativas.
+
{{htmlattrdef("target")}}
+
Un nombre o una palabra clave que indica la ubicación predeterminada para navegar por el resultado de hipervínculos o formas, para los elementos que no tienen una referencia explícita del objetivo . Es un nombre o una palabra clave para un contexto de navegación (por ejemplo: pestaña, ventana o marco en línea). Las siguientes palabras clave tienen un significado especial: tab, window, o inline frame).Las siguientes palabras clave tienen un significado especial: +
    +
  • _self: Carga el resultado en el mismo contexto de navegación que el actual. Este valor es el valor por defecto si no se especifica el atributo.
    • +
  • _blank: Carga el resultado en un nuevo contexto de navegación sin nombre .
    • +
  • _parent: Cargar el resultado en el contexto de navegación padre del actual. Si no hay padre, esta opción se comporta de la misma manera que _self.
    • +
  • _top: Carga el resultado en el contexto de nivel superior de navegación (es decir, el contexto de navegación que es un ancestro de la actual, y no tiene padre). Si no hay padre, esta opción se comporta de la misma manera que _self.
    • +
+
+
+ +

Ejemplos

+ +
<base href="http://www.example.com/page.html">
+<base target="_blank" href="http://www.example.com/page.html">
+ +
+
+

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}{{Spec2('HTML WHATWG')}}Sin cambios desde la última instantánea.
{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}{{Spec2('HTML5 W3C')}}Especifica el comportamiento de target
{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}{{Spec2('HTML4.01')}}Añadido el atributo target
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]{{CompatVersionUnknown}} [2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Añadido soporte de las URL relativas para href en Gecko 2.0 (Firefox 4.0)

+ +

[2] Antes de Internet Explorer 7, <base> podría ser colocado en cualquier lugar del documento y se usaba el valor más cercano de <base>. El apoyo a las URL relativas se ha eliminado en Internet Explorer 8

+
+
+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/basefont/index.html b/files/es/web/html/element/basefont/index.html new file mode 100644 index 0000000000..5b86ea16a3 --- /dev/null +++ b/files/es/web/html/element/basefont/index.html @@ -0,0 +1,124 @@ +--- +title: basefont +slug: Web/HTML/Elemento/basefont +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/basefont +--- +

Definición

+ +

basefont -fuente base . Permite cambiar algunas propiedades del texto.

+ +
+
Sus etiquetas son: <basefont> (solo tiene una).
+
Está definido como: Elemento desaprobado. +
+
En un doctype transicional está definido como un elemento especial y por lo tanto en línea.
+
+
+
+ +
+
Crea una caja: No.
+
Puede contener: Nada.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
Específicos
No tiene
De transición
sizeTamaño de la fuente. Según una tabla del 1 al 7.Un número entero (ej. 1), o un valor incremental (ej. +1). Por defecto: debe indicarlo el autor.
colorEl color del texto.Un color RGB. Por defecto: Lo fija el navegador.
faceEspecifica la/s fuentes para el texto.Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un ejemplo simple

+ +

Código:

+ +
<p>
+ Texto normal y ...
+ <basefont size="5" color="#0000ff">
+ Texto distinto.
+</p>
+
+ +

Resultado: <div style='border: solid silver 1px;'> <p> Texto normal y ... <basefont size="5" color="#0000ff"> Texto distinto. </p> </div>

+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/bdi/index.html b/files/es/web/html/element/bdi/index.html new file mode 100644 index 0000000000..075afa13a6 --- /dev/null +++ b/files/es/web/html/element/bdi/index.html @@ -0,0 +1,140 @@ +--- +title: +slug: Web/HTML/Elemento/bdi +tags: + - BiDi + - Elemento + - HTML + - Referencia + - Semántica HTML a nivel de texto + - Web +translation_of: Web/HTML/Element/bdi +--- +

Resumen

+ +

El elemento HTML <bdi> (o elemento de aislamiento Bi-Direccional) aisla un trozo de texto para que pueda ser formateado con una dirección diferente al texto que hay fuera de él.

+ +

Es útil al embeber o incrustart texto del que se desconoce la direccionalidad, por ejemplo proveniente de una base de datos, dentro de un texto con una direccionalidad fija.

+ +

Aunque el mismo efecto visual se puede conseguir usando la regla  CSS  {{cssxref("unicode-bidi")}}: isolate en un elemento  {{HTMLElement("span")}} u otro elemento de formateado de texto, el significado semántico sólo se consigue usando el elemento <bdi>. En especial los navegadores permiten ignorar los estilos CSS. En tal caso el texto se mostrará correctamente usando el elemento HTML pero será basura usando CSS para fijar la semántica.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, contenido palpable.
Contenido permitidoPhrasing content.
Omisión de etiqueta{{no_tag_omission}}
Elementos padre permitidosAny element that accepts phrasing content.
Interfaz DOM{{domxref("HTMLElement")}}
+ +

Atributos

+ +

Como los demás elementos HTML , este elemento tiene los global attributes, pero con una pequeña diferencia semántica: el atributo dir no se hereda. Si no está definidio, su valor por defecto es auto y permitirá a los navegadores decidir la dirección basándose en el contexto del elemento.

+ +

Ejemplo

+ +
<p dir="ltr">Esta palabara arábica<bdi>ARABIC_PLACEHOLDER</bdi> se muestra automáticamente de derecha a izquierda.</p>
+
+ +

Resultado

+ +

Esta palabra arábica REDLOHECALP_CIBARA se muestra automáticamente de derecha a izquierda.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'the-bdi-element.html#the-bdi-element', '<bdi>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilidad con los distintos navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico16{{CompatGeckoDesktop("10.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte Básico{{CompatNo}}{{CompatGeckoMobile("10.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver además

+ +
    +
  • Elementos HTML relacionados: {{HTMLElement("bdo")}}
    • +
  • Propiedades HTML relacionadas: {{cssxref("direction")}}, {{cssxref("unicode-bidi")}}
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/bdo/index.html b/files/es/web/html/element/bdo/index.html new file mode 100644 index 0000000000..0a4af7fe92 --- /dev/null +++ b/files/es/web/html/element/bdo/index.html @@ -0,0 +1,144 @@ +--- +title: bdo +slug: Web/HTML/Elemento/bdo +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/bdo +--- +

Definición

+ +

bdo Bi-Directional Overriding=Anulación de bidireccionalidad.

+ +

La dirección de escritura del texto está relacionada con el idioma y se declara con el atributo dir. Pero en ocasiones esto no es suficiente, entonces entra en juego el elemento bdo (anulación del algoritmo bidireccional) que al anular el algoritmo permite un control total de la direccionalidad.

+ +
+
Sus etiquetas son: <bdo> y </bdo> (ambas obligatorias).
+
+ +
+
Crea una caja: En línea.
+
+ +
+
Está definido como: Elemento especial y por lo tanto en línea.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +

Atributos

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Debe indicarlo el autor
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Cambios de dirección

+ +
<p> cero(0)
+<bdo dir="rtl">
+<em> uno(1) dos(2) </em> tres(3) cuatro(4)
+<em dir="ltr"> cinco(5) seis(6) </em> siete(7) ocho(8)
+</bdo> nueve(9)
+</p>
+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/bgsound/index.html b/files/es/web/html/element/bgsound/index.html new file mode 100644 index 0000000000..81b73a1e30 --- /dev/null +++ b/files/es/web/html/element/bgsound/index.html @@ -0,0 +1,106 @@ +--- +title: +slug: Web/HTML/Elemento/bgsound +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/bgsound +--- +
{{non-standard_header}}
+ +

Resumen

+ +

El elemento HTML de sonido de fondo (<bgsound>) es un elemento de Internet Explorer que asocia  un sonido de fondo con un página .

+ +
+

No usar esto ! Para incrustar un elemento en una página web , se debe  de usar el elemento  {{HTMLElement("audio")}}

+
+ +

Atributos

+ +
+
{{htmlattrdef("balance")}}
+
Este atributo define un número entre -10,000 y + 10,000 que determina como el volumen será dividido entre los altavoces .
+
{{htmlattrdef("loop")}}
+
Este atributo indica el número de veces que un soinido será reproducido ya sea como un valor numérico o la palabra clave infinite .
+
{{htmlattrdef("src")}}
+
Este atributo especifica la URL del archivo de sonido que será reproducido , el cual debe ser uno de los siguientes tipos : wav, .au, o .mid.
+
{{htmlattrdef("volume")}}
+
Este atributo define un número entre -10,000 y 0 que determina la fuerza del sonido de fondo de una página .
+
 
+
+ +

Ejemplo

+ +
<bgsound src="sound1.mid">
+
+<bgsound src="sound2.au" loop="infinite">
+
+ +

Notas

+ +

Funcionalidad similar puede ser lograda en algunas versiones de Netscape usando la etiqueta <embed> para invocar un reproductor de audio .

+ +

Puedes escribir bgsound con una etiqueta de cierre automático <bgsound /> . Ahora bien , desde que este elemento no es parte de un estándar , haciendolo como XHTML no lo hará valido. 

+ +

Compatibilidad en exploradores 

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatUnknown}}{{CompatNo}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Hasta Firefox 22 , incluso si no se soportaba este elemento , Gecko lo asociaba a un elemento {{domxref("HTMLSpanElement")}}. Esto fue corregido después y ahora el elemento asociado es un  {{domxref("HTMLUnknownElement")}} como es requerido  por la especificación . 

+ +

Ver también

+ +
    +
  •  {{htmlelement("audio")}}, el cual es el elemento estándar para incrustar audio en un documento.
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/big/index.html b/files/es/web/html/element/big/index.html new file mode 100644 index 0000000000..a15f1b5da9 --- /dev/null +++ b/files/es/web/html/element/big/index.html @@ -0,0 +1,191 @@ +--- +title: big +slug: Web/HTML/Elemento/big +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/big +--- +

Definición

+ +

big de big=grande

+ +

Muestra el texto marcado con un tamaño de fuente más grande. El tamaño de la fuente puede definirse en una escala del 1 al 7, big aumenta este valor en un punto.

+ +
+
Sus etiquetas son: <big> y </big> (Ambas obligatorias).
+
+ +
+
Crea una caja: En línea.
+
+ +
+
Está definido como: Elemento de estilo de fuente y por lo tanto en línea.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Simple

+ +

+  <p>
+
+   Texto normal y... <big>Texto más grande</big>
+
+  </p>
+ 
+
+
+ +
+

Recursivo

+ +

big puede contener otros elementos en línea, por ejemplo... big:

+ +

+  <p>
+
+   Texto normal y texto <big> cada <big> vez <big> más <big> grande. </big></big></big></big>
+
+  </p>
+ 
+
+ +

Se visualiza así:

+ +
+

Texto normal y texto cada vez más grande.

+
+
+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

Estilo predeterminado

+ +

Observa el siguiente ejemplo:

+ +

+ <style>
+        span { font-size: larger; }
+ </style>
+
+ <h2> Con big </h2>
+ <p> Texto normal y texto ...
+
+ <big> cada <big> vez <big> más <big> grande. </big></big></big></big>  </p>
+
+ <h2> Con CSS </h2>
+ <p> Texto normal y texto ...
+
+ <span> cada <span> vez <span> más <span> grande. </span></span></span></span>  </p>
+ 
+
+ +

Notas

+ +
    +
  • big tiene un elemento opuesto, small. Si big aumenta el tamaño de la fuente small lo disminuye. Sin embargo en su funcionamiento son idénticos.
    • +
  • El W3C (y nosotros) desaconseja el uso de este elemento, para manejar el tamaño del texto es mejor usar CSS.
    • +
+ +

Referencia

+ + + +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/blink/index.html b/files/es/web/html/element/blink/index.html new file mode 100644 index 0000000000..f63821708a --- /dev/null +++ b/files/es/web/html/element/blink/index.html @@ -0,0 +1,100 @@ +--- +title: +slug: Web/HTML/Elemento/blink +tags: + - Elemento + - HTML + - Obsoleto + - Referencia + - Web +translation_of: Web/HTML/Element/blink +--- +
{{Deprecated_header}} {{Non-standard_header}}
+ +

El elemento HTML blink (<blink>) no es un elemento estándar que causa que el texto encerrado parpadee lentamente .

+ +
+

Precaución : No usar este elemento ya que no es un elemento estándar y está obsoleto. El texto parpadeante es mal visto por diversos estándares de accesibilidad y la especificación de CSS permite a los exploradores ingnorar el valor del parpadeo . .

+
+ +

Interface DOM

+ +

Este elemento no es soportado y por lo tanto implementa la interface {domxref("HTMLUnknownElement")}} .

+ +

Ejemplo

+ +
<blink>Why would somebody use this?</blink>
+
+ +

Resultado 

+ +

Image:HTMLBlinkElement.gif

+ +

Especificación

+ +

Este elemento no es parte del estándar ni de alguna espeficación . Si no nos crees puedes verlo por ti mismo en la espeficicación de HTML.

+ +

Compatibilidad en exploradores

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico{{CompatNo}}{{CompatNo}} [1]{{CompatNo}}{{CompatNo}} [2]{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatNo}}{{CompatNo}} [1]{{CompatNo}}{{CompatNo}} [2]{{CompatNo}}
+
+ +

[1] Soportado hasta la versión 22. Removido en la versión 23.

+ +

[2] Soportado hasta la versión 12.1. Removido en la versión 15.0.

+ +

Ver también

+ +
    +
  • Historia de la creación del elemento <blink>
    • +
  • {{cssxref("text-decoration")}}, donde un valor de parpadeo existe , aunque los exploradores no son obligados a hacer parpadear el texto efectivamente.
    • +
  • {{htmlelement("marquee")}}, otro elemento similar que no pertenece a un estándar.
    • +
  • Las animaciones CSS son la forma correcta de crear tal efecto .
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/blockquote/index.html b/files/es/web/html/element/blockquote/index.html new file mode 100644 index 0000000000..d8f71a7ed4 --- /dev/null +++ b/files/es/web/html/element/blockquote/index.html @@ -0,0 +1,153 @@ +--- +title: blockquote +slug: Web/HTML/Elemento/blockquote +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/blockquote +--- +

Definición

+ +

blockquote -cita en bloque . Crea citas en bloque, marca las citas a otros autores o documentos.

+ +
+
Sus etiquetas son: <blockquote> y </blockquote> (ambas obligatorias).
+
Está definido como: Elemento en bloque.
+
+ +
+
Crea una caja: En bloque.
+
Puede y debe contener: Uno o más elementos en bloque o script
+
Con un doctype transicional Puede contener: texto, y/o cero o más elementos en bloque o en línea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
cite Proporciona un enlace al documento original o fuenteUna dirección URI. Por defecto: lo fija el navegador
De transición
No tiene
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un blockquote estricto

+ +
<blockquote cite='http://html.conclase.net/w3c/html401...def-BLOCKQUOTE'>
+  <p>
+    <strong>Nota.</strong> Recomendamos que las implementaciones de hojas
+    de estilo porporcionen un mecanismo para insertar signos de puntuación de citas
+    antes y después de una cita delimitada por un BLOCKQUOTE de un modo apropiado según
+    el contexto del idioma actual y el grado de anidamiento de las citas.
+  </p>
+</blockquote>
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +
    +
  • Conviene tener cuidado con las divergencias en el tipo de contenido dependiendo del doctype. El siguiente ejemplo es válido con un doctype transicional, pero no lo es con el estricto:
    • +
+ +
<blockquote>
+  Bla, bla, bla...
+</blockquote>
+
+ +
    +
  • blockquote tiene un hermano menor: q. blockquote sirve para citas en bloque y q para citas en línea.
    • +
+ +
    +
  • A diferencia de q, blockquote no entrecomilla los contenidos, debe hacerlo el autor (con CSS).
    • +
+ +

Referencia

+ + + +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/body/index.html b/files/es/web/html/element/body/index.html new file mode 100644 index 0000000000..32b0a64328 --- /dev/null +++ b/files/es/web/html/element/body/index.html @@ -0,0 +1,170 @@ +--- +title: ': El elemento body del documento' +slug: Web/HTML/Elemento/body +tags: + - Elemento + - HTML + - Referencia + - Seleccionar el elemento raíz + - Web + - secciones +translation_of: Web/HTML/Element/body +--- +
{{HTMLRef}}
+ +

El elemento <body> de HTML representa el contenido de un documento HTML. Solo puede haber un elemento <body> en un documento.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{web.link("/es/docs/Web/HTML/Content_categories", "Categorías de contenido")}}{{web.link("/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#Section_Elements_in_HTML5", "Secciones en HTML5")}}
Contenido permitido{{web.link("/es/docs/Web/HTML/Content_categories#Flow_content", "Flujo de contenido")}}.
Omisión de etiquetaLa etiqueta de inicio se puede omitir si lo primero que hay dentro no es un carácter de espacio, comentario, elemento {{HTMLElement("script")}} o elemento {{HTMLElement("style")}}. La etiqueta final se puede omitir si el elemento <body> tiene contenido o tiene una etiqueta de inicio y no va seguido inmediatamente de un comentario.
Contenedores autorizadosDebe ser el segundo elemento de un elemento {{HTMLElement("html")}}.
Rol de ARIA implícito{{web.link("/es/docs/Web/Accessibility/ARIA/Roles/Document_Role", "document")}}
Roles ARIA permitidosNo se permite role
Interfaz DOM{{DOMxRef("HTMLBodyElement")}} +
    +
  • El elemento <body> expone la interfaz {{DOMxRef("HTMLBodyElement")}}.
    • +
  • Puedes acceder al elemento <body> a través de la propiedad {{DOMxRef("document.body")}}.
    • +
+
+ +

Atributos

+ +

Este elemento incluye los {{web.link("/es/docs/Web/HTML/Global_attributes", "atributos globales")}}.

+ +
+
{{HTMLAttrDef("alink")}} {{obsolete_inline}}
+
Color del texto de los hipervínculos cuando se selecciona. Este método no es conforme a la especificación, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":active")}} en su lugar.
+
{{HTMLAttrDef("background")}} {{obsolete_inline}}
+
URI de una imagen para usar como fondo. Este método no es conforme, usa la propiedad CSS {{CSSxRef("background")}} en el elemento.
+
{{HTMLAttrDef("bgcolor")}} {{obsolete_inline}}
+
Color de fondo del documento. Este método no es conforme, utiliza la propiedad CSS {{CSSxRef("background-color")}} en el elemento.
+
{{HTMLAttrDef("bottommargin")}} {{obsolete_inline}}
+
El margen de la parte inferior del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-bottom")}} en el elemento.
+
{{HTMLAttrDef("leftmargin")}} {{obsolete_inline}}
+
El margen de la izquierda del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-left")}} en el elemento en su lugar.
+
{{HTMLAttrDef("link")}} {{obsolete_inline}}
+
Color del texto de los enlaces de hipertexto no visitados. Este método no es conforme, usa la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":link")}} en su lugar.
+
{{HTMLAttrDef("onafterprint")}}
+
Función para llamar después de que el usuario haya impreso el documento.
+
{{HTMLAttrDef("onbeforeprint")}}
+
Función para llamar cuando el usuario solicita la impresión del documento.
+
{{HTMLAttrDef("onbeforeunload")}}
+
Función para llamar cuando se está a punto de descargar el documento.
+
{{HTMLAttrDef("onblur")}}
+
Función para llamar cuando el documento pierde el foco.
+
{{HTMLAttrDef("onerror")}}
+
Función para llamar cuando el documento no se carga correctamente.
+
{{HTMLAttrDef("onfocus")}}
+
Función para llamar cuando el documento recibe el foco.
+
{{HTMLAttrDef("onhashchange")}}
+
Función para llamar cuando la parte del identificador del fragmento (comenzando con el carácter de almohadilla ('#' también conocido como numeral)) de la dirección actual del documento ha cambiado.
+
{{HTMLAttrDef("onlanguagechange")}} {{experimental_inline}}
+
Función para llamar cuando cambiaron los idiomas preferidos.
+
{{HTMLAttrDef("onload")}}
+
Función a llamar cuando se haya terminado de cargar el documento.
+
{{HTMLAttrDef("onmessage")}}
+
Función para llamar cuando el documento ha recibido un mensaje.
+
{{HTMLAttrDef("onoffline")}}
+
Función para llamar cuando falla la comunicación de la red.
+
{{HTMLAttrDef("ononline")}}
+
Función para llamar cuando se restablece la comunicación de la red.
+
{{HTMLAttrDef("onpopstate")}}
+
Función para llamar cuando el usuario ha navegado el historial de sesiones.
+
{{HTMLAttrDef("onredo")}}
+
Función para llamar cuando el usuario ha avanzado en el historial de deshacer transacciones.
+
{{HTMLAttrDef("onresize")}}
+
Función para llamar cuando el documento ha cambiado de tamaño.
+
{{HTMLAttrDef("onstorage")}}
+
Función para llamar cuando el área de almacenamiento ha cambiado.
+
{{HTMLAttrDef("onundo")}}
+
Función para llamar cuando el usuario ha retrocedido en el historial de deshacer transacciones.
+
{{HTMLAttrDef("onunload")}}
+
Función para llamar cuando el documento se vaya.
+
{{HTMLAttrDef("rightmargin")}} {{obsolete_inline}}
+
El margen de la derecha del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-right")}} en el elemento.
+
{{HTMLAttrDef("text")}} {{obsolete_inline}}
+
Color de primer plano del texto. Este método no es conforme, usa la propiedad CSS {{CSSxRef("color")}} en el elemento.
+
{{HTMLAttrDef("topmargin")}} {{obsolete_inline}}
+
El margen de la parte superior del <body>. Este método no es conforme, usa la propiedad CSS {{CSSxRef("margin-top")}} en el elemento.
+
{{HTMLAttrDef("vlink")}} {{obsolete_inline}}
+
Color del texto de los enlaces de hipertexto visitados. Este método no es conforme, utiliza la propiedad {{CSSxRef("color")}} de CSS junto con la pseudoclase {{CSSxRef(":visited")}} en su lugar.
+
+ +

Ejemplo

+ +
<html>
+  <head>
+    <title>Título del documento</title>
+  </head>
+  <body>
+    <p>Este es un párrafo</p>
+  </body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}{{ Spec2('HTML WHATWG') }}Cambió la lista de características no conformes.
{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}{{ Spec2('HTML5 W3C') }}Los atributos anteriormente obsoletos. Definieron el comportamiento de topmargin, leftmargin, rightmargin y bottommargin no conforme y nunca estandarizado. Se agregaron los atributos on*.
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}{{ Spec2('HTML4.01') }}En desuso el alink, background, bgcolor, link, text y atributos vlink.
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.body")}}

+ +

Ve también

+ +
    +
  • {{HTMLElement("html")}}
    • +
  • {{HTMLElement("head")}}
    • +
diff --git a/files/es/web/html/element/br/index.html b/files/es/web/html/element/br/index.html new file mode 100644 index 0000000000..1e9cff3b58 --- /dev/null +++ b/files/es/web/html/element/br/index.html @@ -0,0 +1,157 @@ +--- +title:
+slug: Web/HTML/Elemento/br +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/br +--- +

Resumen

+ +

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es significante.

+ +

No utilices <br> para incrementar el espacio entre líneas de texto; para ello utiliza la propiedad {{cssxref('margin')}} de CSS o el elemento {{HTMLElement("p")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content.
Contenido permitidoNinguno, es {{Glossary("empty element")}}.
Omisión de etiquetaDebe tener etiqueta de inicio y no debe tener etiqueta de cierre. En documentos XHTML este elemento se escribe como <br />.
Elementos padre permitidosCualquier elemento que acepte phrasing content.
Interfaz DOM{{domxref("HTMLBRElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}
+
Indica donde empieza la siguiente línea después del salto. +
+

Nota de uso: Este atributo está obsoleot en {{HTMLVersionInline(5)}} y no debe utilizarse por los autores. En su lugar utiliza la propiedad {{CSSxref('clear')}} de CSS.

+
+
+
+ +

Ejemplo

+ +
Mozilla Foundation<br>
+1981 Landings Drive<br>
+Building K<br>
+Mountain View, CA 94043-0801<br>
+USA
+
+ +

El HTML de arriba muestra:

+ +

Mozilla Foundation
+ 1981 Landings Drive
+ Building K
+ Mountain View, CA 94043-0801
+ USA

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-br-element', '<br>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ +
    +
  • Elemento {{HTMLElement("address")}}
    • +
  • Elemento {{HTMLElement("p")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/button/index.html b/files/es/web/html/element/button/index.html new file mode 100644 index 0000000000..abcab78469 --- /dev/null +++ b/files/es/web/html/element/button/index.html @@ -0,0 +1,198 @@ +--- +title: button +slug: Web/HTML/Elemento/button +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/button +--- +

Definición

+ +

button = botón.

+ +

Es el elemento crea botones marcadores.

+ +

La etiqueta de HTML <button> representa un elemento cliqueable de tipo botón que puede ser utilizado en formularios o en cualquier parte de la página que necesite un botón estándar y simple de aplicar. De forma predeterminada, los botones HTML se presentan con un estilo similar en todas las plataformas, estos estilos se pueden cambiar utilizando CSS.

+ +
+
Sus etiquetas son: <button> y </button> (ambas obligatorias).
+
Crea una caja: en linea.
+
Está definido como: Elemento de control para formulario.
+
Puede contener: Texto y/o cero o más elementos en Bloque o en linea, con las siguientes excepciones: (A|%formctrl;|FORM|FIELDSET)
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
name Asigna un nombre de control.Texto con limitacionesLo fija el navegador.
value Asigna un valor inicial que será enviado con el formulario.TextoLo fija el navegador.
type Indica el tipo de botón.Uno de los siguientes: (button|submit|reset)PD.: submit.
disabled Indica que el control está desabilitado.disabled.Lo fija el navegador. disabled.
accesskey Define una tecla de acceso rápido. Importante para la Accesibilidad.Un carácter o letra.Lo fija el navegador.
tabindex Asigna un número de posición en el orden de tabulación.Un número entre 0 y 32767.Lo fija el navegador.
reserved Reservado para un uso futuro que nunca tubo. Inútil--
Eventos: onfocus onblur
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
<button name="button">Click me</button>
+
+ +

Sobre Accesibilidad

+ +

Botones con íconos

+ +

Los botones que solamente utilizan un ícono para representar una funcionalidad no tienen un nombre accesible para los lectores de no-videntes. Para arreglar esto debemos proveer un nombre para el botón que describa la funcionalidad de este.

+ +

Ejemplo

+ +
<button name="favorito" type="button">
+  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
+  Agregar a favoritos
+</button>
+
+ +

Esto también ayudará a los usuarios videntes que no estén familiarizados con el significado del ícono ya que podrán entender su significado pasando el cursor por encima del elemento.

+ +

Para más información (en inglés):

+ + + +

Proximidad

+ +

Si el sitio tiene una gran cantidad de elementos interactivos muy cercanos entre ellos esto puede generar una dificultad en los usuarios con discapacidades motrices. Es ideal que estos elementos tengan una separación para evitar que el usuario cliquee el incorrecto. Puedes utilizar la propiedad margin para separarlos.

+ +

Más información (en inglés):

+ + + +

Soporte

+ + + +

{{Compat("html.elements.button")}}

+ +

Referencia

+ + + +
+
+

Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +

 

diff --git a/files/es/web/html/element/canvas/index.html b/files/es/web/html/element/canvas/index.html new file mode 100644 index 0000000000..63e3e260a3 --- /dev/null +++ b/files/es/web/html/element/canvas/index.html @@ -0,0 +1,88 @@ +--- +title: canvas +slug: Web/HTML/Elemento/canvas +tags: + - Canvas + - HTML + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/canvas +--- +

El elemento HTML canvas (<canvas>) se puede utilizar para dibujar gráficos a través de secuencias de comandos (por lo general JavaScript ). Por ejemplo, puede usarse para dibujar gráficos, hacer composiciones de fotos o incluso realizar animaciones.

+ +

+

Las aplicaciones de Mozilla adquirieron la compatibilidad con <canvas> a partir de Gecko 1.8 (es decir, Firefox 1.5 ). El elemento fue originalmente introducido por Apple en el OS X Dashboard y Safari. Internet Explorer, antes de la versión 9.0 beta, no admite de forma nativa <canvas> , pero una página puede de hecho añadir la compatibilidad mediante la inclusión de un script del proyecto Explorer Canvas de Google. Opera 9 también es compatible con <canvas> .

+

+ +

Para más artículos sobre canvas, consulta la página del tema canvas .

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoTransparente, ya sea contenido estático o contenido dinámico .
Omisión de etiquetasNinguna, deben estar presentes tanto las etiquetas de inicio como las de cierre
Elementos primarios permitidosCualquier elemento que acepte contenido dinámico o cualquier otro elemento que acepte contenido estático . 
Documento normativoHTML 5, sección 4.8.10
+ +

Atributos

+ +
+
{{ htmlattrdef("width") }}
+
 La anchura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 300.
+
{{ htmlattrdef("height") }}
+
La altura del espacio de coordenadas en píxeles CSS. El valor predeterminado es 150.
+
+ +
Nota: el tamaño del lienzo mostrado se puede cambiar con una hoja de estilo. La imagen se escala durante la representación para adaptarse al tamaño que se le ha aplicado estilo .
+ +

Interfaz DOM

+ + + +

Ejemplo

+ +
<canvas id="canvas" width="300" height="300">
+  Tu navegador no admite el elemento &lt;canvas&gt;.
+</canvas>
+
+ +

Sobre Accesibilidad

+ +

El elemento <canvas> es simplemente un bitman que no provee ninguna información adicional sobre los elementos que tiene dibujados. El contenido de la etiqueta canvas no se muestra a los lectores de pantalla como otras etiquetas semánticas. Como regla general, deberías evitar utilizar canvas en un sitio accesible.

+ +

Para mejorar la accesibilidad de la etiquetas puedes leer los siguientes artículos (en inglés):

+ + + +

Consulta también

+ + + +

 

+ +

{{ languages( { "de": "de/HTML/Element/canvas", "en": "en/HTML/Element/canvas", "es": "es/HTML/Elemento/canvas", "ja": "ja/HTML/Element/canvas", "ko": "ko/HTML/Element/canvas", "nl": "nl/HTML/HTML_Tags/canvas", "pl": "pl/HTML/Element/canvas", "ru": "Ru/HTML/Element/canvas", "zh-cn": "cn/HTML/Element/canvas", "fr": "fr/HTML/Element/canvas" } ) }}

diff --git a/files/es/web/html/element/caption/index.html b/files/es/web/html/element/caption/index.html new file mode 100644 index 0000000000..84d06cffaa --- /dev/null +++ b/files/es/web/html/element/caption/index.html @@ -0,0 +1,167 @@ +--- +title: caption +slug: Web/HTML/Elemento/caption +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/caption +--- +

Definición

+ +

Es el encargado de darle un título descriptivo a las tablas.

+ +
+
Sus etiquetas son: <caption> y </caption> (ambas obligatorias).
+
+ +
+
Crea una caja: .
+
+ +
+
Está definido como: Elemento para tablas.
+
+ +
+
Puede contener: Texto y/o cero o más elementos en línea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
align Indica la alineación en relación a la tabla.Uno de los siguientes: 'top', 'bottom', 'left', 'right'.Lo fija el navegador.
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

Ejemplo simple

+ +

El siguiente código:

+ +

+  <table border='1'>
+   <caption>Tabla con caption</caption>
+    <tr> <td> tabla de una celda. </td>  </tr>
+  </table>
+ 
+
+ +

Se visualiza así:

+ +
+ + + + + + + +
Tabla con caption
tabla de una celda.
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +
    +
  • Debe ser el primer hijo del elemento table. una tabla solo puede tener uno.
    • +
+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/center/index.html b/files/es/web/html/element/center/index.html new file mode 100644 index 0000000000..1a24bbaf4b --- /dev/null +++ b/files/es/web/html/element/center/index.html @@ -0,0 +1,116 @@ +--- +title:
(obsoleto) +slug: Web/HTML/Elemento/center +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/center +--- +

Definición

+ +

{{obsolete_header()}}
+ El elemento obsoleto center (centro) crea una caja en bloque con el contenido centrado. En realidad es equivalente a un div con align="center"

+ +
+
Sus etiquetas son: <center> y </center> (ambas obligatorias).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: Elemento desaprobado.
+
+ +
+
+
Actualmente la mejor forma de centrar texto no es con html, con css tenemos infinidad de posibilidales para centrar el texto vertical, horizontal, izquierda, dercha, justificado y todo lo que necesitemos.
+
+
+ +
+
Puede contener: cero o más elementos en bloque y en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
Ver atributos de transición.
Específicos
No tiene
De transición (Solo tiene los genéricos)
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classlista de clases separadas por espaciosimplícitoidentificador a nivel de documento, .
diruno de los siguientes:"ltr" o "rtl"implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Atributovalordescripción
+ +

Ejemplos

+ +
<center>
+ elemento center
+</center>
+<div align='center'>
+ elemento div con: align='center'
+</div>
+
diff --git a/files/es/web/html/element/cite/index.html b/files/es/web/html/element/cite/index.html new file mode 100644 index 0000000000..237934b396 --- /dev/null +++ b/files/es/web/html/element/cite/index.html @@ -0,0 +1,147 @@ +--- +title: cite +slug: Web/HTML/Elemento/cite +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/cite +--- +

Definición

+ +

cite -cita . Marca una referencia a una fuente, o el autor de un texto citado.

+ +
+
Sus etiquetas son: <cite> y </cite> (ambas obligatorias)
+
Está definido como: Elemento de frase, y por lo tanto en línea.
+
+ +
+
Crea una caja: En línea.
+
Puede contener: Text y/o cero o más elementos en línea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

¿Quién lo dijo?

+ +

código:

+ +
<p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p>
+
+ +


+ Resultado:

+ +
+

Galileo dijo: "...y sin embargo, se mueve."

+
+
+ +

Estilo predeterminado

+ +

En los navegadores basados en Mozilla (y en otros) el contenido de cite es mostrado con un estilo de texto en cursiva.

+ +
<p> <cite>Galileo</cite> dijo: "... y sin embargo, se mueve." </p>
+<p> <span style='font-style: italic;'>Galileo</span> dijo: "... y sin embargo, se mueve." </p>
+
+ +

 

+ +

Notas

+ +
    +
  • Está bastante estendido el mal uso de este elemento, mucha gente lo usa para marcar el texto de las citas en vez del autor, para marcar el texto están los elementos q (en línea) y blockquote (en bloque).
    • +
+ +

Referencia

+ + + +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/code/index.html b/files/es/web/html/element/code/index.html new file mode 100644 index 0000000000..dfcac59bfd --- /dev/null +++ b/files/es/web/html/element/code/index.html @@ -0,0 +1,110 @@ +--- +title: code +slug: Web/HTML/Elemento/code +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/code +--- +

 

+ +

Definición

+ +

Es el apropiado para marcar el código de un programa.

+ +
+
Sus etiquetas son: <code> y </code> (ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de frase.
+
+ +
+
Puede contener: en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitolista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
Atributovalordescripción
+ +

 

+ +

Ejemplos

+ +
<code>
+ #include main() { for(;;) { printf ("Hello World!\n"); } } 
+</code>
+
diff --git a/files/es/web/html/element/col/index.html b/files/es/web/html/element/col/index.html new file mode 100644 index 0000000000..4f8c415f87 --- /dev/null +++ b/files/es/web/html/element/col/index.html @@ -0,0 +1,177 @@ +--- +title: col +slug: Web/HTML/Elemento/col +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/col +--- +

Definición

+ +

Permite especificar propiedades para una columna o un grupo de ellas.

+ +
+
Sus etiquetas son: <col> (solo tiene una).
+
+ +
+
Crea una caja: No.
+
+ +
+
Está definido como: Elemento para tablas..
+
+ +
+
Puede contener: Nada.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalorpor omisión
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m..Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m.Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdataLo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo.Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma.Lo fija el navegador. PD.: "desconocido".
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Lo fija el navegador. PD.: En castellano 'ltr'.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
span Indica el número de columnas afectadas.Un número.PD.: 1.
width Indica la anchura de las columnas.Una longitud expresada en píxeles, porcentaje o relativa.Lo fija el navegador.
align Indica la alineación horizontal.Uno de los siguientes: (left|center|right|justify|char).Lo fija el navegador.
char Carácter que se usará como punto de alineación.Un carácter, Uno de estos: {{ mediawiki.external('ISO10646') }}.Lo fija el navegador.
charoff offset del carácter de alineación.Una longitud expresada en píxeles o porcentaje.Lo fija el navegador.
valign Indica la alineación vertical de los contenidos de las celdas.Uno de los siguientes: (top|middle|bottom|baseline).Lo fija el navegador.
De transición
No tiene
atributodescripciónvalorpor omisión
+ +

Ejemplos de uso

+ +
+

bla bla

+ +

+
+ 
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/colgroup/index.html b/files/es/web/html/element/colgroup/index.html new file mode 100644 index 0000000000..da87284232 --- /dev/null +++ b/files/es/web/html/element/colgroup/index.html @@ -0,0 +1,163 @@ +--- +title: colgroup +slug: Web/HTML/Elemento/colgroup +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/colgroup +--- +

Definición

+ +

colgroup de column group = Grupo de columnas. Permite crear grupos de columnas.

+ +
+
Sus etiquetas son: <colgroup> y </colgroup> (la de cierre es opcional).
+
+ +
+
Crea una caja: No.
+
+ +
+
Está definido como: Elemento para tablas.
+
+ +
+
Puede contener: Cero o más elementos col.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. cdata. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
span Indica el número de columnas que se agrupan.Un número entero mayor que cero. Por defecto: 1.
width Indica la anchura de las columnas del grupo.Una longitud expresada en píxeles, porcentaje o relativa. Por defecto: Lo fija el navegador.
align Indica la alineación horizontal.Uno de los siguientes: 'left' 'center' 'right' 'justify' y 'char'. Por defecto: Lo fija el navegador.
char Carácter que se usará como punto de alineación.Un carácter. Por defecto: el carácter de punto decimal (puede variar según el idioma). Por defecto: Lo fija el navegador.
charoff Indica la distancia entre el borde y el carácter de alineación.Una longitud expresada en píxeles o porcentaje. Por defecto: Lo fija el navegador.
valign Indica la alineación vertical de los contenidos de las celdas.Uno de los siguientes: 'top' 'middle' 'bottom' y 'baseline'. Por defecto: Lo fija el navegador.
De transición
No tiene
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

bla bla

+ +

+
+ 
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE6 vs IE7 vs FF1.5 vs OP9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/content/index.html b/files/es/web/html/element/content/index.html new file mode 100644 index 0000000000..0e380c1cd9 --- /dev/null +++ b/files/es/web/html/element/content/index.html @@ -0,0 +1,167 @@ +--- +title: +slug: Web/HTML/Elemento/content +tags: + - Deprecado + - Elemento + - HTML + - Referencia + - Web + - Web Components +translation_of: Web/HTML/Element/content +--- +

{{Deprecated_header}}

+ +

El elemento HTML <content> es usado dentro de un  Shadow DOM como un {{glossary("insertion point")}} . No está pensado para ser usado en HTML ordinario . Es usado con Web Components.

+ +
+

Nota: Aunque está presente en un draft inicial de las especificaciones e implementado en varios exploradores , este elemento ha sido removido en versiones posteriores a la especificación .

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoModelo de contenido transpatente
Contenido permitidoContenido dinámico
Omisión de etiquetas{{no_tag_omission}}
Elementos padre permitidosAny element that accepts flow content.
Interfase DOM{{domxref("HTMLContentElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales .

+ +
+
select
+
Una lista de selectores separada por comas . Estos tienen la misma sintaxis que los selectores de CSS . Seleccionan el contenido a insertar en lugar del elemento <content> .
+
+ +

Ejemplo

+ +

Aquí hay un ejemplo simple del uso del elemento <content> . Es un archivo HTML con todo lo necesario en el .

+ +
+

Nota: Para que este código funcione , el explorador en el que se muestre debe de soportar Web Components . Ver Enabling Web Components in Firefox .

+
+ +
<html>
+  <head></head>
+  <body>
+  <!-- The original content accessed by <content> -->
+  <div>
+    <h4>My Content Heading</h4>
+    <p>My content text</p>
+  </div>
+
+  <script>
+  // Get the <div> above.
+  var myContent = document.querySelector('div');
+  // Create a shadow DOM on the <div>
+  var shadowroot = myContent.createShadowRoot();
+  // Insert into the shadow DOM a new heading and
+  // part of the original content: the <p> tag.
+  shadowroot.innerHTML =
+   '<h2>Inserted Heading</h2> <content select="p"></content>';
+  </script>
+
+  </body>
+</html>
+
+ +

Si muestras esto en un explorador web , debe de verse como lo siguiente .

+ +

content example

+ +

Especificaciones

+ + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('Shadow DOM', "#the-content-element", "content")}}{{Spec2('Shadow DOM')}} 
+ +

Compatibilidad con exploradores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísiticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico35{{CompatGeckoDesktop("28")}} [1]{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CatacterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico 37{{CompatGeckoMobile("28")}} [1]{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Si el Shadow DOM no está habilidado en Firefox , los elementos de <content> se comportarán como  {{domxref("HTMLUnknownElement")}} . Shadow DOM fue implementado por primera vez en Firefox33 y está detras de una preferencia , dom.webcomponents.enabled, el cual está deshabilitado por default .

+ +

Ver también

+ +
    +
  • Web Components
    • +
  • {{HTMLElement("shadow")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/data/index.html b/files/es/web/html/element/data/index.html new file mode 100644 index 0000000000..8f202fa334 --- /dev/null +++ b/files/es/web/html/element/data/index.html @@ -0,0 +1,141 @@ +--- +title: +slug: Web/HTML/Elemento/data +tags: + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/data +--- +

Resúmen

+ +

El Elemento HTML <data> vincula un contenido dado con una traducción legible por una máquina. Si el contenido está relacionado con time- o date-, debe usarse el elemento {{HTMLElement("time")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoFlow content, phrasing content, palpable content.
Contenido permitidoPhrasing content.
Omisión de etiqueta{{no_tag_omission}}
Elementos permitidosAny element that accepts phrasing content.
interfaz DOM{{domxref("HTMLDataElement")}}
+ +

Atributos

+ +

Este elemento incluye Atributos globales

+ +
+
{{htmlattrdef("value")}}
+
This attribute specifies the machine-readable translation of the content of the element.
+
+ +

Ejemplo

+ +

El siguiente ejemplo muestra nombres de productos pero también asocia a cada uno con su código UPC.

+ +
<p>New Products</p>
+<ul>
+ <li><data value="3967381398">Mini Ketchup</data></li>
+ <li><data value="3967381399">Jumbo Ketchup</data></li>
+ <li><data value="3967381400">Mega Jumbo Ketchup</data></li>
+</ul>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-data-element', '<data>')}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Compatibilidad de navegador

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("22.0")}} {{bug("839371")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Ver también

+ +
    +
  • The HTML {{HTMLElement("time")}} element.
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/datalist/index.html b/files/es/web/html/element/datalist/index.html new file mode 100644 index 0000000000..40049a9734 --- /dev/null +++ b/files/es/web/html/element/datalist/index.html @@ -0,0 +1,106 @@ +--- +title: datalist +slug: Web/HTML/Elemento/datalist +tags: + - HTML5 + - datalist +translation_of: Web/HTML/Element/datalist +--- +

El elemento HTML <datalist> contiene un conjunto de elementos {{HTMLElement("option")}} que representan los valores disponibles para otros controles.

+ +

La fuente de este ejemplo interactivo se almacena en un repositorio de GitHub. Si desea contribuir al proyecto de ejemplos interactivos, copia https://github.com/mdn/interactive-examples y envíenos una solicitud de extracción.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Contenido de las categoríasContenido de flujo, contenido de fraseo.
Contenido permitidoO bien contenido de fraseo o, cero o más elementos {{HTMLElement("option")}}.
Omisión de etiqueta{{no_tag_omission}}
Elementos padre permitidosCualquier elemento que acepte contenido de fraseo.
Roles ARIA permitidosNinguno
Interfaz DOM{{domxref("HTMLDataListElement")}}
+ +

Atributos

+ +

Este elemento no tiene otros atributos mas que los atributos globales, comunes a todos los elementos.

+ +

Ejemplos

+ +
<label>Choose a browser from this list:
+<input list="browsers" name="myBrowser" /></label>
+<datalist id="browsers">
+  <option value="Chrome">
+  <option value="Firefox">
+  <option value="Internet Explorer">
+  <option value="Opera">
+  <option value="Safari">
+  <option value="Microsoft Edge">
+</datalist>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Examples")}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '<datalist>')}}{{Spec2('HTML5 W3C')}}
+ +

Compatibilidad con los distintos navegadoresEdit

+ + + +

{{Compat("html.elements.datalist")}}

+ +

sección de relleno

+ +

Incluya este polyfill para proporcionar soporte para navegadores antiguos y actualmente incompatibles:
+ datalist-polyfill

+ +

Ver también

+ +
    +
  • El elemento {{HTMLElement("input")}}, y más especificamente este atributo {{htmlattrxref("list", "input")}};
    • +
  • El elemento {{HTMLElement("option")}}.
    • +
+ +

{{HTMLRef}}

diff --git a/files/es/web/html/element/dd/index.html b/files/es/web/html/element/dd/index.html new file mode 100644 index 0000000000..3296e7758b --- /dev/null +++ b/files/es/web/html/element/dd/index.html @@ -0,0 +1,111 @@ +--- +title: dd +slug: Web/HTML/Elemento/dd +tags: + - Contenido agrupado HTML + - Definición + - Detalles + - Detalles de descripción + - Elemento + - HTML + - Lista de descripciones + - Referencia + - Web + - dd +translation_of: Web/HTML/Element/dd +--- +
{{HTMLRef}}
+ +

El elemento HTML <dd> provee detalles acerca de o la definición de un término precedente ({{HTMLElement("dt")}}) en una lista de descripciones ({{HTMLElement("dl")}}).

+ +
{{EmbedInteractiveExample("pages/tabbed/dd.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoNinguna
Contenido permitidoContenido de flujo
Omisión de TagEl tag inicial es requerido. El tag final puede ser omitido si el elemento {{HTMLElement("dd")}} se encuentra inmediatamente seguido por otro elemento <dd>, o si no hay más contenido en el elemento padre.
Padres permitidos{{HTMLElement("dl")}} o (en WHATWG HTML) un {{HTMLElement("div")}} que se encuentra dentro de un {{HTMLElement("dl")}}.
Hermano previo{{HTMLElement("dt")}} u otro elemento {{HTMLElement("dd")}}.
Roles ARIA permitidosNinguno
Interfaz DOM{{domxref("HTMLElement")}}
+ +

Atributos

+ +

Los atributos de este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("nowrap")}} {{Non-standard_inline}}
+
Si el valor de este atributo es definido como yes, el texto de la definición no se encapsulará. El valor por defecto es no.
+
+ +

Ejemplo

+ +

Para un ejemplo, ver ejemplos <dl>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-dd-element', '<dd>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.dd")}}

+ +

Ver también

+ +
    +
  • {{HTMLELement("dl")}}
    • +
  • {{HTMLElement("dt")}}
    • +
diff --git a/files/es/web/html/element/del/index.html b/files/es/web/html/element/del/index.html new file mode 100644 index 0000000000..b38c85a532 --- /dev/null +++ b/files/es/web/html/element/del/index.html @@ -0,0 +1,155 @@ +--- +title: del +slug: Web/HTML/Elemento/del +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/del +--- +

 

+ +

Definición

+ +

El elemento del (deleted-borrado) marca las partes de un texto o documento que han sido suprimidas o sustituidas.

+ +
+
Sus etiquetas son: <del> y </del> (ambas obligatorias).
+
+ +
+
Crea una caja: a veces en linea a veces en bloque.
+
+ +
+
Está definido como:
+
+ +
+
Puede contener: depende, si actua como un elemento en bloque puede contener elementos en bloque y en linea. Pero si actua como un elemento en linea solo podrá contener elementos en linea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genericos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitoidentificador a nivel de documento, lista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
citeURIimplícitoinformación sobre el cambio
datetimefechaimplícitofecha y hora del cambio
de transición
No tiene, o dicho de otra manera, tiene los mismos que en el doctype estricto
Atributovalordescripción
+ +

Ejemplos

+ +

El siguiente código:

+ +
 Ejemplo de ins en linea:
+
+   <p>
+       El agua es insípida <del>y húmeda.</del> <ins>inodora e incolora.</ins>
+   </p>
+
+ Ejemplo de ins en bloque:
+
+   <p>
+       El agua es insípida.
+   </p>
+
+ <del>
+   <p>
+       y húmeda.
+   </p>
+ </del>
+
+ +


+ Se visualiza así:

+ +
+

Ejemplo de ins en linea:

+ +

El agua es insípida

+y húmeda. inodora e incolora. + +

Ejemplo de ins en bloque:

+ +

El agua es insípida.

+ +

 

+ +

 

+y húmeda.
+ +

Comentarios

+ +

El elemento del del tiene un opuesto, el elemento ins. del, marca las partes descartadas e ins las insertadas.

diff --git a/files/es/web/html/element/details/index.html b/files/es/web/html/element/details/index.html new file mode 100644 index 0000000000..cd8b0c5abb --- /dev/null +++ b/files/es/web/html/element/details/index.html @@ -0,0 +1,152 @@ +--- +title:
+slug: Web/HTML/Elemento/details +tags: + - Elemento + - Elementos HTML interactivos + - HTML + - HTML5 + - Referencia + - Web +translation_of: Web/HTML/Element/details +--- +

{{ SeeCompatTable() }}

+ +

Resumen

+ +

El elemento HTML Details <details> es usado como un widget de revelación a través del cual el usuario puede obtener información adicional .

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico , contenido de seccionamiento, contenido interactivo, contenido palpable .
Contenido permitidoUn elemento  {{HTMLElement("summary")}}  seguido de contenido dinámico 
Omisión de etiquetas{{no_tag_omission}}
Elementos padres permitidosCualquier elemento que acepte  contenido dinámico.
Interfaz DOM{{domxref("HTMLDetailsElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales .

+ +
+
{{htmlattrdef("open")}}
+
Este atributo Booleano indica si los detalles serán mostrados al usuario cuando la página se cargue . Por default el valor es false y por lo tanto los detalles estarán ocultos.
+
+
+ +

Ejemplo

+ +
<details>
+  <summary>Some details</summary>
+  <p>More info about the details.</p>
+</details>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example")}}

+ +
+

Nota: Si el el ejemplo de arriba no funciona , ver {{anch("Compatibilidad con navegadores")}}  para determinar si el navegador soporta esta característica .

+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificacionesEstatusComentario
{{SpecName('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'semantics.html#the-details-element', '<details>')}}{{Spec2('HTML5.1')}}
+ +

Compatibilidad con navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico12{{CompatNo}} {{bug(591737)}}{{CompatNo}}156
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico4.0{{CompatNo}} {{bug(591737)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

+ +

Ver también

+ +
    +
  • {{HTMLElement("summary")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/dfn/index.html b/files/es/web/html/element/dfn/index.html new file mode 100644 index 0000000000..03242c90bd --- /dev/null +++ b/files/es/web/html/element/dfn/index.html @@ -0,0 +1,112 @@ +--- +title: dfn +slug: Web/HTML/Elemento/dfn +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/dfn +--- +

 

+ +

Definición

+ +

Sirve para marcar el término que se quiere definir.

+ +
+
Sus etiquetas son: <dfn> y </dfn> (ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de frase.
+
+ +
+
Puede contener: cero o más elementos en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitoidentificador a nivel de documento, lista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
Atributovalordescripción
+ +

 

+ +

Ejemplos

+ +
<p>
+     El <dfn>HTML</dfn> es un lenguaje de marcado para hipertextos.
+</p>
+
+ +

Comentarios

diff --git a/files/es/web/html/element/dialog/index.html b/files/es/web/html/element/dialog/index.html new file mode 100644 index 0000000000..e44363c003 --- /dev/null +++ b/files/es/web/html/element/dialog/index.html @@ -0,0 +1,152 @@ +--- +title: +slug: Web/HTML/Elemento/dialog +translation_of: Web/HTML/Element/dialog +--- +
{{HTMLRef}}
+ +

El elemento HTML <dialog> representa una caja de diálogo u otro componente interactivo, como inspector o ventana.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, sectioning root
Permitted contentFlow content
Tag omission{{no_tag_omission}}
Permitted parent elementsAny element that accepts flow content
DOM interface{{domxref("HTMLDialogElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales. El atributo tabindex no debe utilizarse en el elemento <dialog>.

+ +
+
{{htmlattrdef("open")}}
+
Indica que el diálogo está activo y disponible para interactuar. Cuando el atributo open no está asignado, no debe mostrarse al usuario.
+
+ +

Notas de uso

+ +

 

+ +
    +
  • Los elementos <form> pueden integrarse dentro de un diálogo  especificándolos con el atributo method="dialog". Cuando se envía un formulario, el diálogo se cierra con un atributo {{domxref("HTMLDialogElement.returnValue", "returnValue")}} asignado con el value del botón utilizado.
    • +
  • El pseudo-elemento {{cssxref('::backdrop')}} de CSS puede utilizarse para dar estilos al elemento <dialog>, por ejemplo para atenuar contenido inaccesible mientras el diálogo modal esté activo.
    • +
+ +

 

+ +

Ejemplos

+ +

Ejemplo 1

+ +
<dialog open>
+  <p>Greetings, one and all!</p>
+</dialog>
+
+ +

Ejemplo 2

+ +
<!-- Simple pop-up dialog box, containing a form -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <section>
+      <p><label for="favAnimal">Favorite animal:</label>
+      <select id="favAnimal">
+        <option></option>
+        <option>Brine shrimp</option>
+        <option>Red panda</option>
+        <option>Spider monkey</option>
+      </select></p>
+    </section>
+    <menu>
+      <button id="cancel" type="reset">Cancel</button>
+      <button type="submit">Confirm</button>
+    </menu>
+  </form>
+</dialog>
+
+<menu>
+  <button id="updateDetails">Update details</button>
+</menu>
+
+<script>
+  (function() {
+    var updateButton = document.getElementById('updateDetails');
+    var cancelButton = document.getElementById('cancel');
+    var favDialog = document.getElementById('favDialog');
+
+    // Update button opens a modal dialog
+    updateButton.addEventListener('click', function() {
+      favDialog.showModal();
+    });
+
+    // Form cancel button closes the dialog box
+    cancelButton.addEventListener('click', function() {
+      favDialog.close();
+    });
+
+  })();
+</script>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', 'semantics.html#the-dialog-element', '<dialog>')}}{{Spec2('HTML5.1')}}Definición inicial
+ +

Compatibilidad de navegadores

+ +

 

+ + + +

{{Compat("html.elements.dialog")}}

+ +

 

+ +

Ver también

+ +
    +
  • Formularios HTML.
    • +
  • El evento {{event("close")}}
    • +
  • El evento {{event("cancel")}}
    • +
  • El pseudo-elemento {{cssxref("::backdrop")}}
    • +
diff --git a/files/es/web/html/element/dir/index.html b/files/es/web/html/element/dir/index.html new file mode 100644 index 0000000000..6c95601436 --- /dev/null +++ b/files/es/web/html/element/dir/index.html @@ -0,0 +1,121 @@ +--- +title: dir +slug: Web/HTML/Elemento/dir +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/dir +--- +

 

+ +

Definición

+ +

El elemento dir (directorio) es un elemento desaprobado. En su origen fue pensado para crear directorios en multicolumna, en la actualidad es inutil.

+ +
+
Sus etiquetas son: <dir> y </dir> (ambas obligatorias).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: Elemento DESAPROBADO.
+
+ +
+
Puede contener: uno o más elementos li
+
NO puede contener: Elementos en bloque
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Genericos
Genericos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitoidentificador a nivel de documento, lista de clases separadas por espacios.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
de transición
compactcompactimplícitoespacio entre objetos reducido
+ +

Ejemplos

+ +

El siguiente código:

+ +
 <dir>
+  <li>primer elemento </li>
+  <li>segundo elemento </li>
+  <li>tercer elemento </li>
+ </dir>
+
+ +
+

Se visualiza así:

+ +
    +
  • primer elemento
    • +
  • segundo elemento
    • +
  • tercer elemento
    • +
+
+ +

Comentarios

diff --git a/files/es/web/html/element/div/index.html b/files/es/web/html/element/div/index.html new file mode 100644 index 0000000000..5421099e45 --- /dev/null +++ b/files/es/web/html/element/div/index.html @@ -0,0 +1,152 @@ +--- +title: div +slug: Web/HTML/Elemento/div +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/div +--- +

Definición

+ +

div de "division" -división . Sirve para crear secciones o agrupar contenidos.

+ +
+
Sus etiquetas son: <div> y </div> (ambas obligatorias).
+
Está definido como: Elemento en bloque.
+
+ +
+
Crea una caja: En bloque.
+
Puede contener: Texto, y/o cero o más elementos en bloque o en linea.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
datasrc Enlaza a una fuente de datos externa (individual o tabular). Reservado para posibles usos futuros.Una dirección URI. Por defecto: Lo fija el navegador.
datafld El nombre de una propiedad o columna de datasrc. Reservado para posibles usos futuros.Por defecto: Lo fija el navegador.
dataformatas Indica como deben ser tratados los datos obtenidos de datasrc. Reservado para posibles usos futuros.Uno de los siguientes: 'paintext' o 'html'. Por defecto: 'plaintext'
De transición
align Alineación del texto.Uno de los siguientes: "left", "center", "right", o "justify". Por defecto: 'left', lo fija el navegador
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Div y span

+ +

código:

+ +
<div style="color: blue;">
+ <h2> Ejemplo de div y span </h2>
+  <p>
+    Esto es un párrafo dentro de un div,
+    <span style="color: red;"> y esto un span dentro de un párrafo.</span>
+  </p>
+</div>
+
+ +

el wiki causa interferencias Resultado: <div style='border: solid silver 1px;'> <div style="color: blue;"> <h2> Ejemplo de div y span </h2> <p> Esto es un párrafo dentro de un div, <span style="color: red;"> y esto un span dentro de un párrafo.</span> </p> </div> </div>

+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/dl/index.html b/files/es/web/html/element/dl/index.html new file mode 100644 index 0000000000..9bea9588ce --- /dev/null +++ b/files/es/web/html/element/dl/index.html @@ -0,0 +1,219 @@ +--- +title: dl +slug: Web/HTML/Elemento/dl +tags: + - Agrupando contenido HTML + - Elemento + - HTML + - Referencia + - Web +translation_of: Web/HTML/Element/dl +--- +
{{HTMLRef}}
+ +

El elemento HTML <dl>  representa una lista descriptiva. El elemento encierra una lista de grupos de términos (especificados con el uso del elemento {{HTMLElement("dt")}}) y de descripciones (proveídas con elementos {{HTMLElement("dd")}}). Algunos usos comunes para este elemento son implementar un glosario o para desplegar metadatos (lista de pares llave-valor).

+ +
{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido de flujo, y si los elementos hijos de <dl> incluyen un grupo nombre-valor, contenido palpable.
Contenido permitido +

Ya sea: Cero o más grupos cada uno consistiendo en uno o más elementos {{HTMLElement("dt")}} seguidos por uno o más elementos {{HTMLElement("dd")}}, opcionalmente intercalados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.
+ O: Uno o más elementos {{HTMLElement("div")}}, opcionalmente entremezclados con elementos {{HTMLElement("script")}} y elementos {{HTMLElement("template")}}.

+
Omisión de Tag{{no_tag_omission}}
Padres permitidosCualquier elemento que acepte contenido de flujo.
Roles ARIA permitidos{{ARIARole("group")}}, {{ARIARole("presentation")}}
Interfaz DOM{{domxref("HTMLDListElement")}}
+ +

Atributos

+ +

Los atributos de este elemento incluyen los atributos globales.

+ +

Ejemplos

+ +

Término sencillo y descripción

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Salida:

+ +

Image:HTML-dl1.png

+ +

Múltiples términos, descripción sencilla

+ +
<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Salida:

+ +

Image:HTML-dl2.png

+ +

Término sencillo, múltiples descripciones

+ +
<dl>
+  <dt>Firefox</dt>
+  <dd>
+    A free, open source, cross-platform,
+    graphical web browser developed by the
+    Mozilla Corporation and hundreds of
+    volunteers.
+  </dd>
+  <dd>
+    The Red Panda also known as the Lesser
+    Panda, Wah, Bear Cat or Firefox, is a
+    mostly herbivorous mammal, slightly larger
+    than a domestic cat (60 cm long).
+  </dd>
+
+  <!-- Other terms and descriptions -->
+</dl>
+
+ +

Output:

+ +

Image:HTML-dl3.png

+ +

Múltiples términos y descripciones

+ +

También es posible definir múltiples términos con múltiples descripciones correspondientes, combinando los ejemplos de arriba.

+ +

Metadatos

+ +

Las listas descriptivas son útiles para desplegar metadatos como una lista de pares llave-valor.

+ +
<dl>
+  <dt>Name</dt>
+  <dd>Godzilla</dd>
+  <dt>Born</dt>
+  <dd>1952</dd>
+  <dt>Birthplace</dt>
+  <dd>Japan</dd>
+  <dt>Color</dt>
+  <dd>Green</dd>
+</dl>
+
+ +

Tip: Puede ser útil definir un separador llave-valor en el CSS, como:

+ +
dt::after {
+  content: ": ";
+}
+ +

Encapsulado de grupos nombre-valor en elementos {{HTMLElement("div")}}

+ +

WHATWG HTML permite encapsular cada grupo nombre-valor de un elemento {{HTMLElement("dl")}} en un elemento {{HTMLElement("div")}}. Esto puede ser útil cuando se utilizan microdatos, o cuando atributos globales apliquen a todo el grupo, o por motivos de estilo.

+ +
<dl>
+  <div>
+    <dt>Name</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Born</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Birthplace</dt>
+    <dd>Japan</dd>
+  </div>
+  <div>
+    <dt>Color</dt>
+    <dd>Green</dd>
+  </div>
+</dl>
+
+ +

Notas

+ +

No use este elemento (ni elementos {{HTMLElement("ul")}}) solo para crear sangría en una página. Si bien funciona, es una mala práctica y obscurece el signinifcado de las listas descriptivas.

+ +

Para cambiar la indentación de un término, usa la propiedad {{cssxref("margin")}} de CSS.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}{{Spec2('HTML4.01')}}Definición inicial
+ +

Compatibilidad Web

+ + + +

{{Compat("html.elements.dl")}}

+ +

See also

+ +
    +
  • {{HTMLElement("dt")}} element
    • +
  • {{HTMLElement("dd")}} element
    • +
diff --git a/files/es/web/html/element/dt/index.html b/files/es/web/html/element/dt/index.html new file mode 100644 index 0000000000..7cbf0c3182 --- /dev/null +++ b/files/es/web/html/element/dt/index.html @@ -0,0 +1,103 @@ +--- +title: dt +slug: Web/HTML/Elemento/dt +tags: + - Contenido agrupado HTML + - Definición + - Elemento + - HTML + - Lista de definiciones + - Referencia + - Término + - Término de definición + - dt + - listas +translation_of: Web/HTML/Element/dt +--- +
{{HTMLRef}}
+ +

El  elemento HTML <dt> especifica un término en una descripción o lista de definiciones, y como tal debe utilizarse dentro de un elemento {{HTMLElement("dl")}} Es usualmente seguido por un elemento {{HTMLElement("dd")}}; sin embargo, múltiples elementos <dt>  en un renglón indican diferentes términos los cuales todos son definidos por el siguiente elemento {{HTMLElement("dd")}}.

+ +

El subsecuente elemento {{HTMLElement("dd")}} (Detalles de la descripción) provee la definición u otro texto relacionado asociado con el término especificado utilizando <dt>.

+ +
{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoNinguno.
Contenido permitidoContenido de flujo, pero sin {{HTMLElement("header")}}, {{HTMLElement("footer")}}, contenido seccionado o encabezados descendientes de contenido.
Omisión de TagDebe tener un tag inicial. El tag final puede ser omitido si este elemento es seguido inmediatamente después por otro elemento <dd>,  o si no hay más contenido en el elemento padre.
Padres permitidosAntes de un elemento {{HTMLElement("dt")}} o elemento {{HTMLElement("dd")}}, dentro de un {{HTMLElement("dl")}} o (en WHATWG HTML) un {{HTMLElement("div")}} que esta dentro de un {{HTMLElement("dl")}}.
Roles ARIA permitidosNinguno
Interfaz DOM{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the HTMLSpanElement interface for this element.
+ +

Atributos

+ +

Este elemento solo incluye los atributos globales.

+ +

Ejemplo

+ +

Para ver un ejemplo, vea el proveído por el elemento <dl>.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-dt-element', '<dt>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad del navegador

+ + + +

{{Compat("html.elements.dt")}}

+ +

Vea también

+ +
    +
  • {{HTMLElement("dd")}}, {{HTMLElement("dl")}}
    • +
diff --git a/files/es/web/html/element/em/index.html b/files/es/web/html/element/em/index.html new file mode 100644 index 0000000000..d24fa05f81 --- /dev/null +++ b/files/es/web/html/element/em/index.html @@ -0,0 +1,60 @@ +--- +title: em +slug: Web/HTML/Elemento/em +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/em +--- +
{{HTMLRef}}
+ +

El elemento HTML <em> es el apropiado para marcar con énfasis las partes importantes de un texto. El elemento <em> puede ser anidado, con cada nivel de anidamiento indicando un mayor grado de énfasis.

+ +
{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico, contenido textual o estático, contenido palpable
Contenido permitidoContenido textual o estático.
Tag omission{{no_tag_omission}}
Permitted parentsAny element that accepts phrasing content.
Permitted ARIA rolesAny
DOM interface{{domxref("HTMLElement")}} Up to Gecko 1.9.2 (Firefox 4) inclusive, Firefox implements the {{domxref("HTMLSpanElement")}} interface for this element.
+ +

Atributos

+ +

Este elemento solo incluye los atributos globales.

+ +

Ejemplos

+ +
 <p>
+     <em>El dinero</em> es importante pero <strong>la salud</strong> lo es más.
+ </p>
+
+ +

Comentarios

+ +

em tiene un hermano mayor: strong. em sirve para dar énfasis y strong para dar mucho énfasis

diff --git a/files/es/web/html/element/embed/index.html b/files/es/web/html/element/embed/index.html new file mode 100644 index 0000000000..d489014613 --- /dev/null +++ b/files/es/web/html/element/embed/index.html @@ -0,0 +1,69 @@ +--- +title: embed +slug: Web/HTML/Elemento/embed +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - para_revisar +translation_of: Web/HTML/Element/embed +--- +
Nota: este tema documenta sólo el elemento <embed> que se define como parte de HTML5. No trata las implementaciones anteriores no estandarizadas del elemento <embed>.
+ +

El Elemento HTML Embed ( <embed> ) representa un punto de integración para una aplicación externa o de contenido interactivo (en otras palabras, un plug-in).

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoNinguno; es un elemento vacío.
Omisión de etiquetasDebe tener una etiqueta de inicio, pero no debe tener una etiqueta de cierre.
Elementos primarios permitidosCualquier elemento que acepte contenido estático .
Documento normativoHTML 5, sección 4.8.3
+ +

Atributos

+ +

Este elemento admite los siguientes atributos además de los atributos globales .

+ +
+
{{ htmlattrdef("height") }}
+
La altura del recurso mostrada en píxeles CSS.
+
{{ htmlattrdef("src") }}
+
La dirección URL del recurso que se está incrustado.
+
{{ htmlattrdef("type") }}
+
El tipo MIME que se va a usar para la selección del plug-in para crear una instancia.
+
{{ htmlattrdef("width") }}
+
El ancho del recurso mostrado en píxeles CSS.
+
+ +

Interfaz DOM

+ + + +

Consulta también

+ +

Otros elementos que se utilizan para incrustar el contenido de varios tipos incluyen {{ HTMLElement("audio") }}, {{ HTMLElement("canvas") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("math") }}, {{ HTMLElement("object") }}, {{ HTMLElement("svg") }} y  {{ HTMLElement("video") }}.

+ +

 

+ +

 

+ +

{{ languages ( { "en": "en/HTML/Element/embed" } ) }}

+ +

 

diff --git a/files/es/web/html/element/fieldset/index.html b/files/es/web/html/element/fieldset/index.html new file mode 100644 index 0000000000..bb29878206 --- /dev/null +++ b/files/es/web/html/element/fieldset/index.html @@ -0,0 +1,124 @@ +--- +title: fieldset +slug: Web/HTML/Elemento/fieldset +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/fieldset +--- +

Definición

+ +

El elemento fieldset (grupo de campos) permite organizar en grupos los campos de un formulario.

+ +
+
Sus etiquetas son: <fieldset> y </fieldset> (ambas obligatorias).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: Elemento en bloque.
+
+ +
+
Puede contener: un elemento legend (opcional), y despues cero o más elementos en bloque o en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classlista de clases separadas por espaciosimplícitoidentificador a nivel de documento
diruno de los siguientes:"ltr" o "rtl"implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
de transición
No tiene
Atributovalordescripción
+ +

Ejemplos

+ +

El siguiente código:

+ +
<form>
+
+ <fieldset>
+  <legend>Información Personal</legend>
+  Nombre: <input name='nombre' type='text' tabindex='1'>
+  Apellidos: <input name='apellidos' type='text' tabindex='2'>
+ </fieldset>
+
+ <fieldset>
+  <legend>edad</legend>
+  <input type='checkbox' tabindex='20'
+            name='edad' value='20-39' > 20-39
+  <input type='checkbox' tabindex='21'
+            name='edad' value='40-59' > 40-59
+  <input type='checkbox' tabindex='22'
+            name='edad' value='60-79' > 60-79
+ </fieldset>
+
+</form>
+
diff --git a/files/es/web/html/element/figcaption/index.html b/files/es/web/html/element/figcaption/index.html new file mode 100644 index 0000000000..b212c17632 --- /dev/null +++ b/files/es/web/html/element/figcaption/index.html @@ -0,0 +1,90 @@ +--- +title:
+slug: Web/HTML/Elemento/figcaption +tags: + - Elemento + - Elementos de agrupación de contenido en HTML + - HTML + - Referencia +translation_of: Web/HTML/Element/figcaption +--- +

{{HTMLRef}}

+ +

El elemento HTML <figcaption>  representa un subtítulo o leyenda asociado al contenido del elemento padre {{HTMLElement("figure")}}, pudiendo ser colocado como primer o último hijo. Es importante destacar que el elemento <figcaption> es opcional.

+ +

{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesNinguna
Contenido PermitidoFlow content.
Omisión de etiqueta{{no_tag_omission}}
Elementos padre permitidosEn un  elemento {{HTMLElement("figure")}} el elemento <figcaption> debe ser el primero o el último hijo.
Interfaz DOM{{domxref("HTMLElement")}}
Contento en el que puede ser usadoComo the first o last child de un <figure> element
+ +

Atributos

+ +

Este elemento sólo incluye los global attributes.

+ +

Ejemplos

+ +

Para ejemplos con <figcaption>, por favor ver la página {{HTMLElement("figure")}}.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilidad con los distintos navegadores

+ + + +

{{Compat("html.elements.figcaption")}}

+ +

Ver además

+ +
    +
  • El elemento {{HTMLElement("figure")}}.
    • +
diff --git a/files/es/web/html/element/figure/index.html b/files/es/web/html/element/figure/index.html new file mode 100644 index 0000000000..1ad3d12a07 --- /dev/null +++ b/files/es/web/html/element/figure/index.html @@ -0,0 +1,60 @@ +--- +title: figure +slug: Web/HTML/Elemento/figure +tags: + - HTML + - HTML5 + - 'HTML:Elemento' + - figure + - para_revisar +translation_of: Web/HTML/Element/figure +--- +

El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.

+ +
+

Notas de uso:

+ +
    +
  • Al ser una seccionador raíz, el esbozo del contenido del elemento <figure> está excluido del esbozo principal del documento.
    • +
  • Un título puede estar asociado con el elemento <figure> mediante la inserción de un {{ HTMLElement ("figcaption") }} en su interior (como el primero o el último hijo).
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + + + + + +
TipoSeccionador raíz
Contenido permitidoUn elemento {{ HTMLElement ("figcaption") }}, seguido por contenido dinámico , o contenido dinámico seguido por un elemento{{ HTMLElement ("figcaption") }}.
Omisión de etiquetasNinguna, tanto la etiqueta inicial como la etiqueta de cierre son obligatorias
Elementos primarios permitidosCualquier elemento que acepte elementos dinámicos.
Documento normativoHTML 5, sección 4.5.11
+ +

Atributos

+ +

Este elemento no tiene atributos que no sean los atributos globales, comunes a todos los elementos.

+ +

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Consulta también

+ +

El elemento {{ HTMLElement ("figcaption") }}.

diff --git a/files/es/web/html/element/font/index.html b/files/es/web/html/element/font/index.html new file mode 100644 index 0000000000..e1020b3d95 --- /dev/null +++ b/files/es/web/html/element/font/index.html @@ -0,0 +1,152 @@ +--- +title: font +slug: Web/HTML/Elemento/font +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/font +--- +

Definición

+ +

font -fuente . Indica el tamaño, color, o fuente del texto que contiene.

+ +
+
Sus etiquetas son: <font> y </font> (ambas obligatorias).
+
Está definido como: Elemento desaprobado. +
+
En un doctype transicional está definido como un elemento especial y por lo tanto en línea.
+
+
+
+ +
+
Crea una caja: En línea.
+
Puede contener: Texto, y/o cero o más elementos en línea .
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
lang Información sobre el idioma del contenido del elemento y del valor de sus atributos.Un código de idioma. Por defecto: "desconocido". Lo fija el navegador.
dir Indica la dirección de texto y tablas.Uno de los siguientes: 'ltr' o 'rtl'. Por defecto: En castellano 'ltr'. Lo fija el navegador.
Específicos
No tiene
De transición
sizeTamaño de la fuente. Según una tabla del 1 al 7.Un número entero (ej. 1), o un valor incremental (ej. +1). Por defecto: debe indicarlo el autor.
colorEl color del texto.Un color RGB. Por defecto: Lo fija el navegador.
faceEspecifica la/s fuentes para el texto.Lista de nombres de fuentes separadas por coma. Por defecto: Lo fija el navegador.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un ejemplo simple

+ +

código:

+ +
<p>
+ Texto normal y ...
+ <font size="5" color="#0000ff"> Texto distinto. </font>
+</p>
+
+ +

Resultado:

+ +
+

Texto normal y ... Texto distinto.

+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/footer/index.html b/files/es/web/html/element/footer/index.html new file mode 100644 index 0000000000..fb29106abc --- /dev/null +++ b/files/es/web/html/element/footer/index.html @@ -0,0 +1,71 @@ +--- +title: footer +slug: Web/HTML/Elemento/footer +tags: + - HTML5 + - footer + - para_revisar +translation_of: Web/HTML/Element/footer +--- +

El Elemento HTML Footer (<footer>) representa un pie de página para el contenido de sección más cercano o el elemento  raíz de sección (p.e, su ancestro mas cercano <article>, <aside>, <nav>, <section>,<blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). Un pie de página típicamente contiene información acerca de el autor de la sección, datos de derechos de autor o enlaces a documentos relacionados.

+

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

+
+

Notas de uso:

+
    +
  • Encierra la información acerca del autor en un elemento <address> que puede ser incluido dentro del elemento <footer>.
    • +
  • El  elemento <footer> no es contenido de sección y en consecuencia no introduce una nueva sección en el esquema.
    • +
+
+
+

Contexto de uso

+
+ Editar sección
+ + + + + + + + + + + + + + + + + + + +
Contenido PermitidoContenido de flujo, pero sin descendientes  <footer> o <header>.
Omisión de EtiquetaNinguna, tanto la etiqueta de inicio como la de cierre son obligatorias.
Elementos ancestros permitidos +

Cualquier elemento que acepte contenido de flujo. Note que un elemento <footer> no debe ser un descendiente de los elementos <address>, <header> o de otro elemento <footer>.

+
Documento normativoHTML5, sección 4.4.9
+
+
+

Atributos

+
+ Editar sección
+

Este elemento no tiene otros atributos adicionales a los atributos globales, comunes a todos los elementos.

+
+
+
+

Interfaz DOM

+
+ Editar sección
+

Este elemento implementa la interfaz HTMLElement.

+
+
+

Vea también

+
+ Editar sección
+ +
+
+
+
+

 

diff --git a/files/es/web/html/element/form/index.html b/files/es/web/html/element/form/index.html new file mode 100644 index 0000000000..d0ade4348c --- /dev/null +++ b/files/es/web/html/element/form/index.html @@ -0,0 +1,198 @@ +--- +title: form +slug: Web/HTML/Elemento/form +translation_of: Web/HTML/Element/form +--- +

Resumen

+

El elemento HTML form (<form>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.

+

Es posible usar las pseudo-clasess de CSS :valid e :invalid  para darle estilos a un elemento form.

+

Contexto de uso

+ + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico
Contenido permitidoContenido dinámico, pero sin contener elementos <form>
Omisión de etiquetasNinguna, ambas, la etiqueta de apertura y cierre deben estar presentes
Normative documentHTML5, section 4.10.3 (HTML4.01, section 17.3)
+

Atributos

+

Como cualquier otro elemento HTML, este elemento soporta atributos globales

+
+
+ {{ htmlattrdef("accept") }} {{ HTMLVersionInline(4) }} {{ obsolete_inline() }}
+
+ Una lista separada por comas de los tipos de contenido que el servidor acepta.
+
+

Nota de uso: este atributo ha sido removido en HTML5 y no debe ser usado. En su lugar, usar el atributo accept del elemento específico {{ HTMLElement("input") }}.

+
+
+
+ {{ htmlattrdef("accept-charset") }}
+
+ Una lista de codificación de caracteres que el servidor acepta. La lista puede ser delimitada por espacios o comas. El navegador los usa en el orden en que cada uno son listados. Los valores por defecto es la cadena reservada "UNKNOWN", en tal caso la codificación corresponde a la codificación del documento conteniendo el elemento form.
+

HTML 4: En versiones anteriores de HTML, las diferentes codificaciones de caracteres pueden ser delimitadas por espacios o comas. Este no es más el caso en HTML5, donde sólo los espacios son correctos.

+
+
+ {{ htmlattrdef("action") }}
+
+ La URI de un programa que procesa la información enviada por medio del formulario. Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formaction", "button") }} en un {{ HTMLElement("button") }} o en el elemento{{ HTMLElement("input") }}.
+
+ {{ htmlattrdef("autocomplete") }} {{ HTMLVersionInline(5) }}
+
+ Indica cuales de los controles en este formulario puede tener sus valores automáticamente completados por el navegador. Esta configuración puede ser sobreescrita por un atributo autocomplete en un elemento que pertenezca al formulario: +
    +
  • off: El usuario debe ingresar explicitamente cada valor dentro de cada campo por cada uso, o el documento provee su propio método de autocompletado; el navegador no autocompleta las entradas.
    • +
  • on: El navegador puede completar automáticamente valores basados en lo que el usuario ha ingresado durante entradas previas al formulario.
    • +
+
+

Nota: si se establece autocomplete a un valor de off en un formulario porque el documento provee su propio auto-completado entonces también se debería establecer  autocomplete al valor off para cada uno de los elementos de formulario input que el documento pueda autocompletar {{ anch("Notas para Google Chrome") }}.

+
+
+
+ {{ htmlattrdef("enctype") }}
+
+ Cuando el valor del atributo method es post, este atributo es el  tipo MIME del contenido que es usado para enviar el formulario al servidor.
+
+ Los posibles valores son: +
    +
  • application/x-www-form-urlencoded: El valor por defecto si un atributo no está especificado.
    • +
  • multipart/form-data: Usar este valor si se está usando el elemento {{ HTMLElement("input") }} con el atributo type ajustado a "file".
    • +
  • text/plain (HTML5)
    • +
+

Este valor puede ser sobreescrito por un atributo{{ htmlattrxref("formenctype", "button") }}en un {{ HTMLElement("button") }} o un elemento {{ HTMLElement("input") }}.

+
+
+ {{ htmlattrdef("method") }}
+
+ El método HTTP que el navegador usa para enviar el formulario. Valores posibles son: +
    +
  • post: Corresponde al método POST HTTP ; los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor.
    • +
  • get: Corresponde al método GET HTTP; los datos del formulario son adjuntados a la URI del atributo  action , con un '?' como separador,  y la URI resultante es enviada al servidor. Use este método cuando el formulario no tiene efectos secundarios y contiene solo caracteres ASCII.
    • +
+

Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formmethod", "button") }} en un  {{ HTMLElement("button") }} o elemento {{ HTMLElement("input") }}.

+
+
+ {{ htmlattrdef("name") }}
+
+ El nombre del formulario. En HTML4 ha quedado en desuso (debe usarse un id en su lugar). Debe ser único entre los formularios en un documento y no una cadena vacia en HTML5.
+
+ {{ htmlattrdef("novalidate") }} {{ HTMLVersionInline(5) }}
+
+ Este atributo booleano indica que el formulario no es validado cuando es enviado. Si el atributo no existe {{ htmlattrxref("formnovalidate", "button") }} en un {{ HTMLElement("button") }} o en un elemento  {{ HTMLElement("input") }} que pertenece al formulario.
+
+ {{ htmlattrdef("target") }}
+
+ Un nombre o keyword indicando donde mostrar la respuesta que es recibida después de enviar el formulario. En HTML 4, este es el nombre de, o una palabra clave, para un marco. En HTML5, es un nombre de, o palabra clave para, un contexto de navegación (por ejemplo, tab, window o marco en línea). Las siguientes palabras clave tienen significados especiales: +
    +
  • _self: Carga la respuesta dentro del mismo frame HTML 4 (o en HTML5, contexto de navegación) como el marco actual. Este valor es por defecto si el atributo no es especificado.
    • +
  • _blank: Carga la respuesta dentro de una nueva ventana sin nombre en HTML 4 o un contexto de navegación en HTML5.
    • +
  • _parent: Carga la respuesta en el marco padre del marco actual en HTML 4 o en el contexto de navegación padre del marco actual en HTML5. Si no hay marco padre, esta opción se comporta de la misma manera que _self.
    • +
  • _top: HTML 4: Carga la respuesta en toda la ventana original, cancelando otros marcos.  HTML5: Carga la respuesta en el contexto de navegación de más alto nivel (esto es, el contexto de navegación que es ancestro del actual, y no tiene padre). Si no hay padre, esta opción se comporta igual que _self.
    • +
+

HTML5: Este valor puede ser sobreescrito por un atributo {{ htmlattrxref("formtarget", "button") }} en un elemento {{ HTMLElement("button") }} o{{ HTMLElement("input") }}.

+
+
+

Interfaz DOM

+

Este elemento implementa la interfaz HTMLFormElement.

+

Ejemplos

+
<!-- Formulario simple que enviará una petición GET -->
+<form action="">
+  <label for="GET-name">Nombre:</label>
+  <input id="GET-name" type="text" name="name">
+  <input type="submit" value="Save">
+</form>
+
+<!-- Formulario simple que enviará una petición POST -->
+<form action="" method="post">
+  <label for="POST-name">Nombre:</label>
+  <input id="POST-name" type="text" name="name">
+  <input type="submit" value="Save">
+</form>
+
+<!-- Formulario con conjunto de campos, leyenda y etiqueta -->
+<form action="" method="post">
+  <fieldset>
+    <legend>Título</legend>
+    <input type="radio" name="radio" id="radio"> <label for="radio">Clic aquí</label>
+  </fieldset>
+</form>
+
+

Compatibilidad de navegadores

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico1.0{{ CompatGeckoDesktop("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
atributo novalidate1.0{{ CompatGeckoDesktop("2.0") }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
atributo novalidate{{ CompatUnknown() }}{{ CompatGeckoMobile("2.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

Notas para Google Chrome

+

La interfaz de usuario para peticiones auto-complete en Google Chrome varía dependiendo de si autocomplete está establecido en off en elementos input así como su formulario. Específicamente, cuando un formulario tiene autocomplete establecido en off y sus campos autocomplete de sus elementos input no están establecidos, entonces si el usuario pregunta por sugerencias de autocompletado para el elemento input, Chrome podrá mostrar un mensaje diciendo "El autocompletado ha sido desactivado para este formulario." Por otro lado, si el formulario y el elemento input tienen autocomplete establecido como off, el navegador no mostrará este mensaje. Por esta razón, debe establecer autocomplete en off para cada input que tiene autocompletado personalizado.

+

Consulte también

+

Otros elementos que son usados para crear formularios: {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }},{{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}.

+

{{ languages( { "fr": "fr/HTML/Element/Form" } ) }}

diff --git a/files/es/web/html/element/frame/index.html b/files/es/web/html/element/frame/index.html new file mode 100644 index 0000000000..21df468c42 --- /dev/null +++ b/files/es/web/html/element/frame/index.html @@ -0,0 +1,167 @@ +--- +title: frame +slug: Web/HTML/Elemento/frame +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/frame +--- +

Definición

+ +

frame -marcos . Define la organización de los marcos dentro de la ventana del usuario.

+ +
+
Sus etiquetas son: <frame> (solo tiene una).
+
Está definido como: Elemento para marcos.
+
+ +
+
Crea una caja: .
+
Puede contener: Nada.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
Específicos
No tiene
De transición
longdesc Permite especificar un enlace a una descripción detallada del marco. Inportante para la accesibilidad.Una dirección URI. Por defecto: lo fija el navegador.
name Especifica un nombre para el marco, Esto permite usarlo como destino de los enlaces.. Por defecto: . lo fija el navegador.
src Especifica la localización de los contenidos iniciales del marco.Una dirección URI. Por defecto: lo fija el navegador.
frameborder Indica si el marco tendrá o no borde.Uno de los siguientes: '1' o '0'. Por defecto: '1'.
marginwidth Indica el margen izquierdo y derecho entre contenido y borde.Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.
marginheight Indica el margen superior e inferior entre contenido y borde.Una cantidad de píxeles (cero o más). Por defecto: lo fija el navegador.
noresize Hace que la ventana del marco no sea redimensionable.'noresize'. Por defecto: lo fija el navegador.
scrolling Indica si el marco debe tener o no barra de desplazamiento (scroll).Uno de los sigientes: 'yes', 'no', o 'auto'. Por defecto: 'auto'.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un documento con marcos

+ +

código:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+<title>Un documento simple con marcos</title>
+</head>
+<frameset rows="20%,80%">
+ <frameset cols="20%, 80%">
+   <frame src="http://developer.mozilla.org/wiki-im...irefoxlogo.png">
+   <frame src="http://html.conclase.net/w3c/html401...dtd.html#frame">
+ </frameset>
+ <frame src="http://html.conclase.net/w3c/html401...tml#edef-FRAME">
+</frameset>
+</html>
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/frameset/index.html b/files/es/web/html/element/frameset/index.html new file mode 100644 index 0000000000..cf90335bc6 --- /dev/null +++ b/files/es/web/html/element/frameset/index.html @@ -0,0 +1,157 @@ +--- +title: frameset +slug: Web/HTML/Elemento/frameset +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/frameset +--- +

Definición

+ +

frameset -conjunto de marcos . Define la organización de los marcos dentro de la ventana del usuario.

+ +
+
Sus etiquetas son: <frameset> y </frameset> (ambas obligatorias).
+
Está definido como: Elemento para marcos. +
+
Con un doctype para marcos está definido como contenido de html.
+
+
+
+ +
+
Crea una caja: .
+
Puede y debe contener: Uno o más elementos frameset y frame. además puede contener un elemento noframes.
+
Debe ser contenido por: Elementos html
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
atributodescripciónvalor
Genéricos
title Texto informativo o título del elemento. Suele mostrarse a modo de "tool tip".Texto legible por personas. Sensible a M/m.. Por defecto: Lo fija el navegador.
id Le da un nombre al elemento que lo diferencia de todos los demás del documento.Un nombre único. Sensible a M/m. Por defecto: Lo fija el navegador.
class Asigna nombres de clases al elemento. Por defecto, clases CSS.Lista de clases separadas por espacio en blanco. Sensible a M/m. Por defecto: Lo fija el navegador.
style Permite especificar información de estilo. Por defecto, estilos CSS.Declaraciones de estilo. Por defecto: Lo fija el navegador.
Específicos
No tiene
De transición
rows Asigna la disposición horizontal de los marcos.Lista de longitudes separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una fila), lo fija el navegador..
cols Asigna la disposición horizontal de los marcos.Lista de longitudes separadas por coma, pueden espresarse en píxeles, porcentajes o de forma relativa. Por defecto: 100% (una columna). lo fija el navegador.
atributodescripciónvalor
+ +

Ejemplos de uso

+ +
+

Un documento con marcos

+ +

código:

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
+  "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+<head>
+<title>Un documento simple con marcos</title>
+</head>
+<frameset rows="20%,80%">
+ <frameset cols="20%, 80%">
+   <frame src="http://developer.mozilla.org/wiki-im...irefoxlogo.png">
+   <frame src="http://html.conclase.net/w3c/html401....html#frameset">
+ </frameset>
+ <frame src="http://html.conclase.net/w3c/html401...#edef-FRAMESET">
+ <noframes>
+   <p> este documento contiene los siguientes recursos: </p>
+   <ul>
+     <li> <img src="http://developer.mozilla.org/wiki-im...irefoxlogo.png" alt="el logo de Firefox">
+     </li>
+     <li> La definición de frameset en el
+          <a href="http://html.conclase.net/w3c/html401....html#frameset">
+          dtd de html 4.01 trans.</a>
+     </li>
+     <li> La definición de frameset en la
+          <a href="http://html.conclase.net/w3c/html401...#edef-FRAMESET">
+          especificación de html 4.01</a>
+     </li>
+   </ul>
+ </noframes>
+</frameset>
+</html>
+
+
+ +

Estilo predeterminado

+ +

Notas

+ +

Referencia

+ + + +

 

+ +

Soporte

+ +

Puede consultar esta comparativa: IE 6 - IE 7 - FF 1.5 - OP 9.

+ +

 

+ +
+
+

Estamos ampliando este documento, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta MDC:Como ayudar.

+
+ +


+ Categoría

+ +

interwiki links

+ +

automatismos

diff --git a/files/es/web/html/element/head/index.html b/files/es/web/html/element/head/index.html new file mode 100644 index 0000000000..e0e6e13fe1 --- /dev/null +++ b/files/es/web/html/element/head/index.html @@ -0,0 +1,147 @@ +--- +title: head +slug: Web/HTML/Elemento/head +tags: + - HTML + - 'HTML:Elemento' + - Metadatos de documento HTML + - Todas_las_Categorías +translation_of: Web/HTML/Element/head +--- +
{{HTMLRef}}
+ +

El elemento HTML <head> provee información general (metadatos) acerca del documento, incluyendo su título y enlaces a scripts y hojas de estilos.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoNinguna.
Contenido permitidoSi el elemento es un {{htmlattrxref("srcdoc", "iframe")}} de un {{HTMLElement("iframe")}} , o si la información de título está disponible desde un protocolo de nivel superior, cero o más elementos de metadatos.
+ De otro modo, uno o más elementos de metadatos donde exactamente uno es {{HTMLElement("title")}}.
Omisión de etiquetaLa etiqueta de inicio puede ser omitida si lo primero dentro del elemento head es un elemento.
+ La etiqueta de cierre puede ser omitida si lo primero después del elemento head no es un espacio o un comentario.
Elementos padre permitidosUn elemento {{HTMLElement("html")}}, pues éste es su primer hijo.
Interfaz DOM{{domxref("HTMLHeadElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("profile")}} {{obsolete_inline}}
+
Los URIs de uno o más perfiles de metadatos, separados por un espacio en blanco.
+
+ +

Ejemplo

+ +
<html>
+  <head>
+    <title>Document title</title>
+  </head>
+</html>
+
+ +

Notas

+ +

Navegadores modernos que cumplen con el estándar HTML5 construyen automáticamente un elemento <head> si las etiquetas son omitidas en el código. Este comportamiento no puede ser garantizado en navegadores antiguos.

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}}{{Spec2('HTML WHATWG')}}Sin cambios desde la última versión
{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}}{{Spec2('HTML5 W3C')}}Atributo profile obsoleto
{{SpecName('HTML4.01', 'struct/global.html#h-7.4.1', '<head>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Véase también

+ +
    +
  • Elementos que pueden ser usados dentro de un elemento <head>: {{HTMLElement("title")}}, {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("style")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("noscript")}}
    • +
diff --git a/files/es/web/html/element/header/index.html b/files/es/web/html/element/header/index.html new file mode 100644 index 0000000000..f4bdcd9a75 --- /dev/null +++ b/files/es/web/html/element/header/index.html @@ -0,0 +1,74 @@ +--- +title: header +slug: Web/HTML/Elemento/header +tags: + - HTML5 + - header + - para_revisar +translation_of: Web/HTML/Element/header +--- +

El elemento de HTML Header (<header>) representa un grupo de ayudas introductorias o de navegación. Puede contener algunos elementos de encabezado, así como también un logo, un formulario de búsqueda, un nombre de autor y otros componentes.

+ +
+

Nota de uso:

+ +
    +
  • El elemento <header> no es contenido de sección y, por lo tanto, no introduce una nueva sección en descripción.
    • +
+
+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoContenido dinámico, pero sin un <header> o {{ HTMLElement("footer") }} descendente
Omisión de la etiquetaNo está permitido, tanto la etiqueta de inicio como la de final son obligatorias
+

Elementos padres permitidos

+ +

Roles ARIA permitidos

+ +

Inreface DOM

+ 		+

Cualquier elemento que acepte contenido dinámico. Ten en cuenta que un elemento <header> no debe ser descendiente de un elemento {{ HTMLElement("address") }}, {{ HTMLElement("footer") }} o cualquier otro elemento {{ HTMLElement("header") }}.

+ +

{{ARIARole("group")}}, {{ARIARole("presentation")}}

+ +

{{domxref("HTMLElement")}}

+
Documento normativoHTML5, sección 4.4.8
+ +

Atributos

+ +

Este elemento no tiene otros atributos que no sean los atributos generales, comunes a todos los elementos.

+ +
+
+

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Mira también

+ +
    +
  • Otros elementos relacionados con secciones: {{ HTMLElement("body") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("article") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("hgroup") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("section") }}, {{ HTMLElement("address") }};
    • +
  • Sections and outlines of an HTML5 document.
    • +
+ +

{{ languages( { "en": "en/HTML/Element/header" } ) }}

+
+
diff --git a/files/es/web/html/element/heading_elements/index.html b/files/es/web/html/element/heading_elements/index.html new file mode 100644 index 0000000000..be0dd6801b --- /dev/null +++ b/files/es/web/html/element/heading_elements/index.html @@ -0,0 +1,240 @@ +--- +title: Elementos títulos +slug: Web/HTML/Elemento/Elementos_títulos +tags: + - HTML + - 'HTML:Elemento' + - Referencia + - Secciones HTML + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/Heading_Elements +--- +

Los elementos de encabezado implementan seis niveles de encabezado del documento, <h1> es el más importante, y <h6>, el menos importante. Un elemento de encabezado describe brevemente el tema de la sección que presenta. La información de encabezado puede ser usada por los agentes usuarios, por ejemplo, para construir una tabla de contenidos para un documento automáticamente.

+ +
+

Notas de uso:

+ +
    +
  • No se deben usar niveles inferiores para reducir el tamaño de la fuente: use la propiedad CSS {{cssxref("font-size")}} para eso.
    • +
  • Evite omitir niveles de encabezado: siempre comience con <h1>, después use <h2> y así sucesivamente.
    • +
  • Con el elemento {{HTMLElement("section")}}, debe considerar evitar usar <h1> más de una vez en una página; por costumbre, se usa para mostrar el título de la página, con todos los encabezados debajo de éste comenzando con <h2>. Cuando se usan secciones, debe usarse un <h1> por sección. Véase Definiendo secciones en Secciones y esquema de un documento HTML5 para más información.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de contenidoContenido dinámico, contenido de encabezados, contenido palpable.
Contenido permitidoContenido textual o estático.
Omisión de etiquetas{{no_tag_omission}}
Elementos padres permitidosCualquier elemento que acepte contenido dinámico; no debe usarse como hijo del elemento {{HTMLElement("hgroup")}}, pues éste es obsoleto
Interfaz DOM{{domxref("HTMLHeadingElement")}}
+ +

Atributos

+ +

Estos elementos incluyen los atributos globales.

+ +

El atributo align es obsoleto; no debe usarse.

+ +

Ejemplos

+ +

Todos los encabezados

+ +

El siguiente código muestra todos los niveles de encabezado.

+ +
<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+<h5>Heading level 5</h5>
+<h6>Heading level 6</h6>
+
+ +

Aquí está el resultado de este código:

+ +

{{ EmbedLiveSample('Todos_los_encabezados', '280', '300', '') }}

+ +

Página de ejemplo

+ +

El código siguiente muestra unos pocos encabezados con algo de contenido debajo de ellos.

+ +
<h1>Heading elements</h1>
+<h2>Summary</h2>
+<p>Some text here...</p>
+
+<h2>Examples</h2>
+<h3>Example 1</h3>
+<p>Some text here...</p>
+
+<h3>Example 2</h3>
+<p>Some text here...</p>
+
+<h2>See also</h2>
+<p>Some text here...</p>
+
+ +

Aquí está el resultado de este código:

+ +

{{ EmbedLiveSample('Página_de_ejemplo', '280', '480', '') }}

+ +

Sobre Accesibilidad

+ + + +

Una forma típica de navegación que utilizan las personas no videntes es moverse a través de la pantalla con las etiquetas de encabezado. De esta forma, pueden conocer rápidamente el contenido de la página en poco tiempo; por esta razón es importante prestar mucha atención a nuestras etiquetas de encabezado y no saltearse ningún nivel o podríamos confundir a este usuario.

+ +

No hacer

+ +
<h1>Cabecera nivel 1</h1>
+<h3>Cabecera nivel 3</h3>
+<h4>Cabecera nivel 4</h4>
+
+ +

Sí hacer

+ +
<h1>Cabecera nivel 1</h1>
+<h2>Cabecera nivel 2</h2>
+<h3>Cabecera nivel 3</h3>
+
+ +

Anidar

+ +

Las etiquetas de cabecera pueden anidarse para generar sub-secciones en nuestros documentos. Esto beneficia la organización de la información y también ayuda a los usuarios de lectores de pantalla a conocer mejor la jerarquía de los contenidos.

+ +
    +
  1. h1 Harry Potter + +
      +
    1. h2 Sinopsis
      2. +
    2. h2 Novelas +
        +
      1. h3 Harry Potter y la Piedra Filosofal
        2. +
      2. h3 Harry Potter y la Cámara de los Secretos
        3. +
      3. h3 Harry Potter y el Prisionero de Azkaban
        4. +
      4. h3 Harry Potter y el Cáliz de Fuego
        5. +
      5. h3 Harry Potter y la Orden del Fenix
        6. +
      6. h3 Harry Potter y el Príncipe Mestizo
        7. +
      7. h3 Harry Potter y las Reliquias de la Muerte
        8. +
      +
      3. +
    3. h2 Películas +
        +
      1. h3 Harry Potter y la Piedra Filosofal
        2. +
      2. h3 Harry Potter y la Cámara de los Secretos
        3. +
      3. h3 Harry Potter y el Prisionero de Azkaban
        4. +
      4. h3 Harry Potter y el Cáliz de Fuego
        5. +
      5. h3 Harry Potter y la Orden del Fenix
        6. +
      6. h3 Harry Potter y el Príncipe Mestizo
        7. +
      7. h3 Harry Potter y las Reliquias de la Muerte (Parte 1)
        8. +
      8. h3 Harry Potter y las Reliquias de la Muerte (Parte 2)
        9. +
      +
      4. +
    +
    2. +
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstatusComentarios
{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>')}}{{Spec2('HTML4.01')}} 
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Véase también

+ +
    +
  • {{HTMLElement("p")}}
    • +
  • {{HTMLElement("div")}}
    • +
  • {{HTMLElement("section")}}
    • +
+ +
{{HTMLRef}}
diff --git a/files/es/web/html/element/hgroup/index.html b/files/es/web/html/element/hgroup/index.html new file mode 100644 index 0000000000..18aa804ac2 --- /dev/null +++ b/files/es/web/html/element/hgroup/index.html @@ -0,0 +1,120 @@ +--- +title: hgroup +slug: Web/HTML/Elemento/hgroup +translation_of: Web/HTML/Element/hgroup +--- +

Resumen

+ +

El elemento de grupo de cabeceras HTML (<hgroup>) representa el encabezado de una sección. Define un solo título que participa de la estructura del documento como el encabezado de la sección implícita o explícita a la que pertenece.

+ +

Su texto para el algoritmo de estructura es el texto del primer elemento de encabezado HTML de más alto rango (ip.ej., el primer {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }} o {{ HTMLElement("h6") }} con el número más pequeño entre sus descendientes) y el rango es el rango del mismo elemento de encabezado HTML.

+ +

Por tanto, este elemento agrupa varios encabezados, pero solo el primero contribuye a la estructura del documento. Permite asociar títulos secundarios, como subencabezados, títulos alternativos, e incluso lemas, con el encabezado principal, sin contaminar la estructura del documento.

+ +

Este elemento se fue removido de la especificacion HTML5 (W3C), por favor no usar mas.

+ +

Contexto de uso

+ + + + + + + + + + + + + + + + + + + + +
Contenido permitidoCero o más elementos HTML de encabezado ({{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }})
Omisión de etiquetaNinguna, ambas, la etiqueta de inicio y fin son obligatorias
Elementos padre permitidos +

Cualquier elemento que acepte flujo de contenido.

+
Documento nomativoHTML5, section 4.4.7
+ +

Atributos

+ +

Este elemento no tiene más atributos que los atributos globales, común a todos los elementos.

+ +

Notas de uso

+ +
+

Si bien el elemento <hgroup> se eliminó de la especificación HTML5 (W3C), todavía se mantiene en la versión WHATWG de HTML. De todos modos, está parcialmente implementado en la mayoría de los navegadores, por lo que es improbable que desaparezca.
+ Sin embargo, dado que el propósito principal del elemento <hgroup> es afectar cómo el algoritmo de generación de esquemas de documento muestra los encabezados, pero dicho algoritmo no ha sido implementado por ningún navegador, la semántica de <hgroup> es por el momento solo teórica.
+ La especificación HTML5 (W3C) aconseja entonces cómo maquetar subtítulos, títulos alternativos y lemas sin utilizar <hgroup>.

+
+ +

Interfaz DOM

+ +

Este elemento implementa la interfaz HTMLElement.

+ +

Ejemplos

+ +
<hgroup>
+  <h1>Main title</h1>
+  <h2>Secondary title</h2>
+</hgroup>
+
+ +

Compatibilidad

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaChromeFirefox (Gecko)Internet ExplorerOperaSafari
Soporte básico5{{ CompatGeckoDesktop("2.0") }}9.011.104.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Soporte básico2.2{{ CompatGeckoMobile("2.0") }}9.011.05.0 (iOS 4.2)
+
+ +

Ver también

+ +
    +
  • Otros elementos relacionados a sección: {{ HTMLElement("body") }}, {{ HTMLElement("article") }}, {{ HTMLElement("section") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("address") }};
    • +
  • Secciones y estructuras de un documento HTML5.
    • +
diff --git a/files/es/web/html/element/hr/index.html b/files/es/web/html/element/hr/index.html new file mode 100644 index 0000000000..22b569e245 --- /dev/null +++ b/files/es/web/html/element/hr/index.html @@ -0,0 +1,156 @@ +--- +title:
+slug: Web/HTML/Elemento/hr +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/hr +--- +

Definición

+ +

descripción de uno o dos párrafosEl elemento HTML <hr> representa un cambio de tema entre párrafos (por ejemplo, un cambio de escena en una historia, un cambio de tema en una sección). En versiones previas de HTML representaba una línea horizontal. Aún puede ser representada como una línea horizontal en los navegadores visuales, pero ahora es definida en términos semánticos y no tanto en términos representativos, por tanto para dibujar una línea horizontal se debería usar el CSS apropiado.

+ +
+
Sus etiquetas son: <hr/> (solo tiene una).
+
+ +
+
Crea una caja: en bloque.
+
+ +
+
Está definido como: en bloque.
+
+ +
+
Puede contener: Nada, es un "elemento vacío" del un Glosario.
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AtributoValorDescripción
Genéricos
title TextoImplícitoTítulo consultivo del elemento.
style Declaraciones de estiloImplícitoInformación de estilo en línea.
id Un 'nombre'ImplícitoIdentificador único a nivel de documento.
class Lista de clases CSSimplícitoIdentificador a nivel de documento.
dir Uno de los siguientes: "ltr" o "rtl"ImplícitoDirección del texto.
lang Código de idiomaImplícitoInformación sobre el idioma.
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
align uno de los siguientes: "left", "center", "right".Implícito. Por defecto: "center"Indica la alineación horizontal.
noshade "noshade"ImplícitoElimina el relieve.
size Una cantidad, de píxelesImplícitoIndica la altura de la linea.
width Una cantidad, de píxeles, o un porcentaje.Implícito. por defecto: 100%Indica la anchura.
AtributoValorDescripción
+ +

Ejemplos

+ +
  <p>Este es un parrafo unicamente visual para ver el uso de
+ la etiqueta hr</p>
+  <hr/>
+  <p>Este es el segundo parrafo, separado del primero por la etiqueta hr, que puede
+representarse mediante una línea horizontal.</p>
+
+ +

Muestra

+ +

Este es un parrafo unicamente visual para ver el uso de la etiqueta hr

+ +
+

Este es el segundo parrafo, separado del primero por una linea horizontal

+ +

Comentarios

+ +

 

+ +

Referencia

+ + + +

secciones futuras: == Soporte de los navegadores == == Valores por defecto y visualización en Firefox ==

+ +
+

Este documento está siendo editado, posiblemente contenga defectos y carencias. ¡Estamos en obras!... disculpen las molestias.

+ +

¿Quieres participar en la elaboración de este documento? Para saber como hacerlo consulta MDC:Como ayudar.

+
+ +

 

diff --git a/files/es/web/html/element/html/index.html b/files/es/web/html/element/html/index.html new file mode 100644 index 0000000000..48fd5f469e --- /dev/null +++ b/files/es/web/html/element/html/index.html @@ -0,0 +1,176 @@ +--- +title: +slug: Web/HTML/Elemento/html +tags: + - Element + - Elemento + - HTML + - HTML Root Element + - HTML elemento raiz + - 'HTML:Elemento' + - Reference + - Referencia + - Todas_las_Categorías + - Web +translation_of: Web/HTML/Element/html +--- +

{{HTMLRef}}

+ +

El elemento HTML <html> (o elemento HTML raiz) representa la raiz de un documento HTML. El resto de elementos descienden de este elemento.

+ +

Dado que el elemento <html> es el primero en un documento, aparte de los comentarios, se llama el elemento raíz. A pesar de que esta etiqueta puede ser implicita, o no requerida en {{glossary("HTML")}}, sí es requerida para abrir y cerrar en {{glossary("XHTML")}}.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Categorías de ContenidoNinguna.
Contenido permitidoUn elemento {{HTMLElement("head")}} seguido de un elemento {{HTMLElement("body")}}.
Omisión de etiqueta +

La etiqueta de inicio puede omitirse si lo primero que hay en el interior del elemento <html> no es un comentario.
+ La etiqueta final puede omitirse si el elemento <html> no está inmediatamente seguido por un comentario y contiene un elemento {{HTMLElement("body")}}, o bien que no esté vacío, o cuya etiqueta de inicio está presente.

+
Elementos padres permitidosComo elemento raiz de un documento, o donde se permite un fragmento de subdocumento en un documento compuesto.
Interfaz DOM{{domxref("HTMLHtmlElement")}}
+ +

Atributos

+ +

Este elemento incluye los atributos globales.

+ +
+
{{htmlattrdef("manifest")}} {{obsolete_inline}}
+
Especifica la dirección URL de un manifiesto de recursos que indica los recursos que deben ser almacenados en la caché local. Consulte Uso de la cache de la aplicación para obtener más información.
+
{{htmlattrdef("version")}} {{obsolete_inline}}
+
Especifica la versión {{glossary("DTD", "Document Type Definition")}} de HTML del documento actual. Este atributo no es necesario, porque es redundante con la información de versión en la declaración de tipo de documento.
+
{{htmlattrdef("xmlns")}} 
+
Especifica el Espacio de nombres XML del documento. El valor por defecto es "http://www.w3.org/1999/xhtml". En XHTML es requerido y en HTML es opcional.
+
+ +

Ejemplo

+ +

El DOCTYPE usado en el siguiente ejemplo indica que es un documento HTML5.

+ +
<!DOCTYPE html>
+<html>
+  <head>...</head>
+  <body>...</body>
+</html>
+
+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML WHATWG')}}Sin cambios desde la última instantánea.
{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '<html>')}}{{Spec2('HTML5 W3C')}}Añadido soporte para el atributo manifest (en desuso después).
+ El Atributo version es obsoleto.
{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '<html>')}}{{Spec2('HTML4.01')}}El Atributo version está en desuso
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
manifest{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Ver también

+ +
    +
  • MathML top-level element: {{MathMLElement("math")}}
    • +
  • SVG top-level element: {{SVGElement("svg")}}
    • +
diff --git a/files/es/web/html/element/i/index.html b/files/es/web/html/element/i/index.html new file mode 100644 index 0000000000..e3b318e367 --- /dev/null +++ b/files/es/web/html/element/i/index.html @@ -0,0 +1,112 @@ +--- +title: i +slug: Web/HTML/Elemento/i +tags: + - HTML + - 'HTML:Elemento' + - Todas_las_Categorías +translation_of: Web/HTML/Element/i +--- +

 

+ +

Definición

+ +

Muestra el texto marcado con un estilo en cursiva o italica.

+ +
+
Sus etiquetas son: <i> y </i> (Ambas obligatorias)
+
+ +
+
Crea una caja: en linea.
+
+ +
+
Está definido como: Elemento de estilo de fuente.
+
+ +
+
Puede contener: cero o más elementos en linea
+
+ +

Atributos

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Atributovalordescripción
Genéricos
titletextoimplícitotítulo consultivo del elemento.
stylereglas de estiloimplícitoinformación de estilo en línea.
idIDimplícitoidentificador único a nivel de documento.
classCDATAimplícitolista de clases separadas por espacios en blanco.
dir(ltr|rtl)implícitodirección del texto débil/neutral
langcódigo de idiomaimplícitoinformación sobre el idioma
Eventos: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Específicos
No tiene
De transición
No tiene
Atributovalordescripción
+ +

 

+ +

Ejemplos

+ +
  <p>
+       Texto normal y... <i>Texto 'inclinado'</i>
+  </p>
+
+ +

Comentarios

diff --git a/files/es/web/html/element/iframe/index.html b/files/es/web/html/element/iframe/index.html new file mode 100644 index 0000000000..23d58f54e8 --- /dev/null +++ b/files/es/web/html/element/iframe/index.html @@ -0,0 +1,304 @@ +--- +title: '