diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:46:50 +0100 |
commit | a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch) | |
tree | 5032e6779a402a863654c9d65965073f09ea4182 /files/es/web | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2 translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip |
unslug es: move
Diffstat (limited to 'files/es/web')
-rw-r--r-- | files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html (renamed from files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html (renamed from files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/aria/forms/alerts/index.html (renamed from files/es/web/accessibility/aria/forms/alertas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/aria/forms/basic_form_hints/index.html (renamed from files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/aria/forms/multipart_labels/index.html (renamed from files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/community/index.html (renamed from files/es/web/accesibilidad/comunidad/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/index.html (renamed from files/es/web/accesibilidad/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/understanding_wcag/index.html (renamed from files/es/web/accesibilidad/understanding_wcag/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/understanding_wcag/keyboard/index.html (renamed from files/es/web/accesibilidad/understanding_wcag/teclado/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html (renamed from files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/understanding_wcag/perceivable/index.html (renamed from files/es/web/accesibilidad/understanding_wcag/perceivable/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html (renamed from files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/animation/animation/index.html (renamed from files/es/web/api/animation/animación/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/animation/currenttime/index.html (renamed from files/es/web/api/animation/tiempoactual/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/animation/finished/index.html (renamed from files/es/web/api/animation/terminado/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/battery_status_api/index.html | 39 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/a_basic_ray-caster/index.html (renamed from files/es/web/html/canvas/a_basic_ray-caster/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/index.html (renamed from files/es/web/html/canvas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html (renamed from files/es/web/html/anipular_video_por_medio_de_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/advanced_animations/index.html (renamed from files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html (renamed from files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/basic_animations/index.html (renamed from files/es/web/guide/html/canvas_tutorial/basic_animations/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/basic_usage/index.html (renamed from files/es/web/guide/html/canvas_tutorial/basic_usage/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/compositing/example/index.html (renamed from files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html (renamed from files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/drawing_text/index.html | 67 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html (renamed from files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/index.html (renamed from files/es/web/guide/html/canvas_tutorial/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html (renamed from files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html (renamed from files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/clipboard_api/index.html (renamed from files/es/web/api/api_del_portapapeles/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/console/table/index.html (renamed from files/es/web/api/console/tabla/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/crypto/getrandomvalues/index.html (renamed from files/es/web/api/randomsource/obtenervaloresaleatorios/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/document/cookie/index.html | 119 | ||||
-rw-r--r-- | files/es/web/api/document/createattribute/index.html (renamed from files/es/web/api/document/crearatributo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/document/createevent/index.html (renamed from files/es/web/api/event/createevent/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/document/open/index.html (renamed from files/es/web/api/document/abrir/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/document/pointerlockchange_event/index.html (renamed from files/es/web/events/pointerlockchange/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/events/index.html | 72 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/examples/index.html | 367 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/how_to_create_a_dom_tree/index.html | 130 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/index.html | 91 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/introduction/index.html | 248 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/locating_dom_elements_using_selectors/index.html | 50 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.html | 337 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.html | 93 | ||||
-rw-r--r-- | files/es/web/api/document_object_model/whitespace/index.html | 476 | ||||
-rw-r--r-- | files/es/web/api/documentorshadowroot/getselection/index.html (renamed from files/es/web/api/document/getselection/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/documentorshadowroot/pointerlockelement/index.html (renamed from files/es/web/api/document/pointerlockelement/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/documentorshadowroot/stylesheets/index.html (renamed from files/es/web/api/document/stylesheets/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/domstring/binary/index.html (renamed from files/es/web/api/domstring/cadenas_binarias/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/element/blur_event/index.html (renamed from files/es/web/events/blur/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/element/name/index.html | 80 | ||||
-rw-r--r-- | files/es/web/api/elementcssinlinestyle/style/index.html (renamed from files/es/web/api/htmlelement/style/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/fetch_api/basic_concepts/index.html (renamed from files/es/web/api/fetch_api/conceptos_basicos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/fetch_api/using_fetch/index.html (renamed from files/es/web/api/fetch_api/utilizando_fetch/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/formdata/index.html (renamed from files/es/web/api/xmlhttprequest/formdata/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/formdata/using_formdata_objects/index.html (renamed from files/es/web/guide/usando_objetos_formdata/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/geolocation_api/index.html | 232 | ||||
-rw-r--r-- | files/es/web/api/globaleventhandlers/ongotpointercapture/index.html (renamed from files/es/web/api/element/ongotpointercapture/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/globaleventhandlers/onlostpointercapture/index.html (renamed from files/es/web/api/element/onlostpointercapture/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/globaleventhandlers/onwheel/index.html (renamed from files/es/web/api/element/onwheel/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/history_api/example/index.html | 415 | ||||
-rw-r--r-- | files/es/web/api/history_api/index.html | 228 | ||||
-rw-r--r-- | files/es/web/api/html_drag_and_drop_api/file_drag_and_drop/index.html | 117 | ||||
-rw-r--r-- | files/es/web/api/html_drag_and_drop_api/index.html | 57 | ||||
-rw-r--r-- | files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html | 144 | ||||
-rw-r--r-- | files/es/web/api/htmlelement/accesskey/index.html (renamed from files/es/web/api/element/accesskey/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlelement/animationend_event/index.html (renamed from files/es/web/events/animationend/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlelement/transitioncancel_event/index.html (renamed from files/es/web/events/transitioncancel/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlelement/transitionend_event/index.html (renamed from files/es/web/events/transitionend/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlmediaelement/abort_event/index.html (renamed from files/es/web/events/abort/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlorforeignelement/dataset/index.html (renamed from files/es/web/api/htmlelement/dataset/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlorforeignelement/focus/index.html (renamed from files/es/web/api/htmlelement/focus/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/htmlvideoelement/index.html (renamed from files/es/web/api/elementoshtmlparavideo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html (renamed from files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/indexeddb_api/using_indexeddb/index.html (renamed from files/es/web/api/indexeddb_api/usando_indexeddb/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/media_streams_api/index.html | 445 | ||||
-rw-r--r-- | files/es/web/api/navigator/geolocation/index.html (renamed from files/es/web/api/navigatorgeolocation/geolocation/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/navigatorgeolocation/index.html | 107 | ||||
-rw-r--r-- | files/es/web/api/navigatoronline/online_and_offline_events/index.html (renamed from files/es/web/api/navigatoronline/eventos_online_y_offline/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/node/insertbefore/index.html (renamed from files/es/web/api/node/insertarantes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/node/nodoprincipal/index.html | 34 | ||||
-rw-r--r-- | files/es/web/api/node/parentelement/index.html (renamed from files/es/web/api/node/elementopadre/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/notifications_api/using_the_notifications_api/index.html (renamed from files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/pointer_lock_api/index.html | 284 | ||||
-rw-r--r-- | files/es/web/api/push_api/using_the_push_api/index.html | 433 | ||||
-rw-r--r-- | files/es/web/api/randomsource/index.html | 111 | ||||
-rw-r--r-- | files/es/web/api/server-sent_events/index.html | 99 | ||||
-rw-r--r-- | files/es/web/api/server-sent_events/using_server-sent_events/index.html | 231 | ||||
-rw-r--r-- | files/es/web/api/storage/localstorage/index.html | 136 | ||||
-rw-r--r-- | files/es/web/api/touch_events/index.html | 292 | ||||
-rw-r--r-- | files/es/web/api/vibration_api/index.html (renamed from files/es/web/guide/api/vibration/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/web_audio_api/index.html | 510 | ||||
-rw-r--r-- | files/es/web/api/web_crypto_api/checking_authenticity_with_password/index.html | 30 | ||||
-rw-r--r-- | files/es/web/api/web_speech_api/using_the_web_speech_api/index.html (renamed from files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/web_storage_api/index.html (renamed from files/es/web/api/api_de_almacenamiento_web/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/web_storage_api/using_the_web_storage_api/index.html (renamed from files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/web_workers_api/using_web_workers/index.html (renamed from files/es/web/guide/performance/usando_web_workers/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html (renamed from files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html (renamed from files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/webrtc_api/session_lifetime/index.html | 21 | ||||
-rw-r--r-- | files/es/web/api/webrtc_api/taking_still_photos/index.html | 159 | ||||
-rw-r--r-- | files/es/web/api/websockets_api/writing_websocket_server/index.html (renamed from files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/websockets_api/writing_websocket_servers/index.html (renamed from files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/window/beforeunload_event/index.html (renamed from files/es/web/events/beforeunload/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/window/domcontentloaded_event/index.html (renamed from files/es/web/events/domcontentloaded/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/window/load_event/index.html (renamed from files/es/web/events/load/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/window/url/index.html | 102 | ||||
-rw-r--r-- | files/es/web/api/windowbase64/base64_codificando_y_decodificando/index.html | 345 | ||||
-rw-r--r-- | files/es/web/api/windowbase64/index.html | 109 | ||||
-rw-r--r-- | files/es/web/api/windoweventhandlers/onunload/index.html (renamed from files/es/web/api/globaleventhandlers/onunload/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/windoworworkerglobalscope/atob/index.html (renamed from files/es/web/api/windowbase64/atob/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/windoworworkerglobalscope/clearinterval/index.html (renamed from files/es/web/api/windowtimers/clearinterval/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html (renamed from files/es/web/api/windowtimers/cleartimeout/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/windoworworkerglobalscope/setinterval/index.html (renamed from files/es/web/api/windowtimers/setinterval/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/windoworworkerglobalscope/settimeout/index.html (renamed from files/es/web/api/windowtimers/settimeout/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/windowtimers/index.html | 119 | ||||
-rw-r--r-- | files/es/web/api/xmldocument/async/index.html (renamed from files/es/web/api/document/async/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/api/xmlhttprequest/loadend_event/index.html (renamed from files/es/web/events/loadend/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/-moz-cell/index.html | 11 | ||||
-rw-r--r-- | files/es/web/css/@media/height/index.html (renamed from files/es/web/css/@media/altura/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/@media/resolution/index.html (renamed from files/es/web/css/@media/resolución/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/@viewport/height/index.html | 126 | ||||
-rw-r--r-- | files/es/web/css/@viewport/width/index.html | 123 | ||||
-rw-r--r-- | files/es/web/css/_colon_-moz-placeholder/index.html | 123 | ||||
-rw-r--r-- | files/es/web/css/_colon_-ms-input-placeholder/index.html | 112 | ||||
-rw-r--r-- | files/es/web/css/_colon_autofill/index.html (renamed from files/es/web/css/_colon_-webkit-autofill/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/_colon_is/index.html (renamed from files/es/web/css/_colon_any/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/_colon_not/index.html (renamed from files/es/web/css/_colon_not()/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/_colon_user-invalid/index.html (renamed from files/es/web/css/_colon_-moz-ui-invalid/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/_doublecolon_-moz-placeholder/index.html | 109 | ||||
-rw-r--r-- | files/es/web/css/_doublecolon_-webkit-input-placeholder/index.html | 86 | ||||
-rw-r--r-- | files/es/web/css/_doublecolon_file-selector-button/index.html (renamed from files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/adjacent_sibling_combinator/index.html (renamed from files/es/web/css/selectores_hermanos_adyacentes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/attribute_selectors/index.html (renamed from files/es/web/css/selectores_atributo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/auto/index.html | 50 | ||||
-rw-r--r-- | files/es/web/css/box-flex/index.html (renamed from files/es/web/css/-moz-box-flex/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/box-ordinal-group/index.html (renamed from files/es/web/css/-moz-box-ordinal-group/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/box-pack/index.html (renamed from files/es/web/css/-moz-box-pack/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/column-gap/index.html (renamed from files/es/web/css/grid-column-gap/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/comenzando_(tutorial_css)/index.html | 40 | ||||
-rw-r--r-- | files/es/web/css/comments/index.html (renamed from files/es/web/css/comentarios/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/como_iniciar/index.html | 5 | ||||
-rw-r--r-- | files/es/web/css/como_iniciar/por_que_usar_css/index.html | 107 | ||||
-rw-r--r-- | files/es/web/css/como_iniciar/que_es_css/index.html | 146 | ||||
-rw-r--r-- | files/es/web/css/computed_value/index.html (renamed from files/es/web/css/valor_calculado/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_animations/detecting_css_animation_support/index.html (renamed from files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_animations/using_css_animations/index.html (renamed from files/es/web/css/css_animations/usando_animaciones_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_background_and_borders/border-image_generator/index.html (renamed from files/es/web/css/css_background_and_borders/border-image_generador/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_backgrounds_and_borders/index.html (renamed from files/es/web/css/css_background_and_borders/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html (renamed from files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html (renamed from files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_box_model/index.html (renamed from files/es/web/css/css_modelo_caja/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html (renamed from files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_box_model/mastering_margin_collapsing/index.html (renamed from files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_color/index.html (renamed from files/es/web/css/css_colors/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_colors/color_picker_tool/index.html (renamed from files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_columns/index.html (renamed from files/es/web/css/columnas_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_columns/using_multi-column_layouts/index.html | 68 | ||||
-rw-r--r-- | files/es/web/css/css_conditional_rules/index.html (renamed from files/es/web/css/css_reglas_condicionales/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html (renamed from files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html (renamed from files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html | 191 | ||||
-rw-r--r-- | files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html | 376 | ||||
-rw-r--r-- | files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html (renamed from files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html (renamed from files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_images/using_css_gradients/index.html | 386 | ||||
-rw-r--r-- | files/es/web/css/css_logical_properties/sizing/index.html (renamed from files/es/web/css/css_logical_properties/dimensionamiento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_1_del_contexto_de_apilamiento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_2_del_contexto_de_apilamiento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/ejemplo_3_del_contexto_de_apilamiento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html (renamed from files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_selectors/index.html (renamed from files/es/web/css/selectores_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (renamed from files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_text/index.html (renamed from files/es/web/css/texto_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/css_transitions/using_css_transitions/index.html (renamed from files/es/web/css/transiciones_de_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/font-language-override/index.html (renamed from files/es/web/css/-moz-font-language-override/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/gap/index.html (renamed from files/es/web/css/grid-gap/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/general_sibling_combinator/index.html (renamed from files/es/web/css/selectores_hermanos_generales/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/gradient/index.html (renamed from files/es/web/css/gradiente/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/initial_value/index.html (renamed from files/es/web/css/valor_inicial/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/introducción/boxes/index.html | 335 | ||||
-rw-r--r-- | files/es/web/css/introducción/cascading_and_inheritance/index.html | 125 | ||||
-rw-r--r-- | files/es/web/css/introducción/color/index.html | 364 | ||||
-rw-r--r-- | files/es/web/css/introducción/how_css_works/index.html | 128 | ||||
-rw-r--r-- | files/es/web/css/introducción/index.html | 94 | ||||
-rw-r--r-- | files/es/web/css/introducción/layout/index.html | 384 | ||||
-rw-r--r-- | files/es/web/css/introducción/los_colon_estilos_de_texto/index.html | 156 | ||||
-rw-r--r-- | files/es/web/css/introducción/selectors/index.html | 416 | ||||
-rw-r--r-- | files/es/web/css/mask-clip/index.html (renamed from files/es/web/css/-webkit-mask-clip/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/mask-image/index.html (renamed from files/es/web/css/-webkit-mask-image/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/mask-origin/index.html (renamed from files/es/web/css/-webkit-mask-origin/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/mask-position/index.html (renamed from files/es/web/css/-webkit-mask-position/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/mask-repeat/index.html (renamed from files/es/web/css/-webkit-mask-repeat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/mask/index.html (renamed from files/es/web/css/-webkit-mask/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/media_queries/testing_media_queries/index.html (renamed from files/es/web/guide/css/probando_media_queries/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/media_queries/using_media_queries/index.html | 828 | ||||
-rw-r--r-- | files/es/web/css/mix-blend-mode/index.html (renamed from files/es/web/css/referencia_css/mix-blend-mode/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/normal/index.html | 11 | ||||
-rw-r--r-- | files/es/web/css/percentage/index.html (renamed from files/es/web/css/porcentaje/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/preguntas_frecuentes_sobre_css/index.html | 118 | ||||
-rw-r--r-- | files/es/web/css/primeros_pasos/index.html | 39 | ||||
-rw-r--r-- | files/es/web/css/pseudo-elements/index.html (renamed from files/es/web/css/pseudoelementos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/reference/index.html (renamed from files/es/web/css/referencia_css/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/replaced_element/index.html (renamed from files/es/web/css/elemento_reemplazo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/resolution/index.html (renamed from files/es/web/css/resolución/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/rtl/index.html | 22 | ||||
-rw-r--r-- | files/es/web/css/specificity/index.html (renamed from files/es/web/css/especificidad/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/tools/cubic_bezier_generator/index.html (renamed from files/es/web/css/herramientas/cubic_bezier_generator/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/tools/index.html (renamed from files/es/web/css/herramientas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/url()/index.html (renamed from files/es/web/css/filter-function/url/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/user-modify/index.html (renamed from files/es/web/css/-moz-user-modify/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/css/value_definition_syntax/index.html (renamed from files/es/web/css/sintaxis_definición_de_valor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/ajax/community/index.html (renamed from files/es/web/guide/ajax/comunidad/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/ajax/getting_started/index.html (renamed from files/es/web/guide/ajax/primeros_pasos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.html | 99 | ||||
-rw-r--r-- | files/es/web/guide/dom/index.html | 22 | ||||
-rw-r--r-- | files/es/web/guide/events/creating_and_triggering_events/index.html (renamed from files/es/web/guide/dom/events/creacion_y_activación_eventos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/events/event_handlers/index.html (renamed from files/es/web/guide/dom/events/eventos_controlador/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/events/index.html (renamed from files/es/web/guide/dom/events/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/events/orientation_and_motion_data_explained/index.html (renamed from files/es/web/guide/api/dom/events/orientation_and_motion_data_explained/orientation_and_motion_data_explained/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/html/content_categories/index.html (renamed from files/es/web/guide/html/categorias_de_contenido/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/guide/html/html5/constraint_validation/index.html | 345 | ||||
-rw-r--r-- | files/es/web/guide/html/html5/html5_parser/index.html | 64 | ||||
-rw-r--r-- | files/es/web/guide/html/html5/index.html | 199 | ||||
-rw-r--r-- | files/es/web/guide/html/html5/introduction_to_html5/index.html | 16 | ||||
-rw-r--r-- | files/es/web/guide/html/introduction_alhtml_clone/index.html | 172 | ||||
-rw-r--r-- | files/es/web/guide/html/using_html_sections_and_outlines/index.html | 411 | ||||
-rw-r--r-- | files/es/web/guide/mobile/index.html (renamed from files/es/web/guide/movil/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/atributos_globales/dropzone/index.html | 99 | ||||
-rw-r--r-- | files/es/web/html/attributes/accept/index.html (renamed from files/es/web/html/atributos/accept/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/attributes/autocomplete/index.html (renamed from files/es/web/html/atributos/autocomplete/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/attributes/crossorigin/index.html (renamed from files/es/web/html/atributos_de_configuracion_cors/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/attributes/index.html (renamed from files/es/web/html/atributos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/attributes/min/index.html (renamed from files/es/web/html/atributos/min/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/attributes/minlength/index.html (renamed from files/es/web/html/atributos/minlength/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/attributes/multiple/index.html (renamed from files/es/web/html/atributos/multiple/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/canvas/drawing_graphics_with_canvas/index.html | 162 | ||||
-rw-r--r-- | files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html | 53 | ||||
-rw-r--r-- | files/es/web/html/cors_enabled_image/index.html (renamed from files/es/web/html/imagen_con_cors_habilitado/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/a/index.html (renamed from files/es/web/html/elemento/a/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/abbr/index.html (renamed from files/es/web/html/elemento/abbr/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/acronym/index.html (renamed from files/es/web/html/elemento/acronym/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/address/index.html (renamed from files/es/web/html/elemento/address/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/applet/index.html (renamed from files/es/web/html/elemento/applet/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/area/index.html (renamed from files/es/web/html/elemento/area/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/article/index.html (renamed from files/es/web/html/elemento/article/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/aside/index.html (renamed from files/es/web/html/elemento/aside/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/audio/index.html (renamed from files/es/web/html/elemento/audio/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/b/index.html (renamed from files/es/web/html/elemento/b/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/base/index.html (renamed from files/es/web/html/elemento/base/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/basefont/index.html (renamed from files/es/web/html/elemento/basefont/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/bdi/index.html (renamed from files/es/web/html/elemento/bdi/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/bdo/index.html (renamed from files/es/web/html/elemento/bdo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/bgsound/index.html (renamed from files/es/web/html/elemento/bgsound/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/big/index.html (renamed from files/es/web/html/elemento/big/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/blink/index.html (renamed from files/es/web/html/elemento/blink/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/blockquote/index.html (renamed from files/es/web/html/elemento/blockquote/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/body/index.html (renamed from files/es/web/html/elemento/body/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/br/index.html (renamed from files/es/web/html/elemento/br/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/button/index.html (renamed from files/es/web/html/elemento/button/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/canvas/index.html (renamed from files/es/web/html/elemento/canvas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/caption/index.html (renamed from files/es/web/html/elemento/caption/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/center/index.html (renamed from files/es/web/html/elemento/center/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/cite/index.html (renamed from files/es/web/html/elemento/cite/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/code/index.html (renamed from files/es/web/html/elemento/code/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/col/index.html (renamed from files/es/web/html/elemento/col/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/colgroup/index.html (renamed from files/es/web/html/elemento/colgroup/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/content/index.html (renamed from files/es/web/html/elemento/content/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/data/index.html (renamed from files/es/web/html/elemento/data/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/datalist/index.html (renamed from files/es/web/html/elemento/datalist/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/dd/index.html (renamed from files/es/web/html/elemento/dd/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/del/index.html (renamed from files/es/web/html/elemento/del/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/details/index.html (renamed from files/es/web/html/elemento/details/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/dfn/index.html (renamed from files/es/web/html/elemento/dfn/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/dialog/index.html (renamed from files/es/web/html/elemento/dialog/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/dir/index.html (renamed from files/es/web/html/elemento/dir/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/div/index.html (renamed from files/es/web/html/elemento/div/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/dl/index.html (renamed from files/es/web/html/elemento/dl/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/dt/index.html (renamed from files/es/web/html/elemento/dt/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/em/index.html (renamed from files/es/web/html/elemento/em/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/embed/index.html (renamed from files/es/web/html/elemento/embed/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/fieldset/index.html (renamed from files/es/web/html/elemento/fieldset/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/figcaption/index.html (renamed from files/es/web/html/elemento/figcaption/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/figure/index.html (renamed from files/es/web/html/elemento/figure/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/font/index.html (renamed from files/es/web/html/elemento/font/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/footer/index.html (renamed from files/es/web/html/elemento/footer/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/form/index.html (renamed from files/es/web/html/elemento/form/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/frame/index.html (renamed from files/es/web/html/elemento/frame/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/frameset/index.html (renamed from files/es/web/html/elemento/frameset/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/head/index.html (renamed from files/es/web/html/elemento/head/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/header/index.html (renamed from files/es/web/html/elemento/header/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/heading_elements/index.html (renamed from files/es/web/html/elemento/elementos_títulos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/hgroup/index.html (renamed from files/es/web/html/elemento/hgroup/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/hr/index.html (renamed from files/es/web/html/elemento/hr/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/html/index.html (renamed from files/es/web/html/elemento/html/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/i/index.html (renamed from files/es/web/html/elemento/i/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/iframe/index.html (renamed from files/es/web/html/elemento/iframe/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/image/index.html (renamed from files/es/web/html/elemento/image/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/img/index.html (renamed from files/es/web/html/elemento/img/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/index.html (renamed from files/es/web/html/elemento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/button/index.html (renamed from files/es/web/html/elemento/input/botón/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/checkbox/index.html (renamed from files/es/web/html/elemento/input/checkbox/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/color/index.html (renamed from files/es/web/html/elemento/input/color/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/date/index.html (renamed from files/es/web/html/elemento/input/date/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/datetime/index.html (renamed from files/es/web/html/elemento/input/datetime/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/email/index.html (renamed from files/es/web/html/elemento/input/email/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/hidden/index.html (renamed from files/es/web/html/elemento/input/hidden/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/index.html (renamed from files/es/web/html/elemento/input/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/number/index.html (renamed from files/es/web/html/elemento/input/number/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/password/index.html (renamed from files/es/web/html/elemento/input/password/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/range/index.html (renamed from files/es/web/html/elemento/input/range/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/input/text/index.html (renamed from files/es/web/html/elemento/input/text/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/ins/index.html (renamed from files/es/web/html/elemento/ins/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/isindex/index.html (renamed from files/es/web/html/elemento/isindex/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/kbd/index.html (renamed from files/es/web/html/elemento/kbd/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/keygen/index.html (renamed from files/es/web/html/elemento/keygen/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/label/index.html (renamed from files/es/web/html/elemento/label/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/legend/index.html (renamed from files/es/web/html/elemento/legend/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/li/index.html (renamed from files/es/web/html/elemento/li/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/link/index.html (renamed from files/es/web/html/elemento/link/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/main/index.html (renamed from files/es/web/html/elemento/main/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/map/index.html (renamed from files/es/web/html/elemento/map/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/mark/index.html (renamed from files/es/web/html/elemento/mark/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/marquee/index.html (renamed from files/es/web/html/elemento/marquee/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/menu/index.html (renamed from files/es/web/html/elemento/menu/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/meta/index.html (renamed from files/es/web/html/elemento/meta/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/multicol/index.html (renamed from files/es/web/html/elemento/multicol/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/nav/index.html (renamed from files/es/web/html/elemento/nav/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/nobr/index.html (renamed from files/es/web/html/elemento/nobr/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/noframes/index.html (renamed from files/es/web/html/elemento/noframes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/noscript/index.html (renamed from files/es/web/html/elemento/noscript/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/object/index.html (renamed from files/es/web/html/elemento/object/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/ol/index.html (renamed from files/es/web/html/elemento/ol/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/option/index.html (renamed from files/es/web/html/elemento/option/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/p/index.html (renamed from files/es/web/html/elemento/p/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/param/index.html (renamed from files/es/web/html/elemento/param/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/picture/index.html (renamed from files/es/web/html/elemento/picture/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/pre/index.html (renamed from files/es/web/html/elemento/pre/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/progress/index.html (renamed from files/es/web/html/elemento/progress/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/q/index.html (renamed from files/es/web/html/elemento/q/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/s/index.html (renamed from files/es/web/html/elemento/s/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/samp/index.html (renamed from files/es/web/html/elemento/samp/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/section/index.html (renamed from files/es/web/html/elemento/section/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/select/index.html (renamed from files/es/web/html/elemento/select/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/shadow/index.html (renamed from files/es/web/html/elemento/shadow/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/slot/index.html (renamed from files/es/web/html/elemento/slot/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/small/index.html (renamed from files/es/web/html/elemento/small/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/source/index.html (renamed from files/es/web/html/elemento/source/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/span/index.html (renamed from files/es/web/html/elemento/span/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/strike/index.html (renamed from files/es/web/html/elemento/strike/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/strong/index.html (renamed from files/es/web/html/elemento/strong/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/style/index.html (renamed from files/es/web/html/elemento/style/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/sub/index.html (renamed from files/es/web/html/elemento/sub/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/sup/index.html (renamed from files/es/web/html/elemento/sup/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/table/index.html (renamed from files/es/web/html/elemento/table/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/td/index.html (renamed from files/es/web/html/elemento/td/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/template/index.html (renamed from files/es/web/html/elemento/template/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/textarea/index.html (renamed from files/es/web/html/elemento/textarea/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/th/index.html (renamed from files/es/web/html/elemento/th/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/time/index.html (renamed from files/es/web/html/elemento/time/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/title/index.html (renamed from files/es/web/html/elemento/title/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/tr/index.html (renamed from files/es/web/html/elemento/tr/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/track/index.html (renamed from files/es/web/html/elemento/track/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/tt/index.html (renamed from files/es/web/html/elemento/tt/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/u/index.html (renamed from files/es/web/html/elemento/u/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/ul/index.html (renamed from files/es/web/html/elemento/ul/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/var/index.html (renamed from files/es/web/html/elemento/var/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/video/index.html (renamed from files/es/web/html/elemento/video/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/wbr/index.html (renamed from files/es/web/html/elemento/wbr/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/element/xmp/index.html (renamed from files/es/web/html/elemento/xmp/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/elemento/command/index.html | 152 | ||||
-rw-r--r-- | files/es/web/html/elemento/element/index.html | 110 | ||||
-rw-r--r-- | files/es/web/html/elemento/etiqueta_personalizada_html5/index.html | 46 | ||||
-rw-r--r-- | files/es/web/html/elemento/tipos_de_elementos/index.html | 119 | ||||
-rw-r--r-- | files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html | 281 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/accesskey/index.html (renamed from files/es/web/html/atributos_globales/accesskey/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/autocapitalize/index.html (renamed from files/es/web/html/atributos_globales/autocapitalize/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/class/index.html (renamed from files/es/web/html/atributos_globales/class/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/contenteditable/index.html (renamed from files/es/web/html/atributos_globales/contenteditable/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/contextmenu/index.html (renamed from files/es/web/html/atributos_globales/contextmenu/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/data-_star_/index.html (renamed from files/es/web/html/atributos_globales/data-_star_/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/dir/index.html (renamed from files/es/web/html/atributos_globales/dir/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/draggable/index.html (renamed from files/es/web/html/atributos_globales/draggable/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/hidden/index.html (renamed from files/es/web/html/atributos_globales/hidden/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/id/index.html (renamed from files/es/web/html/atributos_globales/id/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/index.html (renamed from files/es/web/html/atributos_globales/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/is/index.html (renamed from files/es/web/html/atributos_globales/is/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/itemid/index.html (renamed from files/es/web/html/atributos_globales/itemid/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/itemprop/index.html (renamed from files/es/web/html/atributos_globales/itemprop/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/itemref/index.html (renamed from files/es/web/html/atributos_globales/itemref/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/itemscope/index.html (renamed from files/es/web/html/atributos_globales/itemscope/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/lang/index.html (renamed from files/es/web/html/atributos_globales/lang/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/slot/index.html (renamed from files/es/web/html/atributos_globales/slot/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/spellcheck/index.html (renamed from files/es/web/html/atributos_globales/spellcheck/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/style/index.html (renamed from files/es/web/html/atributos_globales/style/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/tabindex/index.html (renamed from files/es/web/html/atributos_globales/tabindex/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/title/index.html (renamed from files/es/web/html/atributos_globales/title/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/translate/index.html (renamed from files/es/web/html/atributos_globales/translate/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/global_attributes/x-ms-acceleratorkey/index.html (renamed from files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/index/index.html (renamed from files/es/web/html/índice/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/inline_elements/index.html (renamed from files/es/web/html/elementos_en_línea/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/la_importancia_de_comentar_correctamente/index.html | 66 | ||||
-rw-r--r-- | files/es/web/html/link_types/index.html (renamed from files/es/web/html/tipos_de_enlaces/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/microdata/index.html (renamed from files/es/web/html/microdatos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/microformats/index.html (renamed from files/es/web/html/microformatos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html | 34 | ||||
-rw-r--r-- | files/es/web/html/reference/index.html (renamed from files/es/web/html/referencia/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/html/usando_audio_y_video_con_html5/index.html | 287 | ||||
-rw-r--r-- | files/es/web/html/using_the_application_cache/index.html (renamed from files/es/web/html/recursos_offline_en_firefox/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/basics_of_http/data_uris/index.html (renamed from files/es/web/http/basics_of_http/datos_uris/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/basics_of_http/identifying_resources_on_the_web/index.html (renamed from files/es/web/http/basics_of_http/identificación_recursos_en_la_web/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/conditional_requests/index.html (renamed from files/es/web/http/peticiones_condicionales/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/connection_management_in_http_1.x/index.html (renamed from files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/cors/index.html (renamed from files/es/web/http/access_control_cors/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/headers/digest/index.html (renamed from files/es/web/api/subtlecrypto/encrypt/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/headers/user-agent/firefox/index.html | 55 | ||||
-rw-r--r-- | files/es/web/http/protocol_upgrade_mechanism/index.html (renamed from files/es/web/http/mecanismo_actualizacion_protocolo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/resources_and_specifications/index.html (renamed from files/es/web/http/recursos_y_especificaciones/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/session/index.html (renamed from files/es/web/http/sesión/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/http/status/413/index.html (renamed from files/es/web/http/status/8080/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/a_re-introduction_to_javascript/index.html (renamed from files/es/web/javascript/una_re-introducción_a_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/about_javascript/index.html (renamed from files/es/web/javascript/acerca_de_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/enumerability_and_ownership_of_properties/index.html (renamed from files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/control_flow_and_error_handling/index.html (renamed from files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/functions/index.html (renamed from files/es/web/javascript/guide/funciones/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/indexed_collections/index.html (renamed from files/es/web/javascript/guide/colecciones_indexadas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/introduction/index.html (renamed from files/es/web/javascript/guide/introducción/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/loops_and_iteration/index.html (renamed from files/es/web/javascript/guide/bucles_e_iteración/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/modules/index.html (renamed from files/es/web/javascript/guide/módulos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/regular_expressions/assertions/index.html (renamed from files/es/web/javascript/guide/regular_expressions/aserciones/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/regular_expressions/character_classes/index.html (renamed from files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/regular_expressions/cheatsheet/index.html (renamed from files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/regular_expressions/groups_and_ranges/index.html (renamed from files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/regular_expressions/quantifiers/index.html (renamed from files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html (renamed from files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/using_promises/index.html (renamed from files/es/web/javascript/guide/usar_promesas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/guide/working_with_objects/index.html (renamed from files/es/web/javascript/guide/trabajando_con_objectos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/inheritance_and_the_prototype_chain/index.html (renamed from files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html | 385 | ||||
-rw-r--r-- | files/es/web/javascript/javascript_technologies_overview/index.html (renamed from files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/memory_management/index.html (renamed from files/es/web/javascript/gestion_de_memoria/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/about/index.html (renamed from files/es/web/javascript/referencia/acerca_de/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/classes/constructor/index.html (renamed from files/es/web/javascript/referencia/classes/constructor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/classes/extends/index.html (renamed from files/es/web/javascript/referencia/classes/extends/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/classes/index.html (renamed from files/es/web/javascript/referencia/classes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/classes/private_class_fields/index.html (renamed from files/es/web/javascript/referencia/classes/private_class_fields/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/classes/public_class_fields/index.html (renamed from files/es/web/javascript/referencia/classes/class_fields/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/classes/static/index.html (renamed from files/es/web/javascript/referencia/classes/static/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html (renamed from files/es/web/javascript/referencia/características_desaprobadas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html (renamed from files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/errors/bad_regexp_flag/index.html (renamed from files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/errors/illegal_character/index.html (renamed from files/es/web/javascript/reference/errors/caracter_ilegal/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html (renamed from files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/errors/strict_non_simple_params/index.html (renamed from files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/arguments/callee/index.html (renamed from files/es/web/javascript/referencia/funciones/arguments/callee/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/arguments/index.html (renamed from files/es/web/javascript/referencia/funciones/arguments/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/arguments/length/index.html (renamed from files/es/web/javascript/referencia/funciones/arguments/length/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/arrow_functions/index.html (renamed from files/es/web/javascript/referencia/funciones/arrow_functions/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/default_parameters/index.html (renamed from files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/get/index.html (renamed from files/es/web/javascript/referencia/funciones/get/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/index.html (renamed from files/es/web/javascript/referencia/funciones/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/method_definitions/index.html (renamed from files/es/web/javascript/referencia/funciones/method_definitions/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/rest_parameters/index.html (renamed from files/es/web/javascript/referencia/funciones/parametros_rest/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/functions/set/index.html (renamed from files/es/web/javascript/referencia/funciones/set/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/aggregateerror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/@@iterator/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/@@species/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/concat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/concat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/copywithin/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/entries/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/entries/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/every/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/every/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/fill/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/fill/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/filter/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/filter/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/find/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/find/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/findindex/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/flat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/flat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/flatmap/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/foreach/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/from/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/from/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/includes/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/includes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/indexof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/isarray/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/join/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/join/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/keys/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/keys/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/lastindexof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/length/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/length/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/map/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/map/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/of/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/of/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/pop/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/pop/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/push/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/push/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/reduce/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/reduceright/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/reverse/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/shift/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/shift/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/slice/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/slice/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/some/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/some/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/sort/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/sort/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/splice/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/splice/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/tosource/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/unshift/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/array/values/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/array/values/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/arraybuffer/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/asyncfunction/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/boolean/boolean/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/boolean/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/boolean/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/boolean/tosource/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getdate/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getday/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getday/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getfullyear/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/gethours/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getminutes/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getmonth/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getseconds/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/gettime/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/getutchours/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/now/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/now/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/parse/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/parse/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/setfullyear/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/setmonth/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/todatestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/toisostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/tojson/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/toutcstring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/date/utc/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/date/utc/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/decodeuri/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/encodeuri/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/error/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/filename/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/filename/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/linenumber/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/message/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/message/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/name/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/name/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/tosource/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/error/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/escape/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/escape/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/eval/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/eval/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/evalerror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/evalerror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/apply/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/apply/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/arguments/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/bind/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/bind/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/call/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/call/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/caller/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/caller/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/displayname/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/function/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/función/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/length/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/length/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/name/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/name/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/tosource/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/function/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/generator/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/generador/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/generator/next/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/generador/next/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/generator/return/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/generador/return/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/generator/throw/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/infinity/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/infinity/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/internalerror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/internalerror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/intl/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/intl/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/intl/numberformat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/isfinite/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/isfinite/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/isnan/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/isnan/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/json/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/json/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/json/parse/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/json/parse/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/json/stringify/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/clear/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/clear/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/delete/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/delete/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/entries/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/entries/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/foreach/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/get/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/get/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/has/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/has/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/keys/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/keys/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/set/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/set/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/size/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/size/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/map/values/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/map/values/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/abs/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/abs/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/acos/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/acos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/acosh/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/asin/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/asin/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/asinh/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/atan/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/atan/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/atan2/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/atanh/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/cbrt/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/ceil/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/cos/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/cos/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/e/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/e/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/exp/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/exp/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/expm1/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/floor/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/floor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/fround/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/fround/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/hypot/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/ln10/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/ln2/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/log/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/log/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/log10/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/log10/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/log10e/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/log2/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/log2/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/log2e/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/max/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/max/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/min/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/min/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/pi/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/pi/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/pow/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/pow/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/random/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/random/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/round/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/round/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/sign/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/sign/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/sin/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/seno/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/sqrt/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/sqrt2/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/tan/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/tan/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/tanh/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/math/trunc/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/nan/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/nan/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/null/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/null/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/isfinite/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/isinteger/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/isnan/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/max_value/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/min_value/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/nan/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/nan/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/parsefloat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/parseint/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/tofixed/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/toprecision/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/number/valueof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/assign/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/assign/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/constructor/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/create/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/create/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/defineproperties/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/defineproperty/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/entries/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/entries/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/freeze/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/fromentries/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/is/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/is/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/isextensible/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/isfrozen/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/issealed/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/keys/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/keys/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/preventextensions/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/proto/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/proto/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/seal/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/seal/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/tosource/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/valueof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/object/values/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/object/values/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/parsefloat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/parseint/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/parseint/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/all/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/all/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/catch/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/finally/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/race/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/race/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/reject/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/resolve/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/promise/then/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/promise/then/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/proxy/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/proxy/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html (renamed from files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/proxy/proxy/index.html (renamed from files/es/web/javascript/reference/global_objects/proxy/handler/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html (renamed from files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html | 131 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/referenceerror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/compile/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/exec/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/regexp/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/test/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/regexp/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/@@iterator/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/add/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/add/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/clear/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/clear/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/delete/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/delete/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/entries/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/entries/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/has/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/has/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/size/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/size/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/set/values/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/set/values/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/anchor/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/big/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/big/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/blink/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/blink/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/bold/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/bold/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/charat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/charat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/charcodeat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/codepointat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/concat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/concat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/endswith/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/fixed/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/fontcolor/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/fontsize/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/includes/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/includes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/indexof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/italics/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/italics/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/lastindexof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/length/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/length/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/link/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/link/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/localecompare/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/match/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/match/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/matchall/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/normalize/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/padstart/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/raw/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/raw/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/repeat/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/replace/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/replace/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/search/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/search/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/slice/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/slice/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/small/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/small/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/split/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/split/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/startswith/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/strike/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/strike/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/sub/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/sub/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/substr/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/substr/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/substring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/substring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/sup/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/sup/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/tolowercase/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/tosource/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/tostring/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/touppercase/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/trim/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/trim/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/trimend/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/string/valueof/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/symbol/for/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/symbol/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/symbol/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/symbol/iterator/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/syntaxerror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/typedarray/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/typedarray/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/uint8array/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/uint8array/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/undefined/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/undefined/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/unescape/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/unescape/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/urierror/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/urierror/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakmap/clear/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakmap/delete/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakmap/get/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakmap/has/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakmap/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakmap/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakmap/set/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/weakset/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/weakset/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/global_objects/webassembly/index.html (renamed from files/es/web/javascript/referencia/objetos_globales/webassembly/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/index.html (renamed from files/es/web/javascript/referencia/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/iteration_protocols/index.html (renamed from files/es/web/javascript/referencia/iteration_protocols/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/lexical_grammar/index.html (renamed from files/es/web/javascript/referencia/gramatica_lexica/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/addition/index.html (renamed from files/es/web/javascript/referencia/operadores/adición/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/assignment/index.html (renamed from files/es/web/javascript/referencia/operadores/asignacion/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/async_function/index.html (renamed from files/es/web/javascript/referencia/operadores/async_function/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/await/index.html (renamed from files/es/web/javascript/referencia/operadores/await/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/class/index.html (renamed from files/es/web/javascript/referencia/operadores/class/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/comma_operator/index.html (renamed from files/es/web/javascript/referencia/operadores/operador_coma/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/conditional_operator/index.html (renamed from files/es/web/javascript/referencia/operadores/conditional_operator/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/decrement/index.html (renamed from files/es/web/javascript/referencia/operadores/decremento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/delete/index.html (renamed from files/es/web/javascript/referencia/operadores/delete/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/destructuring_assignment/index.html (renamed from files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/division/index.html (renamed from files/es/web/javascript/referencia/operadores/division/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/equality/index.html (renamed from files/es/web/javascript/referencia/operadores/comparacion/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/function/index.html (renamed from files/es/web/javascript/referencia/operadores/function/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/function_star_/index.html (renamed from files/es/web/javascript/referencia/operadores/function_star_/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/grouping/index.html (renamed from files/es/web/javascript/referencia/operadores/grouping/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/in/index.html (renamed from files/es/web/javascript/referencia/operadores/in/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/index.html (renamed from files/es/web/javascript/referencia/operadores/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/instanceof/index.html (renamed from files/es/web/javascript/referencia/operadores/instanceof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/new.target/index.html (renamed from files/es/web/javascript/referencia/operadores/new.target/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/new/index.html (renamed from files/es/web/javascript/referencia/operadores/new/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/operator_precedence/index.html (renamed from files/es/web/javascript/referencia/operadores/operator_precedence/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/optional_chaining/index.html (renamed from files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/pipeline_operator/index.html (renamed from files/es/web/javascript/referencia/operadores/pipeline_operator/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/property_accessors/index.html (renamed from files/es/web/javascript/referencia/operadores/miembros/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/remainder/index.html (renamed from files/es/web/javascript/referencia/operadores/resto/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/spread_syntax/index.html (renamed from files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/strict_equality/index.html (renamed from files/es/web/javascript/referencia/operadores/strict_equality/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/subtraction/index.html (renamed from files/es/web/javascript/referencia/operadores/sustracción/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/super/index.html (renamed from files/es/web/javascript/referencia/operadores/super/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/this/index.html (renamed from files/es/web/javascript/referencia/operadores/this/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/typeof/index.html (renamed from files/es/web/javascript/referencia/operadores/typeof/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/void/index.html (renamed from files/es/web/javascript/referencia/operadores/void/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/yield/index.html (renamed from files/es/web/javascript/referencia/operadores/yield/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/operators/yield_star_/index.html (renamed from files/es/web/javascript/referencia/operadores/yield_star_/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/async_function/index.html (renamed from files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/block/index.html (renamed from files/es/web/javascript/referencia/sentencias/block/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/break/index.html (renamed from files/es/web/javascript/referencia/sentencias/break/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/class/index.html (renamed from files/es/web/javascript/referencia/sentencias/class/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/const/index.html (renamed from files/es/web/javascript/referencia/sentencias/const/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/continue/index.html (renamed from files/es/web/javascript/referencia/sentencias/continue/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/debugger/index.html (renamed from files/es/web/javascript/referencia/sentencias/debugger/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/do...while/index.html (renamed from files/es/web/javascript/referencia/sentencias/do...while/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/empty/index.html (renamed from files/es/web/javascript/referencia/sentencias/empty/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/export/index.html (renamed from files/es/web/javascript/referencia/sentencias/export/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/for-await...of/index.html (renamed from files/es/web/javascript/referencia/sentencias/for-await...of/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/for...in/index.html (renamed from files/es/web/javascript/referencia/sentencias/for...in/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/for...of/index.html (renamed from files/es/web/javascript/referencia/sentencias/for...of/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/for/index.html (renamed from files/es/web/javascript/referencia/sentencias/for/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/function/index.html (renamed from files/es/web/javascript/referencia/sentencias/function/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/function_star_/index.html (renamed from files/es/web/javascript/referencia/sentencias/function_star_/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/if...else/index.html (renamed from files/es/web/javascript/referencia/sentencias/if...else/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/import.meta/index.html (renamed from files/es/web/javascript/referencia/sentencias/import.meta/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/import/index.html (renamed from files/es/web/javascript/referencia/sentencias/import/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/index.html (renamed from files/es/web/javascript/referencia/sentencias/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/label/index.html (renamed from files/es/web/javascript/referencia/sentencias/label/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/let/index.html (renamed from files/es/web/javascript/referencia/sentencias/let/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/return/index.html (renamed from files/es/web/javascript/referencia/sentencias/return/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/switch/index.html (renamed from files/es/web/javascript/referencia/sentencias/switch/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/throw/index.html (renamed from files/es/web/javascript/referencia/sentencias/throw/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/try...catch/index.html (renamed from files/es/web/javascript/referencia/sentencias/try...catch/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/var/index.html (renamed from files/es/web/javascript/referencia/sentencias/var/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/while/index.html (renamed from files/es/web/javascript/referencia/sentencias/while/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/statements/with/index.html (renamed from files/es/web/javascript/referencia/sentencias/with/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/strict_mode/index.html (renamed from files/es/web/javascript/referencia/modo_estricto/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/reference/template_literals/index.html (renamed from files/es/web/javascript/referencia/template_strings/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html | 188 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html | 69 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html | 201 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html | 154 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html | 65 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html | 135 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html | 16 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html | 195 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html | 69 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html | 118 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html | 133 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html | 143 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/operadores/aritméticos/index.html | 315 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/operadores/assignment_operators/index.html | 462 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/operadores/bitwise_operators/index.html | 722 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/operadores/comparison_operators/index.html | 262 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html | 296 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/operadores/spread_operator/index.html | 220 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/palabras_reservadas/index.html | 99 | ||||
-rw-r--r-- | files/es/web/javascript/referencia/sentencias/default/index.html | 121 | ||||
-rw-r--r-- | files/es/web/javascript/typed_arrays/index.html (renamed from files/es/web/javascript/vectores_tipados/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/mathml/element/index.html (renamed from files/es/web/mathml/elemento/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/mathml/element/math/index.html (renamed from files/es/web/mathml/elemento/math/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/media/dash_adaptive_streaming_for_html_5_video/index.html (renamed from files/es/web/html/transision_adaptativa_dash/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/opensearch/index.html | 154 | ||||
-rw-r--r-- | files/es/web/performance/optimizing_startup_performance/index.html (renamed from files/es/web/performance/mejorando_rendimienot_inicial/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/progressive_web_apps/developer_guide/installing/index.html (renamed from files/es/web/progressive_web_apps/developer_guide/instalar/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/progressive_web_apps/responsive/media_types/index.html (renamed from files/es/web/css/introducción/media/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/progressive_web_apps/ventajas/index.html | 63 | ||||
-rw-r--r-- | files/es/web/security/csp/csp_policy_directives/index.html | 709 | ||||
-rw-r--r-- | files/es/web/security/csp/index.html | 39 | ||||
-rw-r--r-- | files/es/web/security/csp/introducing_content_security_policy/index.html | 57 | ||||
-rw-r--r-- | files/es/web/security/same-origin_policy/index.html (renamed from files/es/web/security/same-origin_politica/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/security/securing_your_site/turning_off_form_autocompletion/index.html (renamed from files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/svg/applying_svg_effects_to_html_content/index.html | 102 | ||||
-rw-r--r-- | files/es/web/svg/element/glyph/index.html (renamed from files/es/web/svg/element/glifo/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/svg/element/script/index.html (renamed from files/es/web/html/elemento/script/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/svg/svg_1.1_support_in_firefox/index.html | 847 | ||||
-rw-r--r-- | files/es/web/svg/svg_en_firefox_1.5/index.html | 60 | ||||
-rw-r--r-- | files/es/web/svg/tutorial/introduction/index.html (renamed from files/es/web/svg/tutorial/introducción/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/tutorials/index.html (renamed from files/es/web/tutoriales/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/web_components/custom_elements/index.html | 182 | ||||
-rw-r--r-- | files/es/web/xml/xml_introduction/index.html (renamed from files/es/web/xml/introducción_a_xml/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/ancestor-or-self/index.html (renamed from files/es/web/xpath/ejes/ancestor-or-self/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/ancestor/index.html (renamed from files/es/web/xpath/ejes/ancestor/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/attribute/index.html (renamed from files/es/web/xpath/ejes/attribute/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/child/index.html (renamed from files/es/web/xpath/ejes/child/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/descendant-or-self/index.html (renamed from files/es/web/xpath/ejes/descendant-or-self/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/descendant/index.html (renamed from files/es/web/xpath/ejes/descendant/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/following-sibling/index.html (renamed from files/es/web/xpath/ejes/following-sibling/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/following/index.html (renamed from files/es/web/xpath/ejes/following/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/index.html (renamed from files/es/web/xpath/ejes/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/namespace/index.html (renamed from files/es/web/xpath/ejes/namespace/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/parent/index.html (renamed from files/es/web/xpath/ejes/parent/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/preceding-sibling/index.html (renamed from files/es/web/xpath/ejes/preceding-sibling/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/axes/preceding/index.html (renamed from files/es/web/xpath/ejes/preceding/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/functions/contains/index.html (renamed from files/es/web/xpath/funciones/contains/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/functions/index.html (renamed from files/es/web/xpath/funciones/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/functions/substring/index.html (renamed from files/es/web/xpath/funciones/substring/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/functions/true/index.html (renamed from files/es/web/xpath/funciones/true/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html (renamed from files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/apply-imports/index.html (renamed from files/es/web/xslt/apply-imports/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/apply-templates/index.html (renamed from files/es/web/xslt/apply-templates/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/attribute-set/index.html (renamed from files/es/web/xslt/attribute-set/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/attribute/index.html (renamed from files/es/web/xslt/attribute/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/call-template/index.html (renamed from files/es/web/xslt/call-template/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/choose/index.html (renamed from files/es/web/xslt/choose/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/comment/index.html (renamed from files/es/web/xslt/comment/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/copy-of/index.html (renamed from files/es/web/xslt/copy-of/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/copy/index.html (renamed from files/es/web/xslt/copy/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/decimal-format/index.html (renamed from files/es/web/xslt/decimal-format/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/fallback/index.html (renamed from files/es/web/xslt/fallback/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/for-each/index.html (renamed from files/es/web/xslt/for-each/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/if/index.html (renamed from files/es/web/xslt/if/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/import/index.html (renamed from files/es/web/xslt/import/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/include/index.html (renamed from files/es/web/xslt/include/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/key/index.html (renamed from files/es/web/xslt/key/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/message/index.html (renamed from files/es/web/xslt/message/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/namespace-alias/index.html (renamed from files/es/web/xslt/namespace-alias/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/number/index.html (renamed from files/es/web/xslt/number/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/otherwise/index.html (renamed from files/es/web/xslt/otherwise/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/when/index.html (renamed from files/es/web/xslt/when/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/element/with-param/index.html (renamed from files/es/web/xslt/with-param/index.html) | 0 | ||||
-rw-r--r-- | files/es/web/xslt/transforming_xml_with_xslt/index.html (renamed from files/es/web/xslt/transformando_xml_con_xslt/index.html) | 0 |
941 files changed, 8897 insertions, 12615 deletions
diff --git a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html index fad923dd3a..fad923dd3a 100644 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_rol_alertdialog/index.html +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html 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/using_the_aria-required_attribute/index.html index 6d744bb956..6d744bb956 100644 --- a/files/es/web/accessibility/aria/aria_techniques/usando_el_atributo_aria-required/index.html +++ b/files/es/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html diff --git a/files/es/web/accessibility/aria/forms/alertas/index.html b/files/es/web/accessibility/aria/forms/alerts/index.html index 65cc3d3d09..65cc3d3d09 100644 --- a/files/es/web/accessibility/aria/forms/alertas/index.html +++ b/files/es/web/accessibility/aria/forms/alerts/index.html diff --git a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html index 48f2dba3e3..48f2dba3e3 100644 --- a/files/es/web/accessibility/aria/forms/consejos_basicos_para_formularios/index.html +++ b/files/es/web/accessibility/aria/forms/basic_form_hints/index.html diff --git a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html b/files/es/web/accessibility/aria/forms/multipart_labels/index.html index 4bc8cafa67..4bc8cafa67 100644 --- a/files/es/web/accessibility/aria/forms/etiquetas_complejas/index.html +++ b/files/es/web/accessibility/aria/forms/multipart_labels/index.html diff --git a/files/es/web/accesibilidad/comunidad/index.html b/files/es/web/accessibility/community/index.html index 34acce8e6e..34acce8e6e 100644 --- a/files/es/web/accesibilidad/comunidad/index.html +++ b/files/es/web/accessibility/community/index.html diff --git a/files/es/web/accesibilidad/index.html b/files/es/web/accessibility/index.html index ea30623a6d..ea30623a6d 100644 --- a/files/es/web/accesibilidad/index.html +++ b/files/es/web/accessibility/index.html diff --git a/files/es/web/accesibilidad/understanding_wcag/index.html b/files/es/web/accessibility/understanding_wcag/index.html index f58fae9c48..f58fae9c48 100644 --- a/files/es/web/accesibilidad/understanding_wcag/index.html +++ b/files/es/web/accessibility/understanding_wcag/index.html diff --git a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html b/files/es/web/accessibility/understanding_wcag/keyboard/index.html index 239dd6727b..239dd6727b 100644 --- a/files/es/web/accesibilidad/understanding_wcag/teclado/index.html +++ b/files/es/web/accessibility/understanding_wcag/keyboard/index.html diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html b/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html index 2db0f4e251..2db0f4e251 100644 --- a/files/es/web/accesibilidad/understanding_wcag/perceivable/color_contraste/index.html +++ b/files/es/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html diff --git a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html b/files/es/web/accessibility/understanding_wcag/perceivable/index.html index 6bf99039f8..6bf99039f8 100644 --- a/files/es/web/accesibilidad/understanding_wcag/perceivable/index.html +++ b/files/es/web/accessibility/understanding_wcag/perceivable/index.html diff --git a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html b/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html index ffaade2cb1..ffaade2cb1 100644 --- a/files/es/web/accesibilidad/understanding_wcag/etiquetas_de_texto_y_nombres/index.html +++ b/files/es/web/accessibility/understanding_wcag/text_labels_and_names/index.html diff --git a/files/es/web/api/animation/animación/index.html b/files/es/web/api/animation/animation/index.html index 770036b76d..770036b76d 100644 --- a/files/es/web/api/animation/animación/index.html +++ b/files/es/web/api/animation/animation/index.html diff --git a/files/es/web/api/animation/tiempoactual/index.html b/files/es/web/api/animation/currenttime/index.html index acd56f9170..acd56f9170 100644 --- a/files/es/web/api/animation/tiempoactual/index.html +++ b/files/es/web/api/animation/currenttime/index.html diff --git a/files/es/web/api/animation/terminado/index.html b/files/es/web/api/animation/finished/index.html index 5d321ba012..5d321ba012 100644 --- a/files/es/web/api/animation/terminado/index.html +++ b/files/es/web/api/animation/finished/index.html 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 +--- +<p>La <strong>API de Estado de Batería</strong>, también conocida como "<strong>Battery API</strong>", 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.</p> +<p>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.</p> +<h2 id="Ejemplo">Ejemplo</h2> +<p>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.</p> +<pre class="brush: js">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(); +</pre> +<p>Vea también: <a class="external" href="http://dev.w3.org/2009/dap/system-info/battery-status.html#introduction">El ejemplo en las especificaciones</a></p> +<h2 id="Especificaciones">Especificaciones</h2> +<p>{{page("/en-US/docs/Web/API/BatteryManager","Specifications")}}</p> +<h2 id="Compatibilidad_del_Navegador">Compatibilidad del Navegador</h2> +<p>{{page("/en-US/docs/Web/API/BatteryManager","Browser_compatibility")}}</p> +<h2 id="Vea_también">Vea también</h2> +<ul> + <li><a class="external" href="http://hacks.mozilla.org/2012/02/using-the-battery-api-part-of-webapi/">Hacks blog post - Usando la API de Batería</a></li> + <li>{{domxref("BatteryManager")}}</li> + <li>{{domxref("window.navigator.battery","navigator.battery")}}</li> +</ul> diff --git a/files/es/web/html/canvas/a_basic_ray-caster/index.html b/files/es/web/api/canvas_api/a_basic_ray-caster/index.html index 7917541554..7917541554 100644 --- a/files/es/web/html/canvas/a_basic_ray-caster/index.html +++ b/files/es/web/api/canvas_api/a_basic_ray-caster/index.html diff --git a/files/es/web/html/canvas/index.html b/files/es/web/api/canvas_api/index.html index dfdde2bf63..dfdde2bf63 100644 --- a/files/es/web/html/canvas/index.html +++ b/files/es/web/api/canvas_api/index.html diff --git a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html index a3ae61673d..a3ae61673d 100644 --- a/files/es/web/html/anipular_video_por_medio_de_canvas/index.html +++ b/files/es/web/api/canvas_api/manipulating_video_using_canvas/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html index 15ab72ee7f..15ab72ee7f 100644 --- a/files/es/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ b/files/es/web/api/canvas_api/tutorial/advanced_animations/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html index ab76918132..ab76918132 100644 --- a/files/es/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ b/files/es/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/es/web/api/canvas_api/tutorial/basic_animations/index.html index 94c66fb05d..94c66fb05d 100644 --- a/files/es/web/guide/html/canvas_tutorial/basic_animations/index.html +++ b/files/es/web/api/canvas_api/tutorial/basic_animations/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html b/files/es/web/api/canvas_api/tutorial/basic_usage/index.html index 17136d7a7e..17136d7a7e 100644 --- a/files/es/web/guide/html/canvas_tutorial/basic_usage/index.html +++ b/files/es/web/api/canvas_api/tutorial/basic_usage/index.html diff --git a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html b/files/es/web/api/canvas_api/tutorial/compositing/example/index.html index b85b83238c..b85b83238c 100644 --- a/files/es/web/api/canvas_api/tutorial/compositing/ejemplo/index.html +++ b/files/es/web/api/canvas_api/tutorial/compositing/example/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html index 3467533e93..3467533e93 100644 --- a/files/es/web/guide/html/canvas_tutorial/dibujando_formas/index.html +++ b/files/es/web/api/canvas_api/tutorial/drawing_shapes/index.html 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 +--- +<p>{{ Gecko_minversion_header(1.9) }} +{{ Fx_minversion_header(3) }} +El elemento <code><a href="es/HTML/Canvas"><canvas></a></code> permite dibujar texto en él a través de una API experimental de Mozilla. +</p> +<h3 id="API" name="API"> API </h3> +<pre class="eval">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); +</pre> +<h3 id="Notas" name="Notas"> Notas </h3> +<ul><li> El tipo de letra predeterminado es sans-serif 12pt. +</li><li> Estas extensiones de texto no están aún estandarizadas por WHATWG. +</li><li> No necesitas un contexto especial para usarlas; el contexto 2D funciona bien. +</li><li> Todos los dibujos se realizan usando la transformación actual. +</li><li> Revisa el {{ Bug(339553) }} si quieres leer más sobre las implementaciones específicas. +</li></ul> +<h3 id="Demostraciones" name="Demostraciones"> Demostraciones </h3> +<p>Mira algunos ejemplos <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273497">aquí</a>, <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273498">aquí</a>, y <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=273499">aquí</a>. +</p> +<h3 id="Cambiar_el_tipo_de_letra_actual" name="Cambiar_el_tipo_de_letra_actual"> Cambiar el tipo de letra actual </h3> +<p>El atributo <code>mozTextStyle</code> contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las <a href="es/CSS/font">tipografías CSS</a>. +</p><p>Ej: +</p> +<pre class="eval">ctx.mozTextStyle = "20pt Arial" +</pre> +<h3 id="Dibujar_texto" name="Dibujar_texto"> Dibujar texto </h3> +<p>Dibujar es muy sencillo. <code>mozDrawText</code> usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto. +</p> +<pre class="eval">ctx.translate(10, 50); +ctx.fillStyle = "Red"; +ctx.mozDrawText("Sample String"); +</pre> +<h3 id="Medir_texto" name="Medir_texto"> Medir texto </h3> +<p>A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo). +</p> +<pre class="eval">var text = "Sample String"; +var width = ctx.canvas.width; +var len = ctx.mozMeasureText(text); +ctx.translate(len/2, 0); +ctx.mozDrawText(text); +</pre> +<h3 id="Interacci.C3.B3n_texto.2Ftrazo" name="Interacci.C3.B3n_texto.2Ftrazo"> Interacción texto/trazo </h3> +<p>Si quieres tachar un texto, <code>mozDrawText</code> no te lo permite. En cambio, <code>mozPathText</code> agrega el tachado de texto al trazo actual. +</p> +<pre class="eval">ctx.fillStyle = "green"; +ctx.strokeStyle = "black"; +ctx.mozPathText("Sample String"); +ctx.fill() +ctx.stroke() +</pre> +<p>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 <code>mozTextAlongPath</code>. Al contrario de otras funciones de texto, <code>mozTextAlongPath</code> necesita dos argumentos: el texto y qué se quiere hacer con él. <code>mozTextAlongPath</code> 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. +</p><p>Una vez que <code>mozTextAlongPath</code> sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es <code>false</code>, entonces dibuja el carácter como lo haría <code>mozDrawText</code>. Si es <code>true</code>, agrega el carácter al trazo actual, como lo hace <code>mozPathText</code>. Esto puede usarse para crear efectos únicos. +</p><p><br> +</p><p><br> +</p> +<div class="noinclude"> +</div> +{{ 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/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html index 967710de49..967710de49 100644 --- a/files/es/web/guide/html/canvas_tutorial/hit_regions_and_accessibility/index.html +++ b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/index.html b/files/es/web/api/canvas_api/tutorial/index.html index da5b0b3cc9..da5b0b3cc9 100644 --- a/files/es/web/guide/html/canvas_tutorial/index.html +++ b/files/es/web/api/canvas_api/tutorial/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html b/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 145e2734f0..145e2734f0 100644 --- a/files/es/web/guide/html/canvas_tutorial/optimizing_canvas/index.html +++ b/files/es/web/api/canvas_api/tutorial/optimizing_canvas/index.html diff --git a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html index 14ccc9c4a5..14ccc9c4a5 100644 --- a/files/es/web/guide/html/canvas_tutorial/pixel_manipulation_with_canvas/index.html +++ b/files/es/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.html diff --git a/files/es/web/api/api_del_portapapeles/index.html b/files/es/web/api/clipboard_api/index.html index 53e43f6bd5..53e43f6bd5 100644 --- a/files/es/web/api/api_del_portapapeles/index.html +++ b/files/es/web/api/clipboard_api/index.html diff --git a/files/es/web/api/console/tabla/index.html b/files/es/web/api/console/table/index.html index 53f57f5636..53f57f5636 100644 --- a/files/es/web/api/console/tabla/index.html +++ b/files/es/web/api/console/table/index.html diff --git a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html b/files/es/web/api/crypto/getrandomvalues/index.html index b6e09439a9..b6e09439a9 100644 --- a/files/es/web/api/randomsource/obtenervaloresaleatorios/index.html +++ b/files/es/web/api/crypto/getrandomvalues/index.html 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 +--- +<p>{{ApiRef("DOM")}}</p> + +<h3 id="Resumen" name="Resumen">Resumen</h3> + +<p>Con <code>document.cookie</code> se obtienen y definen las <code>cookies</code> asociadas con el documento.</p> + +<h2 id="Sintaxis_2">Sintaxis</h2> + +<h3 id="Sintaxis" name="Sintaxis">Leer todas las cookies accesibles desde una localización</h3> + +<pre class="eval"><em>todasLasCookies</em> = <em>document</em>.cookie; +</pre> + +<p>En el código anterior <em><code>todasLasCookies</code></em> es una cadena que contiene una lista de todas las cookies separadas por punto y coma (en pares <em><code>clave=valor</code></em>). Tenga en cuenta que <var>clave</var> y <var>valor</var> pueden estar rodeadas por espacios en blanco (caracteres espacio y tabulación): de hecho <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a> 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.</p> + +<h3 id="Escribir_una_nueva_cookie">Escribir una nueva cookie</h3> + +<pre class="eval"><em>document</em>.cookie = <em>nuevaCookie</em>;</pre> + +<p class="eval">En el código anterior, <em><code>nuevacookie</code></em> es una cadena de la forma <em><code>clave=valor</code></em>. Tenga en cuenta que solo se puede crear o actualizar una cookie de cada vez mediante este método. Considere también que:</p> + +<ul> + <li class="eval">Cualquiera de los siguientes atributos opcionales se puede escribir después del par clave-valor, especificando la cookie que se va a crear o actualizar, precedidos de un punto y coma. + <ul> + <li class="eval"><code>;path=<em>pat</em>h</code> (p. ej.: '/'. '/midir'). Si no se especifica, por defecto corresponde a la ruta del documento actual.<br> + La ruta debe ser <strong>absoluta</strong> (ver <a href="https://tools.ietf.org/html/rfc6265">RFC 6265</a>). Para más información sobre cómo utilizar rutas relativas, ir a <a href="https://developer.mozilla.org/es/docs/DOM/document.cookie$edit#Using_relative_URLs_in_the_path_parameter">este párrafo</a>.</li> + <li class="eval"><code>;domain=<em>domain</em></code> (p. ej. 'example.com', 'subdomain.example.com'). Si no se especifica, su valor por defecto es la porción de la dirección web de la ubicación actual del archivo. A diferencia de lo que ocurría en las primeras especificaciones, los puntos iniciales de los nombre de dominio se ignoran, pero los navegadores pueden impedir crear cookies que contengan dichos puntos. Si se especifica un dominio, los subdominios siempre son incluidos.</li> + <li class="eval"><code>;max-age=</code><em><code>duración-máxima-en-segundos</code></em> Por ejemplo: 60*60*24*365 para un año.</li> + <li class="eval"><code>;expires=</code><em><code>fecha-en-formato-GMTString</code> </em>Si no se especifica <code>max-age</code> ni <code>expires</code>, la cookie expirará al terminar la sesión actual.</li> + <li class="eval"><code>;secure</code> La cookie sólo será transmitida en un protocolo seguro (HTTPS, SSL). Antes de Chrmoe 52, este atributo podía aparecer con cookes de dominios http.</li> + <li class="eval"><code>;samesite</code> Este atributo impide al navegador enviar esta cookie a través de peticiones cross-site. Los valores posibles son lax o strict. El soporte de este atributo se añadió en Chrome 51. + <ul> + <li class="eval">El valor <em><code>strict</code></em> impide que la cookie sea enviada por el navegador al sitio destino en contexto de navegador cross-site, incluso cuando sigue un enlace regular.</li> + <li class="eval">El valor <em><code>lax</code></em> sólo envía cookies a las peticiones de GET de ALTO NIVEL. Es suficiente para seguir al usuario, pero evitará muchos ataques CSRF.</li> + </ul> + </li> + </ul> + </li> + <li class="eval">El valor de la cookie puede ser evaluado mediante <a href="/es/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent" title="encodeURIComponent">encodeURIComponent()</a> para asegurarse de que dicha cadena no incluya comas, punto y coma, ni espacios en blanco (lo cual no está permitido en el valor de una cookie).</li> + <li class="eval">Algunas implementaciones de agente de usuario soporta los siguientes prefijos de cookie: + <ul> + <li class="eval"><code>__Secure-</code> Señales para el navegador que solo deben incluirse en las perticiones de cookie transmitidas por un canal seguro.</li> + <li class="eval"><code>__Host-</code> Señales del navegador que además de la restricción de uso de cookies que provienen de un origen serugo, el ámbito de la cookie está limitado a un atributo path que proporciona el servidor. Si el servidor omite el atributo path, el directorio de las petición URI está en uso. Tabién las señales del atributo dominio no deben estar presentes, lo cual previene que la cookie sea usada en otros dominis. Para Chrome, el atributo path debe tener el mismo origen.</li> + </ul> + </li> +</ul> + +<div class="geckoVersionNote">{{ gecko_callout_heading("6.0") }}</div> + +<div class="geckoVersionNote">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.</div> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo" name="Ejemplo">Ejemplo # 1: Uso sencillo</h3> + +<pre class="brush: js">document.cookie = "nombre=oeschger"; +document.cookie = "comida_preferida=tripa"; +function alertCookie() { + alert(document.cookie); // visualizar: nombre=oeschger;comida favorita=tripa + +}</pre> + +<pre><button onclick="alertCookie()">Mostrar cookies</button></pre> + +<p>{{EmbedLiveSample('Example_1_Simple_usage', 200, 36)}}</p> + +<h3 id="Ejemplo_2_Obtener_una_cookie_de_ejemplo_llamada_test2">Ejemplo #2: Obtener una cookie de ejemplo llamada <em>test2</em></h3> + +<pre>document.cookie = "test1=Hola"; +document.cookie = "test2=Mundo"; + +var cookieValor = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); + +function alertCookieValue() { + alert(cookieValor); +} +</pre> + +<pre><button onclick="alertCookieValue()">Mostrar valor de cookie</button></pre> + +<p>{{EmbedLiveSample('Example_2_Get_a_sample_cookie_named_test2', 200, 36)}}</p> + +<h3 id="Ejemplo_3_Hacer_algo_una_sola_vez">Ejemplo #3: Hacer algo una sola vez</h3> + +<p>De manera a usar el siguiente código, favor remplace todas las veces la palabra <code>hacerAlgoUnaSolaVez</code> (el nombre de la cookie) con un nombre personalizado.</p> + +<pre>function hazUnaVez() { + if (document.cookie.replace(/(?:(?:^|.*;\s*)<code>hacerAlgoUnaSolaVez</code>\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { + alert("Hacer algo aquí!"); + document.cookie = "<code>hacerAlgoUnaSolaVez</code>=true; expires=Fri, 31 Dec 9999 23:59:59 GMT"; + } +}</pre> + +<pre><button onclick="dhacerUnaVez()">Solo hacer algo una vez</button></pre> + +<p>{{EmbedLiveSample('Example_3_Do_something_only_once', 200, 36)}}</p> + +<h3 id="Notas" name="Notas">Seguridad</h3> + +<p>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 <a href="/en/HTML/Element/iframe" title="en/HTML/Element/iframe">iframe</a> 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 <a href="/en/Same_origin_policy_for_JavaScript" title="Same origin policy for JavaScript">política de mismo origen</a>.</p> + +<h3 id="Notas" name="Notas">Notas</h3> + +<ul> + <li>Empezando con Firefox 2, está disponible un mejor mecanismo de almacenamiento en cliente - <a href="/es/DOM/Storage" title="es/DOM/Storage">WHATWG DOM Storage</a>.</li> + <li>Puedes eliminar una cookie simplemente estableciendo su fecha de expiración a cero.</li> + <li>Cabe mencionar que entre más cookies se tengan, mayor cantidad de datos serán transferidos entre el servidor y el cliente en cada solicitud. Esto reducirá el tiempo entre cada solicitud. Es altamente recomendado que se utilice <a href="/es/DOM/Storage" title="es/DOM/Storage">WHATWG DOM Storage</a> si se van a mantener los datos solamente en el cliente.</li> +</ul> + +<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-8747038">DOM Level 2: HTMLDocument.cookie</a></p> diff --git a/files/es/web/api/document/crearatributo/index.html b/files/es/web/api/document/createattribute/index.html index 22f769d577..22f769d577 100644 --- a/files/es/web/api/document/crearatributo/index.html +++ b/files/es/web/api/document/createattribute/index.html diff --git a/files/es/web/api/event/createevent/index.html b/files/es/web/api/document/createevent/index.html index 7b273c6e33..7b273c6e33 100644 --- a/files/es/web/api/event/createevent/index.html +++ b/files/es/web/api/document/createevent/index.html diff --git a/files/es/web/api/document/abrir/index.html b/files/es/web/api/document/open/index.html index 13b541561d..13b541561d 100644 --- a/files/es/web/api/document/abrir/index.html +++ b/files/es/web/api/document/open/index.html diff --git a/files/es/web/events/pointerlockchange/index.html b/files/es/web/api/document/pointerlockchange_event/index.html index 2d5af4205b..2d5af4205b 100644 --- a/files/es/web/events/pointerlockchange/index.html +++ b/files/es/web/api/document/pointerlockchange_event/index.html 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 +--- +<h2 id="Introduction" name="Introduction">Introducción</h2> + +<p>Este capítulo describe el Modelo de Eventos del DOM. Se describe la interfaz <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event">Event</a>, así como las interfaces para el registro de eventos en los nodos del DOM, y los <a href="/en-US/docs/Web/API/EventTarget.addEventListener">oyentes de eventos</a>, y varios ejemplos más largos muestran cómo se relacionan entre sí las diversas interfaces de eventos.</p> + +<p>Hay un diagrama excelente que explica claramente las tres fases del flujo de eventos a través del DOM en el borrador <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events</a>.</p> + +<p>Vea también el <a href="/en-US/docs/DOM/DOM_Reference/Examples#Example_5:_Event_Propagation">Ejemplo 5: Propagación de eventos</a> en el capítulo de Ejemplos para un ejemplo más detallado de cómo los eventos se mueven a través del DOM.</p> + +<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando oyentes de eventos</h2> + +<p>Hay 3 formas de registrar gestores de eventos para un elemento DOM.</p> + +<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener"><a href="/en-US/docs/Web/API/EventTarget.addEventListener"><code>EventTarget.addEventListener</code></a></h3> + +<pre class="brush: js">// Se supone que myButton es un elemento de botón +myButton.addEventListener('click', function(){alert('Hello world');}, false); +</pre> + +<p>Este es el método que debe usar en las páginas web modernas. </p> + +<p>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.</p> + +<p>Se pueden encontrar más detalles en la página de referencia {{domxref("EventTarget.addEventListener")}}.</p> + +<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">Atributo HTML</a></h3> + +<pre class="brush: html"><button onclick="alert('Hello world!')"> +</pre> + +<p>El código de JavaScript en el atributo pasa el objeto Event por medio del parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> + +<p>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.</p> + +<h3 id="DOM_element_properties" name="DOM_element_properties">Propiedades del elemento DOM</h3> + +<pre class="brush: js">// Se supone que myButton es un elemento de botón +myButton.onclick = function(event){alert('Hello world');}; +</pre> + +<p>La función se puede defirnir para que tome un parámetro <code>event</code>. <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">El valor de retorno se trata de una manera especial, descrita en la especificación HTML</a>.</p> + +<p>El problema con este método es que solo se puede establecer un gestor por elemento y por evento.</p> + +<h2 id="Accediendo_a_las_Interfaces_de_eventos">Accediendo a las Interfaces de eventos</h2> + +<p>Los controladores de eventos se pueden adjuntar a varios objetos, incluidos los elementos DOM, documentos, al <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">objeto window</a>, etc. Cuando se produce un evento, se crea un objeto de evento y se pasa secuencialmente a los oyentes del evento.</p> + +<p>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.</p> + +<pre class="brush: js">function foo(evt) { + // al parámetro evt se le asigna automáticamente el objeto event + alert(evt); +} +table_el.onclick = foo; +</pre> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/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 +--- +<p>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 <code>document</code>.</p> + +<h3 id="Ejemplo_1:_Altos_y_anchos" name="Ejemplo_1:_Altos_y_anchos">Ejemplo 1: Altos y anchos</h3> + +<p>El ejemplo siguiente muestra el uso de las propiedades de alto (<code>height</code>) y ancho (<code>width</code>) junto a imágenes de dimensiones variadas:</p> + +<pre><!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> +</pre> + +<p><code>height</code> y <code>width</code> son además propiedades de los elementos <code>OBJECT</code> y <code>APPLET</code>.</p> + +<h3 id="Ejemplo_2:_Atributos_de_una_imagen" name="Ejemplo_2:_Atributos_de_una_imagen">Ejemplo 2: Atributos de una imagen</h3> + +<pre><!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> +</pre> + +<h3 id="Ejemplo_3:_Manipulaci.C3.B3n_de_estilos" name="Ejemplo_3:_Manipulaci.C3.B3n_de_estilos">Ejemplo 3: Manipulación de estilos</h3> + +<p>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.</p> + +<pre><!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> +</pre> + +<h3 id="Ejemplo_4:_Utilizaci.C3.B3n_de_las_hojas_de_estilo" name="Ejemplo_4:_Utilizaci.C3.B3n_de_las_hojas_de_estilo">Ejemplo 4: Utilización de las hojas de estilo</h3> + +<p>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.</p> + +<pre>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" ); + } + } +</pre> + +<p>Para un documento con una sola hoja de estilo en la cual son definidas las tres reglas siguientes:</p> + +<pre class="eval">BODY { background-color: darkblue; } +P { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>El script sale así:</p> + +<pre class="eval">BODY +P +#LUMPY +</pre> + +<h3 id="Ejemplo_5:_Propagaci.C3.B3n_del_evento" name="Ejemplo_5:_Propagaci.C3.B3n_del_evento">Ejemplo 5: Propagación del evento</h3> + +<p>Este ejemplo muestra de una forma muy simple como los eventos se inician y son gestionados en el DOM. Cuando el cuerpo (<em>body</em> ) de ese documento HTML se carga,<em>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.</em></p> + +<p>Sin embargo, stopEvent también llama a un método del objeto evento, <a href="es/DOM/event.stopPropagation">event.stopPropagation</a>, que mantiene el evento del burbujeo a continuación dentro del DOM. Note que la tabla misma tiene un manejador de evento <a href="es/DOM/element.onclick">onclick</a> 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.</p> + +<pre><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> +</pre> + +<h3 id="Ejemplo_6:_Conseguir_el_estilo_computado_.28getComputedStyle.29" name="Ejemplo_6:_Conseguir_el_estilo_computado_.28getComputedStyle.29">Ejemplo 6: Conseguir el estilo computado (getComputedStyle)</h3> + +<p>Este ejemplo demuestra como el método <a href="es/DOM/window.getComputedStyle">window.getComputedStyle</a> puedes utilizarse para obtener los estilos de un elemento que no son especificados en el atributo <code>style</code> o con JavaScript (por ejemplo, <strong><span class="highlightgreen"><code>element.style.backgroundColor="rgb(173, 216, 230)"</code></span></strong>). Estos últimos tipos de estilos se pueden recuperar con el atributo <a href="es/DOM/element.style">element.style</a>, las propiedades del cual están en la <a href="es/DOM/CSS">lista de propiedades de CSS</a> del DOM.</p> + +<p><code>getComputedStyle()</code> devuelve un objeto <code>ComputedCSSStyleDeclaration</code>, cuyas propiedades de estilo individuales pueden ser referenciadas con este método del objeto <code>getPropertyValue()</code>, el siguiente documento de ejemplo lo muestra.</p> + +<pre><!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> +</pre> + +<h3 id="Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento" name="Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento">Ejemplo 7: Mostrar las propiedades del objeto de evento</h3> + +<p>Este ejemplo utiliza métodos del DOM para mostrar todas las propiedades del <a href="es/DOM/event">evento</a> de <a href="es/DOM/window.onload">window.onload</a> y sus valores en una tabla. Muestra además una cómoda técnica del uso de un bucle<em><strong>for...in</strong></em> para iterar sobre las propiedades de un objeto y conseguir sus valores.</p> + +<p>Las propiedades de los objetos de evento difieren bastante entre los navegadores, la <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">especificación W3C de los eventos del DOM 2</a> enumera las propiedades estándares, sin embargo algunos navegadores han extendido estas diferencias.</p> + +<p>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.</p> + +<pre><!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> +</pre> + +<h3 id="Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM" name="Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM">Ejemplo 8: Utilización del interfaz de tabla del DOM</h3> + +<p>La interfaz HTMLTableElement del DOM provee algunos métodos de conveniencia para crear y manipular tablas. Dos métodos usados frecuentemente son <code><a href="es/DOM/table.insertRow">table.insertRow</a></code> y <code><a href="es/DOM/table/row.insertCell">row.insertCell</a></code>.</p> + +<p>Para agregar una columna y algunas celdas a una tabla existente:</p> + +<pre><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> +</pre> + +<h4 id="Notas" name="Notas">Notas</h4> + +<ul> + <li>Una propiedad <code><a href="es/DOM/element.innerHTML">innerHTML</a></code> de la tabla nunca debería ser utilizada para modificar una tabla, aunque puede utilizarla para escribir una tabla entera o el contenido de una celda.</li> + <li>Si los métodos Core del DOM<code><a href="es/DOM/document.createElement">document.createElement</a></code> y <code><a href="es/DOM/element.appendChild">element.appendChild</a></code> son utilizados para crear columnas y celdas, IE requiere que sean agregadas a un elemento tbody, mientras que otros navegadores permitirán agregar a un elemento de la tabla (las columnas serán agregadas al último elemento tbody).</li> + <li>Hay un número de otros métodos de conveniencia pertenecientes a la <a href="es/DOM/table#M.C3.A9todos">interfaz de tabla</a> que pueden ser utilizados para crear y modificar tablas.</li> +</ul> 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 +--- +<p> </p> +<p>Esta página describe cómo usar el API <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> 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).</p> +<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Creación dinámica de un DOM tree</h3> +<p>Considere el siguiente documento XML:</p> +<pre class="brush: 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> +</pre> +<p>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:</p> +<pre class="brush: js">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); +</pre> +<p>Vea también el <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model"> Capítulo DOM del Tutorial de XUL</a>.</p> +<p>Se puede automatizar la creación de un DOM tree usando el <a href="/en/JXON#JXON_reverse_algorithms" title="en/JXON#JXON_reverse_algorithms">JXON reverse algorithm (algoritmo inverso JXON)</a> en asociación con la siguiente representación JSON:</p> +<pre class="brush: js">{ + "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" + }] + } +} +</pre> +<h3 id="So_what.3F" name="So_what.3F">¿Ahora qué?</h3> +<p>Los DOM trees pueden ser <a href="/en/Using_XPath" title="en/Using_XPath">invocados usando expresiones XPath</a>, convertidos a cadenas de texto, salvados a un archivo local o remoto usando <a href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">XMLSerializer</a> (sin tener que convertirlo primero a una cadena de texto), Enviados mediante <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">POST a un servidor web</a> (via <code>XMLHttpRequest</code>), transformados usando <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, convertidos a un objeto JavaScript a tráves del <a href="/en/JXON" title="en/JXON">algoritmo </a><a href="/en/JXON" title="en/JXON">JXON</a>, etc.</p> +<p>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.</p> +<h2 id="Vea_también">Vea también</h2> +<ul> + <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li> + <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li> + <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li> + <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> + <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> +</ul> +<p>{{ 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" } ) }}</p> 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 +--- +<p> +« <a href="es/Referencia_DOM_de_Gecko">Referencia DOM de Gecko</a> +</p><p><br> +Aquí está la tabla de contenido para la referencia <a href="es/DOM">DOM</a> de <a href="es/Gecko">Gecko</a>. +</p> +<h4 id="Prefacio"> <a href="es/Referencia_DOM_de_Gecko/Prefacio">Prefacio</a> </h4> +<ul><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Sobre_.C3.A9sta_referencia">Sobre ésta referencia</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#A_qui.C3.A9n_est.C3.A1_dirigida_esta_gu.C3.ADa.3F">A quién está dirigida esta guía?</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Qu.C3.A9_es_Gecko.3F">Qué es Gecko?</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Sintaxis_del_API">Sintaxis del API</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Prefacio#Utilizaci.C3.B3n_de_ejemplos">Utilización de ejemplos</a> +</li></ul> +<h4 id="Introducci.C3.B3n"> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n">Introducción</a> </h4> +<ul><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Qu.C3.A9_es_el_DOM.3F">Qué es el DOM?</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#DOM_y_JavaScript">DOM y JavaScript</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#C.C3.B3mo_se_accede_al_DOM.3F">Cómo se accede al DOM?</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Importancia_de_los_tipos_de_datos">Tipos de datos importantes</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Interfaces_del_DOM">Interfaces del DOM</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Introducci%c3%b3n#Probando_el_API_del_DOM">Probando el API del DOM</a> +</li></ul> +<h4 id="La_referencia_al_elemento_.28element.29_de_DOM"> <a href="es/DOM/element">La referencia al elemento (<code>element</code>) de DOM</a> </h4> +<ul><li> <a href="es/DOM/element#Introducci.C3.B3n">Introducción</a> +</li><li> <a href="es/DOM/element#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/element#M.C3.A9todos">Métodos</a> +</li><li> <a href="es/DOM/element#Manejo_de_los_eventos">Manejo de los eventos</a> +</li></ul> +<h4 id="La_referencia_a_la_ventana_.28window.29_de_DOM"> <a href="es/DOM/window">La referencia a la ventana (<code>window</code>) de DOM</a> </h4> +<ul><li> <a href="es/DOM/window#Introducci.C3.B3n">Introducción</a> +</li><li> <a href="es/DOM/window#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/window#M.C3.A9todos">Métodos</a> +</li><li> <a href="es/DOM/window#Manejo_de_los_eventos">Manejo de los eventos</a> +</li></ul> +<h4 id="La_referencia_al_document_de_DOM"> <a href="es/DOM/document">La referencia al <code>document</code> de DOM</a> </h4> +<ul><li> <a href="es/DOM/document#Introducci.C3.B3n">Introducción</a> +</li><li> <a href="es/DOM/document#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/document#M.C3.A9todos">Métodos</a> +</li></ul> +<h4 id="La_referencia_al_event_de_DOM"> <a href="es/DOM/event">La referencia al <code>event</code> de DOM</a> </h4> +<ul><li> <a href="es/DOM/event#Introducci.C3.B3n">Introducción</a> +</li><li> <a href="es/DOM/event#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/event#M.C3.A9todos">Métodos</a> +</li></ul> +<h4 id="La_referencia_al_estilo_.28style.29_de_DOM"> <a href="es/DOM/style">La referencia al estilo (<code>style</code>) de DOM</a> </h4> +<ul><li> <a href="es/DOM/style#Notas">Notas</a> +</li><li> <a href="es/DOM/style#Material_que_se_mover.C3.A1_a_otras_p.C3.A1ginas"> Material que se moverá a otras páginas</a> +</li></ul> +<h4 id="La_referencia_al_rango_.28range.29_de_DOM"> <a href="es/DOM/range">La referencia al rango (<code>range</code>) de DOM</a> </h4> +<ul><li> <a href="es/DOM/range#Introducci.C3.B3n">Introducción</a> +</li><li> <a href="es/DOM/range#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/range#M.C3.A9todos">Métodos</a> +</li></ul> +<h4 id="La_referencia_a_la_selecci.C3.B3n_.28selection.29_de_DOM"> <a href="es/DOM/selection">La referencia a la selección (<code>selection</code>) de DOM</a> </h4> +<ul><li> <a href="es/DOM/Selection#Introducci.C3.B3n">Introducción</a> +</li><li> <a href="es/DOM/Selection#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/Selection#M.C3.A9todos">Métodos</a> +</li></ul> +<h4 id="Interfaz_del_elemento_formulario_.28form.29_en_HTML"> <a href="es/DOM/form">Interfaz del elemento formulario (<code>form</code>) en HTML</a> </h4> +<ul><li> <a href="es/DOM/form#Interfaz_del_elemento_formulario_en_HTML">Interfaz del elemento formulario en HTML</a> +</li><li> <a href="es/DOM/form#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/form#M.C3.A9todos">Métodos</a> +</li></ul> +<h4 id="Interfaz_del_elemento_tabla_.28table.29_en_HTML"> <a href="es/DOM/table">Interfaz del elemento tabla (<code>table</code>) en HTML</a> </h4> +<ul><li> <a href="es/DOM/table#Interfaz_del_elemento_tabla_en_HTML">Interfaz del elemento tabla en HTML</a> +</li><li> <a href="es/DOM/table#Propiedades">Propiedades</a> +</li><li> <a href="es/DOM/table#M.C3.A9todos">Métodos</a> +</li></ul> +<h4 id="Ejemplos_DOM"> <a href="es/Referencia_DOM_de_Gecko/Ejemplos">Ejemplos DOM</a> </h4> +<ul><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_1:_Altos_y_anchos">Ejemplo 1: Altos y anchos</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_2:_Atributos_de_una_imagen">Ejemplo 2: Atributos de una imagen</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_3:_Manipulaci.C3.B3n_de_estilos">Ejemplo 3: Manipulación de estilos</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_4:_Utilizaci.C3.B3n_de_la_hoja_de_estilo">Ejemplo 4: Utilización de la hoja de estilo</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_5:_Propagaci.C3.B3n_del_evento">Ejemplo 5: Propagación del evento</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_6:_Conseguir_el_estilo_computado">Ejemplo 6: Conseguir el estilo computado (<code>getComputedStyle</code>)</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_7:_Mostrar_las_propiedades_del_objeto_de_evento">Ejemplo 7: Mostrar las propiedades del objeto de evento</a> +</li><li> <a href="es/Referencia_DOM_de_Gecko/Ejemplos#Ejemplo_8:_Utilizaci.C3.B3n_del_interfaz_de_tabla_del_DOM">Ejemplo 8: Utilización del interfaz de tabla del DOM</a> +</li></ul> +<div class="originaldocinfo"> +<h3 id="Informaci.C3.B3n_sobre_el_documento_original"> Información sobre el documento original </h3> +<ul><li> Última actualización: 22 de Octubre de 2006 +</li></ul> +</div> +{{ 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 +--- +<p> </p> + +<p>Ésta sección da una breve introducción conceptual del <a href="es/DOM">DOM</a>: qué es, cómo proporciona la estructura para los documentos <a href="es/HTML">HTML</a> y <a href="es/XML">XML</a>, cómo se accede a él, y cómo esta <a href="https://es.wikipedia.org/wiki/Interfaz_de_programaci%C3%B3n_de_aplicaciones">"API"</a> presenta la información de referencia y ejemplos.</p> + +<h2 id=".C2.BFQu.C3.A9_es_el_DOM.3F" name=".C2.BFQu.C3.A9_es_el_DOM.3F">¿Qué es el DOM?</h2> + +<p>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.</p> + +<p>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.</p> + +<p>El <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> 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.</p> + +<p>Por ejemplo, el DOM de W3C especifica que el método <code>getElementsByTagName</code> en el código de abajo debe devolver una lista de todos los elementos <code><p></code> del documento:</p> + +<pre class="brush: js">paragraphs<font><font> = document.getElementsByTagName ("p");</font></font> +// paragraphs[0] es el primer elemento <p> +// paragraphs[1] es el segundo elemento <p>, etc.<font><font> +alert (</font></font>paragraphs<font><font> [0].nodeName);</font></font> +</pre> + +<p>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 <code>document</code> representa al documento mismo, el objeto <code>table</code> hace funcionar la interfaz especial <code>HTMLTableElement</code> 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.</p> + +<h2 id="DOM_y_JavaScript" name="DOM_y_JavaScript"><font><font><font><font>DOM y JavaScript</font></font></font></font></h2> + +<p>El ejemplo corto de abajo, como casi todos los ejemplos de esta referencia, es <a href="es/JavaScript">JavaScript</a>. Es decir, es <em>escrito</em> en JavaScript pero <em>utiliza</em> 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.</p> + +<p>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í:</p> + +<p>API(web o página XML) = DOM + JS(lenguaje de script)</p> + +<p>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:</p> + +<pre class="brush: python line-numbers language-python"><code class="language-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");</code></pre> + +<h2 id=".C2.BFC.C3.B3mo_se_accede_al_DOM.3F" name=".C2.BFC.C3.B3mo_se_accede_al_DOM.3F">¿Cómo se accede al DOM?</h2> + +<p>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.</p> + +<p>Cuando se crea un script –esté en un elemento <code><SCRIPT></code> 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 <code><a href="es/DOM/document">document</a></code> o <code><a href="es/DOM/window">window</a></code>, 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 <code><a href="es/DOM/window.alert">alert()</a></code> desde el objeto <code><a href="es/DOM/window">window</a></code>, o permite métodos DOM más sofisticados para crear realmente un nuevo contenido, como en el largo ejemplo de más abajo.</p> + +<pre class="brush: html"><body onload="window.alert('Bienvenido a mi página!');"> +</pre> + +<p>Aparte del elemento <code><script></code> 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 <code>H1</code>, le pone texto y después lo agrega al árbol del documento:</p> + +<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span></code><code class="language-html"> + </code><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="comment token">// ejecuta esta función cuando se cargue el documento</span> + window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + + <span class="comment token">// </span></span></code>crea dinámicamente un par de elementos HTML en una página vacia<code class="language-html"><span class="language-javascript script token"> + <span class="keyword token">var</span> heading <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"h1"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> heading_text <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createTextNode</span><span class="punctuation token">(</span><span class="string token">"</span></span></code>el texto que desee<code class="language-html"><span class="language-javascript script token"><span class="string token">"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + heading<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading_text<span class="punctuation token">)</span><span class="punctuation token">;</span> + document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>heading<span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Tipos_de_datos_importantes" name="Tipos_de_datos_importantes">Tipos de datos importantes</h2> + +<p>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 <code>elements</code>, a una lista de nodos como <code>nodeLists</code> (o simples <code>elementos</code>) y a nodos de <code>atributo</code> como <code>attributes</code>.</p> + +<p>La siguiente tabla describe brevemente estos tipos de datos.</p> + +<table> + <tbody> + <tr> + <td><code>document</code></td> + <td>Cuando un miembro devuelve un objeto del tipo <code>document</code> (por ejemplo, la propiedad <strong>ownerDocument</strong> de un elemento devuelve el documento "<code>document</code>" al cual pertenece), este objeto es la raíz del objeto documento en sí mismo. El capítulo <a href="es/DOM/documento">La referencia al documento (<code>document</code>) de DOM</a> lo explica con más detalles.</td> + </tr> + <tr> + <td><code>element</code></td> + <td><code>element</code> se refiere a un elemento o a un nodo de tipo de elemento "<code>element</code>" devuelto por un miembro del API de DOM. Dicho de otra manera, por ejemplo, el método <code>document.createElement()</code> devuelve un objeto referido a un <code>nodo</code>, lo que significa que este método devuelve el elemento que acaba de ser creado en el DOM. Los objetos <code>element</code> ponen en funcionamiento a la interfaz <code>Element</code> del DOM y también a la interfaz de nodo "<code>Node</code>" más básica, las cuales son incluidas en esta referencia.</td> + </tr> + <tr> + <td><code>nodeList</code></td> + <td>Una "<code>nodeList</code>" es una serie de elementos, parecido a lo que devuelve el método <code>document.getElementsByTagName()</code>. Se accede a los items de la <code>nodeList</code> de cualquiera de las siguientes dos formas: + <ul> + <li><font><font><font><font>list.item (1)</font></font></font></font></li> + <li><font><font>lista {{mediawiki.external (1)}}</font></font></li> + </ul> + + <p>Ambas maneras son equivalentes. En la primera, <strong>item()</strong> es el método del objeto <code>nodeList</code>. En la última se utiliza la típica sintaxis de acceso a listas para llegar al segundo ítem de la lista.</p> + </td> + </tr> + <tr> + <td><code>attribute</code></td> + <td>Cuando un atributo ("<code>attribute</code>") es devuelto por un miembro (por ej., por el método <strong>createAttribute()</strong>), 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í.</td> + </tr> + <tr> + <td><code>NamedNodeMap</code></td> + <td>Un <code>namedNodeMap</code> 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 <code>NamedNodeMap</code> es un método de ítem() por esa razón, y permite poner o quitar ítems en un <code>NamedNodeMap</code></td> + </tr> + </tbody> +</table> + +<h2 id="Interfaces_del_DOM" name="Interfaces_del_DOM">Interfaces del DOM</h2> + +<p>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 <em>cosas</em> 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 <code>HTML form</code> toma la propidedad <strong>name</strong> desde la interfaz <code>HTMLFormElement</code> pero que las propiedades <code><strong>className</strong> </code>se toman desde la propia interfaz <code>HTMLElement</code>. En ambos casos, la propiedad está sólo en el objeto <code>form</code>.</p> + +<p>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.</p> + +<h2 id="Interfaces_y_objetos" name="Interfaces_y_objetos">Interfaces y objetos</h2> + +<p>En algunos casos un objeto pone en ejecución a una sola interfaz. Pero a menudo un objeto toma prestada una tabla HTML (<code>table</code>) desde muchas interfaces diversas. El objeto table, por ejemplo, pone en funcionamiento una <a href="es/DOM/tabla">Interfaz especial del elemento table HTML</a>, la cual incluye métodos como <code>createCaption</code> y <code>insertRow</code>. Pero como también es un elemento HTML, table pone en marcha a la interfaz del <code>Element</code> descrita en el capítulo <a href="es/Referencia_DOM_de_Gecko/elemento">La referencia al elemento del DOM</a>. 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 <code>Node</code>, desde el cual deriva <code>Element</code>.</p> + +<p>La referencia a un objeto <code>table</code>, como en el ejemplo siguiente, utiliza estas interfaces intercambiables sobre el objeto.</p> + +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> table <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"table"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<span class="keyword token">var</span> tableAttrs <span class="operator token">=</span> table<span class="punctuation token">.</span>attributes<span class="punctuation token">;</span> <span class="comment token">// Node/interfaz Element</span> +<span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token"><</span> tableAttrs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + <span class="comment token">// interfaz HTMLTableElement: atributo border</span> + <span class="keyword token">if</span><span class="punctuation token">(</span>tableAttrs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>nodeName<span class="punctuation token">.</span><span class="function token">toLowerCase</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="operator token">==</span> <span class="string token">"border"</span><span class="punctuation token">)</span> + table<span class="punctuation token">.</span>border <span class="operator token">=</span> <span class="string token">"1"</span><span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="comment token">// interfaz HTMLTableElement: atributo summary</span> +table<span class="punctuation token">.</span>summary <span class="operator token">=</span> <span class="string token">"nota: borde aumentado"</span><span class="punctuation token">;</span></code></pre> + +<h2 id="Interfaces_esenciales_en_el_DOM" name="Interfaces_esenciales_en_el_DOM">Interfaces esenciales en el DOM</h2> + +<p>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 <a href="es/Referencia_DOM_de_Gecko/Ejemplos">Ejemplos DOM</a> al final de este manual.</p> + +<p><code>document</code> y <code>window</code> son objetos cuya interfaces son generalmente muy usadas en la programación de DOM. En término simple, el objeto <code>window</code> representa algo como podría ser el navegador, y el objeto <code>document</code> es la raíz del documento en sí. <code>Element</code> hereda de la interfaz genérica <code>Node</code>, 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 <code>table</code>. Lo siguiente es una breve lista de los APIS comunes en la web y en las páginas escritas en XML utilizando el DOM.</p> + +<ul> + <li><code><a href="es/DOM/document.getElementById">document.getElementById</a>(id)</code></li> + <li><code>element.<a href="es/DOM/element.getElementsByTagName">getElementsByTagName</a>(name)</code></li> + <li><code><a href="es/DOM/document.createElement">document.createElement</a>(name)</code></li> + <li><code>parentNode.<a href="es/DOM/element.appendChild">appendChild</a>(node)</code></li> + <li><code>element.<a href="es/DOM/element.innerHTML">innerHTML</a></code></li> + <li><code>element.<a href="es/DOM/element.style">style</a>.left</code></li> + <li><code>element.<a href="es/DOM/element.setAttribute">setAttribute</a></code></li> + <li><code>element.<a href="es/DOM/element.getAttribute">element.getAttribute</a></code></li> + <li><code>element.<a href="es/DOM/element.addEventListener">addEventListener</a></code></li> + <li><code><a href="es/DOM/window.content">window.content</a></code></li> + <li><code><a href="es/DOM/window.onload">window.onload</a></code></li> + <li><code><a href="es/DOM/window.dump">window.dump</a></code></li> + <li><code><a href="es/DOM/window.scrollTo">window.scrollTo</a></code></li> +</ul> + +<h2 id="Probando_el_API_del_DOM" name="Probando_el_API_del_DOM">Probando el API del DOM</h2> + +<p>É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.</p> + +<p>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.</p> + +<p>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 <code>test()</code> se puede actualizar según la necesidad, para crear más botones o poner más elementos.</p> + +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>Pruebas DOM<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>application/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">function</span> <span class="function token">setBodyAttr</span><span class="punctuation token">(</span>attr<span class="punctuation token">,</span> value<span class="punctuation token">)</span><span class="punctuation token">{</span> + <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>body<span class="punctuation token">)</span> <span class="function token">eval</span><span class="punctuation token">(</span><span class="string token">'document.body.'</span><span class="operator token">+</span>attr<span class="operator token">+</span><span class="string token">'="'</span><span class="operator token">+</span>value<span class="operator token">+</span><span class="string token">'"'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">else</span> <span class="function token">notSupported</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="punctuation token">}</span> + </span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">.5</span>in<span class="punctuation token">;</span> <span class="property token">height</span><span class="punctuation token">:</span> <span class="number token">400</span><span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>texto<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>text<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>black<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>negro + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>darkblue<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>azul oscuro + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>bgColor<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>bgColor<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>white<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>blanco + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lightgrey<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>gris + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>tt</span><span class="punctuation token">></span></span>link<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>tt</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>b</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>select</span> <span class="attr-name token">onChange</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setBodyAttr(<span class="punctuation token">'</span>link<span class="punctuation token">'</span>, + this.options[this.selectedIndex].value);<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>blue<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>azul + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>option</span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>green<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>verde + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>select</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>small</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://www.brownhen.com/dom_api_top.html<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>sample<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> + (sample link)<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>small</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>br</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>version<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>ver()<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> + <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<p>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.</p> + +<p><font><font>Figura 0.1 Muestra DOM página de prueba</font></font></p> + +<p><img alt="" src="https://developer.mozilla.org/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif" style="height: 375px; width: 199px;"></p> + +<p>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 (<code>bgColor</code>), de los hiper-enlaces (<code>aLink</code>), y el del texto (<code>text</code>). 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.</p> + +<h2 id="Otros_enlaces"><strong>Otros enlaces</strong></h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model"><font><font>Referencia DOM</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction"><font><font>Introducción al DOM</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events"><font><font>Eventos y el DOM</font></font></a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples"><font><font>Ejemplos</font></font></a></li> +</ul> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific,sans-serif,Tahoma,Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 10px; top: 35px; opacity: 0.85;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Reproducir"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copy text to Clipboard"> </div> +</div> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific,sans-serif,Tahoma,Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 39px; top: 1952px; opacity: 0.45;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div> +</div> + +<div class="s3gt_translate_tooltip_mini_box" id="s3gt_translate_tooltip_mini" style="background: initial !important; border: initial !important; border-radius: initial !important; border-collapse: initial !important; direction: ltr !important; font-weight: initial !important; height: initial !important; letter-spacing: initial !important; max-width: initial !important; min-height: initial !important; margin: auto !important; outline: initial !important; padding: initial !important; position: absolute; text-align: initial !important; text-shadow: initial !important; width: initial !important; display: initial !important; color: inherit !important; font-size: 13px !important; font-family: X-LocaleSpecific,sans-serif,Tahoma,Helvetica !important; line-height: 13px !important; vertical-align: top !important; white-space: inherit !important; left: 307px; top: 1961px; opacity: 0;"> +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_logo" title="Traducir texto seleccionado"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_sound" title="Escuchar"> </div> + +<div class="s3gt_translate_tooltip_mini" id="s3gt_translate_tooltip_mini_copy" title="Copiar texto al Portapapeles"> </div> +</div> 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 +--- +<p>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.</p> + +<h2 id="Interfaz_de_NodeSelector">Interfaz de NodeSelector</h2> + +<p>Esta especificación añade dos nuevos metodos a cualquier objeto implementando el {{domxref("Document")}}, {{domxref("DocumentFragment")}}, o {{domxref("Element")}} interfaces:</p> + +<dl> + <dt>{{domxref("Element.querySelector", "querySelector()")}}</dt> + <dd>Devuelve la primera coincidencia del (elemento) {{domxref("Element")}} nodo dentro de las subramas del nodo. Sino se encuentra un nodo coincidente, se devuelve <code>null</code> .</dd> + <dt>{{domxref("Element.querySelectorAll", "querySelectorAll()")}}</dt> + <dd>devuelve un listado de nodos {{domxref("NodeList")}} conteniendo todos los elementos del nodo coincidentes( <code>Element</code>) dentro de las subramas del nodo, o Devuelve un Listado de Nodos vacio <code>NodeList</code> sino se encuentran coincidencias.</dd> +</dl> + +<div class="note"><strong>Note:</strong> 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.</div> + +<p>Encontraras ejemplos y detalles leyendo el documento de metodos {{domxref("Element.querySelector()")}} y {{domxref("Element.querySelectorAll()")}}, Tambien en el articulo <a class="internal" href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Code snippets for querySelector</a>.</p> + +<h2 id="Selectors">Selectors</h2> + +<p>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 <code>warning</code> or <code>note</code>, podes hacer lo siguiente:</p> + +<pre class="notranslate"><code>var special = document.querySelectorAll( "p.warning, p.note" );</code></pre> + +<p>tambien por usar query para etiquetas id. Por ejemplo:</p> + +<pre class="notranslate"><code>var el = document.querySelector( "#main, #basic, #exclamation" );</code></pre> + +<p>luego de ejecutar el codigo de arriba, la variable <code>el</code> contiene el primer elemento del documento, su ID puede ser uno de los siguentes <code>main</code>, <code>basic</code>, or <code>exclamation</code>.</p> + +<p>Podes usar cualquier selector CSS con los metodos <code>querySelector()</code> y <code>querySelectorAll()</code><em>.</em></p> + +<h2 id="Ver_tambien.">Ver tambien.</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/selectors-api/" title="http://www.w3.org/TR/selectors-api/">Selectors API</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> 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 +--- +<h2 id="Introduction" name="Introduction">Introducción</h2> + +<p>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+.</p> + +<div class="note">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).</div> + +<h2 id="Overview_of_Sample1.html" name="Overview_of_Sample1.html">Ejemplo: Crear una tabla HTML dinámicamente (<code>Ejemplo1.html</code>)</h2> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html"><input type="button" value="Genera una tabla" onclick="genera_tabla()"> +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">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"); +}</pre> + +<p>{{ EmbedLiveSample('Overview_of_Sample1.html') }}</p> + +<p>Observa cuidadosamente el orden en el que se crearon los elementos en el nodo de texto:</p> + +<ol> + <li>Primero se crea el elemento <table>.</li> + <li>Posteriormente, creamos el elemento <tbody> , que es el hijo del elemento <table> .</li> + <li>Después, utilizamos ciclos para crear los elementos <tr>, que son hijos del elemento <tbody>.</li> + <li>Para cada elemento <tr>, utilizamos nuevamente ciclos para generar los elementos <td> que son hijos de los elementos <tr>.</li> + <li>Para cada elemento <td>, creamos nodos de texto con el contenido de cada celda.</li> +</ol> + +<p>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:</p> + +<ol> + <li>Primero, anexamos cada nodo de texto a su elemento padre <td> : + <pre>celda.appendChild(textoCelda);</pre> + </li> + <li>Posteriormente, anexamos cada elemento <td> a su elemento padre <tr> : + <pre>hilera.appendChild(celda);</pre> + </li> + <li>Posteriomente, anexamos cada elemento <tr> a su elemento padre <tbody>: + <pre>tblBody.appendChild(hilera);</pre> + </li> + <li>Después, anexamos el elemento <tbody> a su elemento padre <table>: + <pre>tabla.appendChild(tblBody);</pre> + </li> + <li>Finalmente, anexamos el elemento <table> a su elemento padre <body>: + <pre>body.appendChild(tabla);</pre> + </li> +</ol> + +<p>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.</p> + +<p>A continuación aparece el código HTML generado por el código JavaScript:</p> + +<pre>... +<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> +... +</pre> + +<p>Aquí está el árbol de objetos DOM generado por el código del elemento <TABLE> :</p> + +<p><img alt="Image:sample1-tabledom.jpg" src="/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Setting_background_of_a_paragraph" name="Setting_background_of_a_paragraph">Ejemplo: Configuración del color de fondo de un párrafo</h2> + +<p><code>getElementsByTagName(tagNameValue)</code> 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.</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><body> + <input type="button" value="Set paragraph background color" onclick="set_background()"> + <p>hi</p> + <p>hello</p> +</body></pre> + +<h3 id="JavaScript_Content_2">JavaScript Content</h3> + +<pre class="brush: js">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)"; +}</pre> + +<p>{{ EmbedLiveSample('Setting_background_of_a_paragraph') }}</p> + +<p>En este ejemplo, establecemos la variable <code>myP</code> en el objeto DOM para el segundo elemento<code>p</code> dentro del body:</p> + +<ol> + <li>Primero, obtendremos una lista de todos los elementos body mediante + <pre>myBody = document.getElementsByTagName("body")[0]</pre> + 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 <code>{{mediawiki.external(0)}}</code>.</li> + <li>Luego, obtenemos todos los elementos p que son descendientes del body mediante + <pre>myBodyElements = myBody.getElementsByTagName("p");</pre> + </li> + <li>Finalmente, obtenemos el segundo item de la lista de elementos p mediante + <pre>myP = myBodyElements[1];</pre> + </li> +</ol> + +<p><img alt="Image:sample2a2.jpg" src="/@api/deki/files/834/=Sample2a2.jpg"></p> + +<p>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:</p> + +<pre>myP.style.background = "rgb(255,0,0)"; +// setting inline STYLE attribute +</pre> + +<h3 id="Creating_TextNodes_with_document.createTextNode.28.22...22.29" name="Creating_TextNodes_with_document.createTextNode.28.22...22.29">Creating TextNodes with <code>document.createTextNode("..")</code></h3> + +<p>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.</p> + +<pre>myTextNode = document.createTextNode("world"); +</pre> + +<p>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.</p> + +<h3 id="Inserting_Elements_with_appendChild.28...29" name="Inserting_Elements_with_appendChild.28...29">Inserting Elements with appendChild(..)</h3> + +<p>So, by calling myP.appendChild({{mediawiki.external('node_element')}}), you are making the element a new child of the second <p> element.</p> + +<pre>myP.appendChild(myTextNode); +</pre> + +<p>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.</p> + +<p><img alt="Image:sample2b2.jpg" src="/@api/deki/files/835/=Sample2b2.jpg"></p> + +<div class="note">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.</div> + +<h3 id="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method" name="Creating_New_Elements_with_the_document_object_and_the_createElement.28...29_method">Creating New Elements with the document object and the <code>createElement(..)</code> method</h3> + +<p>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 <code>document.createElement("tagname")</code>. For example:</p> + +<pre>myNewPTAGnode = document.createElement("p"); +myBody.appendChild(myNewPTAGnode); +</pre> + +<p><img alt="Image:sample2c.jpg" src="/@api/deki/files/836/=Sample2c.jpg"></p> + +<h3 id="Removing_nodes_with_the_removeChild.28...29_method" name="Removing_nodes_with_the_removeChild.28...29_method">Removing nodes with the <code>removeChild(..)</code> method</h3> + +<p>Nodes can be removed. The following code removes text node <code>myTextNode</code> (containing the word "world") from the second <code><p></code> element, <code>myP</code>.</p> + +<pre>myP.removeChild(myTextNode); +</pre> + +<p>Text node <code>myTextNode</code> (containing the word "world") still exists. The following code attaches <code>myTextNode</code> to the recently created <code><p></code> element, <code>myNewPTAGnode</code>.</p> + +<pre>myNewPTAGnode.appendChild(myTextNode); +</pre> + +<p>The final state for the modified object tree looks like this:</p> + +<p><img alt="Image:sample2d.jpg" src="/@api/deki/files/837/=Sample2d.jpg"></p> + +<h2 id="Creating_a_table_dynamically_.28back_to_Sample1.html.29" name="Creating_a_table_dynamically_.28back_to_Sample1.html.29">Creating a table dynamically (back to Sample1.html)</h2> + +<p>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.</p> + +<h3 id="Reviewing_the_HTML_Table_structure" name="Reviewing_the_HTML_Table_structure">Reviewing the HTML Table structure</h3> + +<p><img alt="Image:sample1-tabledom.jpg" src="/@api/deki/files/833/=Sample1-tabledom.jpg"></p> + +<h3 id="Creating_element_nodes_and_inserting_them_into_the_document_tree" name="Creating_element_nodes_and_inserting_them_into_the_document_tree">Creating element nodes and inserting them into the document tree</h3> + +<p>The basic steps to create the table in sample1.html are:</p> + +<ul> + <li>Get the body object (first item of the document object).</li> + <li>Create all the elements.</li> + <li>Finally, append each child according to the table structure (as in the above figure). The following source code is a commented version for the sample1.html.</li> +</ul> + +<div class="note">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, <code>setAttribute</code>. setAttribute has two arguments: the attribute name and the attribute value. You can set any attribute of any element using the setAttribute method.</div> + +<pre class="brush:html"><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></pre> + +<h2 id="Manipulating_the_table_with_DOM_and_CSS" name="Manipulating_the_table_with_DOM_and_CSS">Manipulating the table with DOM and CSS</h2> + +<h3 id="Getting_a_text_node_from_the_table" name="Getting_a_text_node_from_the_table">Getting a text node from the table</h3> + +<p>This example introduces two new DOM attributes. First it uses the <code>childNodes</code> attribute to get the list of child nodes of mycel. The <code>childNodes</code> 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 <code>{{mediawiki.external('x')}}</code> 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.</p> + +<div class="note">If your object is a text node, you can use the data attribute and retrieve the text content of the node.</div> + +<pre class="brush:js">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); +</pre> + +<h3 id="Getting_an_attribute_value" name="Getting_an_attribute_value">Getting an attribute value</h3> + +<p>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:</p> + +<pre>mytable.getAttribute("border"); +</pre> + +<h3 id="Hiding_a_column_by_changing_style_properties" name="Hiding_a_column_by_changing_style_properties">Hiding a column by changing style properties</h3> + +<p>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.</p> + +<pre class="brush:html"><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> +</pre> 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 +--- +<p>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.</p> + +<h2 id="What_is_a_content_tree.3F" name="What_is_a_content_tree.3F">What is a content tree?</h2> + +<p>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 <a href="/en-US/docs/Whitespace_in_the_DOM" title="Whitespace_in_the_DOM">whitespace in the DOM</a>):</p> + +<pre class="brush: html"><html> +<head> + <title>My Document</title> +</head> +<body> + <h1>Header</h1> + <p>Paragraph</p> +</body> +</html> +</pre> + +<p><img alt="image:Using_the_W3C_DOM_Level_1_Core-doctree.jpg" class="internal" src="/@api/deki/files/415/=Using_the_W3C_DOM_Level_1_Core-doctree.jpg"></p> + +<p>When Mozilla parses a document, it builds a content tree and then uses it to display the document.</p> + +<p>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.)</p> + +<h2 id="What_does_the_DOM_Level_1_Core_let_me_do.3F" name="What_does_the_DOM_Level_1_Core_let_me_do.3F">What does the DOM Level 1 Core let me do?</h2> + +<p>The W3C DOM Level 1 allows you to change the content tree <em>any way you want</em>. 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 <code>document</code> property of the global object. This <code>document</code> object implements the <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document">Document interface</a> from the W3C's DOM Level 1 spec.</p> + +<h2 id="A_simple_example" name="A_simple_example">A simple example</h2> + +<p>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:</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><body> +<input type="button" value="Change this document." onclick="change()"> +<h2>Header</h2> +<p>Paragraph</p> +</body><span> +</span></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js"><span> 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); + }</span></pre> + +<p>{{ EmbedLiveSample('A_simple_example', 800, 300) }}</p> + +<p>You can see this script as <a class="internal" href="/@api/deki/files/2866/=example.html" title="/@api/deki/files/2866/=example.html">a complete example</a>.</p> + +<h2 id="How_can_I_learn_more.3F" name="How_can_I_learn_more.3F">How can I learn more?</h2> + +<p>Now that you are familiar with the basic concepts of the DOM, there is a document explaining the <a href="/en-US/docs/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces" title="Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces">DOM Level 1 fundamental methods</a>. It is the follow-up to this document.</p> + +<p>See also the <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html">DOM Level 1 Core specification</a> 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 <a href="/en-US/docs/DOM" title="DOM">other DOM documentation</a>.</p> + +<div class="originaldocinfo"> +<p><strong>Original Document Information</strong></p> + +<ul> + <li>Author(s): L. David Baron <dbaron at dbaron dot org></li> + <li>Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">Creative Commons license</a></li> +</ul> +</div> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>La presencia de espacios en blanco en el <a href="/es/docs/Web/API/Document_Object_Model">DOM</a> 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.</p> + +<h2 id="¿Qué_es_el_espacio_en_blanco">¿Qué es el espacio en blanco?</h2> + +<p>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.</p> + +<h3 id="¿HTML_ignora_en_gran_medida_los_espacios_en_blanco">¿HTML ignora en gran medida los espacios en blanco?</h3> + +<p>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:</p> + +<h3 class="hidden" id="HTML_largely_ignores_whitespace">HTML largely ignores whitespace?</h3> + +<pre class="brush: html notranslate"><!DOCTYPE html> + + <h1> ¡Hola mundo! </h1></pre> + +<p>{{EmbedLiveSample('HTML_largely_ignores_whitespace')}}</p> + +<p>Este código fuente contiene un par de avances de línea después del <code>DOCTYPE</code> y un montón de caracteres de espacio antes, después y dentro del elemento <code><h1></code>, pero al navegador no parece importarle en absoluto y solo muestra las palabras "¡Hola mundo!" como si estos caracteres no existieran en absoluto:</p> + +<p>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.</p> + +<h3 id="¿Qué_sucede_con_los_espacios_en_blanco">¿Qué <em>sucede</em> con los espacios en blanco?</h3> + +<p>Sin embargo, no solo desaparecen.</p> + +<p>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:</p> + +<ul> + <li>Habrá algunos nodos de texto que contienen solo espacios en blanco, y</li> + <li>Algunos nodos de texto tendrán espacios en blanco al principio o al final.</li> +</ul> + +<p>Tomemos el siguiente documento, por ejemplo:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> +<head> + <title>Mi Documento</title> +</head> +<body> + <h1>Encabezado</h1> + <p> + Párrafo + </p> +</body> +</html> +</pre> + +<p>El árbol del DOM para esto se ve así:</p> + +<p><img alt="árbol de dom equivalente al ejemplo de HTML anterior" src="https://mdn.mozillademos.org/files/17084/dom-string.png" style="display: block; height: 288px; margin: 0 auto; width: 562px;"></p> + +<p>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.</p> + +<h3 id="¿CSS_cómo_procesa_los_espacios_en_blanco">¿CSS cómo procesa los espacios en blanco?</h3> + +<p>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 <a href="https://www.w3.org/TR/css-text-3">Módulo de texto CSS Nivel 3</a>, y especialmente las partes sobre la <a href="https://www.w3.org/TR/css-text-3/#white-space-property">propiedad <code>white-space</code> en CSS</a> y <a href="https://www.w3.org/TR/css-text-3/#white-space-processing">detalles de procesamiento del espacio en blanco</a>, pero también ofrecemos una explicación más sencilla a continuación.</p> + +<p>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 ⏎:</p> + +<p>Este ejemplo:</p> + +<pre class="brush: html notranslate"><h1>◦◦◦¡Hola◦⏎ +⇥⇥⇥⇥<span>◦mundo!</span>⇥◦◦</h1></pre> + +<p>se representa en el navegador así:</p> + +<div class="hidden"> +<h4 id="Hidden_example">Hidden example</h4> + +<pre class="brush: html notranslate"><h1> ¡Hola + <span> mundo!</span> </h1></pre> +</div> + +<p>{{EmbedLiveSample('Hidden_example')}}</p> + +<p>El elemento <code><h1></code> contiene solo elementos en línea. De hecho contiene:</p> + +<ul> + <li>Un nodo de texto (que consta de algunos espacios, la palabra "¡Hola" y algunas tabulaciones).</li> + <li>Un elemento en línea (el <code><span></code>, que contiene un espacio, y la palabra "mundo!").</li> + <li>Otro nodo de texto (que consta solo de tabulaciones y espacios).</li> +</ul> + +<p>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.</p> + +<p>Dentro de este contexto, el procesamiento de caracteres de espacio en blanco se puede resumir de la siguiente manera:</p> + +<ol> + <li> + <p>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:</p> + + <pre class="brush: html notranslate"><h1>◦◦◦¡Hola⏎ +<span>◦mundo!</span>⇥◦◦</h1></pre> + </li> + <li> + <p>A continuación, todos los caracteres de tabulación se tratan como caracteres de espacio, por lo que el ejemplo se convierte en:</p> + + <pre class="brush: html notranslate"><h1>◦◦◦¡Hola⏎ +<span>◦mundo!</span>◦◦◦</h1></pre> + </li> + <li> + <p>A continuación, los saltos de línea se convierten en espacios:</p> + + <pre class="brush: html notranslate"><h1>◦◦◦¡Hola◦<span>◦mundo!</span>◦◦◦</h1></pre> + </li> + <li> + <p>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:</p> + + <pre class="brush: html notranslate"><h1>◦¡Hola◦<span>mundo!</span>◦</h1></pre> + </li> + <li> + <p>Y finalmente, las secuencias de espacios al principio y al final de una línea se eliminan, por lo que eventualmente obtenemos esto:</p> + + <pre class="brush: html notranslate"><h1>¡Hola◦<span>mundo!</span></h1></pre> + </li> +</ol> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <a href="/es/docs/Tools">Firefox DevTools</a> 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 "<code>whitespace</code>".</p> +</div> + +<h3 id="Espacio_en_blanco_en_contextos_de_formato_de_bloque">Espacio en blanco en contextos de formato de bloque</h3> + +<p>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")}}.</p> + +<p>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.</p> + +<pre class="brush: html notranslate"><body>⏎ +⇥<div>◦◦¡Hola◦◦</div>⏎ +⏎ +◦◦◦<div>◦◦mundo!◦◦</div>◦◦⏎ +</body></pre> + +<p>Tenemos 3 nodos de texto que contienen solo espacios en blanco, uno antes del primer <code><div></code>, uno entre los 2 <code><div></code>s y uno después del segundo <code><div></code>.</p> + +<p>Esto se renderiza así:</p> + +<div class="hidden"> +<h4 id="Hidden_example_2">Hidden example 2</h4> + +<pre class="brush: html notranslate"><body> + <div> ¡Hola </div> + + <div> mundo! </div> +</body></pre> +</div> + +<p>{{EmbedLiveSample('Hidden_example_2')}}</p> + +<p>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):</p> + +<ol> + <li> + <p>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 <code><div></code>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:</p> + + <pre class="brush: html notranslate"><block>⏎⇥</block> +<block>◦◦¡Hola◦◦</block> +<block>⏎◦◦◦</block> +<block>◦◦mundo!◦◦</block> +<block>◦◦⏎</block></pre> + </li> + <li> + <p>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:</p> + + <pre class="brush: html notranslate"><block></block> +<block>¡Hola</block> +<block></block> +<block>mundo!</block> +<block></block></pre> + </li> + <li> + <p>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 <code><div></code>s. El motor del navegador esencialmente ha ignorado todos los espacios en blanco que se agregaron en el código fuente.</p> + </li> +</ol> + +<h2 id="Espacios_entre_elementos_en_línea_y_bloques_en_línea">Espacios entre elementos en línea y bloques en línea</h2> + +<p>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.</p> + +<p>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 <code><p></code> que solo contienen elementos en línea como <code><em></code>, <code><strong></code>, <code><span></code>, 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.</p> + +<p>Sin embargo, se vuelve más interesante cuando comienzas a usar elementos <code>inline-block</code>. 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.</p> + +<p>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.</p> + +<p>Considera este ejemplo (nuevamente, los espacios en blanco en el HTML están marcados para que sean visibles):</p> + +<pre class="brush: css notranslate" id="ef6f">.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; +} +</pre> + +<pre class="brush: html notranslate" id="24bb"><ul class="people-list">⏎ + +◦◦<li></li>⏎ + +◦◦<li></li>⏎ + +◦◦<li></li>⏎ + +◦◦<li></li>⏎ + +◦◦<li></li>⏎ + +</ul></pre> + +<p>Esto se traduce de la siguiente manera:</p> + +<div class="hidden"> +<h3 id="Hidden_example_3">Hidden example 3</h3> + +<pre class="brush: css notranslate" id="ef6f">.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; } +</pre> + +<pre class="brush: html notranslate" id="24bb"><ul class="people-list"> + + <li></li> + + <li></li> + + <li></li> + + <li></li> + + <li></li> + +</ul></pre> +</div> + +<p>{{EmbedLiveSample('Hidden_example_3')}}</p> + +<p>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.</p> + +<p>El <em>Inspector HTML de Firefox DevTools</em> 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í.</p> + +<p><img alt="Espacio en blanco en Devtools" src="https://mdn.mozillademos.org/files/17085/whitespace-devtools.png" style="border-style: solid; border-width: 1px; height: 454px; width: 797px;"></p> + +<p>Hay algunas formas de solucionar este problema:</p> + +<p>Utiliza <a href="/es/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> para crear la lista horizontal de elementos en lugar de probar una solución de <code>inline-block</code>. Esto se encarga de todo por ti y definitivamente es la solución preferida:</p> + +<pre class="brush: css notranslate">ul { + list-style-type: none; + margin: 0; + padding: 0; + display: flex; +}</pre> + +<p>Si necesitas confiar en <code>inline-block</code>, puedes establecer el {{cssxref("font-size")}} de la lista a 0. Esto solo trabaja si tus bloques no tienen el tamaño <code>ems</code> (según el <code>font-size</code>, por lo que el tamaño del bloque también terminaría siendo 0). <code>rems</code> sería una buena opción aquí:</p> + +<pre class="brush: css notranslate">ul { + font-size: 0; + ... +} + +li { + display: inline-block; + width: 2rem; + height: 2rem; + ... +} +</pre> + +<p>O puedes establecer un margen negativo en los elementos de la lista:</p> + +<pre class="brush: css notranslate">li { + display: inline-block; + width: 2rem; + height: 2rem; + margin-right: -0.25rem; +}</pre> + +<p>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:</p> + +<pre class="brush: html notranslate"><li></li><li></li><li></li><li></li><li></li></pre> + +<h2 id="Recorrido_del_DOM_y_el_espacio_en_blanco">Recorrido del DOM y el espacio en blanco</h2> + +<p>Al intentar realizar una manipulación del <a href="/es/docs/Web/API/Document_Object_Model">DOM</a> 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 <a href="/es/docs/Web/API/Node/firstChild"><code>Node.firstChild</code></a>, 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.</p> + +<p>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 <a href="/es/docs/Web/API/Node/hasChildNodes"><code>Node.hasChildNodes()</code></a>, pero nuevamente, si algún elemento destino contiene nodos de texto, podrías terminar con resultados falsos.</p> + +<h2 id="Funciones_auxiliares_de_espacios_en_blanco">Funciones auxiliares de espacios en blanco</h2> + +<p>El siguiente código JavaScript define varias funciones que facilitan el manejo de espacios en blanco en el DOM:</p> + +<pre class="brush: js notranslate">/** + * 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; +} +</pre> + +<h3 id="Ejemplo">Ejemplo</h3> + +<p>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 <code>"Este es el tercer párrafo"</code>, y luego cambia el atributo de clase y el contenido de ese párrafo.</p> + +<pre class="brush: js notranslate">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); +} +</pre> diff --git a/files/es/web/api/document/getselection/index.html b/files/es/web/api/documentorshadowroot/getselection/index.html index 6c03b64dcf..6c03b64dcf 100644 --- a/files/es/web/api/document/getselection/index.html +++ b/files/es/web/api/documentorshadowroot/getselection/index.html diff --git a/files/es/web/api/document/pointerlockelement/index.html b/files/es/web/api/documentorshadowroot/pointerlockelement/index.html index cc5d490e5c..cc5d490e5c 100644 --- a/files/es/web/api/document/pointerlockelement/index.html +++ b/files/es/web/api/documentorshadowroot/pointerlockelement/index.html diff --git a/files/es/web/api/document/stylesheets/index.html b/files/es/web/api/documentorshadowroot/stylesheets/index.html index 0458cb3fc9..0458cb3fc9 100644 --- a/files/es/web/api/document/stylesheets/index.html +++ b/files/es/web/api/documentorshadowroot/stylesheets/index.html diff --git a/files/es/web/api/domstring/cadenas_binarias/index.html b/files/es/web/api/domstring/binary/index.html index a52358f62c..a52358f62c 100644 --- a/files/es/web/api/domstring/cadenas_binarias/index.html +++ b/files/es/web/api/domstring/binary/index.html diff --git a/files/es/web/events/blur/index.html b/files/es/web/api/element/blur_event/index.html index b54ad3e6a6..b54ad3e6a6 100644 --- a/files/es/web/events/blur/index.html +++ b/files/es/web/api/element/blur_event/index.html 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 ---- -<p>{{ APIRef("DOM") }}</p> - -<h2 id="Summary" name="Summary">Sumario</h2> - -<p><code><strong>name</strong></code> <span id="result_box" lang="es"><span>obtiene o establece</span> <span>la</span> <span>propiedad del nombre</span> <span>de un</span> <span>objeto DOM</span><span>;</span> <span>sólo se aplica a</span> <span>los</span> <span>siguientes elementos</span><span>:</span></span> {{ 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") }}.</p> - -<div class="note"> -<p><strong>Nota:</strong> <code>La propiedad name no esixte para otros elementos</code>; a diferencia de <a href="/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> y <a href="/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, no es una propiedad de los modos de comunicación (interfaces) {{domxref("Node")}}, {{domxref("Element")}} or {{domxref("HTMLElement")}}.</p> -</div> - -<p><code>name</code> puede ser utilizado en el método{{ domxref("document.getElementsByName()") }} , en una <a href="/en/DOM/HTMLFormElement" title="en/DOM/form">configuración</a> y con la colección de <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elementos</a> de la configuración. cuando utilizamos una configuración o elementos de una colección, puede devolver un solo elemento o una colección.</p> - -<h2 id="Syntax" name="Syntax">Síntasix</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">Ejemplo</h2> - -<pre class="eval"><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> -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>En Internet Explorer (IE), la propiedad <code>name</code> de los objetos DOM , creada utilizando{{ domxref("document.createElement()") }} no puede ser establecida o modificada</p> - -<h2 id="Specification" name="Specification">Especificaciones</h2> - -<p>W3C DOM 2 HTML Specification:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/es/web/api/htmlelement/style/index.html b/files/es/web/api/elementcssinlinestyle/style/index.html index 62c8903b72..62c8903b72 100644 --- a/files/es/web/api/htmlelement/style/index.html +++ b/files/es/web/api/elementcssinlinestyle/style/index.html diff --git a/files/es/web/api/fetch_api/conceptos_basicos/index.html b/files/es/web/api/fetch_api/basic_concepts/index.html index 8c02021de6..8c02021de6 100644 --- a/files/es/web/api/fetch_api/conceptos_basicos/index.html +++ b/files/es/web/api/fetch_api/basic_concepts/index.html diff --git a/files/es/web/api/fetch_api/utilizando_fetch/index.html b/files/es/web/api/fetch_api/using_fetch/index.html index 51617ad047..51617ad047 100644 --- a/files/es/web/api/fetch_api/utilizando_fetch/index.html +++ b/files/es/web/api/fetch_api/using_fetch/index.html diff --git a/files/es/web/api/xmlhttprequest/formdata/index.html b/files/es/web/api/formdata/index.html index 2ca830daf7..2ca830daf7 100644 --- a/files/es/web/api/xmlhttprequest/formdata/index.html +++ b/files/es/web/api/formdata/index.html diff --git a/files/es/web/guide/usando_objetos_formdata/index.html b/files/es/web/api/formdata/using_formdata_objects/index.html index 13f4c9635a..13f4c9635a 100644 --- a/files/es/web/guide/usando_objetos_formdata/index.html +++ b/files/es/web/api/formdata/using_formdata_objects/index.html 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 +--- +<p>{{securecontext_header}}{{APIRef("Geolocation API")}}</p> + +<p><span id="result_box" lang="es"><span class="hps">La</span> <strong><span class="hps">API de geolocalización</span></strong> <span class="hps">permite al</span> <span class="hps">usuario compartir su</span> <span class="hps">ubicación</span> <span class="hps">a las aplicaciones web</span> <span class="hps">si</span> <span class="hps">así lo desea.</span> <span class="hps">Por razones de privacidad</span><span>,</span> <span class="hps">al usuario</span> <span class="hps">se le pide que</span> <span class="hps">confirme el permiso</span> <span class="hps">para proporcionar información</span> <span class="hps">de ubicación.</span></span></p> + +<h2 id="El_objeto_geolocation">El objeto geolocation</h2> + +<p><span id="result_box" lang="es"><span class="hps">La API</span> <span class="hps">de geolocalización</span> <span class="hps">se publica</span> <span class="hps">a través del objeto </span></span>{{domxref("window.navigator.geolocation","navigator.geolocation")}}.</p> + +<p><span id="result_box" lang="es"><span class="hps">Si el objeto existe</span><span>,</span> <span class="hps">los servicios de geolocalización</span> <span class="hps">están disponibles.</span> <span class="hps">Se puede</span> <span class="hps">comprobar la presencia</span> <span class="hps">de la geolocalización</span> <span class="hps">de esta manera:</span></span></p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* la geolocalización está disponible */ +} else { + /* la geolocalización NO está disponible */ +} +</pre> + +<div class="blockIndicator note"> +<p>Nota: En Firefox 24 y versiones anteriores, <code>"geolocation" in navigator</code> siempre retornaba <code>true</code> incluso si la API se encontraba deshabilitada. Esto ha sido corregido en <a href="https://www.fxsitecompat.com/en-CA/versions/25/">Firefox 25</a> para cumplir con la especificación. ({{bug(884921)}}).</p> +</div> + +<h3 id="Obtención_de_la_ubicación_actual">Obtención de la ubicación actual</h3> + +<p><span lang="es"><span class="hps">Para</span> <span class="hps">obtener la ubicación</span> <span class="hps">actual del usuario</span><span>, puede llamar a</span><span class="atn hps">l método </span></span>{{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}<span lang="es"><span class="hps">.</span></span></p> + +<p><span lang="es"><span class="hps">Esto inicia</span> <span class="hps">una solicitud asíncrona</span> <span class="hps">para detectar</span> <span class="hps">la posición del usuario</span><span>, y</span> <span class="hps">consulta el</span> <span class="hps">hardware</span> <span class="hps">de posicionamiento para</span> <span class="hps">obtener</span><span class="hps"> información actualizada.</span> </span><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">se determina la posición</span><span>, se ejecuta la función</span> <span class="hps">de callback</span><span class="hps">.</span></span><span lang="es"> <span class="hps">Si lo desea,</span> <span class="hps">puede proporcionar otra función de callback</span><span class="hps"> que se</span> <span class="hps">ejecuta si</span> <span class="hps">se produce un error</span><span>.</span> <span class="hps">Un tercer</span> <span class="hps">parámetro</span> <span class="hps">opcional</span><span>, es un</span> <span class="hps">objeto de opciones</span> <span class="hps">donde se puede establecer</span> <span class="hps">la edad máxima de</span> <span class="hps">la</span> <span class="hps">posición devuelta</span><span>,</span> <span class="hps">el tiempo de espera</span> <span class="hps">para una solicitud</span> <span class="hps">y si se requiere</span> <span class="hps">una alta precisión</span> <span class="hps">para la posición.</span></span></p> + +<div class="note"> +<p><strong>Nota:</strong> 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()")}}.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + haz_algo(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>En el ejemplo anterior la función do_something() será ejecutada una vez que se obtiene la posición.</p> + +<h3 id="Rastreando_la_posición_actual">Rastreando la posición actual</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota:</strong> Es posible usar la función {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} sin haber ejecutado antes {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}.</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>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.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Afinando_la_respuesta">Afinando la respuesta</h3> + +<p>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 <code>PositionOptions</code> también opcional.</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> + +<p>Una llamada a {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} luce como el siguiente ejemplo:</p> + +<pre class="brush: js">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);</pre> + +<p><a id="fck_paste_padding">Demo de watchPosition: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br> + <a id="fck_paste_padding"></a></p> + +<h2 id="Describiendo_una_posición">Describiendo una posición</h2> + +<p>La ubicación del usuario es descrita con un objeto <code>Position</code> referenciando a un objeto <code>Coordinates</code>.</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p> + +<h2 id="Manejo_de_errores">Manejo de errores</h2> + +<p>La función de callback de error, si existe cuando se llama a <code>getCurrentPosition()</code> o <code>watchPosition()</code>, recibe un objeto <code>PositionError</code> como su primer parámetro.</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p> + +<h2 id="Ejemplo_de_geolocalización">Ejemplo de geolocalización</h2> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +p { margin : 0; } +</pre> +</div> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html;"><p><button onclick="geoFindMe()">Show my location</button></p> +<div id="out"></div> +</pre> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<pre class="brush: js;">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); +} +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Geolocation_Live_Example',350,410) }}</p> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>{{CompatUnknown()}}</td> + <td>10.60</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_sobre_Gecko">Notas sobre Gecko</h3> + +<p>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 <a href="http://www.mozilla.com/en-US/legal/privacy/" title="http://www.mozilla.com/en-US/legal/privacy/">Política de Privacidad de Mozilla</a><span class="external"> y la</span> <a href="http://www.google.com/privacy-lsf.html" title="http://www.google.com/privacy-lsf.html">Política de Privacidad de Google</a>, dichos documentos cubren como estos datos pueden ser utilizados.</p> + +<p>En Firefox 3.6 (Gecko 1.9.2) fue añadido soporte para utilizar el servicio <a href="http://catb.org/gpsd/" title="http://catb.org/gpsd/">GPSD</a> para geolocalización en sistemas Linux.</p> + +<h2 id="Consultar_también">Consultar también</h2> + +<ul> + <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li> + <li><a href="http://www.w3.org/TR/geolocation-API/" title="http://www.w3.org/TR/geolocation-API/">API de Geolocalización en w3.org</a></li> + <li><a href="/en-US/demos/tag/tech:geolocation" title="/en-US/demos/tag/tech:geolocation">Demos que utilizan la API de Geolocalización</a></li> +</ul> + +<p> </p> diff --git a/files/es/web/api/element/ongotpointercapture/index.html b/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html index 3023c3758e..3023c3758e 100644 --- a/files/es/web/api/element/ongotpointercapture/index.html +++ b/files/es/web/api/globaleventhandlers/ongotpointercapture/index.html diff --git a/files/es/web/api/element/onlostpointercapture/index.html b/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html index 9a07506d45..9a07506d45 100644 --- a/files/es/web/api/element/onlostpointercapture/index.html +++ b/files/es/web/api/globaleventhandlers/onlostpointercapture/index.html diff --git a/files/es/web/api/element/onwheel/index.html b/files/es/web/api/globaleventhandlers/onwheel/index.html index b8f829969b..b8f829969b 100644 --- a/files/es/web/api/element/onwheel/index.html +++ b/files/es/web/api/globaleventhandlers/onwheel/index.html 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 +--- +<p>This is an example of an AJAX web site composed only of three pages (<em>first_page.php</em>, <em>second_page.php</em> and <em>third_page.php</em>). To see how it works, please, create the following files (or git clone <a href="https://github.com/giabao/mdn-ajax-nav-example" title="/en-US/docs/">https://github.com/giabao/mdn-ajax-nav-example.git</a> ):</p> + +<div class="note" id="const_compatibility"><strong>Note:</strong> For fully integrating the {{HTMLElement("form")}} elements within this <em>mechanism</em>, please take a look at the paragraph <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">Submitting forms and uploading files</a>.</div> + +<p><strong>first_page.php</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: 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>"; + } +?> +</pre> +</div> + +<p><strong>second_page.php</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: 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>"; + } +?> +</pre> +</div> + +<p><strong>third_page.php</strong>:</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: 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>"; + } +?> +</pre> +</div> + +<p><strong>css/style.css</strong>:</p> + +<pre class="brush: 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; +} +</pre> + +<p><strong>include/after_content.php</strong>:</p> + +<pre class="brush: php"><p>This is the footer. It is shared between all ajax pages.</p> +</pre> + +<p><strong>include/before_content.php</strong>:</p> + +<pre class="brush: 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> + +</pre> + +<p><strong>include/header.php</strong>:</p> + +<pre class="brush: 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" /> +</pre> + +<p><strong>js/ajax_nav.js</strong>:</p> + +<p>(before implementing it in a working environment, <strong>please read <a href="#const_compatibility" title="Note about *const* compatibility">the note about the const statement compatibility</a></strong>)</p> + +<div style="height: 400px; margin-bottom: 12px; overflow: auto;"> +<pre class="brush: js">"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; + +})(); +</pre> +</div> + +<div class="note" id="const_compatibility"><strong>Note:</strong> The current implementation of <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> (constant statement) <strong>is not part of ECMAScript 5</strong>. It is supported in Firefox & Chrome (V8) and partially supported in Opera 9+ and Safari. <strong>It is not supported in Internet Explorer 6-9, or in the preview of Internet Explorer 10</strong>. <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> is going to be defined by ECMAScript 6, but with different semantics. Similar to variables declared with the <a href="/en/JavaScript/Reference/Statements/let" title="en/JavaScript/Reference/Statements/let"><code>let</code></a> statement, constants declared with <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> will be block-scoped. <strong>We used it only for didactic purpose. If you want a full browser compatibility of this library, please replace all the <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const"><code>const</code></a> statements with the <a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var"><code>var</code></a> statements.</strong></div> + +<p>For more information, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history" title="/en-US/docs/DOM/Manipulating_the_browser_history">Manipulating the browser history</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.onpopstate") }}</li> +</ul> 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 +--- +<p>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.</p> + +<h2 id="Viajando_a_través_del_historial">Viajando a través del historial</h2> + +<p>Retroceder y avanzar a través del historial del usuario utilizando los métodos <code>back()</code>, <code>forward()</code> y <code>go()</code>.</p> + +<h3 id="Moviéndose_hacia_adelante_y_hacia_atrás">Moviéndose hacia adelante y hacia atrás</h3> + +<p>Para moverte hacia atrás, solo debes hacer:</p> + +<pre>window.history.back(); +</pre> + +<p>Esto actuará exactamente como si el usuario hiciera clic en el botón "atrás" en la barra de herramientas del navegador.</p> + +<p>De manera similar, puedes moverte hacia adelante (como si el usuario hiciera clic en en el botón "adelante"), de esta forma:</p> + +<pre>window.history.forward(); +</pre> + +<h3 id="Moverse_a_un_punto_específico_del_historial">Moverse a un punto específico del historial</h3> + +<p>Puedes usar el método <code>go()</code> 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).</p> + +<p>Para moverse atrás una página (equivalente a llamar <code>back()</code>):</p> + +<pre><code>window.history.go(-1);</code> +</pre> + +<p>Para moverse una página hacia adelante, como si se llamara a <code>forward()</code>:</p> + +<pre><code>window.history.go(1);</code> +</pre> + +<p>De manera similar, puedes avanzar 2 páginas pasando 2 y así sucesivamente.</p> + +<p>Otro uso para <code>go()</code> es el de actualizar la página ya sea pasando <code>0</code> como parámetro o ninguno.</p> + +<pre><code>// Cada una de las siguientes +// instrucciones actualiza la página +window.history.go(0); +window.history.go();</code></pre> + +<p>Puedes obtener el número de páginas en la pila del historial consultando el valor de la propiedad <span class="long_text" id="result_box" lang="es"><span title=""><code>length</code>:</span></span></p> + +<pre>var numeroDeEntradas = window.history.length; +</pre> + +<div class="note"><strong>Nota:</strong> Internet Explorer admite el paso de cadenas de URL como parámetro para <code>go()</code>; esto no es estándar y no está implementado en Gecko.</div> + +<h2 id="Añadiendo_y_modificando_entradas_del_historial">Añadiendo y modificando entradas del historial</h2> + +<p>{{ gecko_minversion_header("2") }}</p> + +<p>HTML5 introduce los métodos <code>history.pushState()</code> y <code>history.replaceState()</code>, los cuales te permiten añadir y modificar entradas del historial, respectivamente. Estos métodos trabajan en conjunto con el evento {{ domxref("window.onpopstate") }}.</p> + +<p>Hacer uso de <code>history.pushState()</code> cambia el referer que es utilizado en la cabecera HTTP por los objetos <a href="/es/docs/XMLHttpRequest">XMLHttpRequest</a> que hayan sido creados luego de cambiar el estado. El referer utilizará la URL del documento cuyo objeto window sea <code>this</code> al momento de la creación del objeto <a href="/es/docs/XMLHttpRequest">XMLHttpRequest</a>.</p> + +<h3 id="Ejemplo">Ejemplo</h3> + +<p>Supongamos que <span class="nowiki">http://mozilla.org/foo.html</span> ejecuta el siguiente JavaScript:</p> + +<pre>var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html"); +</pre> + +<p>Esto causará que la barra de URL muestre <span class="nowiki">http://mozilla.org/bar.html</span>, pero no provocará que el navegador carge bar.html ni tampoco que verifique si bar.html existe.</p> + +<p>Supongamos ahora que el usuario navega hacia <span class="nowiki">http://google.com</span>, y despúes hace clic en Atrás. En este punto, la barra de URL mostrará <span class="nowiki">http://mozilla.org/bar.html</span>, y la página tendrá un evento <code>popstate</code> cuyo <em>state object</em> contiene una copia de <code>stateObj</code>. La página en si se verá como <code>foo.html</code>, aunque la página podria modificar su contenido durante el evento <code>popstate</code> event.</p> + +<p>Si hacemos clic en "atrás" nuevamente, la URL cambiará a <span class="nowiki">http://mozilla.org/foo.html</span>, y el documento generará otro evento <code>popstate</code> 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 <code>popstate</code>.</p> + +<h3 id="El_método_pushState()">El método pushState()</h3> + +<p><code>pushState()</code> 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:</p> + +<ul> + <li> + <p><strong>object estado</strong> — El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por <code>pushState()</code>. Cada vez que el usuario navega hacia un nuevo estado, un evento <code>popstate</code> event se dispara, y la propiedad <code>state</code> del evento contiene una copia del historial de entradas del objeto estado.</p> + + <p>El objeto estado puede ser cualquier cosa que puedas pasar a <code>JSON.stringify</code>. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados después de que el usuario reinicie su navegador, se ha impuesto un tamaño límite de 640K caracteres en representación JSON de un objeto estado. Si pasas un objeto estado cuya representación es más larga que esto a <code>pushState()</code>, el método arrojará una excepción. Si necesitas más espacio, se recomienda usar <code>sessionStorage</code> y/o <code>localStorage</code>.</p> + </li> + <li> + <p><strong>título</strong> — Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.</p> + </li> + <li> + <p><strong>URL</strong> — La URL de la nueva entrada al historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a <code>pushState()</code>, <span class="long_text" id="result_box" lang="es"><span title="">pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador</span></span>. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL. La nueva URL debe ser del mismo origen que la actual URL. Si no es así, <code>pushState()</code> arrojará una excepción. Este parámetro es opcional; <span class="long_text" id="result_box" lang="es"><span title="">si no se especifica, se tomará la URL actual del documento.</span></span></p> + </li> +</ul> + +<p>En un sentido, llamar <code>pushState()</code> es similar a asignar <code>window.location = "#foo"</code>, <span class="long_text" id="result_box" lang="es"><span title="">en tanto que también se va a crear y activar otra entrada al historial asociada con el documento actual</span></span>. Pero <code>pushState()</code> tiene las siguientes ventajas:</p> + +<ul> + <li>La nueva URL puede ser cualquier URL en el mismo origen de la actual URL. En contraste, asignar <code>window.location</code> te mantiene en el mismo {{ domxref("document") }} solamente si modificas unicamente el hash.</li> + <li>No hay por qué cambiar la URL si no se desea. Por el contrario, asignar <code>window.location = "#foo"; solamente crea una nueva entrada en el historial si el hash actual no es </code><code>#foo</code>.</li> + <li>Puedes asociar datos arbitrarios con tu nuevo historial de entrada. Con el enfoque hash-based, tu necesitas codificar todos datos relevantes dentro de una cadena de caracteres corta.</li> + <li>Si <code>title</code> es utilizado por los navegadores, estos datos pueden utilizarse (independientemente de, por ejemplo, el hash).</li> +</ul> + +<p>Hay que tener en cuenta que <code>pushState()</code> nunca dispara un evento <code>hashchange</code>, incluso si la nueva URL difiere de la antigua URL únicamente en su hash.</p> + +<p>En un documento XUL, crea el elemento XUL específico.</p> + +<p>En otros documentos, crea un elemento con un namespace de URI nulo (<code>null</code>).</p> + +<h3 id="El_método_replaceState()">El método replaceState()</h3> + +<p><code>history.replaceState()</code> trabaja exactamente igual a <code>history.pushState()</code> excepto que <code>replaceState()</code> modifica la entrada al historial actual en lugar de crear una nueva.</p> + +<p><code>replaceState()</code> 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.</p> + +<h3 id="El_evento_popstate">El evento popstate</h3> + +<p>Un evento <code>popstate</code> 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 <code>pushState</code> o afectada por una llamada a <code>replaceState</code>, la propiedad state del evento <code>popstate</code> contiene una copia del historial de entradas del objeto estado.</p> + +<p>Ver {{ domxref("window.onpopstate") }} para un ejemplo de uso.</p> + +<h3 id="Leyendo_el_estado_actual">Leyendo el estado actual</h3> + +<p>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 <code>pushState()</code> o <code>replaceState()</code>) 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.</p> + +<p>Puedes leer el estado del historial actual sin tener que esperar un evento <code>popstate</code> usando la propiedad <code>history.state</code> de esta manera:</p> + +<pre><code>var currentState = history.state;</code></pre> + +<h2 id="Ejemplos">Ejemplos</h2> + +<p>Para un ejemplo completo de un sitio AJAX, ver: <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history/Example">Ejemplo de navegación AJAX</a>.</p> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado </th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "browsers.html#history", "History")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No hay cambios desde {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#history", "History")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Definición inicial</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<table> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>history.state</td> + <td>18</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>6.0</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>history.state</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.onpopstate") }}</li> +</ul> 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 +--- +<p>{{DefaultAPISidebar("HTML Drag and Drop API")}}</p> + +<p>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 <em>explorador de archivos </em>de la plataforma y soltados en una página web.</p> + +<p>Los pasos principales para configurar Drag-and-drop son: 1) definir una "zona drop (<em>drop zone), </em>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 <a href="https://github.com/mdn/dom-examples/tree/master/drag-and-drop">repositorio drag-and-drop de MDN</a> (cualquier sugerencia o tema que revisar es bienvenido).</p> + +<p class="note">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).</p> + +<h2 id="Define_la_zona_drop_drop_zone">Define la zona "drop" [drop <em>zone</em>]</h2> + +<p>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")}}:</p> + +<pre class="brush: html notranslate"><div id="drop_zone" ondrop="dropHandler(event);"> + <p>Arrastra y suelta uno o más archivos a esta zona ...</p> +</div></pre> + +<p>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")}}:</p> + +<pre class="brush: html notranslate"><div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);"> + <p>Arrastra y suelta uno o más archivos a esta zona ...</p> +</div> +</pre> + +<p>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:</p> + +<pre class="brush: css notranslate">#drop_zone { + border: 5px solid blue; + width: 200px; + height: 100px; +} +</pre> + +<div class="note"> +<p>Fíjese que los eventos <code>dragstart</code> y <code>dragend</code> no son activados cuando se arrastra un archivo al browser desde el SO.</p> +</div> + +<h2 id="Procesar_la_acción_de_soltar_drop">Procesar la acción de soltar [drop]</h2> + +<p>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.</p> + +<p>El ejemplo siguiente muestra como escribir el nombre de cada fichero arrastrado en la consola. En una aplicación <em>real</em>, se querrá procesar un archivo usando {{domxref("File","File API")}}.</p> + +<p>Nótese que en este ejemplo, cualquier item arrastrado que no sea un archivo es ignorado.</p> + +<pre class="brush: js notranslate">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) +}</pre> + +<h2 id="Prevenir_el_comportamiento_default_de_arrastrado_en_el_browser">Prevenir el comportamiento default de arrastrado en el browser </h2> + +<p>El siguiente evento {{event("dragover")}} llama a {{domxref("Event.preventDefault","preventDefault()")}} para deshabilitar (turn off) la respuesta estandar drag-and-drop del browser.</p> + +<pre class="brush: js notranslate">function dragOverHandler(ev) { + console.log('File(s) in drop zone'); + + // Prevent default behavior (Prevent file from being opened) + ev.preventDefault(); +} +</pre> + +<h2 id="Limpieza_Cleanup">Limpieza (Cleanup)</h2> + +<p>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.</p> + +<pre class="brush: js notranslate">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(); + } +} +</pre> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag and Drop API</a></li> + <li><a class="internal" href="/Web/Guide/HTML/Drag_operations" title="Drag Operations">Drag Operations</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/interaction.html#dnd" title="Drag and Drop Standard">HTML5 Living Standard: Drag and Drop</a></li> +</ul> 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 +--- +<p>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.</p> +<div class="note"> Esta sección trata sobre la funcionalidad de arrastrar y soltar en Firefox 3.5 (Gecko 1.9.1) y versiones posteriores. Consulta la <a href="/en-US/docs/Drag_and_Drop" title="/en-US/docs/Drag_and_Drop">documentación de la API anterior</a> para Firefox 3.0 y versiones anteriores.</div> + + +<h2 id="Elementos_básicos_de_arrastrar_y_soltar">Elementos básicos de arrastrar y soltar</h2> +<p>Cuando comienza una operación de arrastre, se puede proporcionar una serie de datos:</p> +<ul> + <li>los datos que se van a arrastrar, que pueden ser de varios formatos diferentes. Por ejemplo, datos de texto que contienen una cadena de texto que se va a arrastrar. Para obtener más información al respecto, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragdata" title="/en-US/docs/DragDrop/Drag_Operations#dragdata">Datos de la operación de arrastre</a> .</li> + <li>la imagen de confirmación sobre la operación de arrastre que aparece junto al puntero durante la operación. Esta imagen puede personalizarse, sin embargo, la mayoría de las veces, no se especifica y se genera una imagen por defecto basándose en el elemento donde se ha pulsado el ratón/mouse. Para obtener más información acerca de estas imágenes, consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragfeedback" title="/en-US/docs/DragDrop/Drag_Operations#dragfeedback">Configurar la imagen de confirmación sobre la operación de descarga</a> .</li> + <li>efectos de arrastre que se permiten. Son posibles tres efectos: <code>copy</code> para indicar que los datos que se arrastran se copiarán desde su ubicación actual a la ubicación de destino, <code>move</code> para indicar que los datos que se arrastran serán movidos y <code>link</code> para indicar que se creará algún tipo de relación o conexión entre la ubicación actual y la ubicación de destino. Durante la operación, se pueden modificar los efectos de arrastre y especificar cuáles en concreto se permiten en determinadas ubicaciones. Si se permite, se puede realizar una operación de colocación en esa ubicación. Consulta <a href="/en-US/docs/DragDrop/Drag_Operations#drageffects" title="/en-US/docs/DragDrop/Drag_Operations#drageffects">Efectos de arrastre</a> para obtener más detalles.</li> +</ul> +<p>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 <a href="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items" title="/en-US/docs/DragDrop/Dragging_and_Dropping_Multiple_Items">Arrastrar y soltar múltiples elementos</a> .</p> +<p>Para obtener una lista de tipos de datos comunes utilizados para arrastrar y soltar, consulta <a href="/en-US/docs/DragDrop/Recommended_Drag_Types" title="/en-US/docs/DragDrop/Recommended_Drag_Types">Tipos de operaciones de arrastre recomendados</a>.</p> +<p>Está disponible una referencia rápida para los procedimientos recomendados en la operación de arrastre de los siguientes tipos de elementos:</p> +<ul> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#text" title="/en-US/docs/DragDrop/Recommended_Drag_Types#text">Texto</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#link" title="/en-US/docs/DragDrop/Recommended_Drag_Types#link">Enlaces</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#html" title="/en-US/docs/DragDrop/Recommended_Drag_Types#html">HTML y XML</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#file" title="/en-US/docs/DragDrop/Recommended_Drag_Types#file">Archivos</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#image" title="/en-US/docs/DragDrop/Recommended_Drag_Types#image">Imágenes</a></li> + <li><a href="/en-US/docs/DragDrop/Recommended_Drag_Types#node" title="/en-US/docs/DragDrop/Recommended_Drag_Types#node">Nodos de documento</a></li> +</ul> +<p>Consulta <a href="/en-US/docs/DragDrop/DataTransfer" title="/en-US/docs/DragDrop/DataTransfer">DataTransfer</a> para tener una referencia al objeto DataTransfer.</p> + + +<h2 id="events" name="events">Eventos de arrastre</h2> +<p>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 <code>mousemove</code> no se ejecutan durante una operación de arrastre.</p> +<p>La propiedad <a href="/en-US/docs/DragDrop/DataTransfer" title="/en-US/docs/DragDrop/DataTransfer">dataTransfer</a> de todos los eventos de arrastre contiene datos sobre la operación de arrastre y colocación.</p> + + +<dl> + <dt>dragstart</dt> + <dd>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 <a href="/en-US/docs/DragDrop/Drag_Operations#dragstart" title="/en-US/docs/DragDrop/Drag_Operations#dragstart">Inicio de una operación de arrastre</a> .</dd> + <dt>dragenter</dt> + <dd>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 <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="/en-US/docs/DragDrop/Drag_Operations#droptargets">Especificación de destinos de colocación</a> .</dd> + <dt>dragover</dt> + <dd>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 <a href="/en-US/docs/DragDrop/Drag_Operations#droptargets" title="/en-US/docs/DragDrop/Drag_Operations#droptargets">Especificación de destinos de colocación</a>.</dd> + <dt>dragleave</dt> + <dd>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.</dd> + <dt>drag</dt> + <dd>Este evento se activa en el origen del arrastre, es decir, el elemento donde dragstart fue disparado, durante la operación de arrastre.</dd> + <dt>drop</dt> + <dd>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 <a href="/en-US/docs/DragDrop/Drag_Operations#drop" title="/en-US/docs/DragDrop/Drag_Operations#drop">Realizar una operación de colocación</a>.</dd> + <dt>dragend</dt> + <dd>El origen del arrastre recibirá un evento dragend cuando la operación se haya completado, tanto si tuvo éxito como si no. Consulta <a href="/en-US/docs/DragDrop/Drag_Operations#dragend" title="/en-US/docs/DragDrop/Drag_Operations#dragend">Finalizar una operación de arrastre</a> si deseas más información.</dd> +</dl> + + +<div>{{ HTML5ArticleTOC () }}</div> 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 +--- +<p>A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.</p> +<h2 id="text" name="text">Arrastramdo Texto</h2> +<p>Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:</p> +<pre>event.dataTransfer.setData("text/plain", "This is text to drag") +</pre> +<p>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.</p> +<p><span style="line-height: 1.5;">Se recomienda que siempre se agrega datos del tipo </span><code style="font-size: 14px;">text/plain</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">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.</span></p> +<p><span style="line-height: 1.5;">En códigos más viejo, encontrara </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/unicode o </span>el tipo<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">Text.</span><span style="line-height: 1.5;">Estos equivalen </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain,</span><span style="line-height: 1.5;">que </span><span style="line-height: 1.5;">guardara y recibia los datos del texto plano en ese lugar</span><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">.</span></font></p> +<h2 id="link" name="link">Arrastrando Enlaces</h2> +<p>Los enlaces deben incluir los datos de los dos tipos, el primero debe ser URL utilizando el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/uri-list,</span><span style="line-height: 1.5;">y el segundo es URL utilizando el tipo </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain. </span><span style="line-height: 1.5;">Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:</span></p> +<pre>var dt = event.dataTransfer; +dt.setData("text/uri-list", "http://www.mozilla.org"); +dt.setData("text/plain", "http://www.mozilla.org"); +</pre> +<p>Es constumbre, establecer el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain de ultimo, </span><span style="line-height: 1.5;">, ya que es menos específico que el tipo de URI.</span></p> +<p>Note que el tipo de URL <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">uri-list </span><span style="line-height: 1.5;">es con una "i", no una "L"</span></p> +<p><span style="line-height: 1.5;">Note that the URL type is </span><code style="font-size: 14px;">uri-list</code><span style="line-height: 1.5;"> with an 'I', not with an 'L'.</span></p> +<p>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 <code>text/plain</code> version of the drag data should include all links but should not include the comments.</p> +<p>For example:</p> +<pre>http://www.mozilla.org +#A second link +http://www.xulplanet.com +</pre> +<p>This sample <code>text/uri-list</code> data contains two links and a comment.</p> +<p>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 <code>URL</code> may be used to refer to the first valid link within the data for the <code>text/uri-list</code> type. You should not add data using the <code>URL</code> type; attempting to do so will just set the value of the <code>text/uri-list</code> type instead.</p> +<pre>var url = event.dataTransfer.getData("URL"); +</pre> +<p>You may also see data using the <code>text/x-moz-url</code> type which is a Mozilla specific type. If it appears, it should be used before the <code>text/uri-list</code> type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:</p> +<pre>http://www.mozilla.org +Mozilla +http://www.xulplanet.com +XUL Planet +</pre> +<h2 id="html" name="html">Dragging HTML and XML</h2> +<p>HTML content may use the <code>text/html</code> 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 <code>innerHTML</code> property of an element.</p> +<p>XML content may use the <code>text/xml</code> type, but you should ensure that the data value is well-formed XML.</p> +<p>You may also include a plain text representation of the HTML or XML data using the <code>text/plain</code> type. The data should be just the text and should not include any of the source tags or attributes. For instance:</p> +<pre>var dt = event.dataTransfer; +dt.setData("text/html", "Hello there, <strong>stranger</strong>"); +dt.setData("text/plain", "Hello there, stranger"); +</pre> +<h2 id="file" name="file">Dragging Files</h2> +<p>A local file is dragged using the <code>application/x-moz-file</code> type with a data value that is an <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> 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 <a href="/En/DragDrop/DataTransfer#mozSetDataAt.28.29" title="mozSetDataAt">mozSetDataAt</a> method to assign the data. Similarly, when retrieving the data, you must use the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method.</p> +<pre>event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0); +</pre> +<p>If possible, you may also include the file URL of the file using both the <code>text/uri-list</code> and/or <code>text/plain</code> types. These types should be added last so that the more specific <code>application/x-moz-file</code> type has higher priority.</p> +<p>Multiple files will be received during a drop as mutliple items in the data transfer. See <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a> for more details about this.</p> +<p>The following example shows how to create an area for receiving dropped files:</p> +<pre><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> +</pre> +<p>In this example, the event returns false only if the data transfer contains the <code>application/x-moz-file</code> 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 <code>instanceof</code> operator is used here as the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method will return an <code>nsISupports</code> 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.</p> +<h2 id="image" name="image">Dragging Images</h2> +<p>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 <code>text/uri-list</code> 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 <a class="internal" href="/en/data_URIs" title="en/The data URL scheme">the data URL scheme</a>.</p> +<p>As with other links, the data for the <code>text/plain</code> 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 <code>text/plain</code> data in this situation.</p> +<p>In chrome or other privileged code, you may also use the <code>image/jpeg</code>, <code>image/png</code> or <code>image/gif</code> types, depending on the type of image. The data should be an object which implements the <a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> 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.</p> +<p>You should also include the <code>application/x-moz-file</code> type if the image is located on disk. In fact, this a common way in which image files are dragged.</p> +<p>It is important to set the data in the right order, from most specific to least specific. The image type such as <code>image/jpeg</code> should come first, followed by the <code>application/x-moz-file</code> type. Next, you should set the <code>text/uri-list</code> data and finally the <code>text/plain</code> data. For example:</p> +<pre>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); +</pre> +<p>Note that the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> 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.</p> +<h2 id="node" name="node">Dragging Nodes</h2> +<p>Nodes and elements in a document may be dragged using the <code>application/x-moz-node</code> 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.</p> +<p>You should always include a plain text alternative for the node.</p> +<h2 id="custom" name="custom">Dragging Custom Data</h2> +<p>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.</p> +<h2 id="filestoos" name="filestoos">Dragging files to an operating system folder</h2> +<p>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:</p> +<pre class="brush: js">// 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... + } + } +} +</pre> +<p>{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}</p> diff --git a/files/es/web/api/element/accesskey/index.html b/files/es/web/api/htmlelement/accesskey/index.html index 7d73c395fc..7d73c395fc 100644 --- a/files/es/web/api/element/accesskey/index.html +++ b/files/es/web/api/htmlelement/accesskey/index.html diff --git a/files/es/web/events/animationend/index.html b/files/es/web/api/htmlelement/animationend_event/index.html index 8bca8b046f..8bca8b046f 100644 --- a/files/es/web/events/animationend/index.html +++ b/files/es/web/api/htmlelement/animationend_event/index.html diff --git a/files/es/web/events/transitioncancel/index.html b/files/es/web/api/htmlelement/transitioncancel_event/index.html index 3f9c622bd2..3f9c622bd2 100644 --- a/files/es/web/events/transitioncancel/index.html +++ b/files/es/web/api/htmlelement/transitioncancel_event/index.html diff --git a/files/es/web/events/transitionend/index.html b/files/es/web/api/htmlelement/transitionend_event/index.html index 8370f0e39e..8370f0e39e 100644 --- a/files/es/web/events/transitionend/index.html +++ b/files/es/web/api/htmlelement/transitionend_event/index.html diff --git a/files/es/web/events/abort/index.html b/files/es/web/api/htmlmediaelement/abort_event/index.html index 641d144c77..641d144c77 100644 --- a/files/es/web/events/abort/index.html +++ b/files/es/web/api/htmlmediaelement/abort_event/index.html diff --git a/files/es/web/api/htmlelement/dataset/index.html b/files/es/web/api/htmlorforeignelement/dataset/index.html index 10c6f555f9..10c6f555f9 100644 --- a/files/es/web/api/htmlelement/dataset/index.html +++ b/files/es/web/api/htmlorforeignelement/dataset/index.html diff --git a/files/es/web/api/htmlelement/focus/index.html b/files/es/web/api/htmlorforeignelement/focus/index.html index d615cbf12e..d615cbf12e 100644 --- a/files/es/web/api/htmlelement/focus/index.html +++ b/files/es/web/api/htmlorforeignelement/focus/index.html diff --git a/files/es/web/api/elementoshtmlparavideo/index.html b/files/es/web/api/htmlvideoelement/index.html index 4b36d9cba2..4b36d9cba2 100644 --- a/files/es/web/api/elementoshtmlparavideo/index.html +++ b/files/es/web/api/htmlvideoelement/index.html diff --git a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html b/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html index 34d4fdd438..34d4fdd438 100644 --- a/files/es/web/api/indexeddb_api/conceptos_basicos_detras_de_indexeddb/index.html +++ b/files/es/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html diff --git a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html b/files/es/web/api/indexeddb_api/using_indexeddb/index.html index ea9d2d879c..ea9d2d879c 100644 --- a/files/es/web/api/indexeddb_api/usando_indexeddb/index.html +++ b/files/es/web/api/indexeddb_api/using_indexeddb/index.html 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 +--- +<p>{{SeeCompatTable}}</p> +<p>La <strong>API de proceso <a href="#_edn1" name="_ednref1" title=""><strong>[i]</strong></a><em>MediaStream</em></strong>, a veces llamada<em>Media Stream API</em> o<em> Stream API</em>, es parte de la norma <a href="https://developer.mozilla.org/en-US/docs/WebRTC" title="https://developer.mozilla.org/en-US/docs/WebRTC">WebRTC [en]</a> 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.</p> +<div> + </div> +<h2 id="Conceptos_Básicos">Conceptos Básicos</h2> +<p>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 <code>MediaStream</code> 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<a href="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video" title="https://developer.mozilla.org/en-US/docs/WebRTC/taking_webcam_photos#Get_the_video"> <u>Obtener el video</u></a>.</p> +<p>Un <code>MediaStream</code> está compuesto por más objetos <a href="#_edn1" name="_ednref1" title="">[i]</a>{{domxref("MediaStreamTrack")}} que representan varias <strong>pistas</strong> de audio o video. Cada <code>MediaStreamTrack </code>puede tener uno o más <strong>canales</strong>. 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 <em>izquierdo</em> o el <em>derecho</em> en una pista de audio estéreo.</p> +<p>Los objetos <code>MediaStream</code> poseen una sola <strong>entrada</strong> y <strong>salida<a href="#_edn2" name="_ednref2" title=""><strong>[ii]</strong></a>. </strong>Un objeto <code>MediaStream</code> creado con <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&redirectslug=WebRTC%2Fnavigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia?redirectlocale=en-US&redirectslug=WebRTC%2Fnavigator.getUserMedia"><u>getUserMedia()</u></a> se denomina <em>local </em>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 <a href="#_edn3" name="_ednref3" title="">[iii]</a><a href="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API"><em><u>PeerConnection API</u></em></a> o un flujo creado con la <a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API" title="https://developer.mozilla.org/en-US/docs/Web_Audio_API"><u>API de Audio Web</u></a> <a href="#_edn4" name="_ednref4" title="">[iv]</a>{{domxref("MediaStreamAudioSourceNode")}}. La salida de un objeto <code>MediaStream</code> está enlazada a un <strong>consumidor.</strong> El mismo puede ser un elemento de medio como <code><audio> o <video></code>, la <a href="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/PeerConnection_API"><u>PeerConnection API</u></a> de WebRTC o una <a href="https://developer.mozilla.org/en-US/docs/Web_Audio_API" title="https://developer.mozilla.org/en-US/docs/Web_Audio_API"><u>API de Audio Web</u></a> <a href="#_edn5" name="_ednref5" title="">[v]</a>{{domxref("MediaStreamAudioDestinationNode")}}.</p> +<div> + </div> +<h2 id="Referencia">Referencia</h2> +<div class="index"> + <ul> + <li>{{event("addtrack")}} (event)</li> + <li>{{domxref("AudioStreamTrack")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("BlobEventInit")}}</li> + <li>{{event("ended (MediaStream)")}} (event)</li> + <li>{{event("ended (MediaStreamTrack)")}} (event)</li> + <li>{{domxref("MediaStream")}}</li> + <li>{{domxref("MediaStreamConstraints")}}</li> + <li>{{domxref("MediaStreamTrack")}}</li> + <li>{{domxref("MediaStreamTrackEvent")}}</li> + <li>{{domxref("MediaStreamTrackList")}}</li> + <li>{{domxref("MediaTrackConstraints")}}</li> + <li>{{event("muted")}} (event)</li> + <li>{{domxref("NavigatorUserMedia")}}</li> + <li>{{domxref("NavigatorUserMediaError")}}</li> + <li>{{event("overconstrained")}} (event)</li> + <li>{{event("removetrack")}} (event)</li> + <li>{{event("started")}} (event)</li> + <li>{{event("unmuted")}} (event)</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("VideoStreamTrack")}}</li> + </ul> +</div> +<h2 id="Pista_de_MediaStream">Pista de MediaStream</h2> +<p>Una <em>MediaStreamTrack </em>puede ser de dos tipos, de audio o video, y representa el origen del medio, como una cámara.</p> +<h3 id="Atributos">Atributos</h3> +<table> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Tipo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>enabled</td> + <td>Boolean </td> + <td>True si la pista sigue asociada a su fuente.</td> + </tr> + <tr> + <td>id</td> + <td>DOMString, read-only</td> + <td>Un <em>globally unique identifier </em>(GUID) que describe la pista de medios.</td> + </tr> + <tr> + <td>kind</td> + <td>DOMString, read-only</td> + <td>El <strong>audio</strong> o <strong>video</strong> para la pista de origen.</td> + </tr> + <tr> + <td>label</td> + <td>DOMString, read-only</td> + <td>Una cadena de tipo usuario-asignada que identifica la pista de origen, como en "internal microphone." </td> + </tr> + <tr> + <td>onended</td> + <td>EventHandler</td> + <td>Maneja el evento finalizado cuando se lo activa en el objeto MediaStreamTrack.</td> + </tr> + <tr> + <td>onmute </td> + <td>EventHandler</td> + <td>Maneja el evento mudo del objeto MediaStreamTrack. </td> + </tr> + <tr> + <td>onoverconstrained</td> + <td>EventHandler</td> + <td>Maneja el evento superrestricto cuando se lo activa en el objeto MediaStreamTrack.</td> + </tr> + <tr> + <td>onstarted</td> + <td>EventHandler</td> + <td>Maneja el evento iniciado cuando se lo activa en el objeto MediaStreamTrack.</td> + </tr> + <tr> + <td>onunmute </td> + <td>EventHandler</td> + <td>Manjea el evento sin enmudecer cuando se lo activa en el objeto MediaStreamTrack.</td> + </tr> + <tr> + <td>readyState</td> + <td>unsigned short, read-only</td> + <td> + <p>Valores para la pista lista:</p> + <ul> + <li>live - la pista está activa; la salida se puede activar <em>on</em> y <em>off</em> con el atributo habilitado.</li> + <li>muted - el origen del medio subyacente de la pista no puede proveer temporalmente datos en tiempo real.</li> + </ul> + </td> + </tr> + <tr> + <td>sourceId</td> + <td>DOMString, read-only</td> + <td>La identidad de este origen que es único para esta aplicación y persistente. Se recomienda una GUID pero no es obligatoria.</td> + </tr> + <tr> + <td>sourceType</td> + <td>SourceTypeEnum, read-only</td> + <td>Contiene el tipo de información del origen, si es que existe.</td> + </tr> + </tbody> +</table> +<h3 id="Eventos">Eventos</h3> +<table> + <thead> + <tr> + <th scope="col">Evento</th> + <th scope="col">Interfaz</th> + <th scope="col">Descripción </th> + </tr> + </thead> + <tbody> + <tr> + <td>started</td> + <td>Event</td> + <td>El objeto MediaStreamTrack no es más "new" en el readyState.</td> + </tr> + <tr> + <td>muted</td> + <td>Event</td> + <td>El origen del objeto MediaStreamTrack no puede proveer datos temporalmente.</td> + </tr> + <tr> + <td>unmuted </td> + <td>Event</td> + <td>El origen del objeto MediaStreamTrack a recomenzado a proveer datos</td> + </tr> + <tr> + <td>overconstrained</td> + <td>Event</td> + <td>El 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.</td> + </tr> + <tr> + <td>ended</td> + <td>Event</td> + <td> + <p>El origen del objeto MediaStreamTrack no proveerá datos; puede ocurrir por lo siguiente:</p> + <ul> + <li>el usuario a deshabilitado los permisos de la aplicación</li> + <li>el dispositivo de origen está desconectado</li> + <li>el <em>peer</em> remoto no transmite datos</li> + <li>se llamó el método stop()</li> + </ul> + </td> + </tr> + </tbody> +</table> +<h3 id="appendConstraint()">appendConstraint()</h3> +<p>Agrega la restricción al final de la lista. Esto sólo es un método para añadir restricciones optativas.</p> +<dl> + <dt> + Parámetros</dt> + <dd> + constraintName <strong>DOMString</strong>, required.</dd> + <dd> + constraintValue <strong>Primitive (DOMString, float, etc.) </strong>or<strong> MinMaxConstraint</strong>, required.</dd> + <dt> + Devuelve</dt> + <dd> + void</dd> + <dt> + Excepciones</dt> + <dd> + None.</dd> +</dl> +<h3 id="applyConstraints()">applyConstraints()</h3> +<p>Aplica una lista de opciones optativas a la pista. Sobrescribe cualquier otra restricción optativa ya existente en la pista.</p> +<dl> + <dt> + <strong>Parámetros</strong></dt> + <dd> + constraints <strong>MediaTrackConstraints</strong>, required.</dd> + <dt> + Devuelve</dt> + <dd> + void</dd> + <dt> + Excepciones</dt> + <dd> + None.</dd> +</dl> +<h3 id="constraints()">constraints()</h3> +<p>Devuelte todas las <a href="#_edn1" name="_ednref1" title="">[i]</a>restricciones en la pista, obligatorias y optativas. Si tanto<em> <code>mandatory </code></em>u <code>optional</code> no tienen restricciones, ese campo será <code>undefined</code>. Si ninguno tiene restricciones, entonces<code> constraints()</code> devolverá <code>null<em>.</em></code></p> +<dl> + <dt> + Parámetros</dt> + <dd> + None.</dd> + <dt> + Devuelve</dt> + <dd> + <strong>MediaTrackConstraints</strong> or <strong>null</strong></dd> + <dt> + <span id="cke_bm_186C" style="display: none;"> </span>Excepciones</dt> + <dd> + None.</dd> +</dl> +<h3 id="getConstraint()">getConstraint()</h3> +<p>Trae una restricción específica, por nombre, de la pista. Este método puede devolver una de varias posibilidades:</p> +<ul> + <li>Si su restricción no existe, devuelve <code>null.</code></li> + <li>Si no provee true para parámetro optativo<code>mandatory </code>y su búsqueda resulta en más de una restricción, este método devolverá una lista. Cada ítem de la lista será el nombre de la búsqueda así como su valor o un objeto <code>MinMaxConstraint</code>. La lista se agrupa con la entrada 0º como la más importante y cada entrada posterior es progresivamente menos importante.</li> + <li>Si provee<code>True </code>al parámetro <code>mandatory</code> y su búsqueda es miembro del <code>MediaTrackConstraintSet </code>de la pista, este método devuelve su valor primitivo o su <code>MinMaxConstraint</code>, cualquiera que aplique al caso.</li> +</ul> +<dl> + <dt> + Parámetros</dt> + <dd> + constraintName <strong>DOMString</strong>, required.</dd> + <dd> + mandatory <strong>boolean</strong>, optional, default false.</dd> + <dt> + Devuelve</dt> + <dd> + Any of the possibilities mentioned above.</dd> + <dt> + Excepciones</dt> + <dd> + None.</dd> +</dl> +<p>--</p> +<h3 id="stop()">stop()</h3> +<p>Detiene permanentemente la creación de datos para las pistas y remueve las referencias a los orígines.</p> +<dl> + <dt> + Parámetros</dt> + <dd> + None.</dd> + <dt> + Devuelve</dt> + <dd> + Void.</dd> + <dt> + Excepciones</dt> + <dd> + None.</dd> +</dl> +<h2 id="Lista_de_pistas_de_MediaStream">Lista de pistas de MediaStream</h2> +<p>Un MediaStream tiene dos objetos MediaStreamTrackList, uno para la pista de video y otro para la de audio.</p> +<table> + <thead> + <tr> + <th scope="col">Atributo </th> + <th scope="col">Tipo</th> + <th scope="col">Descripción</th> + </tr> + </thead> + <tbody> + <tr> + <td>length</td> + <td>unsigned long, read-only </td> + <td>El número de pistas en la lista.</td> + </tr> + <tr> + <td>onaddtrack </td> + <td>EventHandler</td> + <td>Maneja el evento addtrack.</td> + </tr> + <tr> + <td>onremovetrack </td> + <td>EventHandler</td> + <td>Maneja el evento removetrack.</td> + </tr> + </tbody> +</table> +<h3 id="Eventos_2">Eventos</h3> +<table> + <thead> + <tr> + <th scope="col">Evento</th> + <th scope="col">Interfaz</th> + <th scope="col">Descripción </th> + </tr> + </thead> + <tbody> + <tr> + <td>addtrack </td> + <td>MediaStreamTrackEvent </td> + <td>Se agregó una MediaStreamTrack a la lista.</td> + </tr> + <tr> + <td>removetrack </td> + <td>MediaStreamTrackEvent</td> + <td>Se removió una MediaStreamTrack de la lista.</td> + </tr> + </tbody> +</table> +<h3 id="add()">add()</h3> +<p>Agrega una MediaStreamTrack a la lista de pistas.</p> +<dl> + <dt> + Parámetros</dt> + <dd> + MediaStreamTrack <strong>track</strong>, required.</dd> + <dt> + Devuelve</dt> + <dd> + Void.</dd> + <dt> + Excepciones</dt> + <dd> + INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd> +</dl> +<h3 id="item()">item()<span id="cke_bm_369C" style="display: none;"> </span></h3> +<p>Devuelve la MediaStreamTrack al valor de índice (index) especificado.</p> +<dl> + <dt> + Parámetros</dt> + <dd> + unsigned long <strong>index</strong>, required.</dd> + <dt> + Devuelve</dt> + <dd> + MediaStreamTrack</dd> + <dt> + Excepciones</dt> + <dd> + None.</dd> +</dl> +<h3 id="Remove()">Remove()</h3> +<p>Remueve una MediaStreamTrack de la lista de pistas.</p> +<dl> + <dt> + Parámetros</dt> + <dd> + MediaStreamTrack <strong>track</strong>, required.</dd> + <dt> + Devuelve</dt> + <dd> + Void.</dd> + <dt> + Excepciones</dt> + <dd> + INVALID_STATE_ERR if the stream is finished (all tracks have ended).</dd> +</dl> +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> +<p>{{ CompatibilityTable() }}</p> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera </th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Stream API </td> + <td>21{{ property_prefix("webkit") }} </td> + <td>nightly 18{{ property_prefix("moz") }} </td> + <td>{{ CompatUnknown() }} </td> + <td>12</td> + <td>{{ CompatUnknown() }} </td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Stream API </td> + <td>{{ CompatNo() }} </td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }} </td> + <td>{{ CompatNo() }} </td> + <td>{{ CompatNo() }} </td> + </tr> + </tbody> + </table> +</div> +<p>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:</p> +<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px;"> + <li>Escriba "about:config" en la barra de direcciones y diga que sí quiere efectuar los cambios</li> + <li>Busque la entrada de "media.navigator.enabled" entry y establezca su valos a "true" [sin comillas]</li> +</ul> +<div> + <p> </p> + <div> + <br> + <hr> + <div id="edn1"> + <p><a href="#_ednref1" name="_edn1" title="">[i]</a> en castellano,<em>Flujo o transmisión de [multi] Medios</em></p> + </div> + </div> + <hr> + <div id="edn1"> + <p><a href="#_ednref1" name="_edn1" title="">[i]</a> en castellano,<em> Pista de Flujo de Media</em></p> + </div> + <div id="edn2"> + <p><a href="#_ednref2" name="_edn2" title="">[ii]</a> del inglés, <em>input </em>y<em>output</em></p> + </div> + <div id="edn3"> + <p><a href="#_ednref3" name="_edn3" title="">[iii]</a> en castellano, <em>API de Conexión de Pares</em></p> + </div> + <div id="edn4"> + <p><a href="#_ednref4" name="_edn4" title="">[iv]</a> en castellano,<em> Nodo de origen del Audio MediaStream</em></p> + </div> + <div id="edn5"> + <p><a href="#_ednref5" name="_edn5" title="">[v]</a> en castellano, <em>Nodo de destino del Audio MediaStream</em></p> + <div> + <br> + <hr> + <div id="edn1"> + <p><a href="#_ednref1" name="_edn1" title="">[i]</a> del inglés,<em>constraints</em></p> + </div> + </div> + </div> +</div> +<p> </p> +<h2 id="Ver_también">Ver también</h2> +<ul> + <li><a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> - la página de introducción a la API</li> + <li><a href="/en-US/docs/WebRTC/navigator.getUserMedia" title="/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia()</a></li> + <li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="/en-US/docs/WebRTC/taking_webcam_photos">Taking webcam photos</a> - un tutorial para usar getUserMedia()</li> +</ul> diff --git a/files/es/web/api/navigatorgeolocation/geolocation/index.html b/files/es/web/api/navigator/geolocation/index.html index 94c22ef6b0..94c22ef6b0 100644 --- a/files/es/web/api/navigatorgeolocation/geolocation/index.html +++ b/files/es/web/api/navigator/geolocation/index.html 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 ---- -<p>{{APIRef("Geolocation API")}}</p> - -<p><code><strong>NavigatorGeolocation</strong></code> contains a creation method allowing objects implementing it to obtain a {{domxref("Geolocation")}} instance.</p> - -<p>There is no object of type <code>NavigatorGeolocation</code>, but some interfaces, like {{domxref("Navigator")}} implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorGeolocation</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorGeolocation</code></em><em> interface neither implements, nor inherit any method.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation', '#navi-geo', 'NavigatorGeolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation.</a></li> -</ul> - -<p> </p> diff --git a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html b/files/es/web/api/navigatoronline/online_and_offline_events/index.html index d4f8a77824..d4f8a77824 100644 --- a/files/es/web/api/navigatoronline/eventos_online_y_offline/index.html +++ b/files/es/web/api/navigatoronline/online_and_offline_events/index.html diff --git a/files/es/web/api/node/insertarantes/index.html b/files/es/web/api/node/insertbefore/index.html index 102d4dfbdd..102d4dfbdd 100644 --- a/files/es/web/api/node/insertarantes/index.html +++ b/files/es/web/api/node/insertbefore/index.html 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 ---- -<div> -<div>{{APIRef("DOM")}}</div> -{{Non-standard_header}} - -<p>La propiedad de solo loctura de <code><strong>Nodo.nodePrincipal</strong></code> devuelve el objeto {{Interface("nsIPrincipal")}} representando el contexto de seguridad del nodo actual.</p> - -<p>{{Note("This property exists on all nodes (HTML, XUL, SVG, MathML, etc.), but only if the script trying to use it has chrome privileges.")}}</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox"><em>principalObj</em> = element.nodePrincipal -</pre> - -<h2 id="Notes" name="Notes">Notas</h2> - -<p>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</p> - -<h2 id="Specification" name="Specification">Especificación</h2> - -<p>No hay especificaciones.</p> -</div> - -<p> </p> diff --git a/files/es/web/api/node/elementopadre/index.html b/files/es/web/api/node/parentelement/index.html index 2a2e947a8d..2a2e947a8d 100644 --- a/files/es/web/api/node/elementopadre/index.html +++ b/files/es/web/api/node/parentelement/index.html diff --git a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html b/files/es/web/api/notifications_api/using_the_notifications_api/index.html index 8220534f63..8220534f63 100644 --- a/files/es/web/api/notifications_api/usando_la_api_de_notificaciones/index.html +++ b/files/es/web/api/notifications_api/using_the_notifications_api/index.html 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 +--- +<p> </p> + +<p><strong>Pointer Lock </strong>(antes llamado Bloqueo del <em>Mouse</em>) 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 <em>mouse</em>. Te da acceso al movimiento <span style="line-height: inherit;">puro </span><span style="line-height: inherit;">del <em>mouse</em>, bloquea el objetivo de los eventos del <em>mouse</em> a un solo elemento, elimina límites en cuanto a que tan lejos puedes mover el <em>mouse</em> en una sola dirección, y quita el cursor de la vista.</span></p> + +<p>Esta API es útil para aplicaciones que requieren bastantes acciones para controlar los movimientos del <em>mouse</em>, 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.</p> + +<p>Por ejemplo, puedes crear aplicaciones que permiten a los usuarios controlar el ángulo de visión con sólo mover el <em>mouse</em> sin ningún clic, permitiendo liberar <span style="line-height: inherit;">los clics</span><span style="line-height: inherit;"> para otras acciones. Este tipo de entrada del <em>mouse</em> 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).</span></p> + +<p><strong>Pointer Lock</strong><span style="line-height: inherit;"> te permite acceder a los eventos del </span><em>mouse</em><span style="line-height: inherit;"> 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 </span><em>mouse</em><span style="line-height: inherit;"> sin fin. Sin </span><strong>Pointer Lock</strong><span style="line-height: inherit;">, 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 </span><em>mouse</em><span style="line-height: inherit;"> 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 </span><em>mouse</em><span style="line-height: inherit;"> fuera del juego. Una tragedia!</span></p> + +<h2 id="basics" name="basics">Conceptos Básicos</h2> + +<p><strong>Pointer Lock</strong><strong style="line-height: inherit;"> </strong><span style="line-height: inherit;">está relacionado con la <em>mouse capture</em>. </span><em>mouse capture </em><span style="line-height: inherit;">proporciona la entrega continua de eventos a un elemento de destino, mientras que el <em>mouse</em> se arrastra, pero se detiene cuando se suelta el clic. </span><strong>Pointer Lock</strong><span style="line-height: inherit;"> es diferente de </span><em>mouse capture </em><span style="line-height: inherit;">en las siguientes maneras:</span></p> + +<ul> + <li><span style="line-height: 1.5em;">Es persistente. <strong style="line-height: normal;">Pointer Lock</strong> no libera el <em>mouse</em> hasta que se haga una llamada explícita a la API o el usuario utilize un gesto concreto de lanzamiento.</span></li> + <li><span style="line-height: 1.5em;">No está limitado por los limites del navegador o la pantalla.</span></li> + <li>Envia continuamente eventos independientemente del estado del clic del <em>mouse</em>.</li> + <li>Oculta el cursor.</li> +</ul> + +<h2 id="example" name="example">Ejemplo</h2> + +<p>El siguiente es un ejemplo de cómo se puede configurar <strong>Pointer Lock</strong> en su página web.</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="method_overview" name="method_overview">Propiedades/Métodos</h2> + +<p>La API de bloque de puntero ,similar a la API de Fullscreen,extiende del elemento DOM agregando un nuevo método, <code>requestPointerLock</code>, la cual es dependiente del vendedor(del navegador). Puede escribirse como:</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">element.webkitRequestPointerLock(); // para Chrome</span></span> + +element.mozRequestPointerLock(); // para Firefox +</pre> + +<p>Current implementations of <code>requestPointerLock</code> are tightly bound to <code>requestFullScreen</code> 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 (<code>pointerlockchange</code>, <code>pointerlockerror</code>) indicating the success or failure of the request. This matches how the Fullscreen API works, with its <code>requestFullScreen</code> method and <code>fullscreenchange</code> and <code>fullscreenerror</code> events.</p> + +<p>The Pointer lock API also extends the <code>document</code> 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 <code>pointerLockElement</code>, which is vendor-prefixed for now. The new method on <code>document</code> is <code>exitPointerLock</code> and, as the name implies, it is used to exit Pointer lock.</p> + +<p>The <code>pointerLockElement</code> 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:</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement;</span></span> + +// 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 +} +</pre> + +<p>The <code>document</code>'s <code>exitPointerLock</code> method is used to exit pointer lock, and like requestPointerLock, works asynchrounously using the <code>pointerlockchange</code> and <code>pointerlockerror</code> events:</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.exitPointerLock = document.exitPointerLock || + document.mozExitPointerLock || + document.webkitExitPointerLock;</span></span> + +function pointerLockChange() { + <span class="idlInterface" id="idl-def-MouseLockable"><span class="idlInterface" id="idl-def-MouseLockable">document.pointerLockElement = document.pointerLockElement || + document.mozPointerLockElement || + document.webkitPointerLockElement;</span></span> + + 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(); +</pre> + +<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockchange event</h2> + +<p>When the Pointer lock state changes—for example, when calling <code>requestPointerLock</code>, <code>exitPointerLock</code>, the user pressing the ESC key, etc.—the <code>pointerlockchange</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p> + +<div class="note">This event is currently prefixed as <code>mozpointerlockchange</code> in Firefox and <code>webkitpointerlockchange</code> in Chrome. </div> + +<h2 id="mouselocklostevent" name="mouselocklostevent">pointerlockerror event</h2> + +<p>When there is an error caused by calling <code>requestPointerLock</code> or <code>exitPointerLock</code>, the <code>pointerlockerror</code> event is dispatched to the <code>document</code>. This is a simple event and contains no extra data.</p> + +<div class="note">This event is currently prefixed as <code>mozpointerlockerror</code> in Firefox and <code>webkitpointerlockerror</code> in Chrome. </div> + +<h2 id="extensions" name="extensions">Extensions to mouse events</h2> + +<p>The Pointer lock API extends the normal <code>MouseEvent</code> with movement attributes.</p> + +<pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">partial interface <span class="idlInterfaceID">MouseEvent</span> { +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementX">movementX</a></span>;</span> +<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>long</a></span> <span class="idlAttrName"><a href="http://dvcs.w3.org/hg/webevents/raw-file/default/mouse-lock.html#widl-MouseEvent-movementY">movementY</a></span>;</span> +};</span></pre> + +<div class="note">The movement attributes are currently prefixed as <code>.mozMovementX</code> and <code>.mozMovementY</code> in Firefox, and<code>.webkitMovementX</code> and <code>.webkitMovementY</code> in Chrome.</div> + +<p>Two new parameters to mouse events—<code>movementX</code> and <code>movementY</code>—provide the change in mouse positions. The values of the parameters are the same as the difference between the values of <a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent"><code>MouseEvent</code></a> properties, <code>screenX</code> and <code>screenY</code>, which are stored in two subsequent <code>mousemove</code> events, <code>eNow</code> and <code>ePrevious</code>. In other words, the Pointer lock parameter <code>movementX = eNow.screenX - ePrevious.screenX</code>.</p> + +<h3 id="locked_state" name="locked_state">Locked state</h3> + +<p>When Pointer lock is enabled, the standard <code>MouseEvent</code> properties <code>clientX</code>, <code>clientY</code>, <code>screenX</code>, and <code>screenY</code> are held constant, as if the mouse is not moving. The <code>movementX</code> and <code>movementY</code> properties continue to provide the mouse's change in position. There is no limit to <code>movementX</code> and <code>movementY</code> 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.</p> + +<h3 id="unlocked_state" name="unlocked_state">Unlocked state</h3> + +<p>The parameters <code>movementX</code> and <code>movementY</code> are valid regardless of the mouse lock state, and are available even when unlocked for convenience.</p> + +<p>When the mouse is unlocked, the system cursor can exit and re-enter the browser window. If that happens, <code>movementX</code> and <code>movementY</code> could be set to zero.</p> + +<h2 id="iframe_limitations">iframe limitations</h2> + +<p>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.</p> + +<p>While iframes work by default, "sandboxed" iframes block Pointer lock. The ability to avoid this limitation, in the form of the attribute/value combination <code><iframe sandbox="allow-pointer-lock"></code>, is expected to appear in Chrome soon.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>Targeting 23{{ property_prefix("webkit") }}*</p> + + <p>See <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=72754" title="http://code.google.com/p/chromium/issues/detail?id=72754">CR/72574</a></p> + </td> + <td> + <p>{{ CompatGeckoDesktop("14.0") }}</p> + + <p>{{bug("633602") }}</p> + </td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>* Requires the feature be enabled in <code>about:flags</code> or Chrome started with the <code>--enable-pointer-lock</code> flag.</p> + +<h2 id="See_also" name="See_also">See also</h2> + +<p><a href="/en/DOM/MouseEvent" title="en/DOM/Event/UIEvent/MouseEvent">MouseEvent</a></p> 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 ---- -<p class="summary"><span class="seoSummary">La W3C <a href="/en-US/docs/Web/API/Push_API">Push API</a> 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.</span></p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: Early versions of Firefox OS used a proprietary version of this API called <a href="/en-US/docs/Web/API/Simple_Push_API">Simple Push</a>. This is being rendered obsolete by the Push API standard.</p> -</div> - -<h2 id="Demo_las_bases_de_una_simple_app_de_servidor_de_chat">Demo: las bases de una simple app de servidor de chat</h2> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11823/push-api-demo.png" style="border: 1px solid black; display: block; height: 406px; margin: 0px auto; width: 705px;"></p> - -<p>Para correr la demo, siga las instrucciones de <a href="https://github.com/chrisdavidmills/push-api-demo">push-api-demo README</a>. 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.</p> - -<h2 id="Visión_de_la_tecnología">Visión de la tecnología</h2> - -<p>Esta sección proporciona un esquema de qué tecnologías están involucradas en este ejemplo.</p> - -<p>Los mensajes web push hacen parte de la familia tecnológica <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a>; 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:</p> - -<p>Web Push messages are part of the <a href="/en-US/docs/Web/API/Service_Worker_API">service workers</a> 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:</p> - -<ul> - <li>Enviar una <a href="/en-US/docs/Web/API/Notifications_API">notificación web</a> emergente para alertar al usuario. Esto requiere que sean concedidos los permisos para enviar el mensaje push.</li> - <li>Envía un mensaje a la página principal a través de un {{domxref("MessageChannel")}}.</li> -</ul> - -<p>A menudo una combinación de los dos será necesario; La demo a continuación muestra un ejemplo de cada uno.</p> - -<div class="note"> -<p><strong>Nota</strong>: 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 <a href="https://nodejs.org/">NodeJS</a>.</p> -</div> - -<p>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.</p> - -<h3 id="Encryption">Encryption</h3> - -<div class="note"> -<p><strong>Note</strong>: For an interactive walkthrough, try JR Conlin's <a href="https://jrconlin.github.io/WebPushDataTestPage/">Web Push Data Encryption Test Page</a>.</p> -</div> - -<p>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 <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> 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 <a href="https://github.com/marco-c/web-push">web-push library</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: There is also another library to handle the encryption with a Node and Python version available, see <a href="https://github.com/martinthomson/encrypted-content-encoding">encrypted-content-encoding</a>.</p> -</div> - -<h3 id="Push_workflow_summary">Push workflow summary</h3> - -<p>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.</p> - -<ol> - <li>Request permission for web notifications, or anything else you are using that requires permissions.</li> - <li>Register a service worker to control the page by calling {{domxref("ServiceWorkerContainer.register()")}}.</li> - <li>Subscribe to the push messaging service using {{domxref("PushManager.subscribe()")}}.</li> - <li>Retrieve the endpoint associated with the subscription and generate a client public key ({{domxref("PushSubscription.endpoint")}} and {{domxref("PushSubscription.getKey()")}}. Note that <code>getKey()</code> is currently experimental and Firefox only.)</li> - <li>Send these details to the server so it can send push message when required. This demo uses {{domxref("XMLHttpRequest")}}, but you could use <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>.</li> - <li>If you are using the <a href="/en-US/docs/Web/API/Channel_Messaging_API">Channel Messaging API</a> to comunicate with the service worker, set up a new message channel ({{domxref("MessageChannel.MessageChannel()")}}) and send <code>port2</code> 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.</li> - <li>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.</li> - <li>To send a push message, you need to send an HTTP <code>POST</code> to the endpoint URL. The request must include a <code>TTL</code> 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 <a href="https://github.com/marco-c/web-push">web-push</a> module, which handles all the hard work for you.</li> - <li>Over in your service worker, set up a <code>push</code> event handler to respond to push messages being received. - <ol> - <li>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 <code>port2</code> we sent over to the service worker context ({{domxref("MessagePort")}}). This is available on the {{domxref("MessageEvent")}} object passed to the <code>onmessage</code> handler ({{domxref("ServiceWorkerGlobalScope.onmessage")}}). Specifically, this is found in the <code>ports</code> property, index 0. Once this is done, you can send a message back to <code>port1</code>, using {{domxref("MessagePort.postMessage()")}}.</li> - <li>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.<span id="cke_bm_307E" style="display: none;"> </span></li> - </ol> - </li> -</ol> - -<h2 id="Construyendo_la_demo">Construyendo la demo</h2> - -<p>Vamos a ensayar el código para esta demo, podemos empezar a entender como trabaja todo esto.</p> - -<ul> - <li> - <h3 id="HTML_y_CSS">HTML y CSS</h3> - </li> -</ul> - -<p>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.</p> - -<p>El CSS ha sido muy minimo para no desvirtuar la explicación de la funcionalidad Push Api.</p> - -<ul> - <li> - <h3 id="El_archivo_JavaScript_principal">El archivo JavaScript principal</h3> - </li> -</ul> - -<p>El JavaScript es obviamente más sustancial. Echemos un vistazo al archivo JavaScript principal.</p> - -<h4 id="Variables_y_configuración_inicial">Variables y configuración inicial</h4> - -<p>Para iniciar, nosotros declaramos algunas variables a usar en nuestra app:</p> - -<pre class="brush: js">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';</pre> - -<p>Primero, tenemos dos boleanos para hacer un seguimiento si se a suscrito a push, y si ha permitido las notificaciones.</p> - -<p>A continuación, tomamos una referencia al suscrito/no-suscrito <code>{{htmlelement("button")}}</code>, y se declaran variables para almacenar referencias a nuestro mensaje enviado boton/entrada (sólo se crean cuando la suscripsión es correcta.)</p> - -<p>Las siguientes variables toman referencia a los trés elementos principales <code>{{htmlelement("div")}}</code> en el diseño, por lo que podemos insertar elementos en ellos (por ejemplo cuando aparezca el botón <em>envíar el mensaje de chat</em> o el mensaje de chat aparezca en la lista de <em>mensajes</em>.)</p> - -<p>Finalmente tomamos referencia a nuestro formulario de selección de nombre y el elemento <code>{{htmlelement("input")}},</code> damos a la entrada un valor por defecto, y usamos <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> para detener el envío del formulario cuando este es enviado pulsando return.</p> - -<p>A continuación, pedimos permiso para enviar las notificaciones web, usando <code>{{domxref("Notification.requestPermission","requestPermission()")}}</code>:</p> - -<pre class="brush: js">Notification.requestPermission();</pre> - -<p>Ahora ejecutamos una sección de código cuando se dispara el <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload">onload</a></code>, 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 <code>unsubscribe()</code> si actualmente estamos suscritos (<code>isPushEnabled</code> is <code>true</code>), y <code>subscribe()</code> de la otra manera:</p> - -<pre class="brush: js">window.addEventListener('load', function() { - subBtn.addEventListener('click', function() { - if (isPushEnabled) { - unsubscribe(); - } else { - subscribe(); - } - });</pre> - -<p>A continuación verificamos el service worked es soportado. Si es así, registramos un service worker usando <code>{{domxref("ServiceWorkerContainer.register()")}}</code>, y ejecutando nuestra función <code>initialiseState()</code>. Si no es así, entregamos un mensaje de error a la consola.</p> - -<pre class="brush: js"> // 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.'); - } -}); -</pre> - -<p>La siguiente cosa en el código es la función <code>initialiseState()</code> — para el codigo completo comentado, mira en <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>initialiseState()</code> source on Github</a> (no lo estamos repitiendo aquí por brevedad.)</p> - -<p><code>initialiseState()</code> primero comprueba si las notificaciones son soportadas en los service workers, entonces establece la variable <code>useNotifications</code> 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.</p> - -<p>Finalmente, se usa <code>{{domxref("ServiceWorkerContainer.ready()")}}</code> 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 <code>{{domxref("ServiceWorkerRegistration.pushManager")}}</code>, que devuelve un objeto <code>{{domxref("PushManager")}}</code> cuando llamamos a <code>{{domxref("PushManager.getSubscription()")}}</code>. Una vez la segunda promesa interna se resuelva, habilitamos el botón subscribe/unsubscribe (<code>subBtn.disabled = false;</code>), y verificamos que tenemos un objeto suscripsión para trabajar.</p> - -<p>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 <code>isPushEnabled</code> to <code>true</code>, toma el punto final de suscripsión desde <code>{{domxref("PushSubscription.endpoint")}}</code>, genera una public key usando <code>{{domxref("PushSubscription.getKey()")}}</code>, y ejecutando nuestra función <code>updateStatus()</code>, que como verá más adelante se comunica con el servidor.</p> - -<p>Como un bonus añadido, configuramos un nuevo <code>{{domxref("MessageChannel")}}</code> usando el constructor <code>{{domxref("MessageChannel.MessageChannel()")}}</code>, toma una referencia al service worker activo usando <code>{{domxref("ServiceworkerRegistration.active")}}</code>, luego configure un canal entre el contexto principal del navegador y el contexto del service worker usando <code>{{domxref("Worker.postMessage()")}}</code>. El contexto del navegador recive mensajes en <code>{{domxref("MessageChannel.port1")}}</code>; Cuando esto suceda, ejecutamos la función <code>handleChannelMessage()</code> para decidir que hacer con esos datos (mirar la sección <code>{{anch("Handling channel messages sent from the service worker")}}</code> ).</p> - -<h4 id="Subscribing_and_unsubscribing">Subscribing and unsubscribing</h4> - -<p>Ahora regresamos la atención a las funciones <code>subscribe()</code> y <code>unsubscribe()</code> usadas para subscribe/unsubscribe al servicion de notificaciones push.</p> - -<p>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 <code>updateStatus()</code> function along with the update type (<code>subscribe</code>) to send the necessary details to the server.</p> - -<p>We also make the necessary updates to the app state (set <code>isPushEnabled</code> to <code>true</code>) and UI (enable the subscribe/unsubscribe button and set its label text to show that the next time it is pressed it will unsubscribe.)</p> - -<p>The <code>unsubscribe()</code> 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()")}}.</p> - -<p>Appropriate error handling is also provided in both functions. </p> - -<p>We only show the <code>subscribe()</code> code below, for brevity; see the full <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">subscribe/unsubscribe code on Github</a>.</p> - -<pre class="brush: js">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'; - } - }); - }); -}</pre> - -<h4 id="Updating_the_status_in_the_app_and_server">Updating the status in the app and server</h4> - -<p>The next function in our main JavaScript is <code>updateStatus()</code>, which updates the UI for sending chat messages when subscribing/unsubscribing and sends a request to update this information on the server.</p> - -<p>The function does one of three different things, depending on the value of the <code>statusType</code> parameter passed into it:</p> - -<ul> - <li><code>subscribe</code>: The button and text input for sending chat messages are created and inserted into the UI, and an object is sent to the server via XHR containing the status type (<code>subscribe</code>), username of the subscriber, subscription endpoint, and client public key.</li> - <li><code>unsubscribe</code>: This basically works in the opposite way to subscribe — the chat UI elements are removed, and an object is sent to the server to tell it that the user has unsubscribed.</li> - <li><code>init</code>: This is run when the app is first loaded/initialised — it creates the chat UI elements, and sends an object to the server to tell it that which user has reinitialised (reloaded.)</li> -</ul> - -<p>Again, we have not included the entire function listing for brevity. Examine the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js">full <code>updateStatus()</code> code on Github</a>.</p> - -<h4 id="Handling_channel_messages_sent_from_the_service_worker">Handling channel messages sent from the service worker</h4> - -<p>As mentioned earlier, when a <a href="/en-US/docs/Web/API/Channel_Messaging_API">channel message</a> is received from the service worker, our <code>handleChannelMessage()</code> function is called to handle it. This is done by our handler for the {{event("message")}} event, {{domxref("channel.port1.onmessage")}}:</p> - -<pre class="brush: js">channel.port1.onmessage = function(e) { - handleChannelMessage(e.data); -}</pre> - -<p>This occurs when the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js#L8">service worker sends a channel message over</a>.</p> - -<p>The <code>handleChannelMessage()</code> function looks like this:</p> - -<pre class="brush: js">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 = ''; - } -}</pre> - -<p>What happens here depends on what the <code>action</code> property on the <code>data</code> object is set to:</p> - -<ul> - <li><code>subscribe</code> or <code>init</code> (at both startup and restart, we need to do the same thing in this sample): An {{htmlelement("li")}} element is created, its text content is set to <code>data.name</code> (the name of the subscriber), and it is appended to the subscribers list (a simple {{htmlelement("ul")}} element) so there is visual feedback that a subscriber has (re)joined the chat.</li> - <li><code>unsubscribe</code>: We loop through the children of the subscribers list, find the one whose text content is equal to <code>data.name</code> (the name of the unsubscriber), and delete that node to provide visual feedback that someone has unsubscribed.</li> - <li><code>chatMsg</code>: In a similar manner to the first case, an {{htmlelement("li")}} element is created, its text content is set to <code>data.name + ": " + data.msg</code> (so for example "Chris: This is my message"), and it is appended to the chat messages list; this is how the chat messages appear on the UI for each user.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: 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 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Using Service Workers</a> for more details.</p> -</div> - -<h4 id="Sending_chat_messages">Sending chat messages</h4> - -<p>When the <em>Send Chat Message</em> button is clicked, the content of the associated text field is sent as a chat message. This is handled by the <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js"><code>sendChatMessage()</code> function</a> (again, not shown in full for brevity). This works in a similar way to the different parts of the <code>updateStatus()</code> 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 <code>statusType</code> of <code>chatMsg</code>.</p> - -<h3 id="The_server">The server</h3> - -<p>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 <a href="http://nodejs.org/">NodeJS</a> (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js">server.js</a></code>), which handles the XHR requests sent by our client-side JavaScript code.</p> - -<p>It uses a text file (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>) to store subscription details; this file starts out empty. There are four different types of request, marked by the <code>statusType</code> 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:</p> - -<ul> - <li><code>subscribe</code>: The server adds the new subscriber's details into the subscription data store (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/endpoint.txt">endpoint.txt</a></code>), including the endpoint, and then sends a push message to all the endpoints it has stored to tell each subscriber that someone new has joined the chat.</li> - <li><code>unsubscribe</code>: The server finds the sending subscriber's details in the subscription store and removes it, then sends a push message to all remaining subscribers telling them the user has unsubscribed.</li> - <li><code>init</code>: The server reads all the current subscribers from the text file, and sends each one a push message to tell them a user has initialized (rejoined) the chat.</li> - <li><code>chatMsg</code>: Sent by a subscriber that wishes to deliver a message to all users; the server reads the list of all current subscribers from the subscription store file, then sends each one a push message containing the new chat message they should display.</li> -</ul> - -<p>A couple more things to note:</p> - -<ul> - <li>We are using the Node.js <a href="https://nodejs.org/api/https.html">https module</a> to create the server, because for security purposes, service workers only work on a secure connection. This is why we need to include the <code>.pfx</code> security cert in the app, and reference it when creating the server in the Node code.</li> - <li>When you send a push message without data, you simply send it to the endpoint URL using an HTTP <code>POST</code> request. However, when the push message contains data, you need to encrypt it, which is quite a complex process. As time goes on, libraries will appear to do this kind of thing for you; for this demo we used Marco Castelluccio's NodeJS <a href="https://github.com/marco-c/web-push">web-push library</a>. Have a look at the source code to get more of an idea of how the encryption is done (and read <a href="https://tools.ietf.org/html/draft-ietf-webpush-encryption-01">Message Encryption for Web Push</a> for more details.) The library <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/server.js#L43-L46">makes sending a push message simple</a>.</li> - <li>If you wish to have messages that collapse (newer updates will replace older updates), you can use the Topic feature. A topic is a special class of subscription update that has a <code>Topic</code> header. A topic name can be any URL safe, base64 string. For example, a header like "<code>Topic: MyFavoriteTopic-For2016</code>" is fine, but "<code>Topic: OMG! Kitties :)</code>" is not. Topic messages are collapsed when the subscriber is offline or unavailable. When they come back, they will receive only the lastest message per topic, along with whatever other messages are pending. "<a href="https://hacks.mozilla.org/2016/11/mozilla-push-server-now-supports-topics/">Mozilla Push Server now supports Topics</a>" on the Mozilla Hacks blog gives more details and examples.</li> -</ul> - -<h3 id="The_service_worker">The service worker</h3> - -<p>Now let's have a look at the service worker code (<code><a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/sw.js">sw.js</a></code>), 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 <code>action</code> property:</p> - -<ul> - <li><code>subscribe</code> or <code>unsubscribe</code>: We send a system notification via the <code>fireNotification()</code> function, but also send a message back to the main context on our {{domxref("MessageChannel")}} so we can update the subscriber list accordingly (see {{anch("Handling channel messages sent from the service worker")}} for more details).</li> - <li><code>init</code> or <code>chatMsg</code>: We just send a channel message back to the main context to handle the <code>init</code> and <code>chatMsg</code> cases (these don't need a system notification).</li> -</ul> - -<pre class="brush: js">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); - } -});</pre> - -<p>Next, let's look at the <code>fireNotification()</code> function (which is blissfully pretty simple).</p> - -<pre class="brush: js">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 - })); -}</pre> - -<p>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.)</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11855/subscribe-notification.png" style="display: block; height: 65px; margin: 0px auto; width: 326px;"></p> - -<p>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. <code>waitUntil()</code> will extend the life cycle of the service worker until everything inside this method has completed.</p> - -<div class="note"> -<p><strong>Note</strong>: Web notifications from service workers were introduced around Firefox version 42, but are likely to be removed again while the surrounding functionality (such as <code>Clients.openWindow()</code>) is properly implemented (see {{bug(1203324)}} for more details.)</p> -</div> - -<h2 id="Handling_premature_subscription_expiration">Handling premature subscription expiration</h2> - -<p>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.</p> - -<pre class="brush: js language-js"><code class="language-js">self<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'pushsubscriptionchange'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="comment token"> // do something, usually resubscribe to push and -</span> <span class="comment token"> // send the new subscription details back to the -</span> <span class="comment token"> // server via XHR or Fetch -</span><span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<p>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.</p> - -<h2 id="Extra_steps_for_Chrome_support">Extra steps for Chrome support</h2> - -<p>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.</p> - -<h3 id="Setting_up_Google_Cloud_Messaging">Setting up Google Cloud Messaging</h3> - -<p>To get this set up, follow these steps:</p> - -<ol> - <li>Navigate to the <a href="https://console.developers.google.com">Google Developers Console</a> and set up a new project.</li> - <li>Go to your project's homepage (ours is at <code>https://console.developers.google.com/project/push-project-978</code>, for example), then - <ol> - <li>Select the <em>Enable Google APIs for use in your apps</em> option.</li> - <li>In the next screen, click <em>Cloud Messaging for Android</em> under the <em>Mobile APIs</em> section.</li> - <li>Click the <em>Enable API</em> button.</li> - </ol> - </li> - <li>Now you need to make a note of your project number and API key because you'll need them later. To find them: - <ol> - <li><strong>Project number</strong>: click <em>Home</em> on the left; the project number is clearly marked at the top of your project's home page.</li> - <li><strong>API key</strong>: click <em>Credentials</em> on the left hand menu; the API key can be found on that screen.</li> - </ol> - </li> -</ol> - -<h3 id="manifest.json">manifest.json</h3> - -<p>You need to include a Google app-style <code>manifest.json</code> file in your app, which references the project number you made a note of earlier in the <code>gcm_sender_id</code> parameter. Here is our simple example <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/manifest.json">manifest.json</a>:</p> - -<pre class="brush: js">{ - "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" -}</pre> - -<p>You also need to reference your manifest using a {{HTMLElement("link")}} element in your HTML:</p> - -<pre class="brush: html"><link rel="manifest" href="manifest.json"></pre> - -<h3 id="userVisibleOnly">userVisibleOnly</h3> - -<p>Chrome requires you to set the <a href="/en-US/docs/Web/API/PushManager/subscribe#Parameters"><code>userVisibleOnly</code> parameter</a> to <code>true</code> when subscribing to the push service, which indicates that we are promising to show a notification whenever a push is received. This can be <a href="https://github.com/chrisdavidmills/push-api-demo/blob/gh-pages/main.js#L127">seen in action in our <code>subscribe()</code> function</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Push_API">Push API</a></li> - <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a></li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: Some of the client-side code in our Push demo is heavily influenced by Matt Gaunt's excellent examples in <a href="http://updates.html5rocks.com/2015/03/push-notificatons-on-the-open-web">Push Notifications on the Open Web</a>. Thanks for the awesome work, Matt!</p> -</div> 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 ---- -<p>{{APIRef("Web Crypto API")}}</p> - -<p><strong><code>RandomSource</code></strong> 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.</p> - -<p><code>RandomSource</code> is a not an interface and no object of this type can be created.</p> - -<h2 id="Properties">Properties</h2> - -<p><em><code>RandomSource</code> neither defines nor inherits any property.</em></p> - -<dl> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{ domxref("RandomSource.getRandomValues()") }}</dt> - <dd>Fills the passed {{ domxref("ArrayBufferView") }} with cryptographically sound random values.</dd> -</dl> - -<h2 id="Specification" name="Specification">Specification</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Crypto API', '#dfn-RandomSource')}}</td> - <td>{{Spec2('Web Crypto API')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibility">Browser Compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>11.0 {{ webkitbug("22049") }}</td> - <td>{{CompatGeckoDesktop(21)}} [1]</td> - <td>11.0</td> - <td>15.0</td> - <td>3.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo() }}</td> - <td>23</td> - <td>{{CompatGeckoMobile(21)}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>6</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Although the transparent <code>RandomSource</code> is only available since Firefox 26, the feature was available in Firefox 21.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ domxref("Window.crypto") }} to get a {{domxref("Crypto")}} object.</li> - <li>{{jsxref("Math.random")}}, a non-cryptographic source of random numbers.</li> -</ul> 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 +--- +<p>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 <em><a href="/en-US/docs/DOM/event" title="DOM/Event">Events</a> + data</em> inside the web page.</p> +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation</h2> + <dl> + <dt> + <a href="/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent events/Using server-sent events">Using server-sent events</a></dt> + <dd> + A tutorial guide to writing both server and client side part of a server-sent events app.</dd> + <dt> + <a href="/en-US/docs/Server-sent_events/EventSource" title="Server-sent events/EventSource">EventSource reference</a></dt> + <dd> + A reference to the client-side EventSource API.</dd> + </dl> + <p><span class="alllinks"><a href="/en-US/docs/tag/Server-sent_events" title="tag/Server-sent events">View All...</a></span></p> + </td> + <td> + <h2 class="Tools" id="Tools" name="Tools">Tools</h2> + <ul> + <li>Remy Sharp’s <a class="link-https" href="https://github.com/remy/polyfills/blob/master/EventSource.js">EventSource polyfill</a></li> + <li>Yaffle’s <a class="link-https" href="https://github.com/Yaffle/EventSource" title="https://github.com/Yaffle/EventSource">EventSource polyfill</a></li> + <li>Rick Waldron’s <a class="link-https" href="https://github.com/rwldrn/jquery.eventsource">jquery plugin</a></li> + </ul> + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2> + <ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a>, <a href="/en-US/docs/WebSockets" title="WebSockets">WebSockets</a></li> + </ul> + </td> + </tr> + </tbody> +</table> +<h2 id="See_also">See also</h2> +<ul> + <li>A <a href="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/" title="http://hacks.mozilla.org/2011/06/a-wall-powered-by-eventsource-and-server-sent-events/">Twitter like application</a> powered by server-sent events and <a class="link-https" href="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends%20timeline" title="https://github.com/mozilla/webowonder-demos/tree/master/demos/friends timeline">its code on Github</a>.</li> + <li><a href="http://dsheiko.com/weblog/html5-and-server-sent-events" title="http://dsheiko.com/weblog/html5-and-server-sent-events">HTML5 and Server-sent events</a></li> + <li><a href="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html" title="http://rajudasa.blogspot.in/2012/05/html5-server-sent-events-using-aspnet.html">Server-sent events using Asp.Net</a></li> +</ul> +<h2 id="Specification">Specification</h2> +<ul> + <li><a href="http://dev.w3.org/html5/eventsource/" title="http://dev.w3.org/html5/eventsource/">Server-sent events</a></li> +</ul> +<h2 id="Browser_compatibility">Browser compatibility</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>EventSource support</td> + <td>9</td> + <td>{{CompatGeckoDesktop("6.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>11</td> + <td>5</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>EventSource support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> + </table> +</div> diff --git a/files/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 +--- +<p>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.</p> + +<p>Puedes ver un ejemplo <a href="https://developer.mozilla.org/samples/sse/">aqui</a> (actualmente no funciona).</p> + +<p><a href="http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_sse">ejemplo2</a></p> + +<h2 id="Recibiendo_eventos_desde_el_servidor">Recibiendo eventos desde el servidor</h2> + +<p>El server-sent event API está contenido en la interfaz <a href="https://developer.mozilla.org/en/Server-sent_events/EventSource"><code>EventSource</code></a>; para abrir una conexión al servidor para recibir eventos de él. Se crea un nuevo objeto new <a href="https://developer.mozilla.org/en/Server-sent_events/EventSource">EventSource</a>, especificando el URI de un script que genera los eventos, Por ejemplo:</p> + +<pre class="brush: js">var evtSource = new EventSource("ssedemo.php"); +</pre> + +<div class="note"><strong>Nota</strong>: 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.</div> + +<p>Una vez que ha instanciado el origen del evento, puede comenzar a escuchar los mensajes:</p> + +<pre class="brush: js">evtSource.onmessage = function(e) { + var newElement = document.createElement("li"); + + newElement.innerHTML = "message: " + e.data; + eventList.appendChild(newElement); +} +</pre> + +<p>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.</p> + +<p>También puedes escuchar eventos, usando <code>addEventListener()</code>:</p> + +<pre class="brush: js">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); +</pre> + +<p>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.</p> + +<h2 id="Enviando_eventos_desde_el_servidor">Enviando eventos desde el servidor</h2> + +<p>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") }},</p> + +<p>El codigo PHP para este ejemplo que estamos utilizando:</p> + +<pre class="brush: php">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); +} +</pre> + +<p>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)</p> + +<h2 id="Gestion_de_errores">Gestion de errores</h2> + +<p>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:</p> + +<pre class="brush: js">evtSource.onerror = function(e) { + alert("EventSource failed."); +}; +</pre> + +<p>En Firefox 22, no parece que haya manera de distinguir entre los diferentes de eventos de error.</p> + +<h2 id="Cerrando_flujo_de_eventos" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">Cerrando flujo de eventos</h2> + +<p>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 <code>.close()</code></p> + +<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">evtSource.close();</code></pre> + +<div> </div> + +<h2 id="Formato_de_flujo_de_eventos_(formato_stream)">Formato de flujo de eventos (formato stream)</h2> + +<p>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. </p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<p>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.</p> + +<h3 id="Campos">Campos</h3> + +<p>Los siguientes nombres de campo son definidos por la especificación:</p> + +<h4 id="event">event</h4> + +<p style="margin-left: 40px;">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 <code>addEventLister()</code> para escuchar eventos nombrados. El controlador <code>onmessage</code> se llama si no se especifica el nombre del evento para un mensaje.</p> + +<h4 id="data">data</h4> + +<p style="margin-left: 40px;">El campo de datos para el mensaje. Cuando el EventSource recibe múltiples lineas con "<code>data:</code>", se concatenara, insertando un caracter de nueva de linea entre cada uno. Se eliminan los saltos de línea al final <strong>[VERIFICAR].</strong></p> + +<h4 id="id"><strong>id</strong></h4> + +<p style="margin-left: 40px;"> El ID del evento que establecerá el último ID del objeto EventSource.</p> + +<h4 id="Retry"><strong>Retry</strong></h4> + +<p style="margin-left: 40px;">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. </p> + +<p>Se omiten todos los demas nombres de campo.</p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="Ejemplos">Ejemplos</h3> + +<h4 id="Mensajes_con_datos_únicamente">Mensajes con datos únicamente</h4> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<pre>: this is a test stream + +data: some text + +data: another message +data: with two lines +</pre> + +<h4 id="Eventos_nombrados">Eventos nombrados</h4> + +<p>Este ejemplo envia algunos eventos nombrados. Cada uno tiene un nombre de evento especificado por el campo <code>event</code>, y un campo <code>data</code> cuyo valor es una cadena JSON apropiada con los datos necesarios para que el cliente actue sobre el evento. El campo <code>data</code>, podria, por supuesto, tener cualquier cadena; no tiene que ser un JSON.</p> + +<pre>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."} +</pre> + +<h4 id="Mezclando_y_emparejando">Mezclando y emparejando</h4> + +<p>No tienes que usar solamente mensajes sin nombrar o eventos tipados; puedes mezclarlo juntos en un solo flujo de evento.</p> + +<pre>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."} +</pre> + +<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>EventSource support</td> + <td>9</td> + <td>{{ CompatGeckoDesktop("6.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>11</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android-and-Meego</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>EventSource support</td> + <td>6 a 24 b</td> + <td>1.0</td> + <td>{{ CompatUnknown() }}</td> + <td>11.1</td> + <td>4</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> 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 ---- -<p><code>localStorage</code> (almacenamiento local) es lo mismo que<code> <a href="/en-US/docs/Web/API/sessionStorage">sessionStorage</a> </code>(almacenamiento de sesión), con las mismas reglas de mismo-origen aplicadas, pero es persistente a través de diferentes sesiones. <code>localStorage</code> se introdujo en la version Firefox 3.5.</p> - -<div class="note"><strong>Nota:</strong> Cuando el navegador está en modo de navegación privado, una nueva base de datos temporal se crea para guardar <em>datos </em>de almacenamiento local. Esta base de datos se vacía y descarta cuando salimos del modo de navegación privado.</div> - -<pre class="brush:js notranslate" style="font-size: 14px;">// Guardar datos al almacenamiento local actual -localStorage.setItem("nombredeusuario", "John"); - -// Acceder a datos almacenados -alert( "nombredeusuario = " + localStorage.getItem("nombredeusuario"));</pre> - -<p class="note">La persistencia de <code>localStorage</code> lo hace útil para una variedad de cosas, incluyendo contadores de páginas, como se demuestra en <a href="http://codepen.io/awesom3/pen/Hlfma">este tutorial en Codepen</a>.</p> - -<h4 id="Compatibilidad" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad</h4> - -<p>Los objetos de <code>Storage</code> (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 <em>scripts</em>, permitiendo el uso de el objeto <code>localStorage</code> en implementaciones que no lo soportan de forma nativa.</p> - -<p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero hace uso de cookies.</p> - -<pre class="brush:js notranslate" style="font-size: 14px;">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; - })()); -} -</pre> - -<div class="note"><strong>Nota:</strong> 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 <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div> - -<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se pasará a ser un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. 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 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div> - -<p>Esta es otra imitación menos exacta de el objeto <code>localStorage</code>, es más simple que la anterior, pero es compatible con navegadores antiguos, como Internet Explorer < 8 (<strong>probado y funcional incluso en Internet Explorer 6</strong>). También hace uso de cookies.</p> - -<pre class="brush:js notranslate" style="font-size: 14px;">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; -} -</pre> - -<div class="note"><strong>Nota:</strong> 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 <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, y <code>localStorage.removeItem()</code> para agregar, cambiar, o quitar una clave. El uso del método <code>localStorage.suClave</code> para obtener, establecer, o borrar una clave <strong>no está permitido con este código</strong>. También se puede cambiar el nombre y usarse sólo para gestionar las cookies de el documento sin importar el objeto localStorage.</div> - -<div class="note"><strong>Nota:</strong> Al cambiar la cadena <code style="background: rgb(204, 204, 204);">"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> a: <code style="background: rgb(204, 204, 204);">"; path=/"</code> (y al cambiar el nombre del objeto), esto se volverá un <code>sessionStorage</code> <em>polyfill</em> en vez de un <code>localStorage</code> <em>polyfill</em>. 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 <span style="font-family: 'Courier New','Andale Mono',monospace; line-height: normal;">sessionStorage</span><span style="line-height: 1.5em;"> completamente compatible sólo restringirá los valores guardados al contexto actual del navegador.</span></div> - -<h4 id="Compatibilidad_y_relación_con_globalStorage" style="line-height: 18px; font-size: 1.28571428571429rem;">Compatibilidad y relación con globalStorage</h4> - -<p class="note"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, con la excepción de que tiene un ámbito de origen HTML5 (<em>esquema </em>+ <em>nombre del host </em>+ <em>puerto no estandar</em>), y <code>localStorage</code> es una instancia de <code>Storage</code>, al contrario que <code>globalStorage[location.hostname]</code>, que es una instancia de <code>StorageObsolete</code>, como se explica más adelante. Por ejemplo, <a class="external" href="http://example.com" rel="freelink">http://ejemplo.com</a> no puede acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://ejemplo.com,</a> pero los dos pueden acceder al mismo elemento de <code>globalStorage</code>. --<code>localStorage</code> es una interfaz estándar mientras que <code>globalStorage</code> no lo es, así que no se debe depender de ella.</p> - -<p>Nótese que al establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code>, y al extender <code>Storage.prototype</code> no afecta a los elementos de <code>globalStorage</code>; sólo al extender <code>StorageObsolete.prototype</code> los afecta.</p> - -<h4 id="El_formato_de_Storage">El formato de Storage</h4> - -<p>Las claves y valores de <code>Storage</code> se guardan en el formato UTF-16 <a href="/en-US/docs/Web/API/DOMString">DOMString</a>, que usa 2 bytes por carácter.</p> 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 +--- +<p>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.</p> + +<h2 id="Definiciones">Definiciones</h2> + +<dl> + <dt>Superficie</dt> + <dd>La superficie sensible al tacto. Esta puede ser una pantalla o un trackpad.</dd> +</dl> + +<dl> + <dt><strong style="font-weight: bold;">Punto de toque</strong></dt> + <dd>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.</dd> +</dl> + +<h2 id="Interfaces">Interfaces</h2> + +<dl> + <dt>{{ domxref("TouchEvent") }}</dt> + <dd>Representa un evento que ocurre cuando el estado de los toques en la superficie cambian.</dd> + <dt>{{ domxref("Touch") }}</dt> + <dd>Represeta un único punto de contacto entre el usuario y la superficie táctil.</dd> + <dt>{{ domxref("TouchList") }}</dt> + <dd>Representa varios puntos de toque: esto se utiliza cuando el usuario tiene, por ejemplo, varios dedos en la superficie al mismo tiempo.</dd> + <dt>{{ domxref("DocumentTouch") }}</dt> + <dd>Contiene varios métodos para crear objetos de {{domxref("Touch")}} y {{domxref("TouchList")}}.</dd> +</dl> + +<h2 id="Ejemplo">Ejemplo</h2> + +<p>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.</p> + +<div class="note"><strong>Not</strong><strong>a:</strong> 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.</div> + +<h3 id="Configurando_los_eventos_de_manipulación">Configurando los eventos de manipulación</h3> + +<p>Cuando la página carga, la función <code>startup()</code> mostrada a continuación es llamada por nuestro atributo <code>onload</code> del elemento {{ HTMLElement("body") }}.</p> + +<pre class="brush: js">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); +} +</pre> + +<p>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.</p> + +<h3 id="Seguimiento_de_nuevos_toques">Seguimiento de nuevos toques</h3> + +<p>Cuando un evento <code>touchstart</code> ocurre, indicando que un nuevo toque sobre la superficie se ha producido, la función <code>handleStart()</code> de a continuación es llamada.</p> + +<pre class="brush: js">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); + } +} +</pre> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Dibujando_mientras_los_eventos_de_toque_se_mueven">Dibujando mientras los eventos de toque se mueven</h3> + +<p>Cada vez que uno o más dedos se mueven, un evento <code>touchmove</code> es entregado, resultando en una llamada a nuestra función <code>handleMove()</code>. 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.</p> + +<pre class="brush: js">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 + } +} +</pre> + +<p>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.</p> + +<p>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.</p> + +<p>Después de dibujar la línea, llamamos a <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a> para reemplazar la información previa sobre el punto de toque con la información actual de la matriz <code>ongoingTouches</code>.</p> + +<h3 id="Manejando_el_final_de_un_toque">Manejando el final de un toque</h3> + +<p>Cuando el usuario levanta un dedo de la superficie, un evento <code>touchend</code> es enviado. De igual manera, si el dedo se desliza fuera de nuestro lienzo, obtenemos un evento <code>touchleave</code>. Manejamos ambos casos de la misma manera: llamando a la función <code>handleEnd()</code> 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.</p> + +<pre class="brush: js">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 + } +} +</pre> + +<p>Esto es muy similar a la función previa; la única diferencia real es que cuando llamamos a <a href="/en/JavaScript/Reference/Global_Objects/Array/splice" title="en/JavaScript/Reference/Global Objects/Array/splice"><code>Array.splice()</code></a>, 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.</p> + +<h3 id="Manejando_los_toques_cancelados">Manejando los toques cancelados</h3> + +<p>Si el dedo del usuario se equivoca en la Interfaz del navegador, o el toque necesita ser cancelado, el evento <code>touchcancel</code> es enviado, y llamamos a la función <code>handleCancel()</code> abajo.</p> + +<pre class="brush: js">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 + } +} +</pre> + +<p>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.</p> + +<h3 id="Funciones_de_conveniencia">Funciones de conveniencia</h3> + +<p>Este ejemplo usa dos funciones de convenience que deben mirarse brevemente para ayudar a que el resto del código sea más claro.</p> + +<h4 id="Seleccionando_un_color_para_cada_toque">Seleccionando un color para cada toque</h4> + +<p>Con el fin de hacer que cada dibujo de toque se vea diferente, la función <code>colorForTouch()</code> 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.</p> + +<pre class="brush: js">function colorForTouch(touch) { + var id = touch.identifier; + id = id.toString(16); // make it a hex digit + return "#" + id + id + id; +} +</pre> + +<p>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".</p> + +<h4 id="Encontrando_un_toque_continuo">Encontrando un toque continuo</h4> + +<p>La función <code>ongoingTouchIndexById()</code> abajo explora mediante la matriz <code>ongoingTouches</code> para encontrar el toque que coincida con el identificador dado, luego devuelve los índices de toques a la matriz.</p> + +<pre class="brush: js">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 +} +</pre> + +<p><a href="/samples/domref/touchevents.html">Ver ejemplo en vivo</a></p> + +<h2 id="Consejos_adicionales">Consejos adicionales</h2> + +<p>Esta sección provee consejos adicionales sobre como manejar los eventos de toques en tu aplicación web.</p> + +<h3 id="Manejando_los_clics">Manejando los clics</h3> + +<p>Ya que la llamada <code>preventDefault()</code> en un <code>touchstart</code> o el primer evento <code>touchmove</code> de una serie impide que los eventos correspondientes eventos del mouse o ratón se disparen, es común llamar a <code>preventDefault()</code> en <code>touchmove</code> en lugar de <code>touchstart</code>. 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).</p> + +<pre class="brush: js">function onTouch(evt) { + evt.preventDefault(); + if (evt.touches.length > 1 || (evt.type == "touchend" && evt.touches.length > 0)) + return; + + var newEvt = <a href="https://developer.mozilla.org/en/DOM/document.createEvent" rel="internal" title="en/DOM/document.createEvent">document.createEvent</a>("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.<strong>initMouseEvent</strong>(type, true, true, event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a>.ownerDocument.defaultView</code>, 0, + touch.screenX, touch.screenY, touch.clientX, touch.clientY, + evt.ctrlKey, evt.altKey, evt.shirtKey, evt.metaKey, 0, null); + event.<code><a href="https://developer.mozilla.org/en/DOM/event.originalTarget" rel="custom">originalTarget</a></code>.<a href="https://developer.mozilla.org/en/DOM/element.dispatchEvent" rel="internal" title="en/DOM/element.dispatchEvent">dispatchEvent</a>(newEvt); +} +</pre> + +<h3 id="Llamando_a_preventDefault()_solo_en_un_segundo_toque">Llamando a preventDefault() solo en un segundo toque</h3> + +<p>Una cosa para prevenir cosas como <code>pinchZoom</code> en una página es llamar a <code>preventDefault()</code> 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.</p> + +<dl> +</dl> + +<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatChrome("22.0") }}</td> + <td>{{ CompatGeckoDesktop("18.0") }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("6.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas_de_Gecko">Notas de Gecko</h3> + +<p>La preferencia <code>dom.w3c_touch_events.enabled</code> puede ser utilizada para activar o desactivar el soporte de eventos de toque estándares; por defecto, están activados.</p> + +<div class="geckoVersionNote" style=""> +<p>{{ gecko_callout_heading("12.0") }}</p> + +<p>Antes de Gecko 12.0 {{ geckoRelease("12.0") }}, Gecko no soportaba multi-toques; solo un toque cada vez era reportado.</p> +</div> + +<div class="note"><strong>Note: </strong>Antes de Gecko 6.0 {{ geckoRelease("6.0") }}, Gecko ofrecía una <a href="/en/DOM/Touch_events_(Mozilla_experimental)" title="en/DOM/Touch events (Mozilla experimental)">API de eventos de toque propietaria</a>. Está API está obsoleta actualmente; deberías cambiar a esta."</div> diff --git a/files/es/web/guide/api/vibration/index.html b/files/es/web/api/vibration_api/index.html index 8c9c7b5f06..8c9c7b5f06 100644 --- a/files/es/web/guide/api/vibration/index.html +++ b/files/es/web/api/vibration_api/index.html 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 +--- +<div>{{apiref("Web Audio API")}}</div> + +<p class="summary">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.</p> + +<h2 id="Conceptos_y_uso_de_audio_Web">Conceptos y uso de audio Web</h2> + +<p>La API de Audio Web involucra manejar operaciones de audio dentro de un <strong>contexto de audio</strong>, y ha sido diseñada para permitir <strong>enrutamiento modular</strong>. Las operaciones de audio básicas son realizadas con <strong>nodos de audio</strong>, que están enlazados juntos para formar un <strong>gráfico de enrutamiento de audio</strong>. 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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>Un diagrama de flujo simple y típico para el audio web se vería algo como esto:</p> + +<ol> + <li>Crear contexto de audio</li> + <li>Dentro del contexto, crear fuentes — como <code><audio></code>, oscillator, stream</li> + <li>Crear nodos de efectos, <span class="short_text" id="result_box" lang="es"><span>tales como reverberación, filtro biquad, panner, compresor</span></span></li> + <li>Ecoge el destino final del audio, por ejemplo tu sistema de altavoces</li> + <li>Conecta las fuentes a los efectos, y los efectos al destino.</li> +</ol> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12241/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p> + +<p>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. <span id="result_box" lang="es"><span>Por lo tanto, las aplicaciones como las cajas de ritmos y los secuenciadores están a su alcance.</span></span></p> + +<p>El API de Audio Web también nos permite controlar cómo el audio es <em>espacializado</em>. Usando un sistema basado en un <em>modelo fuente-oyente</em>, esto permite controlar el <em>modeo de paneo</em> y que se ocupa de la <em>atenuación inducida por distancia </em>o <em>desplazamiento doppler</em> i<span class="short_text" id="result_box" lang="es"><span>nducido por una fuente en movimiento (o un oyente en movimiento).</span></span></p> + +<div class="note"> +<p>Puedes leear sobre la teoría del API de Audio Web con más detalle en nuestro artículo <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Conceptos Básicos detrás del API de Audio Web</a>.</p> +</div> + +<h2 id="Interfaces_del_API_de_Audio_Web">Interfaces del API de Audio Web</h2> + +<p>La API de Audio Web tiene un número de interfaces y eventos asociados, que han sido divididos en nueve categorias de funcionalidad.</p> + +<h3 id="Definición_general_del_gráfico_de_audio">Definición general del gráfico de audio</h3> + +<p><span id="result_box" lang="es"><span>Contenedores y definiciones generales que dan forma a los gráficos de audio en el uso de Web Audio API</span></span>.</p> + +<dl> + <dt>{{domxref("AudioContext")}}</dt> + <dd>La interfaz <strong><code>AudioContext</code></strong> 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 <code>AudioContext</code> antes de hacer cualquier cosa, ya que todo pasa dentro de un contexto de audio.</dd> + <dt>{{domxref("AudioNode")}}</dt> + <dd>La interfaz <strong><code>AudioNode</code></strong><strong> </strong>representa un módulo de procesamiento de audio como una <em>fuente de audio</em> (por ejemplo un ejemplo HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}}), <em>destino de audio</em>, <em>módulo de procesamiento intermedio</em> (por ejemplo un filtro como {{domxref("BiquadFilterNode")}}, o <em>control de volumen</em> como {{domxref("GainNode")}}).</dd> + <dt>{{domxref("AudioParam")}}</dt> + <dd>La interfaz <strong><code>AudioParam</code></strong><strong> </strong>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.</dd> + <dt>{{domxref("AudioParamMap")}}</dt> + <dd>Provee una interfaz como para mapear a un grupo de interfaces {{domxref("AudioParam")}}, lo que significa que proporciona los métodos <code>forEach()</code>, <code>get()</code>, <code>has()</code>, <code>keys()</code>, y <code>values()</code>, como también una propiedad <code>size</code>.</dd> + <dt>{{domxref("BaseAudioContext")}}</dt> + <dd>La interfaz <strong><code>BaseAudioContext</code></strong> 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 <code>BaseAudioContext</code> directamente — tendrás que usar sus características a través de una de éstas dos interfaces heredadas.</dd> + <dt>El evento {{event("ended")}}</dt> + <dd>El evento <code>ended</code> es lanzado cuando la reproducción se detiene porque se alcanzó el fin del archivo de medio.</dd> +</dl> + +<h3 id="Definiendo_fuentes_de_audio">Definiendo fuentes de audio</h3> + +<p>Las interfaces que definen fuentes de audio para usar en la API de Web.</p> + +<dl> + <dt>{{domxref("AudioScheduledSourceNode")}}</dt> + <dd>La interfaz <strong><code>AudioScheduledSourceNode</code></strong> es una interfaz padre para muchos tipos de interfaces de nodos de fuentes de audio. Es un {{domxref("AudioNode")}}.</dd> +</dl> + +<dl> + <dt>{{domxref("OscillatorNode")}}</dt> + <dd>La interfaz <strong><code style="font-size: 14px;">OscillatorNode</code></strong><strong> </strong>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 <em>frecuencia</em> de onda determinada.</dd> + <dt>{{domxref("AudioBuffer")}}</dt> + <dd>La interfaz <strong><code>AudioBuffer</code></strong> 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") }}.</dd> + <dt>{{domxref("AudioBufferSourceNode")}}</dt> + <dd>La interfaz <strong><code>AudioBufferSourceNode</code></strong> 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.</dd> + <dt>{{domxref("MediaElementAudioSourceNode")}}</dt> + <dd>La interfaz <code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> 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.</dd> + <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt> + <dd>La interfaz <code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> representa una fuente de audio que consiste en un {{domxref("MediaStream")}} de <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> (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.</dd> +</dl> + +<h3 id="Definiendo_filtros_de_efectos_de_audio">Definiendo filtros de efectos de audio</h3> + +<p>Interfaces para definir efectos que quieras aplicar a tus fuentes de audio.</p> + +<dl> + <dt>{{domxref("BiquadFilterNode")}}</dt> + <dd>La interfaz <strong><code>BiquadFilterNode</code></strong><strong> </strong>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 <code>BiquadFilterNode</code> siempre tiene exactamente una entrada y una salida.</dd> + <dt>{{domxref("ConvolverNode")}}</dt> + <dd>La interfaz <code><strong>Convolver</strong></code><strong><code>Node</code></strong><strong> </strong>es un <span style="line-height: 1.5;">{{domxref("AudioNode")}} que realiza una Convolución Lineal en un</span><span style="line-height: 1.5;"> {{domxref("AudioBuffer")}} determinado, y es usado a menudo para lograr un efecto de reverberación</span><span style="line-height: 1.5;">.</span></dd> + <dt>{{domxref("DelayNode")}}</dt> + <dd>La interfaz <strong><code>DelayNode</code></strong> representa una <a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">línea de detardo</a>; 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.</dd> + <dt>{{domxref("DynamicsCompressorNode")}}</dt> + <dd>La intefaz <strong><code>DynamicsCompressorNode</code></strong> 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.</dd> + <dt>{{domxref("GainNode")}}</dt> + <dd>La intefaz <strong><code>GainNode</code></strong><strong> </strong>representa un cambio de volumen. Es un módulo de procesamiento de audio de {{domxref("AudioNode")}} que causa que una <em>ganancia</em> determinada para ser aplicada a la entrada de datos antes de su propacación a la salida.</dd> + <dt>{{domxref("WaveShaperNode")}}</dt> + <dd>La interfaz <strong><code>WaveShaperNode</code></strong><strong> </strong>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.</dd> + <dt>{{domxref("PeriodicWave")}}</dt> + <dd>Describe una forma de onda periódica que puede ser usada para dar forma a la salida de un {{ domxref("OscillatorNode") }}.</dd> + <dt>{{domxref("IIRFilterNode")}}</dt> + <dd>Implementa un filtro de <strong><a class="external external-icon" href="https://en.wikipedia.org/wiki/infinite%20impulse%20response" title="infinite impulse response">respuesta de pulso infinito</a></strong> (IIR) general; este tipo de filtro se puede usar para implementar dispositivos de control de tono y ecualizadores gráficos también.</dd> +</dl> + +<h3 id="Definición_de_destinos_de_audio">Definición de destinos de audio</h3> + +<p>Una vez que haya terminado de procesar su audio, estas interfaces definen dónde emitirlo.</p> + +<dl> + <dt>{{domxref("AudioDestinationNode")}}</dt> + <dd>La interfaz <strong><code>AudioDestinationNode</code></strong> representa el destino final de una fuente de audio en contexto determinado — usualmente los altavoces de tu dispositivo.</dd> + <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt> + <dd>La interfaz <code><strong>MediaStreamAudio</strong></code><strong><code>DestinationNode</code></strong> representa un destino de audio que consiste en un {{domxref("MediaStream")}} de <a href="/en-US/docs/WebRTC" title="/en-US/docs/WebRTC">WebRTC</a> con un <code>AudioMediaStreamTrack</code> 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.</dd> +</dl> + +<h3 id="Análisis_y_visualización_de_datos">Análisis y visualización de datos</h3> + +<p>Si quieres extraer el tiempo, frecuencia, y otros datos de tu audio, <code>AnalyserNode</code> es lo que necesitas.</p> + +<dl> + <dt>{{domxref("AnalyserNode")}}</dt> + <dd>La interfaz <strong><code>AnalyserNode</code></strong> 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.</dd> +</dl> + +<h3 id="División_y_fusión_de_canales_de_audio">División y fusión de canales de audio</h3> + +<p>Para dividir y fusionar canales de audio, deberás usar estas interfaces.</p> + +<dl> + <dt>{{domxref("ChannelSplitterNode")}}</dt> + <dd>La interfaz <code><strong>ChannelSplitterNode</strong></code> separa los diferentes canales de una fuente de audio enn un conjunto de salidas <em>mono</em>.</dd> + <dt>{{domxref("ChannelMergerNode")}}</dt> + <dd>La interfaz <code><strong>ChannelMergerNode</strong></code> reune las diferentes salidas mono en una sola salida. Cada entrada deberá ser usada para llenar un canal de la salida.</dd> +</dl> + +<h3 id="Espacialización_de_audio">Espacialización de audio</h3> + +<p>Estas interfaces te permiten agregar efectos de paneo de especialización de audio a tus fuentes de audio.</p> + +<dl> + <dt>{{domxref("AudioListener")}}</dt> + <dd>La interfaz <strong><code>AudioListener</code></strong><strong> </strong>representa la posición y orientación de la única persona escuchando la escena de audio usada en la espacialización de audio.</dd> + <dt>{{domxref("PannerNode")}}</dt> + <dd>La interfaz <code><strong>PannerNode</strong></code> 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.</dd> + <dt>{{domxref("StereoPannerNode")}}</dt> + <dd>La interfaz <code><strong>StereoPannerNode</strong></code> 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.</dd> +</dl> + +<h3 id="Proccesamiento_de_audio_en_JavaScript">Proccesamiento de audio en JavaScript</h3> + +<p>Usando worklets de audio (pequeñas tareas), puedes definir nodos personalizados de audio escritos en JavaScript o <a href="/en-US/docs/WebAssembly">WebAssembly</a>. 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.</p> + +<dl> + <dt>{{domxref("AudioWorklet")}} {{experimental_inline}}</dt> + <dd>La interfaz <code>AudioWorklet</code> está disponible a través de {{domxref("BaseAudioContext.audioWorklet")}} y te permite agregar nuevos móduloss al worklet de audio.</dd> + <dt>{{domxref("AudioWorkletNode")}} {{experimental_inline}}</dt> + <dd>La intefaz <code>AudioWorkletNode</code> representa un {{domxref("AudioNode")}} que está insertada en un gráfico de audio y puede pasar mensajes a la <code>AudioWorkletProcessor</code>.</dd> + <dt>{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}</dt> + <dd>La interfaz <code>AudioWorkletProcessor</code> representa código de procesamiento de audio que se ejecuta en un <code>AudioWorkletGlobalScope</code> que genera, procesa, o analiza audio directamente, y puede pasar mensajes al <code>AudioWorkletNode</code>.</dd> + <dt>{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}</dt> + <dd>La interfaz <code>AudioWorkletGlobalScope</code> es un objeto derivado de <code>WorkletGlobalScope</code> 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.</dd> +</dl> + +<p>Antes de que se definieran los worklets de audio, la API de Web Audio usó <code>ScriptProcessorNode</code> {{deprecated_inline}} para procesamiento de audio basado en JavaScript. Como el código se ejecuta en el hilo principal, tuvo un mal rendimiento. <code>ScriptProcessorNode</code> se mantiene por razones históricas pero está marcada como obsoleta y será removida en una versión futura de la especificación.</p> + +<dl> + <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt> + <dd>La interfaz <strong><code>ScriptProcessorNode</code></strong><strong> </strong>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.</dd> + <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt> + <dd>El evento <code>audioprocess</code> es lanzado cuando un buffer de entrada de un {{domxref("ScriptProcessorNode")}} del API del Audio Web está listo para ser procesado.</dd> + <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt> + <dd>El evento <code>AudioProcessingEvent</code> del <a href="/en-US/docs/Web_Audio_API" title="/en-US/docs/Web_Audio_API">API de Audio Web</a> representa los eventos que ocurren cuando un buffer de entrada {{domxref("ScriptProcessorNode")}} está listo para ser procesado.</dd> +</dl> + +<h3 id="Procesamiento_de_audio_offlineen_segundo_plano">Procesamiento de audio offline/en segundo plano</h3> + +<p>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.</p> + +<dl> + <dt>{{domxref("OfflineAudioContext")}}</dt> + <dd>La interfaz <strong><code>OfflineAudioContext</code></strong> 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 <code>AudioContext</code> estándar, un <code>OfflineAudioContext</code> realmente no procesa el audio sino que lo genera, <em>lo más rápido que puede</em>, en un buffer.</dd> + <dt>{{event("complete")}} (event)</dt> + <dd>El evento <code>complete</code> es lanzado cuando el renderizado de un {{domxref("OfflineAudioContext")}} está terminado.</dd> + <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt> + <dd>La interfaz <code>OfflineAudioCompletionEvent</code> representa los eventos que ocurren cuando procesamiento de un {{domxref("OfflineAudioContext")}} is terminado. El evento {{event("complete")}} implementa esta interfaz.</dd> +</dl> + +<h2 id="Example" name="Example">Interfaces obsoletas</h2> + +<p>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.</p> + +<dl> + <dt>{{domxref("JavaScriptNode")}}</dt> + <dd>Usada para dirigir procesamiento de audio a través de JavaScript. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("ScriptProcessorNode")}}.</dd> + <dt>{{domxref("WaveTableNode")}}</dt> + <dd>Usada para definir una forma de onda periórica. Esta interfaz está obsoleta, y ha sido reemplazada por {{domxref("PeriodicWave")}}.</dd> +</dl> + +<h2 id="Example" name="Example">Ejemplo</h2> + +<p>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 <a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-o-matic</a> (también revisa el <a href="https://github.com/mdn/voice-change-o-matic">código completo en Github</a>) — este es un demo experimental de juguete cambiador de voz; manten tus parlantes en bajo volumen cuando lo uses ¡Al menos al comenzar!</p> + +<p>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.</p> + +<pre class="brush: js; highlight:[1,2,9,10,11,12,36,37,38,39,40,41,62,63,72,114,115,121,123,124,125,147,151]">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<span id="result_box" lang="es"><span class="alt-edited"> de selección para la selección de opciones de visualización de audio</span></span> +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"; + } +} +</pre> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + <tr> + <td>{{SpecName('Web Audio API')}}</td> + <td>{{Spec2('Web Audio API')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>14 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>23</td> + <td>{{CompatNo}}</td> + <td>15 {{property_prefix("webkit")}}<br> + 22 (unprefixed)</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{CompatNo}}</td> + <td>28 {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>25</td> + <td>1.2</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>6 {{property_prefix("webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="También_ver">También ver</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Usando el API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizaciones con el API de Audio Web</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic example</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin example</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Bases de la espacialización de audio Web</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li> + <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li> + <li><a href="https://github.com/bit101/tones">Tonos</a>: Una sencilla librería para reproducción de tonos/notas específicas usando el API de Audio Web.</li> + <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> + <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> + <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li> +</ul> + +<h3 id="Enlaces_rápidos">Enlaces rápidos</h3> + +<ol> + <li><strong>Guíass</strong> + + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Conceptos básicos detrás del API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Usando el API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizaciones con el API de Audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Bases de la espacialización de audio Web</a></li> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/en-US/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Portando código de webkitAudioContext a estándares basados en AudioContext</a></li> + </ol> + </li> + <li><strong>Ejemplos</strong> + <ol> + <li><a href="/en-US/docs/Web/API/Web_Audio_API/Simple_synth">Teclado sintetizador sencillo</a></li> + <li><a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a></li> + </ol> + </li> + <li><strong>Interfaces</strong> + <ol> + <li>{{domxref("AnalyserNode")}}</li> + <li>{{domxref("AudioBuffer")}}</li> + <li>{{domxref("AudioScheduledSourceNode")}}</li> + <li>{{domxref("AudioBufferSourceNode")}}</li> + <li>{{domxref("AudioContext")}}</li> + <li>{{domxref("AudioDestinationNode")}}</li> + <li>{{domxref("AudioListener")}}</li> + <li>{{domxref("AudioNode")}}</li> + <li>{{domxref("AudioParam")}}</li> + <li>{{event("audioprocess")}} (event)</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BiquadFilterNode")}}</li> + <li>{{domxref("ChannelMergerNode")}}</li> + <li>{{domxref("ChannelSplitterNode")}}</li> + <li>{{event("complete")}} (event)</li> + <li>{{domxref("ConvolverNode")}}</li> + <li>{{domxref("DelayNode")}}</li> + <li>{{domxref("DynamicsCompressorNode")}}</li> + <li>{{event("ended_(Web_Audio)", "ended")}} (event)</li> + <li>{{domxref("GainNode")}}</li> + <li>{{domxref("MediaElementAudioSourceNode")}}</li> + <li>{{domxref("MediaStreamAudioDestinationNode")}}</li> + <li>{{domxref("MediaStreamAudioSourceNode")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OfflineAudioContext")}}</li> + <li>{{domxref("OscillatorNode")}}</li> + <li>{{domxref("PannerNode")}}</li> + <li>{{domxref("PeriodicWave")}}</li> + <li>{{domxref("ScriptProcessorNode")}}</li> + <li>{{domxref("WaveShaperNode")}}</li> + </ol> + </li> +</ol> 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 ---- -<p>{{APIRef("Web Crypto API")}}{{draft}}</p> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p>Let's assume that the data is stored on the computer. To access it, both for writing and reading, we will use <code>localforage.js</code> 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.</p> - -<p>The data we want to access is of the form:</p> - -<p> </p> - -<p>where <code>data</code><em> </em>is the information to guarantee the integrity and <code>signature</code> the information used to verify it.</p> - -<p>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.</p> - -<p>We ask the user for a password, and we use it to generate the key:</p> - -<pre> </pre> - -<p>With that key, we will be able to compute the <em>mac</em> of the data.</p> - -<pre> </pre> 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/using_the_web_speech_api/index.html index 407de0e10d..407de0e10d 100644 --- a/files/es/web/api/web_speech_api/uso_de_la_web_speech_api/index.html +++ b/files/es/web/api/web_speech_api/using_the_web_speech_api/index.html diff --git a/files/es/web/api/api_de_almacenamiento_web/index.html b/files/es/web/api/web_storage_api/index.html index 26a858d254..26a858d254 100644 --- a/files/es/web/api/api_de_almacenamiento_web/index.html +++ b/files/es/web/api/web_storage_api/index.html diff --git a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html index 086af18610..086af18610 100644 --- a/files/es/web/api/api_de_almacenamiento_web/usando_la_api_de_almacenamiento_web/index.html +++ b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html diff --git a/files/es/web/guide/performance/usando_web_workers/index.html b/files/es/web/api/web_workers_api/using_web_workers/index.html index db4dbc07e3..db4dbc07e3 100644 --- a/files/es/web/guide/performance/usando_web_workers/index.html +++ b/files/es/web/api/web_workers_api/using_web_workers/index.html diff --git a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html b/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index 91e6bf3d37..91e6bf3d37 100644 --- a/files/es/web/api/webgl_api/tutorial/objetos_3d_utilizando_webgl/index.html +++ b/files/es/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html diff --git a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index 9d2be2d61b..9d2be2d61b 100644 --- a/files/es/web/api/webgl_api/tutorial/wtilizando_texturas_en_webgl/index.html +++ b/files/es/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html 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 +--- +<div class="note"> + <p>WebRTC te permite establecer una comunicación par-a-par en una aplicación del navegador.</p> +</div> +<h2 id="Estableciendo_la_conexión">Estableciendo la conexión</h2> +<p>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.</p> +<h3 id="Señalización">Señalización</h3> +<p>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 <a href="https://developers.google.com/appengine/docs/python/channel/overview" title="https://developers.google.com/appengine/docs/python/channel/overview">Google Channel API</a>) para AppEngine.</p> +<h2 id="Transmisión">Transmisión</h2> +<h3 id="getUserMedia">getUserMedia</h3> +<p>LocalMediaStream object</p> +<h2 id="Recepción">Recepción</h2> +<p>El soporte para WebRTC en Firefox está escondido detrás de un selector de preferencias. Ve a <a href="/about:config" title="/about:config">about:config</a> y establce 'media.navigator.enabled' a 'true'.</p> +<div class="note"> + <p>Hay algunos archivos de prueba en el repositorio de código para darte una idea de cómo funciona. Ve: <a href="http://hg.mozilla.org/projects/alder/file/tip/dom/media/tests/local_video_test.html">dom/media/tests/local_video_test.html</a>. Por favor, prueba también la<a href="http://webrtc-demo.herokuapp.com/mozdemo">demo de servicio de llamadas</a>, la página de su código, y <a href="https://github.com/anantn/webrtc-demo/">el código de su servidor</a>.</p> +</div> +<p> </p> 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 +--- +<h2 id="Introducción_y_demostración">Introducción y demostración</h2> +<p>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 <a href="http://jsfiddle.net/codepo8/agaRe/4/" title="http://jsfiddle.net/codepo8/agaRe/4/">código final en acción en este JSFiddle</a>. También existe una versión más avanzada en JavaScript para cargar fotos a <strong>imgur</strong> disponible como <a href="https://github.com/codepo8/interaction-cam/" title="https://github.com/codepo8/interaction-cam/">código en GitHub</a> o <a href="http://codepo8.github.com/interaction-cam/" title="http://codepo8.github.com/interaction-cam/">como demo</a>.</p> +<h2 id="El_formato_HTML">El formato HTML</h2> +<p>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.</p> +<pre class="brush:html;"><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"> +</pre> +<h2 id="El_script_completo">El script completo</h2> +<p>Aquí se muestra completamente el código JavaScript. Más abajo, explicaremos gradualmente cada sección con más detalle.</p> +<pre class="brush:js;">(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); + +})();</pre> +<h2 id="Explicando_paso_a_paso">Explicando paso a paso</h2> +<p>Entonces, ¿Qué es lo que sucede aquí? Lo analizaremos paso por paso.</p> +<h3 id="Función_Anónima">Función Anónima</h3> +<pre class="brush:js;">(function() { + + var streaming = false, + video = document.querySelector('#video'), + canvas = document.querySelector('#canvas'), + photo = document.querySelector('#photo'), + startbutton = document.querySelector('#startbutton'), + width = 320, + height = 0;</pre> +<p>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.</p> +<div class="warning"> + <p>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.</p> +</div> +<h3 id="Obtener_el_video">Obtener el video</h3> +<p>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:</p> +<pre class="brush:js;"> navigator.getMedia = ( navigator.getUserMedia || + navigator.webkitGetUserMedia || + navigator.mozGetUserMedia || + navigator.msGetUserMedia);</pre> +<p>Le solicitamos al navegador que nos dé un video sin audio y obtenemos una secuencia (stream) en la función de retrollamada:</p> +<pre class="brush:js;"> 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); + } + );</pre> +<p>En estos momentos Firefox Nightly necesita que tu configures la propiedad de <code>mozSrcObject</code> del elemento del video con el fin de reproducirlo; para otros navegadores, configura el atributo <code>src</code>. 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.</p> +<h3 id="Redefinir_el_tamaño_del_video">Redefinir el tamaño del video</h3> +<p>Luego necesitamos configurar el tamaño del video a las dimensiones deseadas.</p> +<pre class="brush:js;"> 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);</pre> +<p>Nos subscribimos al evento <code>canplay </code>del video y leemos sus dimensiones utilizando <code>videoHeight</code> y <code>videoWidth</code>. Estas no están disponible realmente hasta que el evento sea iniciado. Establecemos <code>streaming</code> a verdadero (true) para que compruebe esto solo una vez, mientras que el evento <code>canplay</code> siga en actividad.</p> +<p>Esto es todo lo que se necesita para que inicie el video.</p> +<h3 id="Capturar_una_imagen">Capturar una imagen</h3> +<p>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 <code>takepicture</code>.</p> +<pre class="brush:js;"> startbutton.addEventListener('click', function(ev){ + takepicture(); + ev.preventDefault(); + }, false);</pre> +<p>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.</p> +<pre class="brush:js;"> 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); + } + +})();</pre> +<p>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.</p> +<h2 id="Compatibilidad">Compatibilidad</h2> +<p>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:</p> +<ul> + <li>Teclea "about:config" en la barra de direcciones y afirma que quieres realizar algunos cambios.</li> + <li>Encuentra la entrada "media.navigator.enabled" y establécelo a verdadero (true).</li> +</ul> diff --git a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html b/files/es/web/api/websockets_api/writing_websocket_server/index.html index 333e8e8830..333e8e8830 100644 --- a/files/es/web/api/websockets_api/escribiendo_servidor_websocket/index.html +++ b/files/es/web/api/websockets_api/writing_websocket_server/index.html diff --git a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html b/files/es/web/api/websockets_api/writing_websocket_servers/index.html index 1261f75bec..1261f75bec 100644 --- a/files/es/web/api/websockets_api/escribiendo_servidores_con_websocket/index.html +++ b/files/es/web/api/websockets_api/writing_websocket_servers/index.html diff --git a/files/es/web/events/beforeunload/index.html b/files/es/web/api/window/beforeunload_event/index.html index 98fb747ae9..98fb747ae9 100644 --- a/files/es/web/events/beforeunload/index.html +++ b/files/es/web/api/window/beforeunload_event/index.html diff --git a/files/es/web/events/domcontentloaded/index.html b/files/es/web/api/window/domcontentloaded_event/index.html index ffbf3accbc..ffbf3accbc 100644 --- a/files/es/web/events/domcontentloaded/index.html +++ b/files/es/web/api/window/domcontentloaded_event/index.html diff --git a/files/es/web/events/load/index.html b/files/es/web/api/window/load_event/index.html index f38e214839..f38e214839 100644 --- a/files/es/web/events/load/index.html +++ b/files/es/web/api/window/load_event/index.html 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 ---- -<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> - -<p>La propiedad <strong><code>Window.URL</code></strong> 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")}}.</p> - -<p>{{AvailableInWorkers}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Llamando a un método estático:</p> - -<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> - -<p>Construyendo un nuevo objeto:</p> - -<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> - -<h2 id="Especificación">Especificación</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> - <td>{{Spec2('URL')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>8.0<sup>[2]</sup></td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("19.0")}}</td> - <td>10.0</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup><br> - 7.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> - <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> - {{CompatGeckoMobile("19.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>15.0<sup>[2]</sup></td> - <td>6.0<sup>[2]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Desde Gecko 2 (Firefox 4) hasta Gecko 18 incluidos, Gecko devuelve un objeto con el tipo interno no estandar <code>nsIDOMMozURLProperty</code>. En la práctica, esto no hace ninguna diferencia.</p> - -<p>[2] Implementado bajo el nombre no estandar <code>webkitURL</code>.</p> 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 ---- -<p><strong>Base64</strong> es un grupo de esquemas de <a href="https://es.wikipedia.org/wiki/Codificaci%C3%B3n_de_binario_a_texto">codificación de binario a texto</a> que representa los datos binarios mediante una cadena ASCII, traduciéndolos en una representación radix-64. El término <em>Base64</em> se origina de un <a href="https://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions#Content-Transfer-Encoding">sistema de codificación de transmisión de contenido MIME</a> específico.</p> - -<p>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 <a href="https://es.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions">MIME</a> y el almacenamiento de datos complejos en <a href="/es/docs/XML">XML</a>.</p> - -<p>En JavaScript hay dos funciones para decodificar y codificar cadenas base64, respectivamente:</p> - -<ul> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> -</ul> - -<p>La función <code>atob()</code> decodifica una cadena de datos que ha sido codificada usando la codificación en base 64. Por el contrario, la función <code>btoa()</code> crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.</p> - -<p>Ambas funciones trabajan sobre cadenas de texto. Si desea trabajar con <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer">ArrayBuffers</a>, lea <a href="/es/docs/Web/API/WindowBase64/Base64_codificando_y_decodificando$edit#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8">este párrafo</a>.</p> - - - -<table class="topicpage-table"> - <tbody> - <tr> - <td> - <h2 class="Documentation" id="Documentation" name="Documentation">Documentación</h2> - - <dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/data_URIs" title="https://developer.mozilla.org/en-US/docs/data_URIs"><code>data</code> URIs</a></dt> - <dd><small><code>Los URIs de</code> datos, definidos por <a class="external" href="http://tools.ietf.org/html/rfc2397" title="http://tools.ietf.org/html/rfc2397">RFC 2397</a>, permiten a los creadores de contenido introducir pequeños ficheros en línea en documentos.</small></dd> - <dt><a href="https://es.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64">Base64</a></dt> - <dd><small>Artículo en Wikipedia sobre el sistema de codificación Base64.</small></dd> - <dt>{{domxref("WindowBase64.atob","atob()")}}</dt> - <dd><small>Decodifica una cadena de datos que ha sido codificada utilizando base-64.</small></dd> - <dt>{{domxref("WindowBase64.btoa","btoa()")}}</dt> - <dd><small>Crea una cadena ASCII codificada en base 64 a partir de una "cadena" de datos binarios.</small></dd> - <dt><a href="#The_.22Unicode_Problem.22">The "Unicode Problem"</a></dt> - <dd><small>En la mayoría de navegadores, llamar a <code>btoa()</code> con una cadena Unicode causará una excepción <code>Character Out Of Range</code>. Este párrafo muestra algunas soluciones.</small></dd> - <dt><a href="/en-US/docs/URIScheme" title="/en-US/docs/URIScheme">URIScheme</a></dt> - <dd><small>Lista de esquemas URI soportados por Mozilla.</small></dd> - <dt><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a></dt> - <dd>En este artículo está publicada una librería hecha por nosotros con los siguientes objetivos:</dd> - <dd> - <ul> - <li>crear una interfaz al estilo de <a class="external" href="http://en.wikipedia.org/wiki/C_%28programming_language%29" title="http://en.wikipedia.org/wiki/C_%28programming_language%29">C</a> para cadenas (es decir, arrays de códigos de caracteres —<a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView"> <code>ArrayBufferView</code></a> en JavaScript) basada en la interfaz <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer" title="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a> de JavaScript.</li> - <li>crear una colección de métodos para los que los objetos parecidos a cadenas (de ahora en adelante, <code>stringView</code>s) funcionen estrictamente en arrays de números más que en cadenas JavaScript inmutables.</li> - <li>trabajar con otras codificaciones Unicode diferentes de las <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s UTF-16 por defecto de JavaScript.</li> - </ul> - </dd> - </dl> - - <p><span class="alllinks"><a href="/en-US/docs/tag/Base64">Ver todo...</a></span></p> - </td> - <td> - <h2 class="Tools" id="Tools" name="Tools">Herramientas</h2> - - <ul> - <li><a href="#Solution_.232_.E2.80.93_rewriting_atob()_and_btoa()_using_TypedArrays_and_UTF-8">Reescribir atob() y btoa() usando TypedArrays y UTF-8</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code>, una representación parecida a C de cadenas basadas en arrays tipados</a><span class="alllinks"><a href="/en-US/docs/tag/Base64">View All...</a></span></li> - </ul> - - <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Temas relacionados</h2> - - <ul> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer"><code>ArrayBuffer</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">Vectores o arrays tipados</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>Uint8Array</code></a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView">, una representación parecida a C de cadenas basadas en arrays tipados</a></li> - <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li> - <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - </ul> - </td> - </tr> - </tbody> -</table> - - - -<h2 id="El_Problema_Unicode">El "Problema Unicode"</h2> - -<p>Como las <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a>s son cadenas codificadas en 16 bits, en la mayoría de navegadores llamar a <code>window.btoa</code> sobre una cadena Unicode resultará en una excepción <code>Character Out Of Range </code>si un carácter excede el rango de los caracteres ASCII de 8 bits. Hay dos posibles métodos para resolver este problema:</p> - -<ul> - <li>el primero es escapar la cadena completa y, entonces, codificarla;</li> - <li>el segundo es convertir la <a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a> UTF-16 en un array de caracteres UTF-8 y codificarla.</li> -</ul> - -<p>Aquí están los dos posibles métodos:</p> - -<h3 id="Solución_1_–_escapar_la_cadena_antes_de_codificarla">Solución #1 – escapar la cadena antes de codificarla</h3> - -<pre class="brush:js notranslate">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"</pre> - -<p>Esta solución ha sido propuesta por <a href="http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html">Johan Sundström</a>.</p> - -<p>Otra posible solución sin utilizar las funciones 'unscape' y 'escape', ya obsoletas.</p> - -<pre class="brush:js notranslate">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=" -</pre> - -<h3 id="Solución_2_–_reescribir_atob_y_btoa_usando_TypedArrays_y_UTF-8">Solución #2 – reescribir <code>atob()</code> y <code>btoa()</code> usando <code>TypedArray</code>s y UTF-8</h3> - -<div class="note"><strong>Nota:</strong> El siguiente código también es útil para obtener un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a> a partir de una cadena <em>Base64</em> y/o viceversa (<a href="#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer" title="#Appendix.3A_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">véase abajo</a>). <strong>Para una librería completa de arrays tipados, vea <a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView">este artículo</a></strong>.</div> - -<pre class="brush: js notranslate">"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; - -} -</pre> - -<h4 id="Tests">Tests</h4> - -<pre class="brush: js notranslate">/* 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);</pre> - -<h4 id="Apéndice_Decodificar_una_cadena_Base64_en_Uint8Array_o_ArrayBuffer">Apéndice: Decodificar una cadena <em>Base64</em> en <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a> o <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a></h4> - -<p>Estas funciones nos permiten crear también <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">uint8Arrays</a> o <a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">arrayBuffers</a> a partir de cadenas codificadas en base 64:</p> - -<pre class="brush: js notranslate">var myArray = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw=="); // "Base 64 \u2014 Mozilla Developer Network" - -var myBuffer = base64DecToArr("QmFzZSA2NCDigJQgTW96aWxsYSBEZXZlbG9wZXIgTmV0d29yaw==").buffer; // "Base 64 \u2014 Mozilla Developer Network" - -alert(myBuffer.byteLength);</pre> - -<div class="note"><strong>Nota:</strong> La función <code>base64DecToArr(sBase64[, <em>nBlocksSize</em>])</code> devuelve un <a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array"><code>uint8Array</code></a> de bytes. Si tu objetivo es construir un búfer de datos crudos de 16, 32 o 64 bits, usa el argumento <code>nBlocksSize</code>, que es el número de bytes de los que la propiedad <code>uint8Array.buffer.bytesLength</code> debe devolver un múltiplo (1 u omitido para ASCII, <a href="/en-US/docs/Web/API/DOMString/Binary">cadenas binarias</a> o cadenas UTF-8 codificacas, 2 para cadenas UTF-16, 4 para cadenas UTF-32).</div> - -<p>Para una librería más completa, véase <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code></a><a href="/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView">, una representación parecida a C de cadenas basadas en arrays tipados</a>.</p> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{domxref("WindowBase64.atob","atob()")}}</li> - <li>{{domxref("WindowBase64.btoa","btoa()")}}</li> - <li><a href="/en-US/docs/data_URIs" title="/en-US/docs/data_URIs"><code>data</code> URIs</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBuffer">ArrayBuffer</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">TypedArrays</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/ArrayBufferView">ArrayBufferView</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays/Uint8Array">Uint8Array</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays/StringView" title="/en-US/docs/Web/JavaScript/Typed_arrays/StringView"><code>StringView</code> – a C-like representation of strings based on typed arrays</a></li> - <li><a href="/en-US/docs/Web/API/DOMString" title="/en-US/docs/Web/API/DOMString">DOMString</a></li> - <li><a href="/en-US/docs/URI" title="/en-US/docs/URI"><code>URI</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURI"><code>encodeURI()</code></a></li> - <li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIURIFixup" title="/en-US/docs/XPCOM_Interface_Reference/nsIURIFixup"><code>nsIURIFixup()</code></a></li> - <li><a href="https://en.wikipedia.org/wiki/Base64" title="https://en.wikipedia.org/wiki/Base64"><code>Base64 on Wikipedia</code></a></li> -</ul> 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 ---- -<p>{{APIRef}}</p> -<p>The <code><strong>WindowBase64</strong></code> helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in <a href="/en-US/docs/data_URIs">data URIs</a>.</p> -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> -<h2 id="Properties">Properties</h2> -<p><em>This helper neither defines nor inherits any properties.</em></p> -<h2 id="Methods">Methods</h2> -<p><em>This helper does not inherit any methods.</em></p> -<dl> - <dt> - {{domxref("WindowBase64.atob()")}}</dt> - <dd> - Decodes a string of data which has been encoded using base-64 encoding.</dd> - <dt> - {{domxref("WindowBase64.btoa()")}}</dt> - <dd> - Creates a base-64 encoded ASCII string from a string of binary data.</dd> -</dl> -<h2 id="Specifications">Specifications</h2> -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> -<h2 id="Browser_compatibility">Browser compatibility</h2> -<p>{{CompatibilityTable}}</p> -<div id="compat-desktop"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}} [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<div id="compat-mobile"> - <table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> - </table> -</div> -<p>[1] <code>atob()</code> is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.</p> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/Web/API/WindowBase64/Base64_encoding_and_decoding">Base64 encoding and decoding</a></li> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/es/web/api/globaleventhandlers/onunload/index.html b/files/es/web/api/windoweventhandlers/onunload/index.html index a665fc2027..a665fc2027 100644 --- a/files/es/web/api/globaleventhandlers/onunload/index.html +++ b/files/es/web/api/windoweventhandlers/onunload/index.html diff --git a/files/es/web/api/windowbase64/atob/index.html b/files/es/web/api/windoworworkerglobalscope/atob/index.html index aa9eeead07..aa9eeead07 100644 --- a/files/es/web/api/windowbase64/atob/index.html +++ b/files/es/web/api/windoworworkerglobalscope/atob/index.html diff --git a/files/es/web/api/windowtimers/clearinterval/index.html b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html index 14a1b0d1b8..14a1b0d1b8 100644 --- a/files/es/web/api/windowtimers/clearinterval/index.html +++ b/files/es/web/api/windoworworkerglobalscope/clearinterval/index.html diff --git a/files/es/web/api/windowtimers/cleartimeout/index.html b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html index 0df5242672..0df5242672 100644 --- a/files/es/web/api/windowtimers/cleartimeout/index.html +++ b/files/es/web/api/windoworworkerglobalscope/cleartimeout/index.html diff --git a/files/es/web/api/windowtimers/setinterval/index.html b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html index fe41612dd6..fe41612dd6 100644 --- a/files/es/web/api/windowtimers/setinterval/index.html +++ b/files/es/web/api/windoworworkerglobalscope/setinterval/index.html diff --git a/files/es/web/api/windowtimers/settimeout/index.html b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html index 1180d9f8af..1180d9f8af 100644 --- a/files/es/web/api/windowtimers/settimeout/index.html +++ b/files/es/web/api/windoworworkerglobalscope/settimeout/index.html 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 ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> diff --git a/files/es/web/api/document/async/index.html b/files/es/web/api/xmldocument/async/index.html index 132fd106e1..132fd106e1 100644 --- a/files/es/web/api/document/async/index.html +++ b/files/es/web/api/xmldocument/async/index.html diff --git a/files/es/web/events/loadend/index.html b/files/es/web/api/xmlhttprequest/loadend_event/index.html index 39e528634d..39e528634d 100644 --- a/files/es/web/events/loadend/index.html +++ b/files/es/web/api/xmlhttprequest/loadend_event/index.html 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 ---- -<div>{{CSSRef}}{{obsolete_header}}</div> - -<p><em>¡No uses este valor!Don't use this value! </em> Usa el valor {{cssxref("cursor#cell","cell")}} en su lugar.</p> diff --git a/files/es/web/css/@media/altura/index.html b/files/es/web/css/@media/height/index.html index 7cb29fe768..7cb29fe768 100644 --- a/files/es/web/css/@media/altura/index.html +++ b/files/es/web/css/@media/height/index.html diff --git a/files/es/web/css/@media/resolución/index.html b/files/es/web/css/@media/resolution/index.html index bd2beb4866..bd2beb4866 100644 --- a/files/es/web/css/@media/resolución/index.html +++ b/files/es/web/css/@media/resolution/index.html 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 ---- -<div>{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El descriptor CSS <code><strong>height</strong></code> 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.</p> - -<p>Si se definen dos valores de viewport, el primero corresponderá a la altura mínima, y el segundo, a la altura máxima.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="brush: css">/* Un valor */ -height: auto; -height: 320px; -height: 15em; - -/* Dos valores */ -height: 320px 200px; -</pre> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd> - <dt><code><length></code></dt> - <dd>Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.</dd> - <dt><code><percentage></code></dt> - <dd>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.</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -<pre class="syntaxbox">{{csssyntax}} -</pre> - -<h2 id="Ejemplo">Ejemplo</h2> - -<pre class="brush: css">@viewport { - height: 500px; -}</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>29 (usando una bandera)</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>4.4</td> - <td>29</td> - <td>{{CompatNo}}</td> - <td>10{{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> 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 ---- -<div>{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El descriptor CSS <strong>width</strong> 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.</p> - -<p>Si se definen dos valores de viewport, el primero corresponderá a la anchura mínima, y el segundo, a la anchura máxima.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="brush: css">/* Ejemplo con un valor de viewport: */ -@viewport { - width: 320px; -} - -/* Ejemplo con dos valores de viewport: */ -@viewport { - width: 320px, 120px; -} - -</pre> - -<p> </p> - -<h3 id="Values" name="Values">Valores</h3> - -<dl> - <dt><code>auto</code></dt> - <dd>El valor a usar es calculado con los valores de otros descriptores CSS.</dd> - <dt><code><length></code></dt> - <dd>Un valor {{cssxref("<length>")}} de longitud absoluta o relativa no negativa.</dd> - <dt><code><percentage></code></dt> - <dd>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.</dd> -</dl> - -<h3 id="Sintaxis_formal">Sintaxis formal</h3> - -<pre class="syntaxbox">{{csssyntax}}</pre> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> - <td>{{Spec2('CSS3 Device')}}</td> - <td>Definición inicial</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table" style="height: 93px; width: 950px;"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>29 (usando una bandera)</td> - <td>{{CompatNo}}</td> - <td>10 {{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table" style="height: 93px; width: 948px;"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>4.4</td> - <td>29</td> - <td>{{CompatNo}}</td> - <td>10{{property_prefix("-ms")}}</td> - <td>11.10<br> - Removido en 15<br> - Reintroducido con una bandera en 16</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> 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' ---- -<div class="note"><strong>Nota:</strong> La pseudo-clase CSS <code>:-moz-placeholder</code> está depreciada desde la versión Firefox 19 siendo desde entonces sustituida por el pseudo-elemento {{cssxref('::-moz-placeholder')}}.</div> - -<div class="note"><strong>Nota: </strong> El CSSWG ha decidido introducir <code>:placeholder-shown</code>. Esta funcionalidad volverá a ser incluida en Gecko en algún momento futuro, sin prefijo y con un nuevo nombre. {{bug(1069012)}}</div> - -<div>{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p><code>La </code><a href="/es/docs/CSS/Pseudo-classes">pseudo-clase </a><code>:-moz-placeholder</code> representa a cualquier elemento que muestre un <a href="/es/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder)</a>. 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).,</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<h3 id="Ejemplo_básico">Ejemplo básico</h3> - -<p>Este ejemplo le da estilo a un <em>placeholder</em> (marcador de posición) haciendo que el color del texto sea verde.</p> - -<pre class="brush: html"><!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> -</pre> - -<p>{{EmbedLiveSample("Basic_example")}}</p> - -<h3 id="Desbordamiento">Desbordamiento</h3> - -<p>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 <code>text-overflow: ellipsis</code> para envolverlo.</p> - -<pre class="brush: css">input[placeholder] { text-overflow: ellipsis; } -::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */ -input:-moz-placeholder { text-overflow: ellipsis; } -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación.</p> - -<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementado en {{bug("457801")}}.</p> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li><a href="/es/docs/Web/Guide/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> 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' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>La <a href="/es/docs/Web/CSS/Pseudo-classes">pseudo-clase </a>propietaria y no estándar <code>:-ms-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">texto del marcador de posición (placeholder) </a> 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.</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>El siguiente ejemplo destaca con un estilo personalizado los campos <em>"Branch"</em> y código "<em>ID"</em>. 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.</p> - -<h3 id="HTML">HTML</h3> - -<pre><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></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">input { - background-color:#E8E8E8; - color:black; } -/* placeholder only style */ -input.studentid:-ms-input-placeholder { - font-style:italic; - color: red; - background-color: yellow; -}</pre> - -<h3 id="Resultado">Resultado</h3> - -<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación aunque Microsoft tiene <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">una descripción en MSDN.</a></p> - -<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>10</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/es/web/css/_colon_-webkit-autofill/index.html b/files/es/web/css/_colon_autofill/index.html index 98c1c68215..98c1c68215 100644 --- a/files/es/web/css/_colon_-webkit-autofill/index.html +++ b/files/es/web/css/_colon_autofill/index.html diff --git a/files/es/web/css/_colon_any/index.html b/files/es/web/css/_colon_is/index.html index 7fe55d57c4..7fe55d57c4 100644 --- a/files/es/web/css/_colon_any/index.html +++ b/files/es/web/css/_colon_is/index.html diff --git a/files/es/web/css/_colon_not()/index.html b/files/es/web/css/_colon_not/index.html index 5182d83d77..5182d83d77 100644 --- a/files/es/web/css/_colon_not()/index.html +++ b/files/es/web/css/_colon_not/index.html diff --git a/files/es/web/css/_colon_-moz-ui-invalid/index.html b/files/es/web/css/_colon_user-invalid/index.html index 6f12ca97a6..6f12ca97a6 100644 --- a/files/es/web/css/_colon_-moz-ui-invalid/index.html +++ b/files/es/web/css/_colon_user-invalid/index.html 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' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<div class="note"><strong>Nota:</strong> El pseudo-elemento <code>::-moz-placeholder</code> fue creado como sustituto de la pseudo-clase {{cssxref(':-moz-placeholder')}} que fue depreciada a partir de la versión de 19 de Firefox.</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento </a><code>::-moz-placeholder</code> sirve para seleccionar cualquier elemento de un formulario que esté mostrando un <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text) </a>. 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).</p> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>En este ejemplo se da estilo al marcador de posición del texto (placeholder text) haciendo que el color del texto sea verde (green).</p> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<pre class="brush:html"><input id="test" placeholder="Placeholder text!"> -</pre> - -<h3 id="Contenido_CSS">Contenido CSS</h3> - -<pre class="brush:css">input::-moz-placeholder { - color: green; -} -</pre> - -<p>Obtendremos el siguiente resultado:</p> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación.</p> - -<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("19.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Firefox aplica un estilo por defecto de <code>{{cssxref("opacity")}}: 0.54</code> 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.</p> - -<p>La implementación previa en el motor Gecko era como la pseudo-clase {{cssxref(":-moz-placeholder")}}. Ver {{Bug("737786")}}.</p> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-webkit-input-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> 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' ---- -<div>{{Non-standard_header}}{{CSSRef}}</div> - -<h2 id="Resumen">Resumen</h2> - -<p>El <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elemento</a> no estándar y propietario <code>::-webkit-input-placeholder</code> representa el <a href="/es/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">marcador de posición de texto (placeholder text)</a> 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.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>No es parte de ninguna especificación. Es un pseudo-elemento propietario y específico de WebKit/Blink.</p> - -<h2 id="Compatibilidad_con_los_distintos_navegadores">Compatibilidad con los distintos navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_además">Ver además</h2> - -<ul> - <li>{{cssxref("::placeholder")}}</li> - <li>{{cssxref("::-moz-placeholder")}}</li> - <li>{{cssxref(":-ms-input-placeholder")}}</li> - <li><a href="/es/docs/Web/HTML/Forms_in_HTML">Formularios en HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("textarea")}}</li> -</ul> diff --git a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html b/files/es/web/css/_doublecolon_file-selector-button/index.html index 5d14e35e58..5d14e35e58 100644 --- a/files/es/web/css/_doublecolon_-webkit-file-upload-button/index.html +++ b/files/es/web/css/_doublecolon_file-selector-button/index.html diff --git a/files/es/web/css/selectores_hermanos_adyacentes/index.html b/files/es/web/css/adjacent_sibling_combinator/index.html index 1200c4bd61..1200c4bd61 100644 --- a/files/es/web/css/selectores_hermanos_adyacentes/index.html +++ b/files/es/web/css/adjacent_sibling_combinator/index.html diff --git a/files/es/web/css/selectores_atributo/index.html b/files/es/web/css/attribute_selectors/index.html index a7b59d03c6..a7b59d03c6 100644 --- a/files/es/web/css/selectores_atributo/index.html +++ b/files/es/web/css/attribute_selectors/index.html 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 ---- -<p> -</p><p><< <a href="es/Gu%c3%ada_de_referencia_de_CSS">Volver</a> -</p> -<h3 id="Resumen" name="Resumen"> Resumen </h3> -<p>Un valor computado automáticamente por el 'useragent.' -</p><p>Usando el valor <i>auto</i> en cualquier propiedad, dejamos al navegador que calcule el valor requerido. </p><p><br> -FIXME -</p> -<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> -<pre class="eval">div { - height: 600px; - border: 1px solid #000; -} -</pre> -<pre class="eval">div img { - height: auto; - border: 1px solid red; -} -</pre> -<h3 id="Se_utiliza_en" name="Se_utiliza_en"> Se utiliza en </h3> -<ul><li> {{ Cssxref("overflow") }} -</li><li> {{ Cssxref("cursor") }} -</li><li> {{ Cssxref("width") }} -</li><li> {{ Cssxref("marker-offset") }} -</li><li> {{ Cssxref("margin") }} -</li><li> margin-* (left|bottom|top|right|start|end) -</li><li> {{ Cssxref("bottom") }} -</li><li> {{ Cssxref("left") }} -</li><li> {{ Cssxref("table-layout") }} -</li><li> {{ Cssxref("z-index") }} -</li><li> {{ Cssxref("-moz-column-width") }} -</li></ul> -<p><br> -</p> -<div class="noinclude"> -<p><span class="comment">Categorías</span> -<span class="comment">Interwiki Languages</span> -</p> -</div> -{{ languages( { "en": "en/CSS/auto" } ) }} diff --git a/files/es/web/css/-moz-box-flex/index.html b/files/es/web/css/box-flex/index.html index c7491aea2d..c7491aea2d 100644 --- a/files/es/web/css/-moz-box-flex/index.html +++ b/files/es/web/css/box-flex/index.html diff --git a/files/es/web/css/-moz-box-ordinal-group/index.html b/files/es/web/css/box-ordinal-group/index.html index 9f6af1c315..9f6af1c315 100644 --- a/files/es/web/css/-moz-box-ordinal-group/index.html +++ b/files/es/web/css/box-ordinal-group/index.html diff --git a/files/es/web/css/-moz-box-pack/index.html b/files/es/web/css/box-pack/index.html index 118d60287a..118d60287a 100644 --- a/files/es/web/css/-moz-box-pack/index.html +++ b/files/es/web/css/box-pack/index.html diff --git a/files/es/web/css/grid-column-gap/index.html b/files/es/web/css/column-gap/index.html index e7a607a5bc..e7a607a5bc 100644 --- a/files/es/web/css/grid-column-gap/index.html +++ b/files/es/web/css/column-gap/index.html 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) ---- -<p> </p> -<h2 id="Introducción">Introducción</h2> -<p>Este tutorial te introducirá en las Hojas de Estilo en Cascada (CSS).</p> -<p>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.</p> -<ul> <li>La Parte I ilustra las características estándares de CSS que funcionan con los navegadores de Mozilla así como también con la mayoría de navegadores modernos.</li> -</ul> -<ul> <li>La Parte II contiene algunos ejemplos de características básicas que funcionan en Mozilla pero no necesariamente funciona en otros entornos.</li> -</ul> -<p>Este tutorial se base en la <a class=" external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">especificación CSS 2.1</a></p> -<h3 id="¿Quienes_deberían_usar_este_tutorial">¿Quienes deberían usar este tutorial?</h3> -<p>Este tutorial es principalmente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia con CSS.</p> -<p>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.</p> -<p>Si conoces algo de CSS, puedes saltarte las partes del tutorial que ya conozcas, y solo usar las partes que te interesan.</p> -<p>Si tienes experiencia con CSS pero no con Mozilla, puedes saltarte a la Parte II.</p> -<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> -<p>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.</p> -<p>Si no quieres editar archivos, puedes solo leer el tutorial y ver las imágenes, pero es una forma menos efectiva de aprender.</p> -<p>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.</p> -<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> -<p><strong>Nota: </strong> 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.</p> -<h3 id="Como_usar_este_tutorial">Como usar este tutorial</h3> -<p>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.</p> -<p>En cada página, usa la sección <em>Información</em> para entender como funciona CSS. Usa la sección <em>Acción</em> para tratar de usar CSS en tu computadora.</p> -<p>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.</p> -<p>Para entender CSS con mayor profundidad, lee la información que encuentres en las cajas subtituladas <em>Más detalles</em>. Usa los enlaces allí para encontrar información de referencia acerca de CSS.</p> -<h2 id="Tutorial_Parte_I">Tutorial Parte I</h2> -<p>Una guía de CSS paso a paso.</p> -<ol> <li><strong><a href="/es/CSS/Getting_Started/Que_es_css" title="es/CSS/Getting_Started/Que_es_css">Que es CSS</a></strong></li> <li><a href="/es/CSS/Getting_Started/Por_que_usar_css" title="es/CSS/Getting_Started/Por_que_usar_css"><strong>Por qué usar CSS</strong></a></li> <li><a href="/es/CSS/Getting_Started/Como_funciona_css" title="es/CSS/Getting_Started/Como_funciona_css"><strong>Como funciona CSS</strong></a></li> <li><strong><a href="/es/CSS/Getting_Started/Cascada_y_herencia" title="es/CSS/Getting_Started/Cascada_y_herencia">Cascada y herencia</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Selectores" title="es/CSS/Getting_Started/Selectores">Selectores</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/CSS_legible" title="es/CSS/Getting_Started/CSS_legible">CSS legible</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estilos_de_texto" title="es/CSS/Getting_Started/Estilos_de_texto">Estilos de texto</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Color" title="es/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Contenido" title="es/CSS/Getting_Started/Contenido">Contenido</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Listas" title="es/CSS/Getting_Started/Listas">Listas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Cajas" title="es/CSS/Getting_Started/Cajas">Cajas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Estructura" title="es/CSS/Getting_Started/Estructura">Estructura</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Tablas" title="es/CSS/Getting_Started/Tablas">Tablas</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Media" title="es/CSS/Getting_Started/Media">Media</a></strong></li> -</ol> -<h2 id="Tutorial_Parte_II">Tutorial Parte II</h2> -<p>Ejemplos que muestran el alcance de CSS usado con otras tecnologías web y de Mozilla.</p> -<ol> <li><strong><a href="/es/CSS/Getting_Started/Javascript" title="es/CSS/Getting_Started/Javascript">JavaScript</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Graficos_svg" title="es/CSS/Getting_Started/Graficos_svg">Gráficos SVG</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/Data_xml" title="es/CSS/Getting_Started/Data_xml">Data XML</a></strong></li> <li><strong><a href="/es/CSS/Getting_Started/XBL_bindings" title="es/CSS/Getting_Started/XBL_bindings">XBL bindings</a> </strong></li> <li><strong><a href="/es/CSS/Getting_Started/Interfaces_de_usuario_XUL" title="es/CSS/Getting_Started/Interfaces_de_usuario_XUL">Interfaces de usuario XUL</a></strong></li> -</ol> -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ languages( { "es": "es/CSS/Introducción", "de": "de/CSS/Einführung", "fr": "fr/CSS/Premiers_pas", "it": "it/Conoscere_i_CSS", "ja": "ja/CSS/Getting_Started", "nl": "nl/CSS/Voor_Beginners", "pl": "pl/CSS/Na_pocz\u0105tek", "pt": "pt/CSS/Como_come\u00e7ar", "zh-cn": "cn/CSS/\u5f00\u59cb" } ) }}</p> diff --git a/files/es/web/css/comentarios/index.html b/files/es/web/css/comments/index.html index f09cac662a..f09cac662a 100644 --- a/files/es/web/css/comentarios/index.html +++ b/files/es/web/css/comments/index.html 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 ---- -<p> </p> -<p>Esta página explica por qué los documentos usan CSS. Usas CSS para añadir una hoja de estilos a tu documento de prueba.</p> -<p>Esta es la segunda sección del <a href="/es/CSS/Introducción" title="../../../../es/CSS/Introducci%C3%B3n">tutorial</a>.</p> -<p>Sección anterior: <a href="/es/CSS/Como_iniciar/Que_es_CSS" title="es/CSS/Como_iniciar/Que_es_CSS">Que es CSS</a><br> - Sección siguiente: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works">How CSS works</a></p> -<h2 id="Información_¿Por_qué_usar_CSS">Información: ¿Por qué usar CSS?</h2> -<p>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 <em>estilos. </em>Si mantienes los estilos separados del contenido puedes:</p> -<ul> - <li>Evitar duplicación</li> - <li>Hacer el mantenimiento más simple</li> - <li>Usar el mismo contenido con diferentes estilos para diferentes propositos.</li> -</ul> -<table> - <caption> - Ejemplo</caption> - <tbody> - <tr> - <td> - <p>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.</p> - <p>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.</p> - </td> - </tr> - </tbody> -</table> -<p>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).</p> -<table> - <caption> - Más detalles</caption> - <tbody> - <tr> - <td> - <p>Un lenguaje de marcado como HTML también provee algunas maneras de especificar estilos.</p> - <p>Por ejemplo en HTML puedes usar una etiqueta <code><b> </code>para hacer acentuar el texto, y puedes especificar un color de fondo de la página en la etiqueta <code><body></code>.</p> - <p>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.</p> - </td> - </tr> - </tbody> -</table> -<h2 id="Acción_Creando_una_hoja_de_estilos">Acción: Creando una hoja de estilos</h2> -<ol> - <li>Crea un archivo de texto en el mismo directorio anterior. Este archivo será tu hoja de estilos. Nombrala como: <code>style1.css</code></li> - <li>En tu archivo CSS, copia y pega esta única línea, luego graba el archivo:</li> - <li> - <div> - <pre class="eval">strong {color: red;} -</pre> - </div> - </li> -</ol> -<h3 id="Enlazando_tu_documento_a_tu_hoja_de_estillos">Enlazando tu documento a tu hoja de estillos</h3> -<ol> - <li>Para enlazar tu documento a tu hoja de estilos, edita tu archivo HTML. Añade la línea acentuada aquí:</li> - <li> - <div> - <pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" -"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; -charset=iso-8859-1"> - <title>Sample document</title> - <strong><link rel="stylesheet" type="text/css" href="style1.css"></strong> - </head> - <body> - <p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </div> - </li> - <li>Graba el archivo y refresca la pantalla del navegador. Esta hoja de estilos hace que las letras inicales sean rojas, como esto: - <table> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> -<table> - <caption> - Reto</caption> - <tbody> - <tr> - <td>En adición al rojo, CSS permite algunos otros nombres de colores. - <p>Sin mirar la referencia, encuentra cinco o más nombres de colores que funcionen en tu hoja de estilos.</p> - </td> - </tr> - </tbody> -</table> -<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Why_use_CSS_colors" title="en/CSS/Getting Started/Challenge solutions#Why use CSS colors">See a solution for the challenge.</a> Ver la solución al reto.</p> -<h2 id="¿Qué_sigue">¿Qué sigue?</h2> -<p>Si tienes alguna dificultad entendiendo esta página, o si tienes comentarios acerca de la misma, por favor contribuye en esta página de <a href="/Talk:en/CSS/Getting_Started/Why_use_CSS%3f" title="Talk:en/CSS/Getting_Started/Why_use_CSS%3f">Discusión</a>.</p> -<p>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: <a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">Como funciona CSS</a>.</p> -<p>{{ CSSTutorialTOC() }}</p> -<p>{{ 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" } ) }}</p> 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 ---- -<p>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.</p> - -<p>Esta es la primera sección del tutorial <a href="/es/CSS/Introducción" title="es/CSS/Introducción">Como iniciar</a>.<br> - Siguiente sección: <a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting Started/Why use CSS">Por qué usar CSS</a></p> - -<h2 id="Información_¿Qué_es_CSS">Información: ¿Qué es CSS?</h2> - -<p>Cascading Style Sheets (<dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>), traducido literalmente al español, como <em>Hojas de estilo en cascada</em>, es un lenguaje para especificar cómo los documentos se presentan a los usuarios.</p> - -<p>Un <em>documento (document)</em> es una colección de información que está estructurada utilizando un <em>lenguaje de formato (markup language)</em>.</p> - -<table style="background-color: #fffff4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Ejemplos</caption> - <tbody> - <tr> - <td> - <ul> - <li>Una página web como la que estás leyendo, es un documento.<br> - 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).</li> - </ul> - - <ul> - <li>Un cuadro de diálogo en una aplicación Mozilla es un documento.<br> - 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).</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p>En este tutorial, los cuadros con titulo <strong>Más detalles</strong>, 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.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Más detalles</caption> - <tbody> - <tr> - <td> - <p>Un documento no es lo mismo que un archivo. Y este puede o no estar almacenado en un archivo.</p> - - <p>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.</p> - - <p>Para más información acerca de documentos y lenguajes de formato, visite otras partes de este sitio web—por ejemplo:</p> - - <table style="background-color: inherit; margin-left: 2em;"> - <tbody> - <tr> - <td><a href="/en/HTML" title="en/HTML">HTML</a></td> - <td>para páginas web</td> - </tr> - <tr> - <td><a href="/en/XML" title="en/XML">XML</a></td> - <td>para documentos estrucurados, en general</td> - </tr> - <tr> - <td><a href="/en/SVG" title="en/SVG">SVG</a></td> - <td>para gráficas</td> - </tr> - <tr> - <td><a href="/en/XUL" title="en/XUL">XUL</a></td> - <td>para interfaces de usuario de Mozilla</td> - </tr> - </tbody> - </table> - - <p>En la parte II de este tutorial podrá ver ejemplos de estos lenguajes de formato.</p> - </td> - </tr> - </tbody> -</table> - -<p><em>Presentar</em> 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.</p> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; margin-bottom: 1em; padding: 1em;"> - <caption>Más detalles</caption> - <tbody> - <tr> - <td>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 <em>agente de usuarios</em> (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. - <p>Para algunas de las definiciones formales de la terminología relacionda con CSS, consulte el enlace <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definiciones</a> (en ingles) en la especificación CSS.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Acción_Crear_un_documento">Acción: Crear un documento</h2> - -<ol> - <li>Utilice su computador para crear un nuevo directorio y un nuevo archivo de texto allí. El archivo contendrá el documento. - <ol> - <li>Copie y pegue el código HTML que se muestra a continuación. Guarde el archivo con el nombre <code>doc1.html</code> - - <div style="width: 40em;"> - <pre class="deki-transform"><!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> -</pre> - </div> - </li> - </ol> - </li> - <li>En el navegador web, abra una nueva pestaña o una nueva ventana, y abra el archivo allí. - <p>Debe observar un texto con las letras iniciales en negrita, así:</p> - - <table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> - </tr> - </tbody> - </table> - - <p>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.</p> - </li> -</ol> - -<h2 id="¿Qué_sigue">¿Qué sigue?</h2> - -<p>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 <a href="/Talk:en/CSS/Getting_Started/What_is_CSS%3f" title="Talk:en/CSS/Getting_Started/What_is_CSS?">Discusiones</a>.</p> - -<p>El documento aún no utiliza CSS. En la siguiente página se utilizará CSS para especificar el estilo: <strong><a href="/es/docs/CSS/Como_iniciar/Por_que_usar_CSS" title="en/CSS/Getting_Started/Why_use_CSS?">¿Por qué utilizar CSS?</a></strong></p> - -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ 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" } ) }}</p> diff --git a/files/es/web/css/valor_calculado/index.html b/files/es/web/css/computed_value/index.html index 9112bf97b5..9112bf97b5 100644 --- a/files/es/web/css/valor_calculado/index.html +++ b/files/es/web/css/computed_value/index.html diff --git a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html b/files/es/web/css/css_animations/detecting_css_animation_support/index.html index 11bb0c0076..11bb0c0076 100644 --- a/files/es/web/css/css_animations/detectar_soporte_de_animación_css/index.html +++ b/files/es/web/css/css_animations/detecting_css_animation_support/index.html diff --git a/files/es/web/css/css_animations/usando_animaciones_css/index.html b/files/es/web/css/css_animations/using_css_animations/index.html index b9b08bbc0b..b9b08bbc0b 100644 --- a/files/es/web/css/css_animations/usando_animaciones_css/index.html +++ b/files/es/web/css/css_animations/using_css_animations/index.html 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_generator/index.html index 3f189b87ea..3f189b87ea 100644 --- 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_generator/index.html diff --git a/files/es/web/css/css_background_and_borders/index.html b/files/es/web/css/css_backgrounds_and_borders/index.html index 59c2117194..59c2117194 100644 --- a/files/es/web/css/css_background_and_borders/index.html +++ b/files/es/web/css/css_backgrounds_and_borders/index.html diff --git a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html index a80b81bf1a..a80b81bf1a 100644 --- a/files/es/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ b/files/es/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html diff --git a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index b59b5f677d..b59b5f677d 100644 --- a/files/es/web/css/cursor/uso_de_url_como_valor_de_la_propiedad_cursor/index.html +++ b/files/es/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html diff --git a/files/es/web/css/css_modelo_caja/index.html b/files/es/web/css/css_box_model/index.html index 320800f82e..320800f82e 100644 --- a/files/es/web/css/css_modelo_caja/index.html +++ b/files/es/web/css/css_box_model/index.html diff --git a/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html index 45571faf77..45571faf77 100644 --- a/files/es/web/css/css_modelo_caja/introducción_al_modelo_de_caja_de_css/index.html +++ b/files/es/web/css/css_box_model/introduction_to_the_css_box_model/index.html diff --git a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html index dafdf71855..dafdf71855 100644 --- a/files/es/web/css/css_modelo_caja/mastering_margin_collapsing/index.html +++ b/files/es/web/css/css_box_model/mastering_margin_collapsing/index.html diff --git a/files/es/web/css/css_colors/index.html b/files/es/web/css/css_color/index.html index ef36d7954b..ef36d7954b 100644 --- a/files/es/web/css/css_colors/index.html +++ b/files/es/web/css/css_color/index.html diff --git a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html b/files/es/web/css/css_colors/color_picker_tool/index.html index 7e7819542d..7e7819542d 100644 --- a/files/es/web/css/css_colors/herramienta_para_seleccionar_color/index.html +++ b/files/es/web/css/css_colors/color_picker_tool/index.html diff --git a/files/es/web/css/columnas_css/index.html b/files/es/web/css/css_columns/index.html index 949f2eca71..949f2eca71 100644 --- a/files/es/web/css/columnas_css/index.html +++ b/files/es/web/css/css_columns/index.html 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 +--- +<p> +</p> +<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n"> Introducción </h3> +<p>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. +</p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS-3</a> 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) </p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">El blog de Robert O'Callahan </a> usa columnas CSS, pruébalo con Firefox 1.5 +</p> +<h3 id="Usar_Columnas" name="Usar_Columnas"> Usar Columnas </h3> +<h4 id="Columnas.2C_Count_y_Width" name="Columnas.2C_Count_y_Width"> Columnas, Count y Width </h4> +<p>Dos propiedades CSS Controlan el número (Count) y el ancho (Width) de las columnas: <code>-moz-column-count</code> y <code>-moz-column-width</code>. +</p><p><code>-moz-column-count</code> indica el número concreto de columnas a crear. Por ejemplo: +</p> +<pre><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> +</pre> +<p>Mostrará el contenido en dos columnas (si usas Firefox 1.5 o superior): +</p> +<div style="border: 1px solid silver; padding: 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> +<p><code>-moz-column-width</code> fija la anchura mínima de las columnas. Si no se indica un <code>-moz-column-count</code>, entonces el navegador creará automáticamente tantas columnas (con la anchura indicada) como sea posible en el espacio disponible. </p> +<pre><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> +</pre> +<p>Se visualizará así: +</p> +<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 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> +<p>Los detalles exactos son descritos en <a class="external" href="http://www.w3.org/TR/css3-multicol/">El borrador de CSS3</a>. +</p><p>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. +</p> +<h4 id="Equilibrado_de_altura" name="Equilibrado_de_altura"> Equilibrado de altura </h4> +<p>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. </p><p>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 <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> los artículos hacen esto (usando scripts). Por lo tanto extendemos el borrador de modo que si se indica la propiedad CSS <code>height</code> 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. </p> +<h4 id="Espacio_entre_Columnas" name="Espacio_entre_Columnas"> Espacio entre Columnas </h4> +<p>Por defecto, cada columna está tocando la columna de al lado. Normalmente esto no es lo más apropiado. Se puede utilizar el <code>padding</code> de las columnas para corregirlo, pero normalmente lo más fácil será aplicar la propiedad <code>-moz-column-gap</code> al bloque con multicolumna: </p> +<pre><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> +</pre> +<p>Se visualizará así: +</p> +<div style="-moz-column-width: 20em; border: 1px solid silver; padding: 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> +<h4 id="Degradado_elegante" name="Degradado_elegante"> Degradado elegante </h4> +<p>La propiedad <code>-moz-column</code> 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. +</p> +<h3 id="Conclusi.C3.B3n" name="Conclusi.C3.B3n"> Conclusión </h3> +<p>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. </p> +<h3 id="Referencias_adicionales" name="Referencias_adicionales"> Referencias adicionales </h3> +<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a> +</li></ul> +<p><span class="comment">Categorías</span> +</p><p><span class="comment">interwiki links</span> +</p>{{ 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_reglas_condicionales/index.html b/files/es/web/css/css_conditional_rules/index.html index 59c2a9b328..59c2a9b328 100644 --- a/files/es/web/css/css_reglas_condicionales/index.html +++ b/files/es/web/css/css_conditional_rules/index.html 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/basic_concepts_of_flexbox/index.html index 38e89c7813..38e89c7813 100644 --- a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html +++ b/files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html 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/typical_use_cases_of_flexbox/index.html index 9048cbb739..9048cbb739 100644 --- 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/typical_use_cases_of_flexbox/index.html 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 ---- -<p>{{CSSRef}}</p> - -<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> 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")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p> - -<ul> - <li>Quieres centrar un elemento en la mitad de una página</li> - <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li> - <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li> -</ul> - -<p>Este artículo sólo aborda el uso de <em>flexbox</em> 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 <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p> - -<h2 id="Conceptos_básicos">Conceptos básicos</h2> - -<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, 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 <code>wrap</code>.</p> - -<p>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:</p> - -<ul> - <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li> - <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li> - <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li> -</ul> - -<p>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.</p> - -<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2> - -<p>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.</p> - -<h3 id="Contenido_CSS">Contenido CSS</h3> - -<pre class="brush: 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; -} -</pre> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<pre class="brush: 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> -</pre> - -<h3 id="Resultado">Resultado</h3> - -<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p> - -<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2> - -<p>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 <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p> - -<h3 id="Contenido_CSS_2">Contenido CSS</h3> - -<pre class="brush: css;highlight:[8,14,18]">.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; -} -</pre> - -<h3 id="Contenido_HTML_2">Contenido HTML</h3> - -<pre class="brush: 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> -</pre> - -<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> - -<pre class="brush: js;">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"); -}</pre> - -<h3 id="Resultado_2">Resultado</h3> - -<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p> - -<p>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.</p> - -<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2> - -<p>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 <code>wrap</code>.</p> - -<h3 id="Contenido_CSS_3">Contenido CSS</h3> - -<pre class="brush: css;highlight:[4]">.horizontal-container { - display: flex; - width: 300px; - flex-flow: row wrap; -} -.fixed-size { - flex: none; - width: 100px; - background-color: black; - color: white; - text-align: center; -} -</pre> - -<h3 id="Contenido_HTML_3">Contenido HTML</h3> - -<pre class="brush: 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> -</pre> - -<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3> - -<pre class="brush: js;">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"); -} -</pre> - -<h3 id="Resultado_3">Resultado</h3> - -<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li> -</ul> 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 ---- -<div>{{CSSRef}}</div> - -<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> 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 <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p> - -<p>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.</p> - -<div class="note"><strong>Nota:</strong> 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 <code>-webkit</code>; 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.</div> - -<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2> - -<p>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 <code>flex-direction</code> de tipo <code>row</code>, 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.</p> - -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> - -<dl> - <dt>Contenedor flexible (Flex container)</dt> - <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd> - <dt>Elemento flexible (Flex item)</dt> - <dd> - <p>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.</p> - </dd> - <dt>Ejes</dt> - <dd> - <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p> - - <ul> - <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li> - <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li> - <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li> - <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li> - </ul> - </dd> - <dt>Direcciones</dt> - <dd> - <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> 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 <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p> - - <ul> - <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li> - <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li> - </ul> - </dd> - <dt>Líneas</dt> - <dd> - <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p> - </dd> - <dt>Dimensiones</dt> - <dd> - <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p> - - <ul> - <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li> - <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li> - </ul> - </dd> -</dl> - -<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2> - -<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p> - -<pre class="brush: css">display : flex</pre> - -<p>o</p> - -<pre class="brush: css">display : inline-flex</pre> - -<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p> - -<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div> - -<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2> - -<p>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 <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p> - -<p>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 <strong>inicio principal (main start)</strong> de su contenedor flexible.</p> - -<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p> - -<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p> - -<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> 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.</p> - -<p>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 <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, 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 <code>justify-content</code> 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 "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p> - -<p>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. </p> - -<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2> - -<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3> - -<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p> - -<ul> - <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li> - <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li> - <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3> - -<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p> - -<pre class="brush:html;"><!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></pre> - -<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3> - -<p>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.</p> - -<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> - -<p>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.</p> - -<pre class="brush:html;"> -<!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></pre> - -<h2 id="Área_de_juego">Área de juego</h2> - -<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p> - -<ul> - <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> - <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> -</ul> - -<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2> - -<p>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".</p> - -<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p> - -<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p> - -<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> 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.</p> - -<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caraterística</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> - {{ CompatGeckoDesktop("22.0") }}</td> - <td>21.0{{ property_prefix("-webkit") }}</td> - <td>10{{ property_prefix("-ms") }}(partial)</td> - <td>12.1</td> - <td>3.1{{ property_prefix("-webkit") }}(partial)<br> - 6.1{{ property_prefix("-webkit") }}<br> - 9</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caraterística</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte Básico</td> - <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> - {{ CompatGeckoMobile("22.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>10{{ property_prefix("-ms") }}(partial)<br> - 11</td> - <td>12.1</td> - <td> - <p>3.2{{ property_prefix("-webkit") }}(partial)<br> - 7.1{{ property_prefix("-webkit") }}<br> - 9.0</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Notas">Notas</h3> - -<p>[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.</p> - -<p>[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 <code>true</code>.</p> - -<p>[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.</p> - -<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>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.</p> - -<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li> -</ul> diff --git a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index afb49e2a92..afb49e2a92 100644 --- a/files/es/web/css/css_grid_layout/conceptos_básicos_del_posicionamiento_con_rejillas/index.html +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html diff --git a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 298da1dc5f..298da1dc5f 100644 --- a/files/es/web/css/css_grid_layout/relacion_de_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html 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 +--- +<p><a href="/en-US/docs/CSS/CSS3" title="CSS3">CSS3</a> posee soporte para nuevos tipos de <em>gradientes</em> en las propiedades CSS. Usarlos <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">un</span> <span class="hps">segundo plano,</span> <span class="hps">permite mostrar</span> <span class="hps">transiciones suaves</span> <span class="hps">entre dos o</span> <span class="hps">más</span> <span class="hps">colores especificados,</span></span> <span id="result_box" lang="es"><span class="hps">evitando así</span> <span class="hps">el uso de imágenes</span> <span class="hps">para estos efectos</span></span>, lo que reduce<span id="result_box" lang="es"><span class="hps"> el tiempo</span> <span class="hps">de descarga y</span> <span class="hps">el uso de</span> <span class="hps">ancho de banda</span></span>. <span id="result_box" lang="es"><span class="hps">Además</span><span>,</span> <span class="hps">debido a que el</span> <span class="hps">gradiente</span> <span class="hps">es generado por el</span> <span class="hps">navegador</span><span>,</span></span> los <span id="result_box" lang="es"><span class="hps">objetos</span> <span class="hps">degradados</span> <span class="hps">se ven mejor</span> <span class="hps">cuando se hace un acercamiento</span></span>, y el ajuste de diseño es mucho más flexible.</p> + +<p>Los navegadores soportan dos tipos de gradientes: <em>lineal</em>, definido con la función <em>linear-gradient</em>, y <em>radial</em>, definido con <em>radial-gradient</em>.</p> + +<h2 id="Gradientes_lineales">Gradientes lineales</h2> + +<p>Para crear un gradiente lineal, <span id="result_box" lang="es"><span class="hps">se establece un</span> <span class="hps">punto</span> <span class="hps">de partida y una</span> <span class="hps">dirección</span> <span class="hps">(indicada por</span> <span class="hps">un ángulo)</span> <span class="hps">a lo largo de</span> <span class="hps">la cual se aplica</span> <span class="hps">el</span> <span class="hps">efecto</span></span>. Usted también puede definir <strong>paradas de color</strong>. 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.</p> + +<h3 id="Gradientes_lineales_simples">Gradientes lineales simples</h3> + +<p>Aquí está un gradiente lineal que inicia en el centro (horizontalmente) y arriba (verticalmente), e inicia en azul, transicionando a blanco.</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Captura de pantalla</td> + <td class="header">Demo en vivo</td> + </tr> + <tr> + <td><img alt="" src="/@api/deki/files/3950/=basic_linear_bluetop.png" style="text-align: center;"></td> + <td> + <div class="gradient-demo linear-top-bottom" style=""> </div> + </td> + </tr> + </tbody> +</table> + +<div style="margin-right: 255px;"> +<pre class="brush: css">/* 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); +</pre> +</div> + +<h3 id="Cambiando_el_mismo_gradiente_para_correr_de_izquierda_a_derecha">Cambiando el mismo gradiente para correr de izquierda a derecha:</h3> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Captura de pantalla</td> + <td class="header">Demo en vivo</td> + </tr> + <tr> + <td><img alt="basic_linear_blueleft.png" class="default internal" src="/@api/deki/files/3951/=basic_linear_blueleft.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* 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); +</pre> + +<p>Usted puede hace el gradiente sea generado diagonalmente mediante la especificación de la posición de inicio vertical y horizontal. Por ejemplo:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Captura de pantalla</td> + <td class="header">Demo en vivo</td> + </tr> + <tr> + <td><img alt="basic_linear_bluetopleft.png" class="default internal" src="/@api/deki/files/3952/=basic_linear_bluetopleft.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* 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); +</pre> + +<h3 id="Usando_Angulos">Usando Angulos</h3> + +<p>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.</p> + +<p>Por ejemplo, aquí hay dos gradientes, el primero con una dirección hacia la derecha, y el segundo tiene un ángulo de 70 grados.</p> + +<p><img alt="linear_gradient_angle.png" class="default internal" src="/@api/deki/files/3953/=linear_gradient_angle.png"></p> + +<p>El de la derecha usa un CSS Como este:</p> + +<pre class="brush: css">background: linear-gradient(70deg, black, white); +</pre> + +<p>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, <code>0deg crea un gradiente vertical desde el fondo hasta el tope, mientras 90deg genera un gradiente horizontal de izquierda a derecha:</code></p> + +<p><img alt="linear_redangles.png" class="default internal" src="/files/3811/linear_red_angles.png"></p> + +<pre class="brush: css">background: linear-gradient(<angle>, red, white); +</pre> + +<div class="note style-wrap"> +<p><strong>Note:</strong> several browsers implement, prefixed, an older draft of the specification where <code>0deg</code> 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 <code>90deg</code> added to the <code><angle></code>.</p> +</div> + +<h3 id="Color_stops">Color stops</h3> + +<p>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.</p> + +<p>If you specify the location as a percentage, <code>0%</code> represents the starting point, while <code>100%</code> represents the ending point; however, you can use values outside that range if necessary to get the effect you want.</p> + +<h4 id="Example_Three_color_stops">Example: Three color stops</h4> + +<p>This example specifies three color stops:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="linear_colorstops1.png" class="default internal" src="/@api/deki/files/3955/=linear_colorstops1.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* 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); +</pre> + +<p>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.</p> + +<h4 id="Example_Evenly_spaced_color_stops">Example: Evenly spaced color stops</h4> + +<p>Here's an example using a wide variety of colors, all evenly spaced:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="linear_rainbow.png" class="default internal" src="/@api/deki/files/3956/=linear_rainbow.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">/* 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); +</pre> + +<p>Notice that the color stops are automatically spaced evenly when no locations are specified.</p> + +<h3 id="Transparency_and_gradients">Transparency and gradients</h3> + +<p>Gradients support transparency. You can use this, for example, when stacking multiple backgrounds, to create fading effects on background images. For example:</p> + +<p><img alt="linear_multibg_transparent.png" class="default internal" src="/@api/deki/files/3957/=linear_multibg_transparent.png"></p> + +<pre class="brush: css">/* 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); +</pre> + +<p>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.</p> + +<h2 id="Radial_gradients">Radial gradients</h2> + +<p>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.</p> + +<h3 id="Color_stops_2">Color stops</h3> + +<p>You specify color stops the same way as for linear gradients. The gradient line extends out from the starting position in all directions.</p> + +<h4 id="Example_Evenly_spaced_color_stops_2">Example: Evenly spaced color stops</h4> + +<p>By default, as with linear gradients, the color stops are evenly spaced:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="radial_gradient_even.png" class="default internal" src="/@api/deki/files/3958/=radial_gradient_even.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(red, yellow, rgb(30, 144, 255)); +</pre> + +<h4 id="Example_Explicitly_spaced_color_stops">Example: Explicitly spaced color stops</h4> + +<p>Here we specify specific locations for the color stops:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="radial_gradient_varied.png" class="default internal" src="/@api/deki/files/3959/=radial_gradient_varied.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(red 5%, yellow 25%, #1E90FF 50%); +</pre> + +<h3 id="Size">Size</h3> + +<p>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 <a href="/en-US/docs/CSS/radial-gradient#Size_constants" title="en-US/docs/CSS/-moz-radial-gradient#Size constants">this description of the size constants</a> for specifics.</p> + +<h4 id="Example_closest-side_for_ellipses">Example: closest-side for ellipses</h4> + +<p>This ellipse uses the <code>closest-side</code> 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.</p> + +<table class="standard-table" style="width: 520px;"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="radial_ellipse_size1.png" class="default internal" src="/@api/deki/files/3960/=radial_ellipse_size1.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white); +</pre> + +<h4 id="Example_farthest-corner_for_ellipses">Example: farthest-corner for ellipses</h4> + +<p>This example is similar to the previous one, except that its size is specified as <code>farthest-corner</code>, 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.</p> + +<table class="standard-table" style="width: 520px;"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="radial_ellipse_size2.png" class="default internal" src="/@api/deki/files/3961/=radial_ellipse_size2.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white); +</pre> + +<h4 id="Example_closest-side_for_circles">Example: closest-side for circles</h4> + +<p>This example uses <code>closest-side</code>, which determines the circle's size as the distance between the start point (the center) and the closest side.</p> + +<table class="standard-table" style="width: 520px;"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="radial_circle_size1.png" class="default internal" src="/@api/deki/files/3962/=radial_circle_size1.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); +</pre> + +<p>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.</p> + +<h2 id="Repeating_gradients">Repeating gradients</h2> + +<p>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.</p> + +<h3 id="Examples_Repeating_linear_gradient">Examples: Repeating linear gradient</h3> + +<p>This example uses {{ cssxref("repeating-linear-gradient") }} to create a gradient:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="repeating_linear_gradient.png" class="default internal" src="/@api/deki/files/3964/=repeating_linear_gradient.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: repeating-linear-gradient(-45deg, red, red 5px, white 5px, white 10px); +</pre> + +<p>Another example using the {{ cssxref("repeating-linear-gradient") }} property.</p> + +<p><a href="/@api/deki/files/6192/=repeat_background_gradient_checked.png" title="repeat_background_gradient_checked.png"><img alt="repeat_background_gradient_checked.png" class="default internal" src="/@api/deki/files/6192/=repeat_background_gradient_checked.png?size=thumb" style="height: 160px; width: 160px;"></a></p> + +<pre class="brush: css">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); +</pre> + +<h3 id="Example_Repeating_radial_gradient">Example: Repeating radial gradient</h3> + +<p>This example uses {{ cssxref("repeating-radial-gradient") }} to create a gradient:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Screen Shot</td> + <td class="header">Live Demo</td> + </tr> + <tr> + <td><img alt="repeating_radial_gradient.png" class="default internal" src="/@api/deki/files/3965/=repeating_radial_gradient.png"></td> + <td> + <div> </div> + </td> + </tr> + </tbody> +</table> + +<pre class="brush: css">background: repeating-radial-gradient(black, black 5px, white 5px, white 10px); +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Gradient-related reference articles: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}.</li> +</ul> diff --git a/files/es/web/css/css_logical_properties/dimensionamiento/index.html b/files/es/web/css/css_logical_properties/sizing/index.html index a5a9b4063c..a5a9b4063c 100644 --- a/files/es/web/css/css_logical_properties/dimensionamiento/index.html +++ b/files/es/web/css/css_logical_properties/sizing/index.html diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index 0278b3254f..0278b3254f 100644 --- a/files/es/web/css/css_positioning/entendiendo_z_index/agregando_z-index/index.html +++ b/files/es/web/css/css_positioning/understanding_z_index/adding_z-index/index.html diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/index.html b/files/es/web/css/css_positioning/understanding_z_index/index.html index 14971890e0..14971890e0 100644 --- a/files/es/web/css/css_positioning/entendiendo_z_index/index.html +++ b/files/es/web/css/css_positioning/understanding_z_index/index.html diff --git a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html index 81b145e1a3..81b145e1a3 100644 --- a/files/es/web/css/css_positioning/entendiendo_z_index/apilamiento_y_float/index.html +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html 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/understanding_z_index/stacking_context_example_1/index.html index def9c5ea8e..def9c5ea8e 100644 --- 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/understanding_z_index/stacking_context_example_1/index.html 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/understanding_z_index/stacking_context_example_2/index.html index 2955b43b7f..2955b43b7f 100644 --- 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/understanding_z_index/stacking_context_example_2/index.html 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/understanding_z_index/stacking_context_example_3/index.html index c41d8b56ad..c41d8b56ad 100644 --- 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/understanding_z_index/stacking_context_example_3/index.html 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/understanding_z_index/stacking_without_z-index/index.html index 97038e7bae..97038e7bae 100644 --- a/files/es/web/css/css_positioning/entendiendo_z_index/stacking_without_z-index/index.html +++ b/files/es/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html 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/understanding_z_index/the_stacking_context/index.html index 1daf172048..1daf172048 100644 --- a/files/es/web/css/css_positioning/entendiendo_z_index/el_contexto_de_apilamiento/index.html +++ b/files/es/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html diff --git a/files/es/web/css/selectores_css/index.html b/files/es/web/css/css_selectors/index.html index 20baaf25a6..20baaf25a6 100644 --- a/files/es/web/css/selectores_css/index.html +++ b/files/es/web/css/css_selectors/index.html diff --git a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index fe51517a2b..fe51517a2b 100644 --- a/files/es/web/css/selectores_css/usando_la_pseudo-clase__colon_target_en_selectores/index.html +++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html diff --git a/files/es/web/css/texto_css/index.html b/files/es/web/css/css_text/index.html index f0c3c934b6..f0c3c934b6 100644 --- a/files/es/web/css/texto_css/index.html +++ b/files/es/web/css/css_text/index.html diff --git a/files/es/web/css/transiciones_de_css/index.html b/files/es/web/css/css_transitions/using_css_transitions/index.html index 62142638c4..62142638c4 100644 --- a/files/es/web/css/transiciones_de_css/index.html +++ b/files/es/web/css/css_transitions/using_css_transitions/index.html diff --git a/files/es/web/css/-moz-font-language-override/index.html b/files/es/web/css/font-language-override/index.html index 1749002182..1749002182 100644 --- a/files/es/web/css/-moz-font-language-override/index.html +++ b/files/es/web/css/font-language-override/index.html diff --git a/files/es/web/css/grid-gap/index.html b/files/es/web/css/gap/index.html index 6f27042610..6f27042610 100644 --- a/files/es/web/css/grid-gap/index.html +++ b/files/es/web/css/gap/index.html diff --git a/files/es/web/css/selectores_hermanos_generales/index.html b/files/es/web/css/general_sibling_combinator/index.html index 96c87148b9..96c87148b9 100644 --- a/files/es/web/css/selectores_hermanos_generales/index.html +++ b/files/es/web/css/general_sibling_combinator/index.html diff --git a/files/es/web/css/gradiente/index.html b/files/es/web/css/gradient/index.html index ae187f2521..ae187f2521 100644 --- a/files/es/web/css/gradiente/index.html +++ b/files/es/web/css/gradient/index.html diff --git a/files/es/web/css/valor_inicial/index.html b/files/es/web/css/initial_value/index.html index a6bbcdf32d..a6bbcdf32d 100644 --- a/files/es/web/css/valor_inicial/index.html +++ b/files/es/web/css/initial_value/index.html diff --git a/files/es/web/css/introducción/boxes/index.html b/files/es/web/css/introducción/boxes/index.html deleted file mode 100644 index caccdd80b2..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Esta es la sección 11 del Tutorial de <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ; <span id="result_box" lang="es"><span class="hps alt-edited">se describen</span> <span class="hps">cómo se puede</span> <span class="hps">usar CSS para</span> <span class="hps">controlar el espacio</span> <span class="hps">que un elemento</span> <span class="hps">ocupa</span> <span class="hps">cuando se muestra</span><span>.</span> <span class="hps">En</span> <span class="hps">su</span> <span class="hps">documento de ejemplo</span><span>, se cambia el</span> <span class="hps">espacio</span> <span class="hps alt-edited">y se agregan</span> <span class="hps">reglas</span> <span class="hps">decorativos.</span></span></p> - -<h2 class="clearLeft" id="Información_Cajas"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Cajas</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">el navegador muestra</span> <span class="hps">un elemento</span><span>, el elemento</span> <span class="hps alt-edited">ocupa un espacio</span><span>.</span> <span class="hps">Hay</span> <span class="hps">cuatro partes en</span> <span class="hps">el espacio</span> <span class="hps">que ocupa</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En el centro,</span> <span class="hps">existe</span> <span class="hps">el espacio que el</span> <span class="hps">elemento</span> <span class="hps">necesita para mostrar</span> <span class="hps">su contenido.</span> <span class="hps">Alrededor de</span> <span class="hps">eso, no hay</span> <span class="hps">relleno.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">de est, hay</span> <span class="hps alt-edited">un borde</span><span>.</span> <span class="hps alt-edited">En torno</span> <span class="hps alt-edited">esto, hay</span> <span class="hps">un margen</span> <span class="hps">que separa</span> <span class="hps alt-edited">este elemento</span> <span class="hps">de otros elementos</span><span>.</span></span></p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #eee;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">El</span> <span class="hps">gris pálido</span> <span class="hps">muestra</span> <span class="hps">partes del</span> <span class="hps">diseño.</span></span></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #fff;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">relleno, el borde</span> <span class="hps">y</span> <span class="hps alt-edited">el margen</span> <span class="hps">pueden tener diferentes tamaños</span> <span class="hps">en la parte superior</span><span class="alt-edited">, derecha, inferior</span> <span class="hps">e izquierda del</span> <span class="hps">elemento</span><span>.</span> <span class="hps alt-edited">Alguno o</span> <span class="hps">todos estos tamaños</span> <span class="hps">pueden</span> <span class="hps">ser cero</span><span>.</span></span></p> - -<h3 id="Coloreando">Coloreando</h3> - -<p><span id="result_box" lang="es"><span class="hps">El relleno es</span> <span class="hps">siempre</span> <span class="hps">el mismo color que</span> <span class="hps">el elemento del fondo</span><span>.</span> <span class="hps">Así que</span> <span class="hps">cuando se establece el</span> <span class="hps">color de fondo</span><span>, se ve el</span> <span class="hps">color aplicado</span> <span class="hps">al elemento</span> <span class="hps">en sí y su</span> <span class="hps">relleno.</span> <span class="hps">El margen es</span> <span class="hps">siempre</span> <span class="hps">transparente.</span></span></p> - -<table> - <tbody> - <tr> - <td style="width: 22em;"> - <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;">margin</p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;">padding</p> - - <div style="background-color: #ded;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">El elemento tiene</span> <span class="hps">un fondo verde</span> <span class="hps">.</span></span></p> - </td> - <td> - <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> - <p style="text-align: center; margin: 0px;"> </p> - - <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> - - <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> - <p style="text-align: center;"> </p> - - <div style="background-color: #efe;"> - <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> - </div> - </div> - </div> - - <p><span class="short_text" id="result_box" lang="es"><span class="hps">Esto es</span> <span class="hps">lo que se ve</span> <span class="hps">en su navegador</span><span>.</span></span></p> - </td> - </tr> - </tbody> -</table> - -<h3 id="Borders">Borders</h3> - -<p><span id="result_box" lang="es"><span class="hps">Puede utilizar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">para decorar</span> <span class="hps">elementos con</span> <span class="hps">líneas o cuadros</span><span>.</span><br> - <br> - <span class="hps">Para especificar</span> <span class="hps">la misma</span> <span class="hps">frontera</span> <span class="hps">todo</span> <span class="hps">alrededor de un elemento</span><span>, utilice la </span><span class="hps">propiedad</span></span><span lang="es"><span> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"border</span><span>")}</span><span>}</span> <span class="hps">.</span> <span class="hps">Especifique</span> <span class="hps">el ancho</span> <span class="hps">(por lo general</span> <span class="hps">en píxeles</span> <span class="hps">para la visualización</span> <span class="hps">en una pantalla</span><span>)</span><span>, el estilo</span><span>, y el color</span><span>.</span><br> - <br> - <span class="hps">Los estilos son</span><span>:</span></span></p> - -<table style="margin-left: 2em;"> - <tbody> - <tr> - <td style="width: 6em;"> - <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> - </td> - </tr> - <tr> - <td style="width: 6em;"> - <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> - </td> - <td style="width: 6em;"> - <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">También puede establecer</span> <span class="hps">el estilo a </span></span><em><strong><code>none</code> </strong>(</em><span lang="es"><em> </em><span class="hps">ninguno) o</span> </span><strong><em><code>hidden</code> </em></strong><span lang="es"><span class="hps alt-edited">(oculto), </span> <span class="hps">para eliminar</span> <span class="hps">explícitamente</span> <span class="hps">la frontera <code>(</code></span></span><code><em><strong>border </strong></em>)</code><span lang="es"><span>,</span> <span class="hps">o</span> <span class="hps">establecer el color</span> como <span class="hps">transparente</span> <span class="hps">para hacer</span> <span class="hps">la frontera</span> <span class="hps">invisible</span> <span class="hps">sin cambiar</span> <span class="hps">el diseño.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para especificar</span> <span class="hps alt-edited">los bordes</span> <span class="hps">de uno en uno</span> por separado<span>, utilice las propiedades</span><span>:</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-top</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-right</span><span>")}</span><span class="atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-bottom</span><span>")}</span> <span class="hps atn">}, {</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>border-left</span><span>")}</span><span>}</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">especificar</span> <span class="hps alt-edited">un borde</span> <span class="hps"> solo en un lado</span><span>,</span> <span class="hps">o</span> <span class="hps">diferentes</span> <span class="hps alt-edited">los bordes</span> <span class="hps">en diferentes lados</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">establece el</span> <span class="hps">color de fondo y</span> <span class="hps">el borde superior</span> <span class="hps">de los elementos de</span> <span class="hps">la etiqueta <code><strong><em>h3</em></strong></code></span><span>:</span></span></p> - -<pre class="brush:css">h3 { - border-top: 4px solid #7c7; /* mid green */ - background-color: #efe; /* pale green */ - color: #050; /* dark green */ - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td> - <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> - </td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">las imágenes</span> sean <span class="hps">fáciles de ver</span><span>, dándoles</span> <span class="hps">un borde</span> <span class="hps">gris medio</span> a <span class="hps">todo</span><span>:</span></span></p> - -<pre class="brush:css">img {border: 2px solid #ccc;} -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td>Image:</td> - <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Márgenes_y_relleno"><span id="result_box" lang="es"><span class="hps">Márgenes y</span> <span class="hps">relleno</span></span></h3> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Use</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps">las posiciones de</span> <span class="hps">los elementos</span> <span class="hps atn">'</span><span>y crear</span> <span class="hps">el espacio</span> <span class="hps">que les rodea.</span><br> - <br> - <span class="hps">Utilice la propiedad </span></span><span lang="es"><span class="hps"> </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>margin<span lang="es"><span>")}</span><span>}</span> <span class="hps">o</span> la <span class="hps">propiedad </span><span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps atn">(</span><span class="hps">"</span></span>padding<span lang="es"><span>")}</span><span>}</span> <span class="hps">para establecer</span> <span class="hps">los</span> <span class="hps">márgenes y el </span><span class="hps"> relleno</span> con sus <span class="hps">anchuras</span> <span class="hps">respectivamente.</span><br> - <br> - <span class="hps">Si especifica</span> <span class="hps">una</span> <span class="hps">anchura,</span> <span class="hps">que se aplica</span> <span class="hps">en todo el</span> <span class="hps">elemento</span> <span class="hps">(arriba</span><span>, derecha,</span> <span class="hps">abajo y de izquierda</span><span>)</span><span>.</span><br> - <br> - <span class="hps">Si especifica</span> <span class="hps">dos anchos</span><span>,</span> <span class="hps">la</span> <span class="hps">primera se aplica</span> <span class="hps">a la</span> <span class="hps">parte superior e inferior</span><span>,</span> <span class="hps">la segunda a la</span> <span class="hps">derecha y la izquierda</span><span>.</span><br> - <br> - <span class="hps">Puede especificar</span> <span class="hps">los cuatro</span> <span class="hps">anchos</span> <span class="hps">en el orden</span><span>:</span> <span class="hps">arriba, derecha</span><span>,</span> <span class="hps">abajo, de izquierda</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Ejemplo</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps">Esta norma</span> <span class="hps">delimita</span> <span class="hps">párrafos con</span> <span class="hps">la </span></span><code><em><strong> class</strong></em></code> <code>remark</code><span lang="es"><span>, dándoles</span> <span class="hps">un borde rojo</span> <span class="hps">a su alrededor.</span><br> - <br> - <span class="hps">El </span></span><code><strong><em>padding </em></strong></code>(relleno)<code><strong><em> </em></strong></code><span lang="es"><span class="hps">separa </span></span><span lang="es"><span class="hps">un poco </span></span><span lang="es"><span class="hps">todo</span> <span class="hps"> el borde</span> <span class="hps">del texto</span> <span class="hps">.</span></span><br> - <br> - <span id="result_box" lang="es"><span class="hps">A</span> <span class="hps">la izquierda una </span> <span class="hps alt-edited">sangría</span> <span class="hps alt-edited">desde el margen</span> <span class="hps">del</span> <span class="hps">párrafo con respecto al</span> <span class="hps">resto del texto <code><em><strong>(</strong></em></code></span></span><code><em><strong>margin-left</strong></em></code><span lang="es"><span><code><em><strong> )</strong></em></code>:</span></span></p> - -<pre class="brush:css">p.remark { - border: 2px solid red; - padding: 4px; - margin-left: 24px; - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table> - <tbody> - <tr> - <td> - <p><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">A continuación</span> <span class="hps">es un párrafo</span> <span class="hps">normal.</span></span></p> - - <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Aqui con la clase remark.</p> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">Cuando se utiliza</span> <span class="hps">márgenes y el relleno</span> <span class="hps">para ajustar</span> <span class="hps alt-edited">la manera en</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">se disponen</span><span>,</span> <span class="hps">sus</span> <span class="hps">reglas de estilo</span> <span class="hps">interactúan</span> <span class="hps alt-edited">con los estilos</span> <span class="hps">de tu navegador</span> <span class="hps alt-edited">por defecto</span> <span class="hps alt-edited">y pueden ser</span> <span class="hps alt-edited">muy complejas.</span><br> - <br> - <span class="hps">Los distintos navegadores</span> <span class="hps">ponen</span> <span class="hps alt-edited">que los elementos</span> <span class="hps">de manera diferente</span><span>.</span> <span class="hps">Los</span> <span class="hps alt-edited">resultados pueden</span> <span class="hps">ser similar</span> <span class="hps alt-edited">,hasta que nuestro</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps">cambia las cosas</span><span>.</span> <span class="hps">A veces esto</span> <span class="hps">puede hacer que sus</span> <span class="hps">hojas de estilo</span> <span class="hps alt-edited">den</span> <span class="hps">resultados sorprendentes.</span><br> - <br> - <span class="hps">Para</span> <span class="hps">obtener</span> <span class="hps">el resultado deseado</span><span>, es posible que</span> <span class="hps">tenga que cambiar</span> <span class="hps alt-edited">el marcado</span> <span class="hps">de su</span> <span class="hps">documento.</span> <span class="hps">La</span> <span class="hps">página siguiente de</span> <span class="hps">este tutorial</span> <span class="hps">tiene más</span> <span class="hps">información al respecto.</span><br> - <br> - <span class="hps">Para obtener información</span> <span class="hps">detallada acerca</span> <span class="hps">de relleno</span><span>, márgenes</span> <span class="hps">y bordes</span><span>, consulte</span> <span class="hps">la página de referencia</span> <span class="hps">Modelo de caja</span><span>.</span></span></p> -</div> - -<h2 id="Acción_Agregar_bordes"><span id="result_box" lang="es"><span class="hps">Acción</span><span>:</span> <span class="hps">Agregar bordes</span></span></h2> - -<p>Edite su archivo CSS , <strong><em>style2.css</em></strong>. <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">esta regla</span> <span class="hps">para dibujar una línea</span> <span class="hps">a través de la</span> <span class="hps">página</span> <span class="hps">sobre cada</span> <span class="hps alt-edited">encabezado</span><span>:</span></span></p> - -<pre class="brush:css">h3 {border-top: 1px solid gray;} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Si usted tomó</span> <span class="hps alt-edited">el cambio </span><span class="hps alt-edited">en la última página</span><span>,</span> <span class="hps alt-edited">modificara la regla</span> <span class="hps">que ha creado,</span> <span class="hps">de lo contrario</span> <span class="hps alt-edited">agregar la</span> <span class="hps alt-edited">nueva regla</span> <span class="hps alt-edited">para añadir espacio</span> <span class="hps">debajo de cada</span> <span class="hps alt-edited">ítem de la lista</span><span>:</span></span></p> - -<pre class="brush:css">li { - list-style: lower-roman; - margin-bottom: 8px; - } -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">Actualice el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">El reto</span></span></div> - -<p><br> - <span id="result_box" lang="es"><span class="hps alt-edited">Agrega</span> <span class="hps">una regla a</span> <span class="hps">la hoja de estilos</span><span>, para que</span> <span class="hps alt-edited">aparesca un amplio</span> <span class="hps alt-edited">borde</span> <span class="hps">alrededor de los</span> <span class="hps alt-edited">la lista de océanos, en</span> <span class="hps">un color</span> <span class="hps">que le recuerda</span> <span class="hps">al mar</span><span>, algo</span> <span class="hps">como esto:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; padding-left: 1em;"> - <ul style=""> - <li style="margin-bottom: 8px;">Arctic</li> - <li style="margin-bottom: 8px;">Atlantic</li> - <li style="margin-bottom: 8px;">Pacific</li> - <li style="margin-bottom: 8px;">Indian</li> - <li style="margin-bottom: 8px;">Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <p><strong>. . .</strong></p> - </td> - </tr> - </tbody> -</table> - -<p> </p> - -<p><span id="result_box" lang="es"><span class="hps atn">(</span><span>No es necesario</span> <span class="hps alt-edited">que coincida con</span> <span class="hps">el ancho</span> <span class="hps">y el color</span> <span class="hps">que se ve aquí</span> <span class="hps">exactamente</span><span>.</span><span>)</span></span></p> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Boxes">Ver una solución a este desafío.</a></p> - -<h2 id="What_next">What next?</h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Layout", "Layout") }}<span id="result_box" lang="es"><span class="hps">Al especificar</span> <span class="hps">márgenes y el relleno</span><span>, se</span> <span class="hps">modificó el</span> <span class="hps">diseño del documento</span><span>.</span> <span class="hps">En la página siguiente</span> <span class="hps">se cambia</span> el </span><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Layout">layout</a><span id="result_box" lang="es"><span class="hps"> de su</span> <span class="hps">documento</span> <span class="hps">de otra manera.</span></span></p> diff --git a/files/es/web/css/introducción/cascading_and_inheritance/index.html b/files/es/web/css/introducción/cascading_and_inheritance/index.html deleted file mode 100644 index b47218eb7a..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/es/docs/Web/CSS/Introduction/How_CSS_works", "Cómo funciona el CSS.")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la cuarta sección </span> <span class="alt-edited hps">del</span> <span class="hps">tutorial</span><span> <span class="hps">CSS</span> <span class="hps">Primeros pasos</span>;</span> <span class="hps">que</span> <span class="hps">describe cómo</span> <span class="hps">interactúan</span> <span class="hps">las hojas de estilo</span> <span class="hps">en cascada,</span> <span class="hps">y</span> <span class="hps">cómo los elementos</span> <span class="hps">heredan</span> <span class="hps">el estilo</span> <span class="hps">de sus padres.</span> <span class="alt-edited hps">Usted agrega</span> <span class="hps">a</span> <span class="hps">la hoja de estilos</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">utilizando la herencia</span> <span class="alt-edited hps">para alterar</span> <span class="hps">el estilo de</span> <span class="alt-edited hps">muchas partes del</span> <span class="hps">documento</span> <span class="hps">en un solo paso</span><span>.</span></span></p> - -<h2 class="clearLeft" id="Información_Cascada_y_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>:</span> <span class="hps">Cascada</span> <span class="hps">y</span> <span class="hps">herencia</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">El estilo</span> <span class="hps">final para</span> <span class="hps">un elemento</span> <span class="hps">se puede especificar en</span> <span class="hps">muchos lugares</span> <span class="hps">diferentes</span><span>, que pueden interactuar</span> <span class="hps">de una manera compleja</span><span>.</span> <span class="hps">Esta interacción</span> <span class="hps">compleja</span> <span class="hps">hace</span> <span class="alt-edited hps">el CSS</span> <span class="alt-edited hps">poderoso</span><span>,</span> <span class="alt-edited hps">pero puede también</span> <span class="hps">hacer que sea</span> <span class="hps">confuso y difícil</span> <span class="hps">de depurar.</span></span></p> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">Tres</span> <span class="alt-edited hps">principales fuentes de</span> <span class="hps">información de estilo</span> <span class="alt-edited hps">forman</span> <span class="hps">una <em>cascada</em></span><span>.</span> <span class="alt-edited hps">Estas son:</span></span></p> - -<ul> - <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">por defecto del navegador</span> <span class="hps">para</span> <span class="alt-edited hps">del lenguaje de marcado</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Estilos</span> <span class="hps">especificados</span> <span class="hps">por un usuario</span> <span class="hps">que está leyendo</span> <span class="hps">el documento</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">estilos</span> <span class="hps">relacionados en </span><span class="hps">el documento</span> <span class="hps">por su autor</span><span>.</span> <span class="hps">Estos pueden</span> <span class="hps">ser especificados</span> <span class="hps">en tres lugares</span><span>:</span></span> - <ul> - <li><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">un archivo externo</span><span>:</span> <span class="hps">este tutorial</span> <span class="alt-edited hps">aborda</span> <span class="hps">principalmente</span> <span class="hps">este</span> <span class="hps">método para definir</span> <span class="hps">los estilos.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">En una definición</span> <span class="hps">al principio</span> <span class="hps">del documento</span><span>: utilice</span> <span class="alt-edited hps">este método únicamente</span> <span class="hps">para los estilos</span> <span class="hps">que se utilizan sólo</span> <span class="hps">en esa página</span> <span class="hps">.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">En un</span> <span class="hps">elemento específico</span> <span class="hps">en el cuerpo</span> <span class="hps">del documento</span><span>:</span> <span class="hps">este</span> <span class="hps">es el método menos</span> <span class="alt-edited hps">fácil de mantener</span><span>,</span> <span class="hps">pero puede ser utilizado</span> <span class="alt-edited hps">para la probar.</span></span></li> - </ul> - </li> -</ul> - -<p><span id="result_box" lang="es"><span class="hps">El estilo del</span> <span class="hps">usuario modifica</span> <span class="hps">el estilo</span> <span class="hps">por defecto del navegador</span><span>.</span> <span class="alt-edited hps">El estilo</span> <span class="hps">del autor del documento</span> <span class="alt-edited hps">a continuación</span> <span class="hps">modifica</span> <span class="hps">el estilo</span> <span class="hps">un poco más.</span> <span class="hps">En este tutorial,</span> <span class="hps">usted es el autor</span> <span class="hps">del documento</span> <span class="alt-edited hps">de ejemplo,</span> <span class="hps">y</span> <span class="hps">solo trabaja</span> <span class="hps">con</span> <span class="hps">hojas de estilo</span> <span class="hps">del autor</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Cuando lea este</span> <span class="hps">documento en un navegador</span><span>,</span> <span class="hps">parte del estilo</span> <span class="alt-edited hps">que ves</span> <span class="alt-edited hps">proviene</span> <span class="alt-edited hps">por defecto</span> <span class="hps">de su</span> <span class="alt-edited hps">navegador de</span> <span class="hps">HTML</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="hps">estilo</span> <span class="hps">podría venir de</span> <span class="alt-edited hps">los ajustes </span></span><span id="result_box" lang="es"><span class="hps">personalizados </span></span><span id="result_box" lang="es"><span class="alt-edited hps">del navegador</span> <span class="hps">o</span> <span class="alt-edited hps">de un archivo</span> <span class="alt-edited hps">de definición de estilo</span> <span class="hps">personalizado.</span> <span class="hps">En Firefox</span><span>, la configuración</span> <span class="hps">se puede personalizar en</span> <span class="alt-edited hps">cuadro de diálogo Preferencias</span><span>, o puede</span> <span class="hps">especificar</span> <span class="hps">estilos</span> <span class="hps">en un archivo</span> </span><span id="result_box" lang="es"><span class="alt-edited hps">denominado</span> </span><span id="result_box" lang="es"><em><code><span class="hps">user Content.css,</span></code></em> <span class="alt-edited hps">archivado </span><span class="hps">en su perfil de</span> <span class="hps">navegador.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Parte del</span> <span class="alt-edited hps">estilo</span> <span class="hps">proviene de</span> <span class="hps">las hojas de estilo</span> <span class="hps">vinculadas al</span> <span class="hps">documento</span> <span class="hps">por el servidor</span></span> wiki.</p> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Al abrir su</span> <span class="hps">documento de muestra</span> <span class="hps">en el navegador,</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="alt-edited hps">son</span> <span class="alt-edited hps">más relevante que</span> <span class="hps">el</span> <span class="hps">resto del texto</span><span>.</span> <span class="alt-edited hps">Esto viene del</span> <span class="hps">estilo por defecto</span> <span class="hps">del navegador</span> <span class="hps">para HTML</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">son rojos.</span> <span class="alt-edited hps">Esto viene</span> <span class="alt-edited hps">de la</span> <span class="hps">propia hoja de estilos</span> <span class="alt-edited hps">de ejemplo.</span></span></p> - -<p><span id="result_box" lang="es"><span class="atn hps">El elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">también</span> <span class="hps">heredan</span> <span class="hps">gran parte del estilo del elemento </span></span>{{ HTMLElement("p") }}<span lang="es"><span class="hps">,</span> <span class="alt-edited hps">porque ellos son</span> <span class="hps">sus</span> <span class="hps">hijos.</span> <span class="hps">De la misma manera</span><span>,</span> <span class="alt-edited hps">los</span> elementos </span>{{ HTMLElement("p") }}<span lang="es"> <span class="alt-edited hps">heredan</span> <span class="hps">gran parte del estilo</span> <span class="hps">del</span> <span class="hps">elemento</span></span>{{ HTMLElement("body") }}<span lang="es"><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="alt-edited hps">en cascada</span><span class="alt-edited">, las hojas de estilo</span> <span class="hps">del autor</span> <span class="hps">tienen</span> <span class="alt-edited hps">prioridad, </span> <span class="alt-edited hps">ante las hojas de estilo</span> <span class="hps">del lector</span><span>, </span> <span class="hps">por defecto</span> <span class="hps">de tu navegador</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para los estilos</span> <span class="hps">heredados</span><span>,</span> <span class="hps">el estilo propio de</span> <span class="hps">un nodo</span> <span class="hps">hijo tiene</span> <span class="hps">prioridad sobre</span> <span class="alt-edited hps">estilo</span> <span class="hps">heredado de</span> <span class="hps">su</span> <span class="hps">padre</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Estas no son las</span> <span class="hps">únicas prioridades</span> <span class="hps">que se aplican</span><span>.</span> <span class="alt-edited hps">En una página posterior</span><span class="alt-edited hps"> de este</span> <span class="hps">tutorial se explica</span> <span class="alt-edited hps">mas detalladamente</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">El CSS</span> <span class="hps">también proporciona</span> <span class="hps">una forma para que</span> <span class="hps">el lector</span> <span class="alt-edited hps">pueda anular</span> <span class="hps">el estilo</span> <span class="hps">del autor del documento</span><span>,</span> <span class="hps">mediante el uso de</span> <span class="hps">la palabra clave</span><span>! </span></span><code>!important</code>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Esto significa</span> <span class="hps">que, como</span> <span class="hps">autor del documento</span><span>,</span> <span class="hps">no siempre se puede</span> <span class="hps">predecir con exactitud</span> <span class="hps">lo que sus lectores</span> <span class="hps">van a ver.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">quieres conocer</span> <span class="hps">todos los detalles de</span></span> cascada y herencia mira <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Asignando propiedad de valores, cascada, y herencia</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="alt-edited hps">las</span> <span class="hps">especificaciones</span> d<span class="alt-edited hps">el CSS</span><span>.</span></span></p> -</div> - -<h2 id="Acción_El_uso_de_la_herencia"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción</span><span>: El uso de</span> <span class="hps">la herencia</span></span> </h2> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="alt-edited hps"> CSS</span> <span class="alt-edited hps">de ejemplo.</span></span></li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">Agrega</span> <span class="hps">esta línea</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span> <span class="hps">Realmente no</span> <span class="hps">importa si</span> <span class="hps">usted la agrega</span> <span class="hps">por encima o por</span> <span class="hps">debajo de la línea</span> <span class="hps">que está</span><span>.</span> <span class="alt-edited hps">Sin embargo, añadirla</span> <span class="hps">en la parte superior</span> <span class="hps">es más</span> <span class="hps">lógico, porque</span> <span class="hps">en el documento </span><span class="alt-edited hps">el</span> elemento </span>{{ HTMLElement("p") }}<span lang="es"> es el <span class="alt-edited hps">elemento</span> <span class="hps">padre</span> <span class="atn hps">del elemento </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span>:</span></span> - <pre class="brush:css">p {color: blue; text-decoration: underline;} -</pre> - </li> - <li>Ahora actualice el navegador para ver el efecto <span id="result_box" lang="es"><span class="hps">en su</span> <span class="hps">documento de muestra.</span></span> El subrayado afecta todo el texto en el párrafo, incluido las letras iniciales. Los elementos {{ HTMLElement("strong") }} <span id="result_box" lang="es"><span class="hps">han heredado</span> <span class="hps">el estilo</span> <span class="hps">subrayado</span> <span class="hps">de su elemento padre </span></span>{{ HTMLElement("p") }}.<br> - - <p><span id="result_box" lang="es"><span class="hps">Pero</span> <span class="atn hps">los elementos </span></span>{{ HTMLElement("strong") }}<span lang="es"> <span class="hps">siguen siendo</span> <span class="hps">rojo.</span> <span class="hps">El color rojo</span> <span class="hps">es</span> <span class="hps">su estilo</span><span> </span><span class="hps">propio</span><span>,</span> <span class="hps">por lo que tiene</span> <span class="hps">prioridad sobre</span> <span class="hps">el color azul</span> <span class="hps">de su elemento</span> <span class="hps">padre</span> </span>{{ HTMLElement("p") }}<span lang="es"> <span>.</span></span></p> - </li> -</ol> - -<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> -</table> - -<table style="border: 2px outset #3366bb; margin-right: 2em; padding: 1em;"> - <caption>Antes</caption> - <tbody> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <caption>Después</caption> - <tbody> - <tr> - <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Problema</span></span></div> -<span id="result_box" lang="es"><span class="hps">Cambie su</span> hoja de <span class="hps">estilo</span> <span class="hps">de manera que</span> <span class="alt-edited hps">aparecen subrayados</span> <span class="hps">sólo las letras</span> <span class="hps">rojas</span><span>:</span></span> - -<table style="border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:</p> - -<pre class="brush: css">p {color: blue; } -strong {color: red; text-decoration: underline;} -</pre> - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">Ver una solución al desafío.</a></div> - -<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectores")}}<span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps">hoja de estilo</span> <span class="hps">de ejemplo especifica</span> <span class="hps">estilos</span> <span class="hps">para las etiquetas</span> <span class="atn hps"><</span><span>p</span><span>></span> <span class="hps">y</span> <span class="hps"><strong</span><span>></span><span>, cambiando el</span> <span class="hps">estilo de</span> <span class="hps">los elementos correspondientes</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe cómo especificar</span> <span class="hps">el estilo</span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">de manera más selectiva</a></span>.</p> diff --git a/files/es/web/css/introducción/color/index.html b/files/es/web/css/introducción/color/index.html deleted file mode 100644 index 030fa9d692..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><a class="button previousPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" rel="prev" style="margin: 0px 20px 20px 0px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: normal; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: left; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; white-space: normal; background-color: rgb(234, 239, 242);" title="Los estilos de texto"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SECCIÓN ANTERIOR: </span></font></font><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">LOS ESTILOS DE TEXTO</span></font></font></a></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección octava de la </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">tutorial; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se explica cómo puede especificar el color en CSS. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su hoja de estilos de muestra, se introduce colores de fondo.</span></font></font></p> - -<h2 class="clearLeft" id="Información_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Información: Color</span></font></font></h2> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En este tutorial hasta ahora, se ha utilizado un número limitado de colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 2 soporta 17 colores con nombre absoluto. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Algunos de los nombres puede que no sea el esperado:</span></font></font></p> - -<table style="border: 0px; margin-left: 2em; text-align: right;"> - <tbody> - <tr> - <td> </td> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: black;"> </td> - <td>gray</td> - <td style="width: 2em; height: 2em; background-color: gray;"> </td> - <td>silver</td> - <td style="width: 2em; height: 2em; background-color: silver;"> </td> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> - </tr> - <tr> - <td>primaries</td> - <td>red</td> - <td style="width: 2em; height: 2em; background-color: red;"> </td> - <td>lime</td> - <td style="width: 2em; height: 2em; background-color: lime;"> </td> - <td>blue</td> - <td style="width: 2em; height: 2em; background-color: blue;"> </td> - </tr> - <tr> - <td>secondaries</td> - <td>yellow</td> - <td style="width: 2em; height: 2em; background-color: yellow;"> </td> - <td>aqua</td> - <td style="width: 2em; height: 2em; background-color: aqua;"> </td> - <td>fuchsia</td> - <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> - </tr> - <tr> - <td> </td> - <td>maroon</td> - <td style="width: 2em; height: 2em; background-color: maroon;"> </td> - <td>orange</td> - <td style="width: 2em; height: 2em; background-color: orange;"> </td> - <td>olive</td> - <td style="width: 2em; height: 2em; background-color: olive;"> </td> - <td>purple</td> - <td style="width: 2em; height: 2em; background-color: purple;"> </td> - <td>green</td> - <td style="width: 2em; height: 2em; background-color: green;"> </td> - <td>navy</td> - <td style="width: 2em; height: 2em; background-color: navy;"> </td> - <td>teal</td> - <td style="width: 2em; height: 2em; background-color: teal;"> </td> - </tr> - </tbody> -</table> - -<p> </p> - -<div class="tuto_details"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Detalles</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Su navegador puede soportar muchos más colores con nombre, como:</span></font></font></p> -</div> - -<table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> - <tbody> - <tr> - <td>dodgerblue</td> - <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> - <td>peachpuff</td> - <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> - <td>tan</td> - <td style="width: 2em; height: 2em; background-color: tan;"> </td> - <td>firebrick</td> - <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> - <td>aquamarine</td> - <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> - </tr> - </tbody> -</table> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para detalles de esta lista ampliada, consulte: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">SVG palabras clave de color</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">módulo de colores </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS 3 . </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Tenga cuidado con el uso de nombres de colores;puede que algunos de sus lectores de navegación no lo soporte.</span></font></font></p> -</div> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para una paleta más grande, especificar los componentes rojo, verde y azul del color que desee, utilizando el signo numerico (hash) y tres </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">dígitos </span></font></font><em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">hexadecimales</span></font></font></em><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> entre los rangos 0 - 9, a - f. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Las letras a - f representan los valores de 10 a 15:</span></font></font></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#0f0</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#00f</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - </tbody> -</table> - -<p><br> - <span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Para toda la paleta, especificar dos dígitos hexadecimales para cada componente:</span></p> - -<table style="border: 0px; margin-left: 2em;"> - <tbody> - <tr> - <td>black</td> - <td style="width: 2em; height: 2em; background-color: #000;"> </td> - <td><code>#000000</code></td> - </tr> - <tr> - <td>pure red</td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#ff0000</code></td> - </tr> - <tr> - <td>pure green</td> - <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> - <td><code>#00ff00</code></td> - </tr> - <tr> - <td>pure blue</td> - <td style="width: 2em; height: 2em; background-color: #00f;"> </td> - <td><code>#0000ff</code></td> - </tr> - <tr> - <td>white</td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#ffffff</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Generalmente, usted puede obtener estos códigos hexadecimales de seis dígitos de su programa de gráficos o alguna otra herramienta.</span></p> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">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:</span></font></font></p> -</div> - -<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con el rojo puro:</span></td> - <td style="width: 2em; height: 2em; background-color: #f00;"> </td> - <td><code>#f00</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(201, 215, 241);">Para que sea más pálido, añadir un poco de verde y azul:</span></td> - <td style="width: 2em; height: 2em; background-color: #f77;"> </td> - <td><code>#f77</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para hacerlo más naranja, añadir un poco de verde adicional:</span></td> - <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> - <td><code>#fa7</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para oscurecer, reducir todos sus componentes:</span></td> - <td style="width: 2em; height: 2em; background-color: #c74;"> </td> - <td><code>#c74</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para reducir su saturación, hacer que sus componentes más iguales:</span></td> - <td style="width: 2em; height: 2em; background-color: #c98;"> </td> - <td><code>#c98</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Si usted los pone exactamente iguales, se obtiene gris:</span></td> - <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> - <td><code>#ccc</code></td> - </tr> - </tbody> -</table> - -<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Para un tono pastel como el azul pálido:</span></p> - -<table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> - <tbody> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Comience con blanco puro:</span></td> - <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> - <td><code>#fff</code></td> - </tr> - <tr> - <td><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 244);">Reducir los otros componentes un poco:</span></td> - <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> - <td><code>#eef</code></td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede especificar un color mediante los valores RGB decimales en el rango de 0 - 255, o porcentajes.</span></font></font></p> - -<p><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(244, 244, 244);">Por ejemplo, este es de color granate (rojo oscuro)</span>dark red:</p> -</div> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token function" style="margin: 0px; padding: 0px; border: 0px; color: rgb(221, 74, 104);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">RGB</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (128, 0, 0)</span></font></font></code></pre> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para más detalles sobre cómo especificar los colores, ver: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/syndata.html#color-units" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para obtener información sobre la adecuación de los colores del sistema como Menú y ThreeDFace, véase: </span></font></font><a class="external external-icon" href="http://www.w3.org/TR/CSS21/ui.html#system-colors" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; white-space: pre-line; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; background-color: rgb(244, 244, 244);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sistema CSS2 Colores</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en la Especificación CSS.</span></font></font></p> -</div> - -<h3 id="Propiedades_de_Color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 200; font-family: 'Open Sans', sans-serif; line-height: 24px; font-size: 1.71428571428571rem; letter-spacing: -0.5px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Propiedades de Color</span></font></font></h3> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ya ha utilizado </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la propiedad</span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> en el texto.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">También puede utilizar <code>la</code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad </span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><code> </code></span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para cambiar fondos elementos.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los Fondos (</span></font></font><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">Backgrounds </span>) <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">se pueden establecer en </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">transparent</span></code><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> (transparentes) </span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">para eliminar explícitamente cualquier color, revelando fondo del elemento padre.</span></font></font></p> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">ejemplos de</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas de este tutorial utilizan este fondo de color amarillo pálido:</span></font></font></p> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # fffff4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> - -<div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Los </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Más detalles</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cajas utilizan este gris pálido:</span></font></font></p> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">background-color </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> # F4F4F4 </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">;</span></font></font></span></code></pre> -</div> -</div> - -<p> </p> - -<h2 id="Acción_El_uso_de_códigos_de_color" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Acción: El uso de códigos de color</span></font></font></h2> - -<ol style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; list-style-type: decimal; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Edite su archivo CSS.</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hacer el cambio se muestra aquí en negrita, para dar las letras iniciales un fondo azul claro. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(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.)</span></font></font> - <pre class="brush:css;highlight:[13] language-css"><code class="language-css"><span class="token comment">/*** CSS Tutorial: Color page ***/</span> - -<span class="token comment">/* page font */</span> -<span class="token selector">body </span><span class="token punctuation">{</span><span class="token property">font</span><span class="token punctuation">:</span> 16px <span class="token string">"Comic Sans MS"</span>, cursive<span class="token punctuation">;</span><span class="token punctuation">}</span> - -<span class="token comment">/* paragraphs */</span> -<span class="token selector">p </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span><span class="token punctuation">}</span> -<span class="token selector">#first </span><span class="token punctuation">{</span><span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span><span class="token punctuation">}</span> - -<span class="token comment">/* initial letters */</span> -<span class="token selector">strong </span><span class="token punctuation">{</span> - <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> - <span class="token property">background-color</span><span class="token punctuation">:</span> #ddf<span class="token punctuation">;</span> - <span class="token property">font</span><span class="token punctuation">:</span> 200% serif<span class="token punctuation">;</span> - <span class="token punctuation">}</span> - -<span class="token selector">.carrot </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span><span class="token punctuation">}</span> -<span class="token selector">.spinach </span><span class="token punctuation">{</span><span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span><span class="token punctuation">}</span></code></pre> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 0px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 19px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 38px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 57px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 76px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 95px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 114px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 133px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 152px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 171px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 190px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 209px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 228px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 247px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 266px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 285px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 304px; background: 0px 0px;"> </div> - - <div class="line-number" style="margin: 1em 0px 0px; padding: inherit 0px; border: 0px; position: absolute; left: 0px; right: 0px; line-height: inherit; white-space: pre; top: 323px; background: 0px 0px;"> </div> - - <div class="line-highlight" style=""> </div> - </li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Guarde el archivo y actualizar el navegador para ver el resultado.</span></font></font></li> -</ol> - -<table> - <tbody> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"> - <table style="margin: 0px 0px 24px; padding: 0px; border-width: 1px 0px 0px 1px; border-style: solid; border-color: rgb(224, 224, 220); border-collapse: collapse; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> - <tbody> - <tr style="margin: 0px; padding: 0px; border: 0px;"> - <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: italic; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: green; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> - </tr> - <tr style="margin: 0px; padding: 0px; border: 0px;"> - <td style="margin: 0px; padding: 6px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: rgb(224, 224, 220); text-align: left; font-style: normal; font-variant: normal; font-weight: normal; font-size: 16px; line-height: normal; font-family: 'Comic Sans MS', cursive; color: blue;"><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>C</font></font></strong><font><font> ascading </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> tyle </font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: red; font-style: normal; font-variant: normal; font-weight: normal; font-size: 32px; line-height: normal; font-family: serif; background-color: rgb(221, 221, 255);"><font><font>S</font></font></strong><font><font> heets</font></font></td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desafío</span></font></font></div> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">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.</span></font></font></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">(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.)</span></font></font></p> -<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> -</div> - -<h2 id="¿Y_ahora_qué" style="margin: 0px 0px 12px; padding: 0px; border: 0px; font-weight: 700; font-family: 'Open Sans', sans-serif; line-height: 30px; font-size: 2.14285714285714rem; letter-spacing: -1px; color: rgb(77, 78, 83); font-style: normal; font-variant: normal; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">¿Y ahora qué?</span></font></font></h2> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a class="button nextPage" href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" rel="next" style="margin: 20px 0px 0px 20px; padding: 5px 11px; border: 0px; color: rgb(77, 78, 83); text-decoration: none; cursor: pointer; display: inline-block; line-height: 1; font-weight: 400; letter-spacing: normal; text-transform: uppercase; border-radius: 4px; box-shadow: rgb(187, 191, 194) 0px -1px inset; float: right; background-color: rgb(234, 239, 242);" title="Contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">IR A LA SIGUIENTE SECCIÓN: </span></font></font><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CONTENT</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">En su documento de muestra y el contenido de su hoja de estilo muestra estrictamente separados los estilo.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title="/ En-US / docs / Web / guía / CSS / Getting_Started / contenido"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> explica cómo se puede hacer excepciones a esta estricta separación.</span></font></font></p> diff --git a/files/es/web/css/introducción/how_css_works/index.html b/files/es/web/css/introducción/how_css_works/index.html deleted file mode 100644 index f4beb05519..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "¿Por qué usar CSS?") }}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="alt-edited hps">tercera parte del</span> </span><span class="seoSummary">tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_started" title="en-US/docs/Web/Guide/CSS/Getting_started">Empezando CSS</a> </span><span id="result_box" lang="es"><span class="hps">explica cómo funciona</span> <span class="hps">el CSS</span> <span class="hps">en el navegador y</span> la finalidad<span class="hps"> del</span> <span class="atn hps">Modelo de Objeto de Documento (</span><span>DOM</span><span>)</span><span>.</span> <span class="hps">Usted también aprenderá</span> <span class="hps">cómo analizar</span> <span class="hps">el documento de</span> <span class="hps">muestra.</span></span></p> - -<h2 class="clearLeft" id="Información_Cómo_funciona_CSS"><span class="short_text" id="result_box" lang="es"><span class="hps">Información</span><span>: Cómo funciona</span> <span class="hps">CSS</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Cuando un</span> <span class="hps">navegador muestra</span> <span class="hps">un documento, debe</span><span class="alt-edited hps"> combinar</span> <span class="hps">el contenido del documento</span> <span class="hps">con la </span><span class="hps">información </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">de </span></span><span id="result_box" lang="es"><span class="hps">su</span></span><span id="result_box" lang="es"><span class="hps"> estilo</span><span>.</span> Se <span class="hps">procesa</span> <span class="hps">el documento en</span> <span class="hps">dos</span> <span class="hps">etapas</span><span>:</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">El navegador</span> <span class="hps">convierte el</span> <span class="hps">lenguaje de marcado (</span></span><code><strong><em>markup</em></strong></code>)<span lang="es"> <span class="hps">y</span> <span class="alt-edited hps">el</span> <span class="hps">CSS</span> <span class="hps">en el <em><span class="seoSummary"><a href="en-US/docs/DOM" title="en-US/docs/DOM">DOM</a></span></em></span><span class="seoSummary"><strong> </strong></span><span class="hps">(Document Object</span> <span class="hps">Model)</span><span>.</span> <span class="hps">El DOM</span> <span class="hps">representa el documento</span> <span class="hps">en la memoria del</span> <span class="hps">ordenador.</span></span> <span id="result_box" lang="es"><span class="hps">Combina</span> <span class="hps">el contenido del documento</span> <span class="hps">con su estilo</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">El navegador muestra</span> <span class="hps">el contenido de la</span> <span class="hps">DOM</span><span>.</span></span></li> -</ol> - -<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">lenguaje de marcado</span> <span class="hps">utiliza <em>elementos</em></span><em> </em><span class="hps">para definir</span> <span class="hps">la estructura del documento</span><span>.</span> <span class="hps">Usted marca</span> <span class="hps">un elemento</span> <span class="hps">utilizando</span> <span class="hps"><em>etiquetas</em>,</span> <span class="hps">que son cadenas</span> <span class="hps">que comienzan con</span> <span class="hps">'<'</span> <span class="hps">y termina con</span> <span class="hps">'>'</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">elementos</span> <span class="hps">tienen un par de</span> <span class="hps">etiquetas,</span> <span class="hps">una etiqueta de inicio</span> <span class="hps">y</span> <span class="hps">una etiqueta de cierre</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta de inicio</span><span>, coloque</span> <span class="hps">el nombre del elemento</span> <span class="hps">entre</span> <span class="hps">'<'</span> <span class="atn hps">y '</span><span>>'</span><span>.</span> <span class="hps">Para la</span> <span class="hps">etiqueta final</span><span>, coloque un</span> <span class="hps">'/'</span> <span class="atn hps">después de '</span><span><' y</span> <span class="hps">antes del</span> <span class="hps">nombre del elemento.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Dependiendo del</span> <span class="hps">lenguaje de marcado</span><span>,</span> <span class="hps">algunos</span> <span class="hps">elementos tienen</span> <span class="hps">sólo</span> <span class="hps">una etiqueta de inicio</span><span>,</span> <span class="hps">o</span> <span class="hps">una sola etiqueta</span> <span class="hps">donde el</span> <span class="hps">'/'</span> viene <span class="hps">después del</span> <span class="hps">nombre del elemento.</span> <span class="hps">Un elemento</span> <span class="hps">también</span> <span class="hps">puede ser un contenedor </span><span class="hps">e incluir</span> <span class="hps">otros elementos</span> <span class="hps">entre</span> <span class="hps">su</span> <span class="hps">etiqueta de inicio</span> <span class="hps">y la etiqueta de cierre</span><span>.</span> <span class="alt-edited hps">Sólo recuerda</span> <span class="hps">cerrar</span> <span class="hps">siempre</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">dentro del contenedor.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Un</span> <span class="hps">DOM</span> <span class="hps">tiene una estructura</span> <span class="hps">en forma de árbol</span><span>.</span> <span class="hps">Cada elemento</span><span>,</span> <span class="hps">atributo</span> <span class="hps">y</span> <span class="hps">extensión de texto</span> <span class="hps">en el</span> <span class="hps">lenguaje de marcado</span> <span class="hps">se convierte en un</span> <span class="hps"><em>nodo </em>de la</span> <span class="hps">estructura de árbol.</span> <span class="hps">Los nodos</span> <span class="hps">se definen por su</span> <span class="hps">relación con otros</span> <span class="hps">nodos DOM</span><span>.</span> <span class="hps">Algunos elementos</span> <span class="hps">son</span> <span class="hps">los padres de los</span> <span class="hps">nodos secundarios</span><span>,</span> <span class="hps">y</span> <span class="hps">los nodos secundarios</span> <span class="hps">tienen hermanos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Comprender el</span> <span class="hps">DOM</span> <span class="hps">le ayuda a diseñar</span><span>, depurar</span> <span class="hps">y mantener su</span> <span class="hps">CSS</span><span>,</span> <span class="hps">porque el</span> <span class="hps">DOM</span> <span class="hps">es donde su</span> <span class="hps">CSS y</span> <span class="hps">el contenido del documento</span> <span class="hps">se reúnen</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> -<span id="result_box" lang="es"><span class="hps">En</span> <span class="alt-edited hps">el</span> <span class="hps">documento de ejemplo</span><span>,</span> <span class="alt-edited hps">las</span> <span class="hps">etiqueta <p></span> <span class="hps">y su</span> <span class="hps">etiqueta de cierre</span> <span class="atn hps"><</span><span>/</span> <span class="hps">p></span> <span class="hps">crean un contenedor</span><span>:</span></span> - -<pre class="brush:html"><p> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets -</p> -</pre> - -<h2 id="Ejemplo_en_vivo"><span class="short_text" id="result_box" lang="es"><span class="hps">Ejemplo</span> en <span class="hps">vivo</span></span></h2> - -<p><a href="http://jsfiddle.net/djaniketster/6jbpS/">http://jsfiddle.net/djaniketster/6jbpS/</a></p> - -<p><span id="result_box" lang="es"><span class="hps">En el</span> <span class="hps">DOM</span><span>, el nodo</span> <span class="hps">correspondiente P</span> <span class="hps">es</span> <span class="hps">uno de los padres</span><span>.</span> <span class="hps">Sus</span> <span class="hps">hijos</span> <span class="hps">son los nodos</span> <code><em><strong>STRONG </strong></em></code><span class="alt-edited hps">y</span> <span class="hps">los</span> <span class="hps">nodos de texto</span><span>.</span> <span class="hps">Los nodos</span> <code><em><strong>STRONG </strong></em></code></span><span lang="es"><span class="alt-edited hps">son en sí mismos</span> <span class="hps">padres</span><span>,</span> <span class="hps">con</span> <span class="hps">los nodos de texto</span> <span class="hps">como</span> <span class="hps">sus hijos</span><span>:</span></span></p> - -<pre><span style="color: black;">P</span> -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">C</span>" -├─"<span style="color: black;">ascading</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -├─"<span style="color: black;">tyle</span>" -├─<span style="color: black;">STRONG</span> -│ └─"<span style="color: black;">S</span>" -└─"<span style="color: black;">heets</span>"</pre> -</div> - -<h2 id="Acción_Analizando_un_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">Acción:</span> <span class="hps">Analizando un</span> <span class="hps">DOM</span></span></h2> - -<h3 id="El_uso_del_Inspector_DOM"><span class="short_text" id="result_box" lang="es"><span class="hps">El uso del Inspector</span> <span class="hps">DOM</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Para analizar un</span> <span class="hps">DOM</span><span>,</span> <span class="hps">se necesita un software</span> <span class="hps">especial.</span> <span class="hps">Usted puede usar</span> el </span><span id="result_box" lang="es"><span class="alt-edited hps">complemento de </span> </span><span id="result_box" lang="es"><span class="hps">Mozilla </span></span><a href="/en/DOM_Inspector" title="en/DOM_Inspector">DOM Inspector</a> (DOMi) <span id="result_box" lang="es"><span class="hps">para analizar un</span> <span class="hps">DOM</span><span>.</span> <span class="hps">Usted sólo tendrá que</span> <span class="hps">instalar el</span> <span class="atn hps">complemento (</span><span>ver</span> <span class="hps">más detalles abajo)</span><span>.</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Utilice</span> <span class="hps">el navegador</span> <span class="hps">Mozilla</span> <span class="hps">para abrir</span> <span class="hps">el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Desde la barra de</span> <span class="hps">menú de su </span><span class="hps">navegador</span><span>, selecciona</span> <strong><span class="hps">Herramientas></span> <span class="hps">Inspector DOM</span></strong><span>,</span> <span class="hps">o <strong>Herramientas</strong></span><strong><span>></span> <span class="hps">Desarrollo Web></span> <span class="hps">Inspector DOM</span></strong><span>.</span></span> - <div class="tuto_details"> - <div class="tuto_type"><span id="result_box" lang="es"><span class="alt-edited hps">Más</span> <span class="hps">detalles</span></span></div> - - <p><span id="result_box" lang="es"><span class="hps">Si el navegador</span> <span class="hps">Mozilla</span> <span class="hps">no tiene</span> <span class="hps">Domi</span><span>, puede</span><a href="https://addons.mozilla.org/en-US/firefox/addon/6622/"> instalarlo del sitio de complementos</a> <span class="hps">y reiniciar el</span> <span class="hps">navegador.</span> <span class="hps">Luego regrese</span> <span class="hps">a este</span> <span class="hps">tutorial.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Si no</span> <span class="hps">desea instalar</span> <span class="hps">Domi</span> <span class="hps">(o</span> <span class="hps">estás usando</span> <span class="hps">un navegador que no</span> <span class="hps">Mozilla)</span><span>, puede utilizar</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles,</span> <span class="hps">como se describe en</span> <span class="hps">la siguiente sección.</span> <span class="hps">O bien, puede</span> <span class="hps">omitir esta sección</span> <span class="hps">e ir directamente a</span> <span class="hps">la página siguiente.</span> <span class="hps">Saltarse</span> <span class="hps">esta sección</span> <span class="hps">no interfiere con</span> <span class="hps">el resto del</span> <span class="hps">tutorial.</span></span></p> - </div> - </li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <span class="hps">Domi</span><span>, expanda</span> <span class="hps">los nodos</span> <span class="hps">de su</span> <span class="hps">documento</span> <span class="hps">haciendo clic en</span> <span class="hps">las flechas</span><span>.</span></span> - <p><span id="result_box" lang="es"><strong><span class="hps">Nota</span><span>:</span></strong> <span class="alt-edited hps">El espaciado</span> <span class="alt-edited hps">de su archivo</span> <span class="hps">HTML</span> <span class="alt-edited hps">puede ocasionar</span> <span class="alt-edited hps">que Domi</span> <span class="alt-edited hps">muestre</span> <span class="hps">algunos nodos</span> <span class="hps">de texto vacíos</span><span class="alt-edited">, que se pueden</span> <span class="hps">pasar por alto.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Parte</span> <span class="hps">del resultado</span> <span class="hps">podría tener este aspecto</span><span>, según</span> <span class="alt-edited hps">qué nodos</span> <span class="alt-edited hps">has</span> <span class="alt-edited hps">expandido</span><span>:</span></span></p> - - <pre>│ ▼╴<span style="color: black;">P</span> -│ │ │ ▼╴<span style="color: black;">STRONG</span> -│ │ └<span style="color: darkblue;">#text</span> -│ ├╴<span style="color: darkblue;">#text</span> -│ ►╴<span style="color: black;">STRONG</span> -│ │</pre> - - <p><span id="result_box" lang="es"><span class="alt-edited hps">Cuando selecciona</span> <span class="alt-edited hps">cualquiera de los nodos</span><span>, puede usar</span> <span class="hps">panel de la derecha</span> <span class="hps">de</span> <strong><span class="alt-edited hps"> DOMi </span></strong><span class="hps">para averiguar</span> <span class="hps">más cosas sobre él.</span> <span class="hps">Por ejemplo</span><span>, cuando se selecciona</span> <span class="hps">un nodo de texto</span><span>,</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span class="hps">muestra</span> <span class="hps">el texto en el</span> <span class="hps">panel de la derecha</span><span>.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Cuando se selecciona</span> <span class="alt-edited hps">un elemento nodo</span></span>, <span id="result_box" lang="es"><strong><span class="alt-edited hps">DOMi </span></strong><span class="hps">analiza y</span> <span class="hps">ofrece</span> <span class="hps">una enorme cantidad de</span> <span class="hps">información en su</span> <span class="hps">panel de la derecha</span><span>.</span></span> <span id="result_box" lang="es"><span class="alt-edited hps">La información de estilo</span> <span class="hps">es sólo</span> <span class="alt-edited hps">una parte de la información</span> <span class="hps">que proporciona.</span></span></p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Problema</div> - -<p><span id="result_box" lang="es"><span class="alt-edited hps">En el</span> <strong><span class="alt-edited hps">DOMi </span></strong></span><span lang="es"><span>, haga clic</span> <span class="hps">en un nodo</span> </span><code><small>STRONG</small></code>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Utilice</span> el <span class="hps">panel de la derecha</span> <span class="hps">de</span> <span class="alt-edited hps">Domi</span> <span class="hps">para encontrar </span><span class="alt-edited hps">el </span></span><span id="result_box" lang="es"><span class="hps"> nodo de </span></span><span id="result_box" lang="es"><span class="alt-edited hps">color</span><span class="hps"> rojo</span><span>,</span> <span class="hps">y donde</span> <span class="hps">su apariencia </span><span class="hps">es</span> <span class="hps">más relevante que</span> <span class="hps">el texto normal</span><span>.</span></span></p> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>In the menu above the right-hand pane, choose <strong>CSS Rules</strong>. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the <strong>font-weight</strong> property as <code>bolder</code>; your stylesheet defines the <strong>color</strong> property as <code>red</code>.</p> -<a class="hideAnswer" href="#challenge">Ocultar solución</a></div> -<a href="#tutochallenge" title="Ver la posible solución para el problema">Ver la solución para el problema.</a></div> - -<h3 id="Utilizando_Web_X-Ray_Goggles"><span class="short_text" id="result_box" lang="es"><span class="hps">Utilizando</span> <span class="hps">Web</span> <span class="hps">X</span><span class="atn">-</span><span>Ray</span> <span class="hps">Goggles</span></span></h3> - -<p><a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles </a><span id="result_box" lang="es"><span class="hps">muestra</span> <span class="hps">menos información que</span> <strong><code><span class="hps">DOM</span> </code></strong><span class="hps">Inspector</span><span>, pero</span> <span class="hps">es</span> <span class="hps">más fácil de</span> <span class="hps">instalar y utilizar.</span></span></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Ir</span> <span class="hps">a la página principal</span> <span class="hps">de</span> <span class="hps">la </span></span> <a class="link-https" href="https://goggles.webmaker.org/" title="https://secure.toolness.com/webxray/">Web X-Ray Goggles</a>.</li> - <li><span id="result_box" lang="es"><span class="hps">Arrastre el</span> <span class="hps">enlace</span> <span class="hps">bookmarklet</span> <span class="hps">en esa</span> <span class="hps">página a</span> <span class="hps">tu barra de herramientas</span> <span class="hps">del navegador</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Abra el documento</span> <span class="hps">en versión HTML</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="alt-edited hps">Active</span> <span class="hps">Web</span> <span class="atn hps">X-</span><span>Ray</span> <span class="hps">Goggles</span> <span class="hps">haciendo clic en el</span> <span class="hps">bookmarklet</span> <span class="hps">en</span> <span class="hps">la barra de herramientas</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Mueva el</span> <span class="alt-edited hps">puntero del ratón</span> <span class="alt-edited hps">por encima de su</span> <span class="alt-edited hps">documento para comprobar</span> <span class="hps">los</span> <span class="hps">elementos en el documento</span><span>.</span></span></li> -</ol> - -<h2 id="¿Y_ahora_qué"><span class="short_text" id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada y herencia") }}<span id="result_box" lang="es"><span class="alt-edited hps">Si tomaste</span> <span class="alt-edited hps">el reto</span><span class="alt-edited">, usted vera</span> <span class="hps">que</span> <span class="hps">la información de estilo</span> <span class="hps">interactúa</span> en </span><span id="result_box" lang="es"><span class="hps">más de un lugar, </span></span><span id="result_box" lang="es"><span class="hps">para crear el estilo</span> <span class="hps">final de </span><span class="hps">un elemento.</span> <span class="hps">La <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance">siguiente página</a></span> <span class="hps">explica</span> <span class="hps">más acerca de estas</span> <span class="hps">interacciones.</span></span></p> diff --git a/files/es/web/css/introducción/index.html b/files/es/web/css/introducción/index.html deleted file mode 100644 index 09177572fa..0000000000 --- a/files/es/web/css/introducción/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 ---- -<h2 id="Presentación"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Presentación</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este tutorial es una introducción a las hojas de estilo en cascada (Cascading Style Sheets o CSS).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Está dividido en dos partes.</span></span></p> - -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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.</span></span></li> -</ul> - -<ul> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La parte II contiene algunos ejemplos de características especiales que funcionan en Mozilla, pero no necesariamente en otros entornos.</span></span></li> -</ul> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El tutorial se basa en la <a class="external" href="http://www.w3.org/TR/CSS21/" title="http://www.w3.org/TR/CSS21/">Especificación CSS 2.1</a> .</span></span></p> - -<h3 id="¿Quién_debe_usar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">¿Quién debe usar este tutorial?</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este tutorial es sobre todo para los principiantes en CSS, pero también lo puedes usar si tienes alguna experiencia en CSS.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si eres principiante en CSS, usa la parte I de este tutorial para entender CSS y aprender a usarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">A continuación, utiliza la parte II para comprender el ámbito de aplicación de CSS en Mozilla.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">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.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si tienes experiencia en CSS, pero no en Mozilla, puedes saltar a la parte II.</span></span></p> - -<h3 id="¿Qué_se_necesita_antes_de_empezar"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">¿Qué se necesita antes de empezar?</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para aprovechar al máximo este tutorial, necesitas un editor para archivos de texto y un navegador Mozilla (Firefox o Mozilla Suite).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También debes saber cómo utilizarlos de forma básica.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no deseas editar los archivos, entonces puedes leer el tutorial y ver las fotos, pero es una forma menos eficaz de aprender.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Algunas partes del tutorial, que son opcionales, requieren otro software de Mozilla.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no quieres descargar otros software de Mozilla, entonces puedes saltártelas.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El otro software de Mozilla al que hace referencia este tutorial incluye:</span></span></p> - -<ul> - <li><a href="/en/DOM_Inspector" title="en/Dom inspector"><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Inspector DOM</span></span></a></li> -</ul> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> CSS ofrece distintas maneras de trabajar con el color, por lo que las partes de este tutorial dependen de él.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sólo puedes utilizar estas partes del tutorial fácilmente si dispones de una pantalla en color y de visión del color normal.</span></span></p> - -<h3 id="Cómo_utilizar_este_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cómo utilizar este tutorial</span></span></h3> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para utilizar este tutorial, lee las páginas con atención y en orden.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si se te pasa una página, tal vez te resulte difícil de entender las páginas siguientes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En cada página, utiliza la sección de <em>Información</em> para entender cómo funciona CSS.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Usa la sección <em>Acción</em> para tratar de usar CSS en tu propio equipo.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para controlar que has comprendido los contenidos, acepta el reto al final de cada página.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las soluciones a los retos están enlazadas debajo de los retos, por lo que no es necesario verlos si no quieres.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para entender CSS en mayor profundidad, lee la información que se encuentra en las cajas con el título <em>Más detalles.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza los enlaces que hay para encontrar información de referencia acerca de CSS.</span></span></p> - -<h2 id="Parte_I_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte I del tutorial </span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una guía paso a paso básica para CSS.</span></span></p> - -<ol> - <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Que_es_CSS" title="es/docs/Web/CSS/Como iniciar/Que es CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Qué es CSS</span></span></a></strong></li> - <li><strong><a href="/es/docs/Web/CSS/Como_iniciar/Por_que_usar_CSS" title="es/docs/Web/CSS/Como iniciar/Por que usar CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por qué usar CSS</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting Started/How CSS works"><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cómo funciona CSS</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting Started/Cascading and inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Cascada y herencia</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Selectores</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting Started/Readable CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">CSS legibles </span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting Started/Text styles"><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Estilos de texto</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting Started/Content"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-99 goog-gtc-translatable" dir="ltr">Contenido</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting Started/Lists"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Listas</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting Started/Boxes"><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Cajas</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting Started/Layout"><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diseño</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting Started/Tables"><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">Tablas</span></span></a></strong></li> - <li><strong><a href="/es/docs/Web/CSS/Introducción/Media" title="es/docs/Web/CSS/Introducción/Media"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Multimedia</span></span></a></strong></li> -</ol> - -<h2 id="Parte_II_del_tutorial"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Parte II del tutorial</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Ejemplos que muestran el ámbito de aplicación de CSS en Mozilla.</span></span></p> - -<ol> - <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting Started/JavaScript"><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-tm goog-gtc-from-tm-score-100 goog-gtc-translatable" dir="ltr">JavaScript</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting Started/XBL bindings"><span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Enlaces XBL</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting Started/XUL user interfaces"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Interfaces de usuario XUL</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting Started/SVG graphics"><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Gráficos SVG</span></span></a></strong></li> - <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting Started/XML data"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Datos XML</span></span></a></strong></li> -</ol> - -<p>{{ 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" } ) }}</p> diff --git a/files/es/web/css/introducción/layout/index.html b/files/es/web/css/introducción/layout/index.html deleted file mode 100644 index f71d3a82e6..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ 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.</p> - -<h2 class="clearLeft" id="Informacion_Layout">Informacion: Layout</h2> - -<p>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.</p> - -<p>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.</p> - -<p>Esta página describe algunas técnicas sencillas que puedes probar.</p> - -<h3 id="Estructura_del_documento">Estructura del documento</h3> - -<p>Si desea controlar el diseño de su documento, es posible que deba cambiar su estructura.</p> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>En su documento de ejemplo, los párrafos numerados en el segundo encabezado no tienen un contenedor propio.</p> - -<p>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.</p> - -<p>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:</p> -</div> - -<pre class="brush:html;highlight:[2,8]"><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> -</pre> - -<p>Ahora su hoja de estilos puede utilizar una regla para especificar bordes alrededor de ambas listas:</p> - -<pre class="brush:css">ul, #numbered { - border: 1em solid #69b; - padding-right:1em; -} -</pre> - -<p> El resultado se ve así: </p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> -</div> - -<h3 id="Unidades_de_tamaño">Unidades de tamaño</h3> - -<p>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.</p> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>El borde a la izquierda de este texto tiene su tamaño especificado en píxeles.</p> - -<p>El borde de la derecha tiene su tamaño especificado en ems.</p> - -<p>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:</p> -</div> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> - <tbody> - <tr> - <td> - <div style="">RESIZE ME PLEASE</div> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<p>Más detalles</p> - -<p>Para otros dispositivos, otras unidades de longitud son apropiadas.</p> - -<p>Hay más información sobre esto en una página posterior de este tutorial.</p> - -<p>Para obtener detalles completos de los valores y unidades que puede utilizar, consulte Valores en la especificación CSS.</p> -</div> -</div> - -<h3 id="Diseño_del_texto">Diseño del texto</h3> - -<p>Dos propiedades especifican cómo está alineado el contenido de un elemento. Puede usarlos para ajustes sencillos de diseño:</p> - -<p>{{Cssxref ('text-align')}}</p> - -<p><br> - Alinea el contenido. Utilice uno de estos valores: izquierda, derecha, centro, justificar<br> - {{Cssxref ('texto-sangría')}}<br> - Indente el contenido en una cantidad que especifique.</p> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>Para centrar los títulos:</p> -</div> - -<pre class="brush:css">h3 { - border-top: 1px solid gray; - text-align: center; -} -</pre> - -<p>Resultado:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) The oceans</p> - </td> - </tr> - </tbody> -</table> - -<p>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.</p> -</div> - -<h3 id="Floats">Floats</h3> - -<p>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.</p> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>En el documento de ejemplo, las listas se extienden por la ventana. Puede evitarlo flotando hacia la izquierda.</p> - -<p>Para mantener los encabezados en su lugar, también debe especificar que se mantengan alejados de los flotadores a su izquierda:</p> -</div> - -<pre class="brush:css">ul, #numbered {float: left;} -h3 {clear: left;} -</pre> -</div> - -<p>El resultado sería:</p> - -<table style="background-color: white; border: 2px outset #3366bb; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> - <ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> - </ul> - </div> - - <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - - <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> - <p><strong>1: </strong>Lorem ipsum</p> - - <p><strong>2: </strong>Dolor sit</p> - - <p><strong>3: </strong>Amet consectetuer</p> - - <p><strong>4: </strong>Magna aliquam</p> - - <p><strong>5: </strong>Autem veleum</p> - </div> - </td> - </tr> - </tbody> -</table> - -<p>(Un poco de relleno es necesario a la derecha de las cajas, donde el borde es demasiado cerca del texto.)</p> - -<h3 id="Posicionamiento">Posicionamiento</h3> - -<p>Puede especificar la posición de un elemento de cuatro formas especificando la propiedad {{cssxref ('position')}} y uno de los siguientes valores.</p> - -<p>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.</p> - -<p>relativo</p> - -<p><br> - 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.<br> - fijo<br> - 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.<br> - absoluto<br> - 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.<br> - estático<br> - El valor por defecto. Utilice este valor si necesita desactivar la posición de forma explícita.</p> - -<p>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.</p> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Ejemplo</p> - -<p>Para colocar dos elementos uno encima del otro, cree un contenedor principal en el documento con los dos elementos dentro de él:</p> -</div> - -<pre class="brush:html"><div id="parent-div"> - <p id="forward">/</p> - <p id="back">\</p> -</div> -</pre> - -<p>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:</p> - -<pre class="brush:css">#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; -} -</pre> - -<p>El resultado se ve así, con la barra invertida en la parte superior de la barra inclinada:</p> - -<div style="position: relative; left: .33em; font: bold 300% sans-serif;"> -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> - -<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> -</div> - -<table style="background-color: white; border: 2px outset #3366bb; height: 5em; padding: 1em; width: 30em;"> - <tbody> - <tr> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"> -<p>Más detalles</p> - -<p>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.</p> - -<p>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.</p> -</div> -</div> - -<h2 id="Action_Specifying_layout">Action: Specifying layout</h2> - -<ol> - <li>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.</li> - <li>En el ejemplo Flotantes, agregue relleno para separar el texto del borde derecho por 0. 5 em.</li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type"> -<p>Cambios</p> - -<p>Cambie el documento de ejemplo, doc2. Html, agregando esta etiqueta a ella cerca del final, justo antes de &lt;/ body&gt;.</p> -</div> - -<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> -</pre> - -<p>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:</p> - -<table style="border: 2px solid #cccccc;"> - <tbody> - <tr> - <td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td> - </tr> - </tbody> -</table> - -<p>Predecir dónde aparecerá la imagen en el documento. A continuación, actualice su navegador para ver si estaba correcto.</p> - -<p>Agregue una regla a su hoja de estilos que coloque la imagen en la parte superior derecha de su documento.</p> - -<p>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:</p> - -<div style="position: relative; width: 29.5em; height: 18em;"> -<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> - -<div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> -<ul style=""> - <li>Arctic</li> - <li>Atlantic</li> - <li>Pacific</li> - <li>Indian</li> - <li>Southern</li> -</ul> -</div> - -<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p> - -<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> -<p><strong>1: </strong>Lorem ipsum</p> - -<p><strong>2: </strong>Dolor sit</p> - -<p><strong>3: </strong>Amet consectetuer</p> - -<p><strong>4: </strong>Magna aliquam</p> - -<p><strong>5: </strong>Autem veleum</p> -</div> - -<p style=""> </p> - -<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></div> -</div> -</div> -</div> - -<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Layout"> See a solution to this challenge.</a></p> - -<h2 id="What_next">What next?</h2> - -<p>{{ 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.</p> diff --git a/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html b/files/es/web/css/introducción/los_colon_estilos_de_texto/index.html deleted file mode 100644 index 1788c8c0ee..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Esta es la sección séptima del</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> tutorial</span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="es-es / docs / Web / guía / CSS / Primeros pasos"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">CSS Introducción</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ; </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">da más ejemplos de estilos de texto.</span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Usted modificara su hoja de estilo de ejemplo para utilizar diferentes fuentes.</span></font></font></p> - -<h2 class="clearLeft" id="Los_estilos_de_texto_Información"><span id="result_box" lang="es"><span class="hps">Los estilos de texto</span><span>: Información</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene varias propiedades</span> <span class="hps">de</span> </span><span id="result_box" lang="es"><span class="hps">estilo</span><span> de </span></span><span id="result_box" lang="es"><span class="hps">texto</span> <span>.</span></span></p> - -<p style="margin: 0px 0px 24px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Hay una propiedad abreviada conveniente, </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">la fuente</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , que se puede utilizar para especificar varios aspectos a la vez, por ejemplo:</span></font></font></p> - -<ul style="margin: 0px 0px 24px; padding: 0px 0px 0px 40px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Negrita, cursiva, y small-caps (versalita)</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tamaño</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La altura de la línea</span></font></font></li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El tipo de letra</span></font></font></li> -</ul> - -<div class="tuto_example"> -<div class="tuto_type"> -<div class="tuto_type" style="margin: 0px; padding: 0px; border: 0px; font-weight: 700; text-align: left; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-indent: 0px; text-transform: none; white-space: normal;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ejemplo</span></font></font></div> - -<pre class="brush:css language-css" style="margin: 0px 0px 20px; padding: 1em 0px 1em 30px; border-width: 0px 0px 0px 6px; border-left-style: solid; font-family: Consolas, Monaco, 'Andale Mono', monospace; font-size: 14px; line-height: 19px; color: rgb(77, 78, 83); overflow: auto; direction: ltr; text-align: left; white-space: pre; position: relative; text-shadow: none; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; background: 50% 0% rgb(250, 251, 252);"><code class="language-css" style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; text-align: left; white-space: pre; color: rgb(77, 78, 83); text-shadow: none;"><span class="token selector" style="margin: 0px; padding: 0px; border: 0px; color: rgb(102, 153, 0);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">p </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">{ </span></font></font></span><span class="token property" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 0, 85);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">fuente </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">:</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> cursiva 75% / 125% </span></font></font><span class="token string" style="margin: 0px; padding: 0px; border: 0px; color: rgb(166, 127, 89); background: rgba(255, 255, 255, 0.498039);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">"Comic Sans MS"</span></font></font></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> , cursive </span></font></font><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">; </span></font></font></span><span class="token punctuation" style="margin: 0px; padding: 0px; border: 0px; color: rgb(153, 153, 153);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">}</span></font></font></span></code></pre> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">establece</span> varias <span class="hps">propiedades de la fuente</span><span class="alt-edited">, poniendo</span> <span class="hps">todos los párrafos</span> <span class="hps">en</span></span> italic.</p> - -<p><span id="result_box" lang="es"><span class="hps">El tamaño de fuente</span> <span class="hps">se establece en</span> <span class="hps">tres cuartas partes del</span> <span class="hps">tamaño</span> </span><span id="result_box" lang="es"><span class="hps">en </span><span class="hps">cada</span></span><span id="result_box" lang="es"> </span><span id="result_box" lang="es"><span class="hps">párrafo</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">del elemento padre</span><span>,</span> <span class="hps">y</span> <span class="hps alt-edited">el</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">se establece en</span> <span class="hps">125</span><span class="atn">% (</span><span>un poco más</span> <span class="hps">separados</span> <span class="hps">de lo normal)</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">tipo de letra</span> <span class="hps">se establece en</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">pero si</span> <span class="hps">este tipo de letra</span> <span class="hps">no está disponible,</span> <span class="hps">el navegador</span> <span class="hps">utilizará</span> <span class="hps alt-edited">por</span> <span class="hps">defecto</span> <span class="hps">tipografía</span> <span class="hps">cursiva</span> <span class="hps">(</span></span>hand-written<span lang="es"><span>)</span><span>.</span></span></p> - -<p><span lang="es"><span class="hps">La</span> <span class="hps">regla tiene</span> <span class="hps alt-edited">el efecto colateral</span> <span class="hps alt-edited">de desactivar</span> <span class="hps alt-edited">las</span> <span class="hps alt-edited">versalitas</span> <span class="hps">y</span> <span class="hps alt-edited">negritas</span> <span class="hps atn">(</span><span>estableciendo su valor </span><span class="hps alt-edited">en normal)</span><span>:</span></span></p> -</div> - -<h3 id="Tipos_de_fuentes"><span id="result_box" lang="es"><span class="hps alt-edited">Tipos de fuentes</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">No se puede predecir</span> <span class="hps">qué</span> tipografías </span><span id="result_box" lang="es"><span class="hps alt-edited">tienen</span><span> </span></span><span id="result_box" lang="es"><span class="hps alt-edited">los lectores de</span> nuestro <span class="hps">documento</span> <span>.</span> <span class="hps">Así que</span> <span class="hps alt-edited">cuando se especifica</span> <span class="hps alt-edited">llos tipos de fuentes </span><span class="hps alt-edited">de las </span><span class="hps alt-edited">letra</span><span>s</span><span>, es</span> <span class="hps">buena</span> <span class="hps alt-edited">idea darle</span> <span class="hps alt-edited">una lista alternativa</span> <span class="hps">en orden de preferencia</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Finalice la</span> <span class="hps">lista</span> <span class="hps">con uno de los</span> <span class="hps alt-edited">las tipografías</span> por defecto<span class="hps alt-edited">:</span> </span><code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>.</p> - -<p><span lang="es"><span class="hps">Si el</span> <span class="hps">tipo de letra</span> <span class="hps alt-edited">no es compatible con</span> <span class="hps alt-edited">alguna de los caracteres</span> <span class="hps alt-edited">del documento</span><span>, el navegador</span> <span class="hps alt-edited">puede sustituirlos por</span> <span class="hps alt-edited">una tipografía</span> <span class="hps">diferente.</span> <span class="hps">Por ejemplo, el</span> <span class="hps">documento puede contener</span> <span class="hps">caracteres especiales que</span> </span><span style="color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; display: inline !important; float: none; background-color: rgb(255, 255, 255);">el tipo de letra no admite.</span><span lang="es"> <span class="hps">Si</span> <span class="hps">el navegador puede</span> <span class="hps">encontrar otro</span> <span class="hps alt-edited">tipografía que</span> <span class="hps">tiene esos</span> <span class="hps">caracteres</span><span>,</span> <span class="hps alt-edited">entonces usará</span> <span class="hps">otro</span> <span class="hps alt-edited">tipo de fuente</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tipo de letra por sí misma, utilizar el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-family</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> - -<h3 id="Los_tamaños_de_la_fuente"><span id="result_box" lang="es"><span title="Font sizes - -">Los tamaños de la fuente</span></span></h3> - -<p><span id="result_box" lang="es"><span title="Browser users can override the default font sizes or change the text size while they read a page, so it makes good sense for you to use relative sizes wherever you can. -">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.</span></span></p> - -<p><span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">Puede utilizar algunos valores incorporados para tamaños de fuentes, </span></span><code>like</code> <code>small</code>, <code>medium</code> and <code>large</code> (<span id="result_box" lang="es"><span title="You can use some built-in values for font sizes, like small, medium and large.">pequeñas, medianas y grandes)</span></span> . <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">También puede utilizar valores relativos al tamaño de fuente del elemento padre, </span></span>l<code>ike</code><code>: smaller, larger, 150% or 1.5em</code>. ( <span id="result_box" lang="es"><span title="You can also use values relative to the font size of the parent element, like: smaller, larger, 150% or 1.5em.">más pequeño, más grande, 150% o 1.5em.)</span></span>. <span id="result_box" lang="es"><span title='An "em" is equivalent to the width of the letter "m" (for the font size of the parent element);'>Un "em" es equivalente a la anchura de la letra "m" (para el tamaño de fuente del elemento padre); </span><span title="thus 1.5em is one-and-a-half times the size of the font of the parent element. -">así 1.5em es una vez y media el tamaño de la fuente del elemento padre.</span></span></p> - -<p><span id="result_box" lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer.">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.</span></span><span lang="es"><span title="If necessary you can specify an actual size, like: 14px (14 pixels) for a display device or 14pt (14 points) for a printer."> 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.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar un tamaño de fuente por su cuenta, utilice el </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-size</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> propiedad.</span></font></font></p> - -<h3 id="Altura_de_línea">Altura de línea</h3> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">El</span> <span class="hps alt-edited">interlíneado</span> <span class="hps">especifica el</span> <span class="hps">espacio entre líneas</span><span>.</span> <span class="hps">Si el documento tiene</span> <span class="hps">párrafos largos</span> <span class="hps">con</span> <span class="hps">muchas líneas</span><span>,</span> <span class="hps">una separación</span> <span class="hps">más grande de lo</span> <span class="hps">normal,</span> <span class="hps">hace que sea</span> <span class="hps">más fácil de leer</span><span>, especialmente si el</span> <span class="hps">tamaño de la letra</span> <span class="hps">es pequeña</span><span>.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar una altura de línea por su cuenta, utilice <code>la </code></span></font></font><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">propiedad </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/line-height" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">line-height</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> .</span></font></font></p> - -<h3 id="Decoración">Decoración</h3> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">La</span> <span class="hps">propiedad independiente </span></span><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">text-decoration</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> </span></font></font><span lang="es"><span class="hps">puede</span> <span class="hps">especificar otros</span> <span class="hps">estilos,</span> <span class="hps">como el</span> <span class="hps">subrayado o</span> <span class="hps">tachado</span><span>.</span> <span class="hps">Usted</span> <span class="hps alt-edited">puede establecerlo en</span> <span class="hps">ninguno</span> ( </span><code>none</code> ) <span lang="es"> <span class="hps alt-edited">para eliminar</span> <span class="hps alt-edited">expresamente</span> <span class="hps">cualquier</span> <span class="hps">decoración.</span></span></p> - -<h3 id="Otras_propiedades">Otras propiedades</h3> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar cursiva por su cuenta, use </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-style" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-style</span></font></font></code></a><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : italic;</span></font></font></code><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar audaz por su cuenta, use </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-weight</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : bold;</span></font></font></code><br> - <font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para especificar los pequeños capitales en su propio, el uso </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: normal; font-weight: normal; font-family: Consolas, Monaco, 'Andale Mono', monospace; color: rgb(77, 78, 83); font-size: 14px; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">font-variant</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> : small-caps;</span></font></font></code></p> - -<p>Para desactivar o activar cualquiera de estos valores de forma individual, puede especificar su valor como <code>normal</code> <code>o inherit</code>.</p> - -<div class="tuto_details"> -<div class="tuto_type">Mas detalles</div> - -<p><span id="result_box" lang="es"><span class="hps">Puede especificar</span> <span class="hps">estilos de texto</span> <span class="hps alt-edited">de diversas</span> <span class="hps alt-edited">maneras.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Por ejemplo</span><span>,</span> <span class="hps">algunas de las</span> <span class="hps">propiedades mencionadas</span> <span class="hps">aquí</span> <span class="hps">tienen</span> <span class="hps">otros valores</span> <span class="hps">que se pueden utilizar</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">compleja</span><span>,</span> <span class="hps alt-edited">evite utilizar</span> <span class="hps alt-edited">la propiedad </span></span><code>font</code> <code>shorthand</code><span lang="es"><span class="hps">,</span> <span class="hps">debido a sus</span> <span class="hps">efectos secundarios</span> <span class="hps">(resetean </span><span class="hps">otras propiedades</span> <span class="hps">individuales</span><span>)</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Para obtener mas detalles de</span> <span class="hps">las propiedades</span> <span class="hps">que se relacionan con</span> <span class="hps">las fuentes, </span></span><span lang="es"><span class="hps">ver</span></span><span lang="es"><span class="hps"> las </span><span class="hps">especificación</span>es <span class="hps">CSS</span></span><span lang="es"> </span><span id="result_box" lang="es"><span class="hps">, </span></span><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a><span lang="es"><span class="hps">,</span><span>.</span> <span class="hps alt-edited">Si desea más detalles sobre</span> <span class="hps">la decoración de</span> <span class="hps">texto,</span> <span class="hps">ver</span> </span><a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text </a><span lang="es"><span class="hps">.</span></span></p> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Si no quiere depender de los tipos de letra instalados en los sistemas de los usuarios, puede usar </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(244, 244, 244);" title=""><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">@ font-face</span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> para especificar una fuente en línea. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Sin embargo, esto requiere que los usuarios tengan un navegador que soporte esta regla.</span></font></font></p> -</div> - -<h2 id="Acción_Especificaciónes_de_las_fuentes"><span id="result_box" lang="es"><span>Acción:</span> <span class="hps">Especificaciónes de</span> <span class="hps">las fuentes</span></span></h2> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Para un simple documento, puede establecer la fuente del </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="El HTML <body> representa el contenido de un documento HTML. Sólo hay un elemento <body> en un documento."><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">elemento </span></font></font><code style="margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-weight: inherit; font-family: Consolas, Monaco, 'Andale Mono', monospace;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"><body></span></font></font></code></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> y el resto del documento hereda la configuración.</span></font></font></p> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">CSS</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Agregue</span> <span class="hps">la siguiente regla</span> <span class="hps">para cambiar</span> <span class="hps">el tipo de letra</span> <span class="hps">en todo el documento</span><span>.</span> <span class="hps">La</span> <span class="hps">parte superior del archivo</span> <span class="hps">CSS</span> <span class="hps">es</span> <span class="hps alt-edited">el lugar lógico</span> <span class="hps alt-edited">para esto</span><span>, pero no tiene</span> <span class="hps alt-edited">los mismos efectos</span> <span class="hps">donde</span> <span class="hps alt-edited">usted lo ponga</span><span>:</span></span> - <pre class="eval language-html"><code class="language-html">body {font: 16px "Comic Sans MS", cursive;}</code></pre> - - <div class="line-number" style="top: 0px;"> </div> - </li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Añada</span> <span class="hps">un comentario</span> <span class="hps alt-edited">que explique</span> <span class="hps">la regla, y</span> <span class="hps alt-edited">agregue un espacio en blanco</span> <span class="hps alt-edited">para que coincida con</span> <span class="hps">su diseño</span> <span class="hps">preferido</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">Guarde el archivo y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el efecto</span><span>.</span> <span class="hps">Si su sistema tiene</span> <span class="hps">Comic</span> <span class="hps">Sans</span> <span class="hps">MS</span><span>,</span> <span class="hps">u otra</span> <span class="hps">fuente cursiva</span> <span class="hps">que no</span> <span class="hps">soporta </span></span>italic<span lang="es"><span class="hps">,</span> <span class="hps">su navegador</span> eligira <span class="hps">un</span> <span class="hps">tipo de letra</span> <span class="hps">diferente para </span></span><span lang="es"><span class="hps alt-edited">la</span> <span class="hps alt-edited">primera línea</span></span><span lang="es"><span class="hps"> del</span> <span class="hps">texto en </span></span>italic<span lang="es"><span class="hps alt-edited">:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li style="margin: 0px; padding: 0px 0px 6px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Desde la barra de menú de su navegador, elija </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Tamaño del texto> Aumentar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> (o </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px;"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver> Zoom> Acercar</span></font></font></strong><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> ). </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">A pesar de que ha especificado 16 píxeles en el estilo, un usuario leer el documento se puede cambiar este tamaño.</span></font></font></li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type">Desafío</div> - -<p><span id="result_box" lang="es"><span class="hps">Sin modificar nada más</span><span>,</span> <span class="hps">hacer</span> <span class="hps">las seis</span> <span class="hps">letras iniciales</span> <span class="hps">dos veces el tamaño</span> <span class="hps">de</span> <span class="hps">letra serif</span> <span class="hps">por defecto del navegador</span><span>:</span></span></p> - -<table> - <tbody> - <tr> - <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> - </tr> - <tr> - <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> - </tr> - </tbody> -</table> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<p>Add the following style declaration to the <code>strong</code> rule:</p> - -<pre class="brush: css"> font: 200% serif; -</pre> -If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden. - -<p> </p> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles#tutochallenge" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-size: 12px; text-align: right; display: block; font-family: 'Open Sans', sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal;" title="Mostrar una posible solución para el desafío"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">Ver una solución para el desafío.</span></font></font></a></div> - -<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">El documento muestra ya utiliza varios colores con nombre. </span></font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">La </span></font></font><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Color" style="margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);" title="/ En-US / docs / Web / guía / CSS / Getting_Started / Color"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">siguiente sección</span></font></font></a><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;"> enumera los nombres de los colores estándar y se explica cómo se puede especificar otros </span></font></font><strong style="margin: 0px; padding: 0px; border: 0px; color: rgb(77, 78, 83); font-family: 'Open Sans', sans-serif; font-size: 14px; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; background-color: rgb(255, 255, 255);"><font><font><span class="remarkable-pre-marked" style="margin: 0px; padding: 0px; border: 0px; position: relative;">.</span></font></font></strong></p> - -<p> </p> diff --git a/files/es/web/css/introducción/selectors/index.html b/files/es/web/css/introducción/selectors/index.html deleted file mode 100644 index 9ebe3573e8..0000000000 --- a/files/es/web/css/introducción/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 ---- -<p>{{ CSSTutorialTOC() }}</p> - -<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}<span id="result_box" lang="es"><span class="hps">Esta</span> <span class="hps">es</span> <span class="hps">la sección</span> <span class="hps">quinta</span> <span class="hps">del</span> </span><span id="result_box" lang="es"><span class="hps">tutoria</span></span><span class="seoSummary"><a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> ;</span><span id="result_box" lang="es"><span class="hps">En él se explica</span> <span class="hps">cómo se puede aplicar</span> <span class="hps">estilos</span> <span class="hps">de forma selectiva</span><span>,</span> <span class="hps">y cómo</span> <span class="hps">los diferentes tipos de</span> <span class="hps">selectores</span> <span class="hps">tener diferentes</span> <span class="hps">prioridades.</span> <span class="hps">Agregar algunos</span> <span class="hps">atributos a</span> <span class="hps">las</span> <span class="hps">etiquetas</span> <span class="hps">en su</span> <span class="hps">documento de muestra</span><span>,</span> <span class="hps">y</span> <span class="hps">utiliza estos</span> <span class="hps">atributos en</span> <span class="hps">su hoja de estilos</span> <span class="hps">de muestra.</span></span></p> - -<h2 class="clearLeft" id="Información_Selectores"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Selectores</span></span></h2> - -<p><br> - <span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">tiene su propia terminología</span> <span class="hps">para describir el</span> <span class="hps">lenguaje CSS</span><span>.</span> <span class="hps">Anteriormente</span> <span class="hps">en este tutorial,</span> <span class="hps">que ha creado</span> <span class="hps">una línea en</span> <span class="hps">su hoja de estilos</span> <span class="hps alt-edited">como esta:</span></span></p> - -<pre class="brush: css">strong { - color: red; -} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">En la terminología de</span> <span class="hps">CSS</span><span>,</span> <span class="hps">toda</span> <span class="hps">esta línea</span> <span class="hps">es una </span></span><em><code><strong>rule </strong></code>(</em><span id="result_box" lang="es"><span class="hps">regla).</span> <span class="hps">Esta regla</span> <span class="hps">comienza con</span> </span><strong><em><code>strong</code></em></strong><span lang="es"><span>, que es un</span> <span class="hps">selector.</span> <span class="hps alt-edited">Permite seleccionar</span> <span class="hps">qué elementos</span> <span class="hps">en el DOM</span> <span class="hps">se aplica la regla</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">La parte</span> <span class="hps">interior de las</span> <span class="hps">llaves</span> <span class="hps">es la declaración</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps"> L</span><span class="hps alt-edited">a palabra clave es </span></span><span id="result_box" lang="es"><code><em><span class="hps">color</span></em></code>, que </span><span id="result_box" lang="es"><span class="hps alt-edited">es</span> <span class="hps">una propiedad,</span> <span class="hps">y el <code><em>rojo </em></code>es</span> <span class="hps">el valor.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">El punto y coma</span> <span class="hps">después de el</span> <span class="hps">par</span> <span class="hps">propiedad</span><span class="atn">-</span><span>valor</span> <span class="hps">separa los posibles </span><span class="hps">otros pares de </span> <span class="hps">propiedad</span><span>-valor en</span> una <span class="hps">misma declaración.</span></span></p> - -<p> <span id="result_box" lang="es"><span class="hps">Este tutorial</span> <span class="hps">se refiere a</span> <span class="hps">un selector</span> <span class="hps">como</span> </span><em><strong><code>strong</code> </strong></em><span lang="es"><span class="hps">como un</span> <span class="hps">selector de etiquetas</span><span>.</span> <span class="hps">La</span> <span class="hps">especificación</span> <span class="hps">CSS</span> <span class="hps">se refiere a él como</span> <span class="hps">un selector de</span> <span class="hps">tipo <code><strong>(</strong></code></span></span><code><strong> type selector)</strong></code><span lang="es"><span>.</span></span></p> -</div> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">En esta página</span> <span class="hps">del tutorial</span> <span class="hps alt-edited">se explica</span> <span class="hps">más acerca de los</span> <span class="hps">selectores</span> <span class="hps">que se pueden utilizar</span> <span class="hps">en</span> <span class="hps">las reglas CSS</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Además de añadir </span></span><span id="result_box" lang="es"><span class="hps">nombres a las e</span></span><span id="result_box" lang="es"><span class="hps">tiquetas</span> <span>, puede usar </span><span class="hps alt-edited">valores en los atributos</span> de <span class="hps">los selectores</span><span>.</span> <span class="hps">Esto permite que sus</span> <span class="hps">reglas sean</span> <span class="hps">más específicas.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Dos</span> <span class="hps">atributos tienen</span> <span class="hps">un estatus especial</span> <span class="hps">para</span> <span class="hps">CSS</span><span>.</span> <span class="hps">Son</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> <code>e </code><a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p> - -<h3 id="Class_Selectores_de_clase">Class: <span id="result_box" lang="es"><span class="hps">Selectores de clase</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Utilice el</span> <span class="hps">atributo</span></span> <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> para <span id="result_box" lang="es"><span class="hps">asignarle a </span></span><span id="result_box" lang="es"><span class="hps">un elemento</span> un nombre de clase<code><strong><em> (class)</em></strong></code></span>. <span id="result_box" lang="es"><span class="hps">Depende de</span><span class="hps">l</span><span class="hps"> nombre que elijas</span> como <span class="hps"><code><strong><em>class</em></strong></code>.</span></span> <span id="result_box" lang="es"><span class="hps">Múltiples</span> <span class="hps">elementos en un documento</span> <span class="hps">pueden tener el mismo</span> <span class="hps">valor de la clase</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba</span> <span class="hps atn">un punto (.</span><span>)</span> <span class="hps">antes del </span><span class="hps">nombre de la clase</span>,<span class="hps"> cuando</span> <span class="hps">se utiliza como </span><span class="hps">un selector.</span></span></p> - -<h3 id="Selectores_ID"><span id="result_box" lang="es"><span class="hps alt-edited">Selectores ID</span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Utilice el atributo</span> <span class="hps">id en</span> <span class="hps">un elemento</span> <span class="hps">para asignar un</span> <span class="hps alt-edited">identificación para</span> ese <span class="hps">elemento</span><span>.</span> <span class="hps">Depende de</span> usted el <span class="hps">nombre que elija</span> <span class="hps">para el ID</span><span>.</span> <span class="hps">El nombre de</span> <span class="hps">ID</span> <span class="hps">debe ser único</span> <span class="hps">en el documento.</span></span><br> - </p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">su hoja de estilo</span><span>, escriba un</span> <span class="hps alt-edited">símbolo de almohadilla</span> <span class="hps atn">(</span><span class="alt-edited">#)</span> <span class="hps alt-edited">ante el</span> <span class="hps alt-edited">ID cuando</span> <span class="hps alt-edited">se utiliza esto en</span> <span class="hps">un selector.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Esta etiqueta</span> <span class="hps">HTML</span> <span class="hps">tiene un</span> <span class="hps alt-edited">atributo <code>class</code></span><code> </code><span class="hps">y un atributo</span> <span class="hps"><code>id</code>:</span></span></p> - -<pre class="brush: html"><p class="key" id="principal"> -</pre> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps alt-edited">valor de <code><em><strong>id </strong></em></code>es</span><span class="alt-edited">, <strong>principal</strong>,</span> <span class="hps">debe ser único</span> <span class="hps">en el documento;</span> <span class="hps">pero</span> <span class="hps">otras</span> <span class="hps">etiquetas del documento</span> <span class="hps">puede tener el mismo</span> <span class="hps alt-edited">nombre de la <strong><em><code>class</code></em></strong></span><span>,</span> <span class="hps alt-edited">Key.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En</span> <span class="hps">una hoja de estilo</span> <span class="hps">CSS</span><span>,</span> <span class="hps">esta regla</span> <span class="hps">hace que todos</span> <span class="hps">los elementos con la <code><em>class</em></code></span><code><em> </em></code><span class="hps"><code><em><strong>key </strong></em></code>sean verdes</span> <span>.</span> <span class="hps atn">(</span><span>Puede ser que no</span> <span class="hps">todos los sean</span> <span class="hps atn">{</span><span class="atn">{</span><span>HTMLElement</span> <span class="hps">()</span><span>}</span> <span class="hps">"p"</span><span>}</span> <span class="hps">elementos.</span><span>)</span></span></p> - -<pre class="brush: css">.key { - color: green; -} -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Esta regla</span> <span class="hps">hace que</span> <span class="hps">el </span></span><span id="result_box" lang="es"><span class="hps">único </span></span><span id="result_box" lang="es"><span class="hps"> </span></span><span id="result_box" lang="es"><span class="hps">elemento</span> </span><span id="result_box" lang="es"> <span class="hps alt-edited">de id </span></span><span id="result_box" lang="es"><code><strong><em><span class="hps alt-edited">principal</span></em></strong></code> este en <span class="hps">negrita:</span></span></p> - -<pre class="brush: css">#principal { - font-weight: bolder; -} -</pre> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Si más de una</span> <span class="hps">regla se aplica a</span> <span class="hps">un elemento</span> <span class="hps">y especifica</span> <span class="hps">la misma propiedad,</span> <span class="hps alt-edited">entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da prioridad</span> <span class="hps">a la regla que</span> <span class="hps">tiene el</span> <span class="hps">selector más específico</span><span>.</span> <span class="hps">Un selector</span> <code><em><strong><span class="hps">ID</span> </strong></em></code><span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector de <em><strong><code>class</code></strong></em></span><span>,</span> <span class="hps">que a su vez</span> <span class="hps">es más específico que</span> <span class="hps">un</span> <span class="hps alt-edited">selector (<strong>tag</strong>) de etiquetas</span><span>.</span></span></p> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">También se pueden combinar</span> <span class="hps">selectores</span><span>, haciendo un</span> <span class="hps">selector más específico</span><span>.</span></span><br> - <br> - Por ejemplo, el selector <strong><em><code>.key</code></em></strong> selecciona <span id="result_box" lang="es"><span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <code><em><strong><span class="hps">key</span> </strong></em></code>como <span class="hps alt-edited">nombre de clase (<strong><em><code>class</code></em></strong></span></span>). El selector <code><em><strong>p</strong></em>.key</code> <span id="result_box" lang="es"><span class="hps">selecciona</span> <span class="hps">sólo el elemento</span></span> {{ HTMLElement("p") }} que tiene de nombre <em><strong><code>key</code></strong></em>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Usted no esta </span><span class="hps">limitado a los dos</span> <span class="hps">atributos especiales</span><span>, </span></span><em><strong><code>class</code> </strong></em><span lang="es"><span class="hps">e <em><code><strong>id</strong></code></em></span><span>.</span> Se p<span class="hps">uede especificar</span> <span class="hps">otros atributos</span> <span class="hps">mediante corchetes</span><span>.</span> <span class="hps">Por ejemplo</span><span>, el selector</span> <span class="hps atn">[</span></span><strong><em><code>type='button'</code></em></strong><span lang="es"><span>] selecciona</span> <span class="hps">todos los</span> <span class="hps">elementos que tienen</span> <span class="hps">un atributo de tipo</span> <span class="hps">con el </span> <span class="hps">valor </span></span><strong><em><code>button</code></em></strong><span lang="es"><span>.</span></span></p> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Si</span> <span class="hps">la hoja de estilo</span> <span class="hps">tiene reglas</span> <span class="hps">en conflicto</span> <span class="hps">y son</span> <span class="hps">igualmente específicas</span><span>, entonces</span> <span class="hps alt-edited">el CSS</span> <span class="hps">da</span> <span class="hps">prioridad a</span> <span class="hps alt-edited">la regla que</span> <span class="hps alt-edited">está</span> <span class="hps alt-edited">después en</span> <span class="hps">la hoja de estilos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Cuando</span> <span class="hps">usted tiene un problema</span> <span class="hps alt-edited">con las reglas</span> <span class="hps">en conflicto,</span> <span class="hps alt-edited">trate de resolverlo</span> <span class="hps">haciendo</span> <span class="hps">una de las</span> <span class="hps">normas más específicas</span><span>, para que</span> <span class="hps alt-edited">tenga </span><span class="hps">prioridad.</span> <span class="hps">Si usted no puede</span> <span class="hps">hacer esto</span><span>, trate de mover</span> <span class="hps">una de las reglas</span> mas <span class="hps alt-edited">cerca del</span> <span class="hps">final de</span> <span class="hps">la hoja de estilos</span> <span class="hps">para que tenga</span> la <span class="hps">prioridad.</span></span></p> - -<h3 id="Las_pseudo-clases_de_los_selectores"><span class="short_text" id="result_box" lang="es"><span class="hps atn">Las pseudo-</span><span>clases de</span> los <span class="hps">selectores </span></span></h3> - -<p><span id="result_box" lang="es"><span class="hps">Una</span> <span class="hps">pseudo-clase </span></span> <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="en-US/docs/Web/Guide/CSS/Pseudo-classes">pseudo-class</a><span lang="es"> <span class="hps alt-edited">es en CSS</span> <span class="hps">una palabra clave</span> <span class="hps">añadida a</span> <span class="hps">los selectores,</span> <span class="hps">que especifica</span> <span class="hps">un estado especial</span> <span class="hps">del elemento</span> <span class="hps">a seleccionar.</span> <span class="hps">Por ejemplo</span> <span class="hps atn">{</span><span class="atn">{</span><span>Css</span> <span class="hps">Href</span> <span class="hps atn">(</span><span class="hps atn">"</span><span>: hover</span><span>")}</span><span>}</span> <span class="hps">aplicará</span> <span class="hps">un estilo</span> <span class="hps">cuando el</span> <span class="hps">usuario se desplaza sobre</span> <span class="hps">el elemento especificado</span> <span class="hps alt-edited">mediante el selector</span></span>.</p> - -<p><span id="result_box" lang="es"><span class="hps">Las </span></span><code>Pseudo-classes</code><span lang="es"><span>,</span> <span class="hps">junto con</span> <span class="hps">los <code>pseudo-elements</code></span><span>,</span> <span class="hps">permiten aplicar</span> <span class="hps">un estilo</span> <span class="hps">a un elemento</span> <span class="hps">no sólo</span> <span class="hps">en relación con</span> <span class="hps">el contenido</span> <span class="hps">de</span> <span class="hps">la estructura del documento</span><span>,</span> <span class="hps">sino también en relación</span> <span class="hps">a los factores externos</span><span>, como</span> <span class="hps">la historia del</span> <span class="hps atn">navegador </span><span>por ejemplo:</span><span class="hps atn"> (</span><span class="atn">{</span><span class="atn">{</span><span>href</span> <span class="hps">css</span> <span class="hps atn">(</span><span class="hps atn">"</span><span class="hps">: visited</span> <span class="hps">")}</span><span>}</span><span>, )</span><span>,</span> <span class="hps">el estado de</span> <span class="hps">su contenido</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>ref</span> <span class="hps">css</span> <span class="hps atn">(</span><span>"</span><span>: </span></span>:checked"<span lang="es"><span class="hps">)}</span><span>} en</span> <span class="hps">algunos</span> <span class="hps">elementos de formulario</span><span>)</span><span>,</span> <span class="hps">o</span> <span class="hps">la posición del</span> <span class="hps">ratón</span> <span class="hps">(como</span> <span class="hps atn">{</span><span class="atn">{</span><span>cssxref</span> <span class="hps">("</span></span>:hover<span lang="es"> <span class="hps">")}</span><span>}</span> <span class="hps">que le permite saber</span> <span class="hps">si</span> <span class="hps">el ratón está sobre</span> <span class="hps">un elemento o</span> <span class="hps">no).</span> <span class="hps">Para ver</span> <span class="hps">una lista completa de</span> <span class="hps">selectores</span><span>,</span> <span class="hps">visite</span> <span class="hps">especificación</span> <span class="hps">CSS3</span> <span class="hps">Selectores</span> <span class="hps">de trabajo </span></span> <a class="external" href="http://www.w3.org/TR/selectors/#selectors" rel="external nofollow" title="CSS3 Selectors working spec">CSS3 Selectors working spec</a>.</p> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Sintaxis</span></span></div> - -<pre class="brush:css">selector:pseudo-class { - property: value; -} -</pre> -</div> - -<h4 id="Listado_de_pseudo-classes">Listado de pseudo-classes:</h4> - -<ul> - <li>{{ Cssxref(":link") }}</li> - <li>{{ Cssxref(":visited") }}</li> - <li>{{ Cssxref(":active") }}</li> - <li>{{ Cssxref(":hover") }}</li> - <li>{{ Cssxref(":focus") }}</li> - <li>{{ Cssxref(":first-child") }}</li> - <li>{{ Cssxref(":last-child") }}</li> - <li>{{ Cssxref(":nth-child") }}</li> - <li>{{ Cssxref(":nth-last-child") }}</li> - <li>{{ Cssxref(":nth-of-type") }}</li> - <li>{{ Cssxref(":first-of-type") }}</li> - <li>{{ Cssxref(":last-of-type") }}</li> - <li>{{ Cssxref(":empty") }}</li> - <li>{{ Cssxref(":target") }}</li> - <li>{{ Cssxref(":checked") }}</li> - <li>{{ Cssxref(":enabled") }}</li> - <li>{{ Cssxref(":disabled") }}</li> -</ul> - -<h2 id="Información_Los_selectores_basados_en_relaciones_(relationships)"><span id="result_box" lang="es"><span class="hps">Información:</span> <span class="hps">Los selectores</span> <span class="hps">basados en relaciones </span></span>(relationships)</h2> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">El CSS</span> <span class="hps">tiene algunas</span> <span class="hps">formas de seleccionar</span> <span class="hps">elementos en función de</span> <span class="hps">las</span> <span class="hps">relaciones entre los elementos</span><span>.</span> <span class="hps">Usted</span> <span class="hps">puede utilizar estas para</span> <span class="hps">hacer</span> <span class="hps">selectores</span> <span class="hps alt-edited">que sean más específicos</span><span>.</span></span></p> - -<table id="relselectors"> - <caption><span class="short_text" id="result_box" lang="es"><span class="hps">Selectores</span> <span class="hps">comunes</span> <span class="hps alt-edited">basados en relaciones</span></span></caption> - <tbody> - <tr> - <td style="width: 10em;"><strong>Selector</strong></td> - <td><strong>Selects</strong></td> - </tr> - <tr> - <td><code>A E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un descendiente de</span> <span class="hps">un elemento</span> <span class="hps atn">A (</span><span>que</span> <span class="hps">es:</span> <span class="hps alt-edited">un hijo o</span> <span class="hps alt-edited">un hijo</span> <span class="hps alt-edited">de un hijo</span> <span class="hps">etc.</span><span>)</span></span></td> - </tr> - <tr> - <td><code>A > E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es un hijo de</span> <span class="hps">un elemento A</span></span></td> - </tr> - <tr> - <td><code>E:first-child</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es el primer</span> <span class="hps">hijo de su padre</span></span></td> - </tr> - <tr> - <td><code>B + E</code></td> - <td><span id="result_box" lang="es"><span class="hps">Cualquier</span> <span class="hps">elemento E</span> <span class="hps">que</span> <span class="hps">es</span> <span class="hps">el siguiente hermano</span> <span class="hps">de un elemento</span> <span class="hps">B</span> <span class="hps">(es decir</span><span>:</span> <span class="hps">el</span> <span class="hps">próximo hijo</span> <span class="hps">del mismo</span> <span class="hps">padre)</span></span></td> - </tr> - </tbody> -</table> - -<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede combinarlas para</span> <span class="hps">expresar relaciones</span> <span class="hps">complejas</span><span>.</span><br> - <br> - <span class="hps">También puede utilizar</span> <span class="hps">el símbolo</span> <span class="hps">asterisco </span></span><span lang="es"> <span class="hps">(*</span><span>)</span> <span class="hps alt-edited">para significar</span> <span class="hps atn">"</span><span>cualquier elemento</span><span>"</span><span>.</span></span></p> - -<div class="tuto_example"> -<div class="tuto_type">Ejemplo</div> - -<p><span id="result_box" lang="es"><span class="hps">Una tabla HTML</span> <span class="hps">tiene</span> <span class="hps">un atributo <strong><em><code>id</code></em></strong></span><span>,</span> <span class="hps">pero sus</span> <span class="hps">filas y</span> <span class="hps alt-edited">las celdas</span> <span class="hps">no tienen</span> <span class="hps">identificadores individuales</span><span>:</span></span></p> - -<pre class="brush: html"><table id="data-table-1"> -... -<tr> -<td>Prefix</td> -<td>0001</td> -<td>default</td> -</tr> -... -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Estas</span> <span class="hps">reglas hacen</span> <span class="hps">que la primera celda de</span> <span class="hps">cada fila</span> sea en <span class="hps">negrita,</span> <span class="hps">y</span> <span class="hps">la segunda celda</span> de <span class="hps">cada fila</span> en la familia de fuente <span class="hps"> monoespaciado</span><span>.</span> <span class="hps alt-edited">Esto</span> <span class="hps alt-edited">sólo afecta a</span> <span class="hps">una</span> <span class="hps alt-edited">tabla concreta</span> <span class="hps alt-edited">del documento:</span></span></p> - -<pre class="brush:css"> #data-table-1 td:first-child {font-weight: bolder;} - #data-table-1 td:first-child + td {font-family: monospace;} -</pre> - -<p><span class="short_text" id="result_box" lang="es"><span class="hps">El resultado</span> <span class="hps">se ve así:</span></span></p> - -<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td> - <table style="width: 18em; margin-right: 2em;"> - <tbody> - <tr> - <td><strong>Prefix</strong></td> - <td><code>0001</code></td> - <td>default</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> -</div> - -<div class="tuto_details"> -<div class="tuto_type"><span id="result_box" lang="es"><span class="hps alt-edited">Más</span> <span class="hps">detalles</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">La manera mas </span><span class="hps">habitual es hacer</span><span class="hps alt-edited"> que un</span> <span class="hps alt-edited">selector sea más específico</span><span>, entonces</span> aumentara <span class="hps">su prioridad.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Si utiliza</span> <span class="hps">estas técnicas</span><span>, se evita</span> <span class="hps">la necesidad de especificar</span> <span class="hps">la</span></span> <strong><em><code>class</code> </em></strong><span id="result_box" lang="es"><span class="hps">o</span> <span class="hps">atributos <strong><em><code>ID</code></em></strong></span></span><strong><em><code> </code></em></strong><span id="result_box" lang="es"><span class="hps alt-edited">en muchas</span> <span class="hps">etiquetas</span> <span class="hps alt-edited">del documento.</span> <span class="hps">En su lugar</span><span>, CSS</span> <span class="hps">hace este trabajo.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En grandes</span> <span class="hps">diseños</span> <span class="hps">donde la velocidad es</span> <span class="hps">importante</span><span>,</span> <span class="hps">usted puede hacer sus</span> <span class="hps">hojas de estilo</span> <span class="hps">más eficiente</span> <span class="hps">evitando</span> <span class="hps">reglas complejas</span> <span class="hps">que dependen de</span> <span class="hps">relaciones entre los elementos</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Para más ejemplos</span> <span class="hps">sobre</span> <span class="hps">las tablas</span><span>,</span> <span class="hps">ver</span></span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Tables</a> <span id="result_box" lang="es"><span class="hps">en</span> <span class="hps">la página</span> <span class="hps">CSS Reference</span><span>.</span></span></p> -</div> - -<h2 id="Action_Using_class_and_ID_selectors">Action: Using class and ID selectors</h2> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Edite su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps">y duplicar</span> <span class="hps">el</span> <span class="hps">párrafo</span> <span class="hps">copiando y</span> <span class="hps">pegando</span><span>.</span></span></li> - <li><span id="result_box" lang="es"><span class="hps">A continuación, agregue los atibutos </span></span> <strong>id</strong> y <strong>class</strong> <span id="result_box" lang="es"><span class="hps">a</span> <span class="hps">la primera copia</span><span>,</span> <span class="hps">y</span> <span class="hps">un atributopara</span> <span class="hps">la segunda copia</span> <span class="hps">como se muestra</span> <span class="hps">a continuación.</span> <span class="hps">Alternativamente</span><span>, copie</span> <span class="hps">y pegue el</span> <span class="hps">archivo entero</span> <span class="hps">de nuevo</span><span>:</span></span> - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p id="first"> - <strong class="carrot">C</strong>ascading - <strong class="spinach">S</strong>tyle - <strong class="spinach">S</strong>heets - </p> - <p id="second"> - <strong>C</strong>ascading - <strong>S</strong>tyle - <strong>S</strong>heets - </p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplazar todo el contenido</span> <span class="hps">con</span><span>:</span></span> - <pre class="brush:css">strong { color: red; } -.carrot { color: orange; } -.spinach { color: green; } -#first { font-style: italic; } -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps">actualizar el navegador</span> <span class="hps">para ver el resultado</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - - <p><span id="result_box" lang="es"><span class="hps alt-edited">Puede intentar</span> <span class="hps">reordenar las</span> <span class="hps">líneas</span> <span class="hps">en el archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">de mostrar</span> <span class="hps alt-edited">de que el orden</span> <span class="hps alt-edited">no efecta.</span></span></p> - - <p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">selectores de <code>class</code></span></span><strong><em><code>.carrot</code></em></strong> and <em><strong><code>.spinach</code></strong></em> <span id="result_box" lang="es"><span class="hps">tienen prioridad sobre</span> <span class="hps">el selector de etiquetas</span></span> <em><strong><code>strong</code></strong></em>.</p> - - <p>El <strong><code><em>ID </em></code></strong>selector<code> #<em>first</em></code><em> </em><span id="result_box" lang="es"><span class="hps">tiene prioridad sobre</span> <span class="hps">los</span> <span class="hps">selectores de clase</span> <span class="hps">y</span> <span class="hps">etiqueta</span><span>.</span></span></p> - </li> -</ol> - -<div class="tuto_example"> -<div class="tuto_type"><span class="short_text" id="result_box" lang="es"><span class="hps">Desafíos</span></span></div> - -<ol> - <li><span id="result_box" lang="es"><span class="hps">Sin cambiar</span> <span class="hps">su archivo</span> <span class="hps">HTML</span><span>,</span> <span class="hps alt-edited">agregue una sola</span> <span class="hps">regla para</span> <span class="hps">su archivo</span> <span class="hps">CSS</span> <span class="hps alt-edited">que mantenga</span> <span class="hps">todas las letras</span> <span class="hps">iniciales que</span> <span class="hps">mismo color que</span> <span class="hps">están ahora,</span> <span class="hps">pero</span> <span class="hps alt-edited">hace que</span> <span class="hps">todo el</span> <span class="hps">otro texto</span> <span class="hps">en el segundo párrafo</span> <span class="hps alt-edited">sea azul</span><span>:</span></span> - - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> - <li><span id="result_box" lang="es"><span class="hps alt-edited">Ahora cambie</span> <span class="hps">la regla</span> <span class="hps">que acaba de agregar</span> <span class="hps atn">(</span><span>sin cambiar nada más</span><span>)</span><span>,</span> <span class="hps">para hacer</span> <span class="hps alt-edited">que el primer párrafo</span> <span class="hps alt-edited">sea azul</span> <span class="hps">también</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> - <tbody> - <tr> - <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> - </tr> - <tr> - <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> - </tr> - </tbody> - </table> - </li> -</ol> - -<div class="tuto_details" id="tutochallenge"> -<div class="tuto_type">Possible solution</div> - -<ol> - <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below: - - <pre class="brush: css">#second { color: blue; } -</pre> - A more specific selector, <code>p#second</code> also works.</li> - <li>Change the selector of the new rule to be a tag selector using <code>p</code>: - <pre class="brush: css">p { color: blue; } -</pre> - </li> -</ol> -<a class="hideAnswer" href="#challenge">Hide solution</a></div> -<a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></div> - -<h2 id="Action_Using_pseudo-classes_selectors">Action: Using pseudo-classes selectors</h2> - -<ol> - <li><span class="short_text" id="result_box" lang="es"><span class="hps alt-edited">Cree un</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span> - - <pre class="brush: html"><!doctype html> -<html> - <head> - <meta charset="UTF-8"> - <title>Sample document</title> - <link rel="stylesheet" href="style1.css"> - </head> - <body> - <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p> - </body> -</html> -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Ahora edite</span> <span class="hps">su archivo</span> <span class="hps">CSS</span><span>.</span> <span class="hps alt-edited">Reemplace todo el contenido</span> <span class="hps">con</span><span>:</span></span> - <pre class="brush: css">a.homepage:link, a.homepage:visited { - padding: 1px 10px 1px 10px; - color: #fff; - background: #555; - border-radius: 3px; - border: 1px outset rgba(50,50,50,.5); - font-family: georgia, serif; - font-size: 14px; - font-style: italic; - text-decoration: none; -} - -a.homepage:hover, a.homepage:focus, a.homepage:active { - background-color: #666; -} -</pre> - </li> - <li><span id="result_box" lang="es"><span class="hps">Guarde los archivos</span> <span class="hps">y</span> <span class="hps alt-edited">actualice el explorador</span> <span class="hps">para ver el resultado</span> <span class="hps atn">(</span><span>poner</span> <span class="hps">el ratón sobre el</span> <span class="hps">siguiente enlace para ver</span> <span class="hps">el efecto</span><span>)</span><span>:</span></span> - <table style="border: 2px outset #36b; padding: 1em;"> - <tbody> - <tr> - <td>Go to our <a class="tutospecial" href="#" title="Home page">Home page</a><span style="display: none;"> </span><span style="display: none;"> </span></td> - </tr> - </tbody> - </table> - </li> -</ol> - -<h2 id="Acción_Uso_de_selectores_basados_en_las_relaciones_y_pseudo-clases"><span id="result_box" lang="es"><span class="hps">Acción</span><span>: Uso de</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Con</span> <span class="hps">selectores</span> <span class="hps">basados</span> <span class="hps">en las relaciones y</span> <span class="hps">pseudo-clases</span> <span class="hps">puede crear</span> <span class="hps">algoritmos </span></span><span id="result_box" lang="es"><span class="hps">complejos</span></span><span id="result_box" lang="es"> en <span class="hps alt-edited">cascada</span> <span class="hps">.</span> <span class="hps">Esto es una técnica</span> <span class="hps">común que se utiliza</span><span>, por ejemplo,</span> <span class="hps">con el fin de</span> <span class="hps">crear menús</span> <span class="hps">desplegables</span> <span class="hps">en </span></span><span id="result_box" lang="es"><span class="hps">puro</span> </span><span id="result_box" lang="es"><span class="hps">CSS</span> <span class="hps">(es decir</span> <span class="hps">sólo</span> <span class="hps">CSS,</span> <span class="hps">sin necesidad de utilizar</span></span> <a href="/en-US/docs/Web/JavaScript" title="en-US/docs/Web/JavaScript">JavaScript</a>). <span id="result_box" lang="es"><span class="hps">La esencia</span> <span class="hps">de esta técnica es</span> <span class="hps">la creación de</span> <span class="hps">una regla como</span> <span class="hps">la siguiente</span><span>:</span></span></p> - -<pre class="brush: css">div.menu-bar ul ul { - display: none; -} - -div.menu-bar li:hover > ul { - display: block; -}</pre> - -<p><span id="result_box" lang="es"><span class="hps alt-edited">Aplicararemos a</span> <span class="hps">una estructura de</span> <span class="hps alt-edited">HTML como el siguiente</span><span>:</span></span></p> - -<pre class="brush: html"><div class="menu-bar"> - <ul> - <li> - <a href="example.html">Menu</a> - <ul> - <li> - <a href="example.html">Link</a> - </li> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li> - <a class="menu-nav" href="example.html">Submenu</a> - <ul> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - <li><a href="example.html">Link</a></li> - </ul> - </li> - </ul> - </li> - </ul> -</div> -</pre> - -<p><span id="result_box" lang="es"><span class="hps">Vea nuestro</span> <span class="hps">ejemplo completo</span></span><a class="internal" href="https://mdn.mozillademos.org/files/3700/css_dropdown_menu.html" title="css_dropdown_menu.html">CSS-based dropdown menu example</a> <span id="result_box" lang="es"><span class="hps">para una posible</span> referencia<span>.</span></span></p> - -<h2 id="¿Y_ahora_qué"><span id="result_box" lang="es"><span class="hps">¿Y ahora qué</span><span>?</span></span></h2> - -<p><span id="result_box" lang="es"><span class="hps">Su</span> <span class="hps alt-edited">hoja de estilos</span> <span class="hps alt-edited">de muestra</span> <span class="hps">está empezando a parecer</span> <span class="hps alt-edited">densa</span> <span class="hps alt-edited">y complicada.</span> <span class="hps">La</span> <span class="hps">siguiente sección</span> <span class="hps">describe</span> <span class="hps">maneras de hacer</span> <span class="hps">CSS</span> <span class="hps">más fácil de leer</span><span>.</span> </span> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">easier to read</a>.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}</p> diff --git a/files/es/web/css/-webkit-mask-clip/index.html b/files/es/web/css/mask-clip/index.html index 5110c18d6c..5110c18d6c 100644 --- a/files/es/web/css/-webkit-mask-clip/index.html +++ b/files/es/web/css/mask-clip/index.html diff --git a/files/es/web/css/-webkit-mask-image/index.html b/files/es/web/css/mask-image/index.html index 60434d3e6a..60434d3e6a 100644 --- a/files/es/web/css/-webkit-mask-image/index.html +++ b/files/es/web/css/mask-image/index.html diff --git a/files/es/web/css/-webkit-mask-origin/index.html b/files/es/web/css/mask-origin/index.html index 8e75d01a39..8e75d01a39 100644 --- a/files/es/web/css/-webkit-mask-origin/index.html +++ b/files/es/web/css/mask-origin/index.html diff --git a/files/es/web/css/-webkit-mask-position/index.html b/files/es/web/css/mask-position/index.html index 60a7231da3..60a7231da3 100644 --- a/files/es/web/css/-webkit-mask-position/index.html +++ b/files/es/web/css/mask-position/index.html diff --git a/files/es/web/css/-webkit-mask-repeat/index.html b/files/es/web/css/mask-repeat/index.html index 316bec182e..316bec182e 100644 --- a/files/es/web/css/-webkit-mask-repeat/index.html +++ b/files/es/web/css/mask-repeat/index.html diff --git a/files/es/web/css/-webkit-mask/index.html b/files/es/web/css/mask/index.html index 50dd997bb0..50dd997bb0 100644 --- a/files/es/web/css/-webkit-mask/index.html +++ b/files/es/web/css/mask/index.html diff --git a/files/es/web/guide/css/probando_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html index dac4330054..dac4330054 100644 --- a/files/es/web/guide/css/probando_media_queries/index.html +++ b/files/es/web/css/media_queries/testing_media_queries/index.html 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 +--- +<div>{{cssref}}</div> + +<p class="seoSummary">Las <strong>media queries</strong> (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).</p> + +<p>Se utilizan para:</p> + +<ul> + <li>Aplicar estilos condicionales con las <a href="/es/docs/Web/CSS/At-rule">reglas-at</a> {{cssxref("@media")}} e {{cssxref("@import")}} de <a href="/es/docs/Web/CSS">CSS</a>.</li> + <li>Indicar medios específicos en los elementos {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros elementos <a href="/es/docs/Web/HTML">HTML</a>.</li> + <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Testear y monitorizar los estados de los medios</a> usando los métodos de javascript {{domxref("Window.matchMedia()")}} y {{domxref("MediaQueryList.addListener()")}}.</li> +</ul> + +<h2 id="Sintaxis">Sintaxis</h2> + +<p> </p> + +<p>Las <em>media queries</em> consisten de un tipo de medio opcional y una o más expresiones de <em>características de medios</em>. Varias consultas se pueden combinar utilizando operadores lógicos. No distinguen entre mayúsculas y minúsculas.</p> + +<p>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 <em>media query</em> son "verdaderas". En este caso, se aplica los estilos correspondientes, siguiendo las reglas usuales de cascada.</p> + +<p>Las consultas sobre tipos de medios desconocidos son siempre falsas.</p> + +<p> </p> + +<pre class="brush: html"><code class="brush: html"><!-- CSS media query on a link element --> +</code><link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> + +<code class="brush: html"><!-- CSS media query within a style sheet --> +<style> +@media (max-width: 600px) { + .facet_sidebar { + display: none; + } +} +</style></code> +</pre> + +<h3 id="Media_Types">Media Types</h3> + +<p>Los <em>Media Types</em> (tipos de medios) describen la categoría general de un dispositivo. Excepto cuando se utilizan los operadores lógicos <code>not</code> o <code>only</code>, el tipo de medio es opcional y será interpretada como <code>all</code>.</p> + +<dl> + <dt><code id="all">all</code></dt> + <dd>Apto para todos los dispositivos.</dd> + <dt><code id="print">print</code></dt> + <dd>Destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresión. </dd> + <dt><code id="screen">screen</code></dt> + <dd>Destinado principalmente a las pantallas.</dd> + <dt><code id="speech">speech</code></dt> + <dd>Destinado a sintetizadores de voz.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>Tipos de medios depreciados:</strong> CSS2.1 y <a href="/es/docs/">Media Queries 3</a> definieron varios tipos de medios adicionales (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code> y <code>aural</code>), pero fueron desaprobados en <a href="https://drafts.csswg.org/mediaqueries/#media-types">Media Queries 4</a> y no deberían ser usados. El tipo <code>aural</code> ha sido reemplazado por <code>speech</code>, que es similar.</p> +</div> + +<h3 id="Operadores_Lógicos">Operadores Lógicos</h3> + +<p>Se pueden redactar queries utilizando operadores lógicos, incluyendo <code>not</code>, <code>and</code>, y <code>only</code>.</p> + +<p>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".</p> + +<h4 id="and">and</h4> + +<p>El operador <code>and</code> es usado para colocar juntas múltiples funciones multimedia. Un query básico con el tipo de medio especificado como <code>all</code> puede lucir así:</p> + +<pre class="brush: css">@media (min-width: 700px) { ... }</pre> + +<p>Si usted quiere aplicar ese query solo si la pantalla esta en formato horizontal, usted puede utilizar el operador <code>and</code> y colocar la siguiente cadena:</p> + +<pre class="brush: css">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>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:</p> + +<pre class="brush: css">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> + +<p>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.</p> + +<h4 id="lista_separada_por_comas">lista separada por comas</h4> + +<p>Las listas separadas por comas se comportan como el operador <code>or</code> 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.</p> + +<p>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:</p> + +<pre class="brush: css">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> + +<p>Por lo tanto, si esta en una <code>screen</code> 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 <code>@media all and (min-width: 700px)</code> podría retornar verdadero a pesar del hecho de que la pantalla falle la verificación tipo de medio del <code>handheld</code> en la segunda query. Por otra parte si estuviese en un <code>handheld</code> 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.</p> + +<h4 id="not">not</h4> + +<p>El operador <code>not</code> aplica a todo el query y retorna verdadero si es posible y sino retorna falso (como por ejemplo <code>monochrome</code> en un monitor a color o una ventana con un ancho mínimo de <code>min-width: 700px</code> en un monitor de 600px). Un <code>not</code> 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 <code>not</code> no puede ser usado para negar un query individual, solo para un query completo. Por ejemplo<span style="line-height: 1.572;">, el </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> en el siguiente query es evaluado al final:</span></p> + +<pre class="brush: css" style="font-size: 14px;">@media not all and (monochrome) { ... } +</pre> + +<p>Esto significa que el query es evaluado de la siguiente forma:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not (all and (monochrome)) { ... } +</pre> + +<p>... y no de esta forma:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> + +<p>Otro Ejemplo:</p> + +<pre class="brush: css" style="font-size: 14px;">@media not screen and (color), print and (color) +</pre> + +<p>Es evaluado de la siguiente forma:</p> + +<pre class="brush: css" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> + +<h4 id="only">only</h4> + +<p><span style="line-height: 21px;">El operador </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> previene que navegadores antiguos que no soportan queries con funciones apliquen los estilos asignados:</span></p> + +<pre class="brush: html"><link rel="stylesheet" media="only screen and (color)" href="Ejemplo.css" /> +</pre> + +<h3 id="Pseudo-BNF">Pseudo-BNF</h3> + +<pre class="syntaxbox">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</pre> + +<p>Los queries son insensibles a las mayúsculas o minúsculas. Media queries que contengan tipos de medios desconocidos siempre retornaran falso.</p> + +<div class="note"><strong>Nota:</strong> Los paréntesis son requeridos alrededor de las expresiones, no utilizarlos es un error.</div> + +<h2 id="Funciones_Multimedia">Funciones Multimedia</h2> + +<p>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.</p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="color">color</h3> + +<p><strong>Valor:</strong> {{cssxref("<color>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> si</p> + +<p>Indica el numero de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0.</p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h4 id="Ejemplos">Ejemplos</h4> + +<p>Para aplicar una hoja de estilo a todos los dispositivos que soporten colores:</p> + +<pre class="brush: css">@media all and (color) { ... } +</pre> + +<p>Para aplicar una hoja de estilo a dispositivos con al menos 4 bits por componente de color:</p> + +<pre class="brush: css">@media all and (min-color: 4) { ... } +</pre> + +<h3 id="color-index">color-index</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p> + +<p>Indica el numero de entradas en la tabla de colores para el dispositivo de salida.</p> + +<h4 id="Ejemplos_2">Ejemplos</h4> + +<p>Para indicar que una hoja de estilo debe aplicarse a todos los dispositivos utilizando índices de color, usted puede hacer esto:</p> + +<pre class="brush: css">@media all and (color-index) { ... } +</pre> + +<p>Para aplicar una hoja de estilo a un dispositivo con un índice de al menos 256 colores:</p> + +<pre class="brush: html"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> +</pre> + +<h3 id="aspect-ratio">aspect-ratio</h3> + +<p><strong>Valor:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Acepta prefijos min/max</strong><strong>:</strong> sí</p> + +<p>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).</p> + +<h4 id="Ejemplo">Ejemplo</h4> + +<p>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.</p> + +<pre class="brush: css">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> + +<p>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.</p> + +<h3 id="device-aspect-ratio">device-aspect-ratio</h3> + +<p><strong>Valor:</strong> {{cssxref("<ratio>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>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).</p> + +<h4 id="Ejemplo_2">Ejemplo</h4> + +<p>El siguiente código selecciona una hoja de estilo especial para ser aplicada en pantallas panorámicas ("widescreen").</p> + +<pre class="brush: css">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> + +<p>Este selecciona el estilo cuando la proporción de aspecto sea 16:9 o 16:10.</p> + +<h3 id="device-height">device-height</h3> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>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).</p> + +<h3 id="device-width">device-width</h3> + +<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>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).</p> + +<h4 id="Ejemplo_3">Ejemplo</h4> + +<p>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:</p> + +<pre class="brush: html"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /> +</pre> + +<h3 id="grid">grid</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> all<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<h4 id="Ejemplo_4">Ejemplo</h4> + +<p>Para aplicar una hoja de estilo a un dispositivo portátil con una pantalla de 15 caracteres o mas estrecha:</p> + +<pre class="brush: css">@media handheld and (grid) and (max-width: 15em) { ... } +</pre> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="height">height</h3> + +<p><strong>Valor:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>La función <code>height</code> 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).</p> + +<div class="note"><strong>Nota:</strong> 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 <code>width</code> y <code>height</code> del query.</div> + +<h3 id="monochrome">monochrome</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>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.</p> + +<h4 id="Ejemplos_3">Ejemplos</h4> + +<p>Para aplicar una hoja de estilo a todos los dispositivos monocromáticos:</p> + +<pre class="brush: css">@media all and (monochrome) { ... } +</pre> + +<p>Para aplicar una hoja de estilo a un dispositivo monocromático con al menos 8 bits por pixel:</p> + +<pre class="brush: css">@media all and (min-monochrome: 8) { ... } +</pre> + +<h3 id="orientation">orientation</h3> + +<p><strong>Valor</strong><strong>:</strong> <code>landscape</code> | <code>portrait</code><br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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).</p> + +<h4 id="Ejemplo_5">Ejemplo</h4> + +<p>Para aplicar una hoja de estilo solo en orientación vertical (portrait):</p> + +<pre class="brush: css">@media all and (orientation: portrait) { ... }</pre> + +<h3 id="resolution">resolution</h3> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<resolution>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>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).</p> + +<h4 id="Ejemplo_6">Ejemplo</h4> + +<p>Para aplicar una hoja de estilo a dispositivos con al menos 300 dpi de resolución:</p> + +<pre class="brush: css">@media print and (min-resolution: 300dpi) { ... } +</pre> + +<p>Para reemplazar la vieja sintaxis <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2)</span>:</p> + +<pre class="brush: css">@media screen and (min-resolution: 2dppx) { ... }</pre> + +<h3 id="scan">scan</h3> + +<p><strong>Valor</strong><strong>:</strong> <code>progressive</code> | <code>interlace</code><br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/TV")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>Describe el proceso de exploración de televisión de los dispositivos de salida.</p> + +<h4 id="Ejemplo_7">Ejemplo</h4> + +<p>Para aplicar una hoja de estilo solo a televisores de exploración progresiva:</p> + +<pre class="brush: css">@media tv and (scan: progressive) { ... } +</pre> + +<h3 id="width">width</h3> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<length>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}, {{cssxref("Media/Tactile")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>La función <code>width</code> 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).</p> + +<div class="note"><strong>Nota:</strong> 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 <code>width</code> y <code>height</code> del query.</div> + +<h4 id="Ejemplos_4">Ejemplos</h4> + +<p>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:</p> + +<pre class="brush: css">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } +</pre> + +<p>Esta query especifica una hoja de estilo para ser aplicada a un medio impreso con un ancho mayor a 8.5 pulgadas:</p> + +<pre class="brush: html"><link rel="stylesheet" media="print and (min-width: 8.5in)" + href="http://foo.com/mystyle.css" /> +</pre> + +<p>Esta query especifica una hoja de estilo para ser utilizada cuando la ventana tiene un ancho entre 500 y 800 pixeles:</p> + +<pre class="brush: css">@media screen and (min-width: 500px) and (max-width: 800px) { ... } + +</pre> + +<ul> +</ul> + +<h2 id="Específico_de_Mozilla">Específico de Mozilla</h2> + +<p>Mozilla ofrece varias funciones especificas de Gecko. Algunas de estas pueden ser propuestas como funcines oficiales.</p> + +<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>Si el dispositivo acepta que haya imágenes en menús, el valor es 1; de otro modo sera 0. Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(images-in-menus)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>Si el usuario esta usando Maemo con el tema original, esto sera 1; Si esta usando el nuevo tema Fremantle, sera 0.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(maemo-classic)") }}</p> + +<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<number>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> sí</p> + +<p>Da el numero de pixeles del dispositivo por pixeles de CSS.</p> + +<div class="geckoVersionNote style-wrap"> +<p><strong>No use esta función. </strong></p> + +<p>En cambio use la función <code>resolution</code> con la unidad <code>dppx</code>.<br> + <br> + <code>-moz-device-pixel-ratio</code> puede ser usada para compatibilidad con Firefox 16 o anterior; y <code>-webkit-device-pixel-ratio</code> con navegadores basados en WebKit que no soporten <code>dppx</code>.</p> + +<p>Ejemplo:</p> + +<pre class="brush: css">@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 */ </pre> + +<p>Vea este <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">articulo CSSWG </a>sobre buenas practicas para compatibilidad en relación a <code>resolution</code> y <code>dppx</code>.</p> +</div> + +<div class="note">Nota: Esta funcion multimedia tambien esta implementada en Webkit como <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. Los prefijos minimos y maximos de esta funcion implementados por Gecko se llaman asi: <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> y <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; y los mismos prefijos implementados por Webkit se llaman asi: <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> y <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> + +<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> + +<p><strong>Valor</strong><strong>:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8</code><br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>Indica que sistema operativo esta en uso actualmente. Actualmente solo es implementado en Windows. Sus posibles valores son:</p> + +<ul> + <li><code>windows-xp</code></li> + <li><code>windows-vista</code></li> + <li><code>windows-win7</code></li> + <li><code>windows-win8</code></li> + <li><code>windows-win10</code></li> +</ul> + +<p>Esto se hace para permitir a los skins y a algunos códigos funcionen mejor con el sistema operativo en el que se ejecutan.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>El valor sera 1 si el dispositivo soporta eventos táctiles (una pantalla táctil), de lo contrario el valor sera 0.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(touch-enabled)") }}.</p> + +<h4 id="Ejemplo_8">Ejemplo</h4> + +<p>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.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>El valor sera 1 si el usuario utiliza un windows sin temas visuales (modo clasico); de lo contrario el valor sera 0.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-classic)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>El valor sera 1 si el usuario utiliza windows con el compositor de ventanas DWM; de lo contrario el valor sera 0.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-compositor)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> + +<p><strong>Valor</strong><strong>:</strong> {{cssxref("<integer>")}}<br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>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.</p> + +<p>Esto corresponde a la <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudoclase</a>: {{ cssxref(":-moz-system-metric(windows-default-theme)") }}.</p> + +<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> + +<p><strong>Valor</strong><strong>:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> + <strong style="font-weight: bold;">Medio</strong><strong>:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<p>Indica cual tema de Windows esta en uso actualmente. Solo disponible para Windows. Sus posibles valores son:</p> + +<ul> + <li><code>aero</code></li> + <li><code>luna-blue</code></li> + <li><code>luna-olive</code></li> + <li><code>luna-silver</code></li> + <li><code>royale</code></li> + <li><code>generic</code></li> + <li><code>zune</code></li> +</ul> + +<p>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.</p> + +<h2 id="Específico_de_WebKit">Específico de WebKit</h2> + +<h3 id="-webkit-transform-3d">-webkit-transform-3d</h3> + +<p><strong>Vakir:</strong> {{cssxref("<integer>")}}<br> + <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<ul> + <li><a href="https://compat.spec.whatwg.org/#css-media-queries-webkit-transform-3d">Especificación</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-3d">Documentación</a></li> +</ul> + +<p>Si está soportado, el valor es 1, si no, el valor es 0.</p> + +<p>Ejemplo</p> + +<pre class="brush: css"><code>@media (-webkit-transform-3d) { + .foo { + transform-style: preserve-3d; + } +} + +@media (-webkit-transform-3d: 1) { + .foo { + transform-style: preserve-3d; + } +}</code></pre> + +<h3 id="-webkit-transform-2d">-webkit-transform-2d</h3> + +<p><strong>Valor:</strong> {{cssxref("<integer>")}}<br> + <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transform-2d">Documentación</a></li> +</ul> + +<p>Si está soportado, el valor es 1, si no, el valor es 0.</p> + +<h3 id="-webkit-transition">-webkit-transition</h3> + +<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> + <strong>Medio:</strong> {{cssxref("Media/Visual")}}<br> + <strong>Acepta prefijos min/max:</strong> no</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-transition">Documentación</a></li> +</ul> + +<p>Si está soportado, el valor es 1, si no, el valor es 0.</p> + +<h2 id="Compatibilidad_con_Navegadores">Compatibilidad con Navegadores</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>{{CompatChrome("21")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>{{CompatIE("9.0")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("4")}}</td> + </tr> + <tr> + <td><code>grid</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}} <sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>resolution</code></td> + <td>{{CompatChrome("29")}}</td> + <td>{{CompatGeckoDesktop("1.9.1")}} <sup>[2]</sup><br> + {{CompatGeckoDesktop("8.0")}} <sup>[3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scan</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}<sup>[4]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}<sup>[7]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transform-3d</code></td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatGeckoDesktop("49")}}<sup>[6]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>-webkit-transform-2d</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>-webkit-transition</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[5]</sup></td> + <td>{{CompatSafari("1.0")}}<sup>[5]</sup></td> + </tr> + <tr> + <td><code>display-mode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("47")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>grid</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>resolution</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>scan</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-min-device-pixel-ratio</code>, <code>-webkit-max-device-pixel-ratio</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transform-3d</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transform-2d</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>-webkit-transition</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>display-mode</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>grid</code> media type no está soportado</p> + +<p>[2] Soporta valores {{cssxref("<integer>")}}.</p> + +<p>[3] Soporta valores {{cssxref("<number>")}}, según la especificación.</p> + +<p>[4] <code>tv</code> media no está soportado</p> + +<p>[5] Ver {{WebKitBug(22494)}}.</p> + +<p>[6] Implementado por razones de compatibilidad web en Gecko 46.0 {{geckoRelease("46.0")}} tras tras cambiar <code>layout.css.prefixes.webkit</code> por defecto a <code>false</code> (ver {{bug(1239799)}}). Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p> + +<p>[7] Implementado como alias para <code>min--moz-device-pixel-ratio </code>y <code>max--moz-device-pixel-ratio</code> por razones de compatibilidad web in Gecko 45.5 {{geckoRelease("45.0")}} (ver {{bug(1176968)}}) tras cambiar <code>layout.css.prefixes.webkit</code> y <code>layout.css.prefixes.device-pixel-ratio-webkit</code> por defecto a <code>false</code>. Desde Gecko 49.0 {{geckoRelease("49")}} <code>layout.css.prefixes.webkit</code> por defecto es <code>true</code>.</p> + +<h2 id="Vea_también">Vea también</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">Especificación CSS 3 media query</a></li> + <li><a class="internal" href="/es/docs/Web/CSS/@media">Tipos de Medios</a></li> + <li><a href="/es/docs/Web/Guide/CSS/probando_media_queries">Usando media queries desde código</a></li> +</ul> diff --git a/files/es/web/css/referencia_css/mix-blend-mode/index.html b/files/es/web/css/mix-blend-mode/index.html index fc213a4ceb..fc213a4ceb 100644 --- a/files/es/web/css/referencia_css/mix-blend-mode/index.html +++ b/files/es/web/css/mix-blend-mode/index.html 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 ---- -<h2 id="Sumario" name="Sumario">Sumario</h2> -<p>El valor <i>normal</i> 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.</p> -<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> -<p>En la propiedad <code>font-style:</code> <code>normal</code> establece que el tipo de fuente no es <code>italic</code> ni <code>oblique</code>.</p> -<p>El la propiedad <code>font-size:</code> <code>normal</code>se establece al tamaño de la fuente al tamaño que esté establecido en el User Agent.</p> diff --git a/files/es/web/css/porcentaje/index.html b/files/es/web/css/percentage/index.html index c6629803fe..c6629803fe 100644 --- a/files/es/web/css/porcentaje/index.html +++ b/files/es/web/css/percentage/index.html 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 ---- -<h4 id="My_CSS_is_valid.2C_but_not_correctly_rendered" name="My_CSS_is_valid.2C_but_not_correctly_rendered"><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Mi CSS es válida, pero no se representa correctamente</span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores utilizan la declaración <code>DOCTYPE</code> 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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El uso de una declaración <code>DOCTYPE</code> correcta y moderna al inicio del código HTML mejorará el cumplimiento de los estándares del navegador.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Los navegadores modernos tienen fundamentalmente dos modos de renderizado:</span></span></p> -<ul> <li><span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Quirks mode</em> (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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los documentos con una declaración <code>DOCTYPE</code> incompleta, incorrecta o faltante o con una declaración <code>DOCTYPE</code> conocida que se usara habitualmente antes de 2001 se representarán en el Modo no estándar.</span></span></li> <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><em>Standards Mode</em> (Modo estándar): el navegador intenta seguir estrictamente los estándares del W3C.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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 <code>DOCTYPE</code> moderna será renderizada con el Modo estándar.</span></span></li> -</ul> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los navegadores basados en Gecko tienen un tercer <em><a href="/en/Gecko's_"Almost_Standards"_Mode" title="en/Gecko's "Almost Standards" Mode">Modo casi estándar</a></em> que tiene solo una peculiaridades menores.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esta es una lista de las declaraciones <code>DOCTYPE</code> más utilizadas que activarán el Modo estándar o el Modo casi estándar:</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.0 Transitional / / EN"</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/loose.dtd"></span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN"</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/html4/strict.dtd"></span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><!</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">DOCTYPE HTML PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span></span> -</pre> -<h4 id="Difference_between_id_and_class" name="Difference_between_id_and_class"><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Diferencia entre <code>id</code> y <code>class</code></span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos HTML pueden tener un atributo <code>id</code> y / o un atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>id</code> asigna un nombre a un elemento determinado y debe haber un solo elemento con ese nombre.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El atributo <code>class</code> asigna un elemento a una determinada clase y en general no puede haber más de un elemento con el mismo atributo <code>class</code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS te permite aplicar estilos a un atributo <code>id</code> y / o <code>class</code> concreto.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Utiliza un estilo específico de <code>id</code> cuando desees restringir las reglas de estilo a un bloque o elemento concreto.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este estilo lo usará <strong>un solo</strong> elemento con ese <code>id</code> concreto.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Usa un estilo específico de <code>class</code> cuando desees aplicar las reglas de estilo a una determinada clase de bloques y elementos.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Consulta <a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting Started/Selectors">Selectores CSS</a></span></span></p> -<h4 id="Restoring_the_default_property_value" name="Restoring_the_default_property_value"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Restaurar el valor de la propiedad predeterminado</span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por lo tanto, debes tener especial cuidado al escribir reglas de estilo usando selectores (por ejemplo, los selectores por nombre de etiqueta, como <code>p</code> ) 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.</span></span></p> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Debido a la naturaleza <em>en cascada</em> 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.</span></span></p> -<h4 id="Derived_styles" name="Derived_styles"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Estilos derivados</span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">CSS no permite que se defina un estilo según los términos de otro.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(Consulta la <a class="external" href="http://archivist.incutio.com/viewlist/css-discuss/2685" title="http://archivist.incutio.com/viewlist/css-discuss/2685">nota de Eric Meyer acerca de la postura del Grupo de trabajo)</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin embargo, la asignación de múltiples clases a un solo elemento puede proporcionar el mismo efecto.</span></span></p> -<h4 id="Assigning_multiple_classes" name="Assigning_multiple_classes"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Asignación de múltiples clases</span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">A los elementos HTML se les pueden asignar varias clases listándolas en el atributo <code>class</code>, con un espacio en blanco para separarlas.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><style type="text/css"></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { background: black; color: white; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.today { font-weight: bold; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></style></span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><div class="news today"></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">... contenido de las noticias de hoy ...</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El orden de las clases en el atributo <code>class</code> no es relevante.</span></span></p> -<h4 id="Style_rules_that_don.27t_work" name="Style_rules_that_don.27t_work"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Normas de estilo que no funcionan</span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las reglas de estilo que son sintácticamente correctas pueden no aplicarse en determinadas situaciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes utilizar las <em>Reglas de estilo de CSS</em> del <a href="/en/DOM_Inspector" title="en/DOM Inspector">Inspector DOM</a> 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.</span></span></p> -<h5 id="HTML_elements_hierarchy" name="HTML_elements_hierarchy"><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Jerarquía de los elementos HTML</span></span></h5> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La forma en que se aplican los estilos CSS a los elementos HTML depende también de la jerarquía de los elementos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.news { color: black; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">. corpName {font-weight: bold; color: red;}</span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- el texto de la noticia es negro, pero el nombre de la empresa va en rojo y negrita --></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div class="news"></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">(Reuters) <span class="corpName"> General Electric </ span> (GE.NYS) anunció el jueves ...</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<h5 id="Explicitly_re-defined_style_rule" name="Explicitly_re-defined_style_rule"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Regla de estilo explícitamente redefinida</span></span></h5> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En las hojas de estilo CSS el orden <strong>es</strong> importante.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si defines una regla y luego vuelves a definirla, se usará la última definición.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-weight: bold; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { color: red; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/* otras reglas */</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/* otras reglas */</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">/* otras reglas */</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font-weight: normal; }</span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- la mayor parte del texto va en negrita, con excepción de "GE", que va en rojo y no en negrita --></span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="stockTicker"></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: <span class="stockSymbol">GE</span> +1.0 ...</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> -<h5 id="Use_of_a_shorthand_property" name="Use_of_a_shorthand_property"><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso de una propiedad abreviada</span></span></h5> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Está bien usar las propiedades abreviadas para la definición de reglas de estilo, ya que utiliza una sintaxis muy compacta.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Esto significa que una norma anterior para un solo atributo podría ser reemplazada implícitamente.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockSymbol { font: 14px Arial; color: red; }</span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="stockTicker"></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: <span class="stockSymbol">GE</span> +1.0 ...</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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 <strong>es</strong> importante.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker {</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">font-weight: bold;</span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">font: 12px Verdana; / * font-weight es ahora normal * /</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">}</span></span> -</pre> -<h5 id="Use_of_the_.2A_selector" name="Use_of_the_.2A_selector"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Uso del selector <code>*</code></span></span></h5> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El selector <code>*</code> se refiere a cualquier elemento y tiene que utilizarse con especial cuidado.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">body * { font-weight: normal; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#stockTicker { font: 12px Verdana; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.corpName { font-weight: bold; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.stockUp { color: red; }</span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="section"></span></span> - <span class="goog-gtc-unit" id="goog-gtc-unit-100"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-101"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ div></span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-102"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En este ejemplo, el selector <code>body *</code> aplica la regla a todos los elementos dentro del cuerpo (<em>body</em>), en cualquier nivel de jerarquía, incluyendo <em>redtext.</em></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-103"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Así <code>font-weight: bold;</code> aplicada a la clase <em>boldtext</em> se reemplaza por <code>font-weight: normal;</code> aplicada a <em>redtext.</em></span></span></p> -<h5 id="Specificity_in_CSS" name="Specificity_in_CSS"><span class="goog-gtc-unit" id="goog-gtc-unit-104"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Especificidad en CSS</span></span></h5> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-105"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Cuando se aplican múltiples reglas a un determinado elemento, la norma escogida depende de su especificidad de estilo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-106"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">El estilo en línea (en los atributos HTML <code>style</code>) es lo primero, seguido por los selectores id, a continuación, los selectores class y, finalmente, los selectores element-name.</span></span></p> -<pre><span class="goog-gtc-unit" id="goog-gtc-unit-107"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">div { color: black; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-108"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">#orange { color: orange; }</span></span> -<span class="goog-gtc-unit" id="goog-gtc-unit-109"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">.green { color: green; }</span></span> - -<span class="goog-gtc-unit" id="goog-gtc-unit-110"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><div id="orange" class="green" style="color: red;">This is red</div></span></span> -</pre> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-111"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Las reglas son más complicadas cuando el selector tiene varias partes.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-112"><span class="goog-gtc-translatable goog-gtc-from-human goog-gtc-ph-missing" dir="ltr" style="">Se puede encontrar más información detallada acerca de cómo se calcula la especificidad del selector en el <a class=" external" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="http://www.w3.org/TR/CSS21/cascade.html#specificity">capítulo 6.4.3 de la Especificación CSS 2.1</a></span></span></p> -<h4 id="What_do_the_-moz-.2A_properties_do.3F" name="What_do_the_-moz-.2A_properties_do.3F"><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">¿Qué hacen las propiedades -moz-*?</span></span></h4> -<p><span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por favor, consulta la página <a class="internal" href="/en/CSS_Reference/Mozilla_Extensions" title="en/CSS Reference/Mozilla Extensions">Extensiones CSS de Mozilla</a>.</span></span></p> -<p> </p> -<p>{{ languages( { "en": "en/Common_CSS_Questions", "pl": "pl/Cz\u0119ste_pytania_o_CSS", "zh-tw": "zh_tw/CSS_\u4e00\u822c\u554f\u984c" } ) }}</p> 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 ---- -<p> </p> -<h2 id="Introducción">Introducción</h2> -<p>Este tutorial es una introducción a las hojas de estilo en cascada (CSS).</p> -<p>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.</p> -<ul> <li>La primera parte ilustra las funcionalidades estándar de CSS que funcionan en los navegadores de Mozilla y en casi todos los navegadores modernos.</li> -</ul> -<ul> <li>La segunda parte contiene algunos ejemplos de funciones especiales que funcionan en Mozilla pero no necesariamente en otros ambientes.</li> -</ul> -<p>El tutorial está basado en la <a class="external" href="http://www.w3.org/TR/CSS21/">especificación 2.1 de CSS 2.1</a>.</p> -<h3 id="¿Quién_debe_usar_este_tutorial">¿Quién debe usar este tutorial?</h3> -<p>Este tutotial es prácticamente para principiantes en CSS, pero también puedes usarlo si tienes alguna experiencia en CSS.</p> -<p>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.</p> -<p>Si sabes algo de CSS, puedes saltearte las partes del tutorial que ya conoces y sólo leer las partes que te interesen.</p> -<p>Si eres experimentado en CSS pero no en Mozilla, puedes pasar a la segunda parte.</p> -<h3 id="¿Qué_necesitas_antes_de_empezar">¿Qué necesitas antes de empezar?</h3> -<p>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.</p> -<p>Si no quieres editar archivos, puedes leer el tutorial y mirar las imágenes, pero esa es una forma menos efectiva de aprender.</p> -<p>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:</p> -<ul> <li><a href="/en/DOM_Inspector" title="en/DOM Inspector">DOM Inspector</a></li> -</ul> -<p><strong>Nota: </strong> 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.</p> -<h3 id="Cómo_usar_este_tutorial">Cómo usar este tutorial</h3> -<p>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.</p> -<p>En cada página, usa la sección de <em>Información</em> para entender cómo funciona CSS. Usa la sección <em>Acción</em> para probar el uso de CSS en tu propio equipo.</p> -<p>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.</p> -<p>Para entender CSS más profundamente, lee la información que encontrarás en las cajas con el título <em>Más detalles</em>. Usa los enlaces que se encuentran allí para buscar información de referencia acerca de CSS.</p> -<h2 id="Primera_parte_del_tutorial">Primera parte del tutorial</h2> -<p>Una guía básica paso a paso de CSS.</p> -<ol> <li><strong><a href="/en/CSS/Getting_Started/What_is_CSS" title="en/CSS/Getting_Started/What_is_CSS">What is CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Why_use_CSS" title="en/CSS/Getting_Started/Why_use_CSS">Why use CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/How_CSS_works" title="en/CSS/Getting_Started/How_CSS_works">How CSS works</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Cascading_and_inheritance" title="en/CSS/Getting_Started/Cascading_and_inheritance">Cascading and inheritance</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Selectors" title="en/CSS/Getting_Started/Selectors">Selectors</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Readable_CSS" title="en/CSS/Getting_Started/Readable_CSS">Readable CSS</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Text_styles" title="en/CSS/Getting_Started/Text_styles">Text styles</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Color" title="en/CSS/Getting_Started/Color">Color</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Lists" title="en/CSS/Getting_Started/Lists">Lists</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">Boxes</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Layout" title="en/CSS/Getting_Started/Layout">Layout</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Tables" title="en/CSS/Getting_Started/Tables">Tables</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/Media" title="en/CSS/Getting_Started/Media">Media</a></strong></li> -</ol> -<h2 id="Segunda_parte_del_tutorial">Segunda parte del tutorial</h2> -<p>Ejemplos que muestran el alcance del CSS en Mozilla.</p> -<ol> <li><strong><a href="/en/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL bindings</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">XUL user interfaces</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/SVG_graphics" title="en/CSS/Getting_Started/SVG_graphics">SVG graphics</a></strong></li> <li><strong><a href="/en/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML data</a></strong></li> -</ol> -<p>{{ 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" } ) }}</p> diff --git a/files/es/web/css/pseudoelementos/index.html b/files/es/web/css/pseudo-elements/index.html index c65b904163..c65b904163 100644 --- a/files/es/web/css/pseudoelementos/index.html +++ b/files/es/web/css/pseudo-elements/index.html diff --git a/files/es/web/css/referencia_css/index.html b/files/es/web/css/reference/index.html index 63c52a6cdb..63c52a6cdb 100644 --- a/files/es/web/css/referencia_css/index.html +++ b/files/es/web/css/reference/index.html diff --git a/files/es/web/css/elemento_reemplazo/index.html b/files/es/web/css/replaced_element/index.html index a8bedc65a2..a8bedc65a2 100644 --- a/files/es/web/css/elemento_reemplazo/index.html +++ b/files/es/web/css/replaced_element/index.html diff --git a/files/es/web/css/resolución/index.html b/files/es/web/css/resolution/index.html index b480413bb1..b480413bb1 100644 --- a/files/es/web/css/resolución/index.html +++ b/files/es/web/css/resolution/index.html 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 ---- -<h3 id="Sumario" name="Sumario"> Sumario </h3> -<p>El valor <i>rtl</i> 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. -</p><p><br> -</p> -<h3 id="Ejemplos" name="Ejemplos"> Ejemplos </h3> -<pre class="eval">div { - position: absolute; - right: 20px; - height: 200px; - border: 1px solid #000; - direction: rtl; -} -</pre> -<p><br> -</p> -<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n"> Ver también </h3> -<p>{{ Cssxref("direction") }}, {{ Cssxref("ltr") }} -</p> diff --git a/files/es/web/css/especificidad/index.html b/files/es/web/css/specificity/index.html index 6a42fdb53f..6a42fdb53f 100644 --- a/files/es/web/css/especificidad/index.html +++ b/files/es/web/css/specificity/index.html diff --git a/files/es/web/css/herramientas/cubic_bezier_generator/index.html b/files/es/web/css/tools/cubic_bezier_generator/index.html index b99e7afaa3..b99e7afaa3 100644 --- a/files/es/web/css/herramientas/cubic_bezier_generator/index.html +++ b/files/es/web/css/tools/cubic_bezier_generator/index.html diff --git a/files/es/web/css/herramientas/index.html b/files/es/web/css/tools/index.html index 59cd1febfa..59cd1febfa 100644 --- a/files/es/web/css/herramientas/index.html +++ b/files/es/web/css/tools/index.html diff --git a/files/es/web/css/filter-function/url/index.html b/files/es/web/css/url()/index.html index 2ec8f41bf0..2ec8f41bf0 100644 --- a/files/es/web/css/filter-function/url/index.html +++ b/files/es/web/css/url()/index.html diff --git a/files/es/web/css/-moz-user-modify/index.html b/files/es/web/css/user-modify/index.html index 21b9593d93..21b9593d93 100644 --- a/files/es/web/css/-moz-user-modify/index.html +++ b/files/es/web/css/user-modify/index.html diff --git a/files/es/web/css/sintaxis_definición_de_valor/index.html b/files/es/web/css/value_definition_syntax/index.html index 90d5ea8b75..90d5ea8b75 100644 --- a/files/es/web/css/sintaxis_definición_de_valor/index.html +++ b/files/es/web/css/value_definition_syntax/index.html diff --git a/files/es/web/guide/ajax/comunidad/index.html b/files/es/web/guide/ajax/community/index.html index 50a91de5a4..50a91de5a4 100644 --- a/files/es/web/guide/ajax/comunidad/index.html +++ b/files/es/web/guide/ajax/community/index.html diff --git a/files/es/web/guide/ajax/primeros_pasos/index.html b/files/es/web/guide/ajax/getting_started/index.html index ed2bbbc33f..ed2bbbc33f 100644 --- a/files/es/web/guide/ajax/primeros_pasos/index.html +++ b/files/es/web/guide/ajax/getting_started/index.html 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 +--- +<p>{{SeeCompatTable}}</p> +<p>Las <strong>WebRTC APIs</strong> 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).</p> +<p>Las fuentes primarias de las especificaciones para WebRTC (en constante <strong>evolución</strong>), son las especificaciones <a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html" title="http://dev.w3.org/2011/webrtc/editor/webrtc.html">WebRTC</a> y <a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2009/dap/camera/">getUserMedia</a>, y varios de los borradores del IETF, en mayor medida en el <a href="http://tools.ietf.org/wg/rtcweb/" title="http://tools.ietf.org/wg/rtcweb/">rtcweb working group</a>, pero también <a href="http://tools.ietf.org/wg/mmusic/" title="http://tools.ietf.org/wg/mmusic/">mmusic</a>, <a href="http://tools.ietf.org/wg/rmcat/" title="http://tools.ietf.org/wg/rmcat/">rmcat</a> y algunos otros.<br> + <br> + Gran parte de la implementación en Chrome y Firefox está basada en código que fue abierto por Google en <a href="http://www.webrtc.org/reference" title="http://www.webrtc.org/reference">webrtc.org</a>.</p> +<p style="margin-left: 40px;"><span style="color: #ff0000;"><strong>NOTA</strong></span>: 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.</p> +<p>Hay un buen tutorial en las características básicas de WebRTC en <a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/" title="http://www.html5rocks.com/en/tutorials/webrtc/basics/">HTML5 Rocks</a>. Una colección de páginas de pruebas básicas para soportar el desarrollo existe en <a href="http://mozilla.github.com/webrtc-landing" title="http://mozilla.github.com/webrtc-landing">webrtc-landing</a>.</p> +<p>Puedes hacer simples llamadas persona-a-persona (inclusive si usan Chrome) en <a href="https://apprtc.appspot.com/" title="https://apprtc.appspot.com/">apprtc.appspot.com</a>.</p> +<p>Una descripción de alto nivel de lo que sucede en una conexión RTCPeerConnection se publicó en un artículo de <a href="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/" title="https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/">Mozilla Hacks</a> (puedes ver todos los artículos sobre WebRTC <a href="https://hacks.mozilla.org/category/webrtc/" title="https://hacks.mozilla.org/category/webrtc/">aquí</a>).</p> +<p><img alt="Basics of RTCPeerConnection call setup" src="https://hacks.mozilla.org/wp-content/uploads/2013/05/webRTC-BasicsOfHowItWorks2.png" style="width: 898px; height: 805px;"></p> +<h2 id="Especificaciones">Especificaciones</h2> +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentarios</th> + </tr> + <tr> + <td>WebRTC API</td> + <td>En definición</td> + <td> </td> + </tr> + <tr> + <td>getUserMedia API</td> + <td>En definición</td> + <td><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">http://dev.w3.org/2011/webrtc/editor/getusermedia.html</a></td> + </tr> + </tbody> +</table> +<h2 id="Compatibilidad_de_browsers">Compatibilidad de browsers</h2> +<div> + {{CompatibilityTable}}</div> +<div id="compat-desktop"> + <table class="compat-table"> + <tbody> + <tr> + <th>Características</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Soporte básico</td> + <td>Sí{{property_prefix("webkit")}}</td> + <td>Firefox 22</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>DataChannels</td> + <td>A partir de Chrome 29</td> + <td>Firefox 22</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte preliminar</td> + <td>Via Chrome (detrás de un flag de configuración)</td> + <td>Activado en Nightly y Aurora</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>DataChannels</td> + <td>{{CompatUnknown}}</td> + <td>Activado en Nightly y Aurora</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> + </table> +</div> +<p> </p> 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 ---- -<p>{{draft}}</p> -<p>The <a href="/docs/DOM">Document Object Model</a> is an API for <a href="/en-US/docs/HTML">HTML</a> and <a href="/en-US/docs/XML">XML</a> 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.</p> -<p>All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (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.</p> -<p>The DOM is most often used in conjunction with <a href="/en-US/docs/JavaScript">JavaScript</a>. 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 <a href="http://www.w3.org/DOM/Bindings">any language</a>.</p> -<p>The <a href="http://www.w3.org/">World Wide Web Consortium</a> establishes a <a href="http://www.w3.org/DOM/">standard for the DOM</a>, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.</p> -<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Why is the DOM important?</h2> -<p>"Dynamic HTML" (<a href="/en-US/docs/DHTML">DHTML</a>) 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 <a href="http://www.w3.org/DOM/faq.html">W3C FAQ</a>). 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.</p> -<p>Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, using the DOM to <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipulate its own UI</a>.</p> -<h2 id="More_about_the_DOM">More about the DOM</h2> -<p>{{LandingPageListSubpages}}</p> diff --git a/files/es/web/guide/dom/events/creacion_y_activación_eventos/index.html b/files/es/web/guide/events/creating_and_triggering_events/index.html index 0038e12c74..0038e12c74 100644 --- a/files/es/web/guide/dom/events/creacion_y_activación_eventos/index.html +++ b/files/es/web/guide/events/creating_and_triggering_events/index.html diff --git a/files/es/web/guide/dom/events/eventos_controlador/index.html b/files/es/web/guide/events/event_handlers/index.html index 836b287123..836b287123 100644 --- a/files/es/web/guide/dom/events/eventos_controlador/index.html +++ b/files/es/web/guide/events/event_handlers/index.html diff --git a/files/es/web/guide/dom/events/index.html b/files/es/web/guide/events/index.html index 241f94e866..241f94e866 100644 --- a/files/es/web/guide/dom/events/index.html +++ b/files/es/web/guide/events/index.html 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/events/orientation_and_motion_data_explained/index.html index 7f8fe2155c..7f8fe2155c 100644 --- 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/events/orientation_and_motion_data_explained/index.html diff --git a/files/es/web/guide/html/categorias_de_contenido/index.html b/files/es/web/guide/html/content_categories/index.html index b9c4fb6061..b9c4fb6061 100644 --- a/files/es/web/guide/html/categorias_de_contenido/index.html +++ b/files/es/web/guide/html/content_categories/index.html 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 +--- +<p>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.<a href="/es/docs/HTML/HTML5" title="en/HTML/HTML5"> HTML5</a> introdujo nuevos mecanismos para formularios: añadió nuevos tipos semánticos para el elemento {{ HTMLElement("input") }} y <em>validación de restricciones</em> 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 <a href="/es/docs/HTML/HTML5/Formularios_en_HTML5#Validaci.C3.B3n_restringida" title="en/HTML/HTML5/Forms in HTML5#Constraint Validation API">API de Validación de Restricciones</a> de HTML.</p> + +<div class="note"><strong>Nota:</strong> La validación de restricciones de HTML5 no elimina la necesidad de hacer validaciones <em>de lado del servidor</em>. 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.</div> + +<h2 id="Restricciones_intrínsecas_y_básicas">Restricciones intrínsecas y básicas</h2> + +<p>En HTML5, las restricciones básicas son declaradas de dos formas:</p> + +<ul> + <li>Eligiendo el valor semánticamente más apropiado para el atributo {{ htmlattrxref("type", "input") }} del elemento {{ HTMLElement("input") }}, por ejemplo, elegir el tipo <span style="font-family: courier new;">email</span> creará automáticamente la restricción para verificar que el valor sea una dirección de correo electrónico válida.</li> + <li>Estableciendo valores a los atributos de validación, permitiendo que se describan restricciones básicas de manera simple, sin la necesidad de JavaScript.</li> +</ul> + +<h3 id="Tipos_de_captura_semánticos">Tipos de captura semánticos</h3> + +<p>Las restricciones intrínsecas para el atributo {{ htmlattrxref("type", "input") }} son:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Tipo de input</th> + <th scope="col">Descripción</th> + <th scope="col">Incumplimiento asociado</th> + </tr> + </thead> + <tbody> + <tr> + <td><span style="font-family: courier new;"><input type="URL"></span></td> + <td>El valor debe ser una URL absoluta, es decir, una de las siguientes: + <ul> + <li>una URI válida (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3986.txt" title="http://www.ietf.org/rfc/rfc3986.txt">RFC 3986</a>)</li> + <li>una IRI válida, sin un componente de query (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> + <li>una IRI válida, con componente de query sin caracteres no ASCII sin escapar (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> + <li>una IRI válida, y que el conjunto de caracteres para el documento sea UTF-8 o UTF-16 (como se define en <a class="external" href="http://www.ietf.org/rfc/rfc3987.txt" title="http://www.ietf.org/rfc/rfc3987.txt">RFC 3987</a>)</li> + </ul> + </td> + <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> + </tr> + <tr> + <td> <span style="font-family: courier new;"><input type="email"></span></td> + <td>El valor debe obedecer a la producción <a class="external" href="http://www.ietf.org/rfc/std/std68.txt" title="http://www.ietf.org/rfc/std/std68.txt">ABNF</a>: <code>1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )</code> donde: + <ul> + <li><code>atext</code> está definido en <a class="external" href="http://tools.ietf.org/html/rfc5322" title="http://tools.ietf.org/html/rfc5322">RFC 5322</a>, y representa una letra US-ASCII (<span style="font-family: courier new;">A</span>-<span style="font-family: courier new;">Z</span> y <span style="font-family: courier new;">a</span>-<span style="font-family: courier new;">z</span>), un dígito (<span style="font-family: courier new;">0</span>-<span style="font-family: courier new;">9</span>) o uno de los siguientes caracteres especiales: <span style="font-family: courier new;">! # $ % & ' * + - / = ? ` { } | ~</span>,</li> + <li><code>ldh-str</code> está definido en <a class="external" href="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5" title="http://www.apps.ietf.org/rfc/rfc1034.html#sec-3.5">RFC 1034</a>, y representa letras US-ASCII, combinadas con dígitos y el símbolo <span style="font-family: courier new;">-</span> agrupados en palabras separadas por un punto (<span style="font-family: courier new;">.</span>).</li> + </ul> + + <div class="note"><strong>Nota:</strong> 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 <strong>tipo no coincidente</strong>.</div> + </td> + <td>Incumplimiento de restricción por <strong>tipo no coincidente (Type mismatch)</strong></td> + </tr> + </tbody> +</table> + +<p>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. </p> + +<h3 id="Atributos_relacionados_con_validaciones">Atributos relacionados con validaciones</h3> + +<p>Los siguientes atributos son usados para describir restricciones básicas:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Atributo</th> + <th scope="col">Tipos de input que soportan el atributo</th> + <th scope="col">Valores posibles</th> + <th scope="col">Descripción</th> + <th scope="col">Incumplimiento asociado</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ htmlattrxref("pattern", "input") }}</td> + <td>text, search, url, tel, email, password</td> + <td>Una expresión regular de JavaScript (compilada con las banderas <code title="">global</code>, <code title="">ignoreCase</code>, y <code title="">multiline</code> de ECMAScript 5 <em>desabilitadas</em>)</td> + <td>El valor debe coincidir con el patrón.</td> + <td>Incumplimiento de restricción por <strong>incompatibilidad de patrones (Pattern mismatch)</strong></td> + </tr> + <tr> + <td rowspan="3">{{ htmlattrxref("min", "input") }}</td> + <td>range, number</td> + <td>Un número válido</td> + <td rowspan="3">El valor debe ser mayor o igual al de este atributo.</td> + <td rowspan="3">Incumplimiento de restricción por <strong>flujo insuficiente (Underflow)</strong></td> + </tr> + <tr> + <td>date, month, week</td> + <td>Una fecha válida</td> + </tr> + <tr> + <td>datetime, datetime-local, time</td> + <td>Una fecha y hora válidos</td> + </tr> + <tr> + <td rowspan="3">{{ htmlattrxref("max", "input") }}</td> + <td>range, number</td> + <td>Un número válido</td> + <td rowspan="3">El valor debe ser menor o igual al de este atributo</td> + <td rowspan="3">Incumplimiento de restricción por <strong>desborde (Overflow)</strong></td> + </tr> + <tr> + <td>date, month, week</td> + <td>Una fecha válida</td> + </tr> + <tr> + <td>datetime, datetime-local, time</td> + <td>Una fecha y hora válidos</td> + </tr> + <tr> + <td>{{ htmlattrxref("required", "input") }}</td> + <td>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") }}</td> + <td><em>ninguno</em>, pues éste es un atributo de tipo Boolean: su presencia representa <em>true</em>, y su ausencia representa <em>false</em></td> + <td>Debe tener un valor (si se establece).</td> + <td>Incumplimiento de restricción por<strong> ausencia (Missing)</strong></td> + </tr> + <tr> + <td rowspan="5">{{ htmlattrxref("step", "input") }}</td> + <td>date</td> + <td>Un número entero de días</td> + <td rowspan="5">A menos que se establezca el atributo con la literal <span style="font-family: courier new;">any</span>, el valor debe ser <strong>min</strong> + un enter múltiplo del valor de este atributo.</td> + <td rowspan="5">Incumplimiento de restricción por<strong> inconsistencia de paso (Step mismatch)</strong></td> + </tr> + <tr> + <td>month</td> + <td>Un número entero de meses</td> + </tr> + <tr> + <td>week</td> + <td>Un número entero de semanas</td> + </tr> + <tr> + <td>datetime, datetime-local, time</td> + <td>Un número entero de segundos</td> + </tr> + <tr> + <td>range, number</td> + <td>Un entero</td> + </tr> + <tr> + <td>{{ htmlattrxref("maxlength", "input") }}</td> + <td>text, search, url, tel, email, password; también en el elemento {{ HTMLElement("textarea") }}</td> + <td>Una longitud en enteros</td> + <td>El número de caracteres (puntos de código) no debe exceder el valor del atributo.</td> + <td>Incumplimiento de restricción por ser<strong> muy largo (Too long)</strong></td> + </tr> + </tbody> +</table> + +<h2 id="Proceso_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Proceso de validación de restricciones</span></h2> + +<p>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:</p> + +<ul> + <li>Invocando a la función <code>checkValidity()</code> de una interfaz <a href="/es/docs/DOM" title="en/DOM">DOM</a> relacionada con formas (<code><a href="/es/docs/Web/API/HTMLInputElement" title="en/DOM/HTMLInputElement">HTMLInputElement</a></code>, <code><a href="/es/docs/Web/API/HTMLSelectElement" title="en/DOM/HTMLSelectElement">HTMLSelectElement</a></code>, <code><a href="/es/docs/Web/API/HTMLButtonElement" title="en/DOM/HTMLButtonElement">HTMLButtonElement</a></code> o <code><a href="/es/docs/Web/API/HTMLTextAreaElement" title="en/DOM/HTMLTextAreaElement">HTMLTextAreaElement</a></code>), 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 <a href="/es/docs/Web/CSS" title="en/CSS">CSS</a>, {{ Cssxref(":valid") }} o {{ Cssxref(":invalid") }}, se aplicará.)</li> + <li>Invocando a la función <code>checkValidity()</code> en la interfaz <code><a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a></code>, llamada <em>validación estática de restricciones</em>.</li> + <li>Enviando el formulario en sí, llamado <em>validación interactiva de restricciones</em>.</li> +</ul> + +<div class="note"><strong>Nota: </strong> + +<ul> + <li>Si se establece el atributo {{ htmlattrxref("novalidate", "form") }} en el elemento {{ HTMLElement("form") }}, la validación interactiva de las restricciones no se aplica.</li> + <li>Invocando al método <code>send()</code> en la interfaz <a href="/es/docs/Web/API/HTMLFormElement" title="en/DOM/HTMLFormElement">HTMLFormElement</a> 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.</li> +</ul> +</div> + +<h2 id="Restricciones_complejas_usando_la_API_de_Restricciones_de_HTML5"><span class="author-g-by4vjwmiwjiydpj7">Restricciones complejas usando la API de Restricciones de HTML5</span></h2> + +<p><span class="author-g-by4vjwmiwjiydpj7">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.</span></p> + +<p><span class="author-g-by4vjwmiwjiydpj7">Básicamente, la idea es ejecutar JavaScript en un evento de algún campo del formulario (como <strong>onchange</strong>) para calcular si la restricción no se cumple, y entonces usar el método <code><em>field</em>.setCustomValidity()</code> 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.</span></p> + +<h3 id="Restricciones_que_combinan_varios_campos_Validación_de_código_postal">Restricciones que combinan varios campos: Validación de código postal</h3> + +<p>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 <code>D-</code> en Alemania, <code>F-</code> 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.</p> + +<div class="note"> +<p><strong>Nota:</strong> 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.</p> +</div> + +<p><span style="line-height: 1.5;">Como un ejemplo, añadiremos un script que verificará la validación de restricciones en este formulario simple:</span></p> + +<pre class="brush: html notranslate"><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></pre> + +<p>Esto mostrará el siguiente formulario: </p> + +<p><label>Código Postal : </label><input> <label>Country: </label><select><option value="ch">Suiza</option><option value="fr">Francia</option><option value="de">Alemania</option><option value="nl">Países Bajos</option></select></p> + +<p>Primero, escribimos una función que revisará las restricciones en sí:</p> + +<pre class="brush: js notranslate">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]); + } +} +</pre> + +<p>Entonces, enlazamos este código al evento <strong>onchange</strong> del elemento {{ HTMLElement("select") }} y al evento <strong>oninput</strong> del elemento {{ HTMLElement("input") }}:</p> + +<pre class="brush: js notranslate">window.onload = function () { + document.getElementById("Country").onchange = checkZIP; + document.getElementById("ZIP").oninput = checkZIP; +}</pre> + +<p>Puedes ver <a href="/@api/deki/files/4744/=constraint.html" title="https://developer.mozilla.org/@api/deki/files/4744/=constraint.html">aquí un ejemplo en vivo</a> de la validación de código postal.</p> + +<h3 id="Limitando_el_tamaño_de_un_archivo_antes_de_ser_subido">Limitando el tamaño de un archivo antes de ser subido</h3> + +<p>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.</p> + +<p>Aquí está la parte de HTML:</p> + +<pre class="brush: html notranslate"><label for="FS">Selecciona un archivo menor a 75KB : </label> +<input type="file" id="FS"></pre> + +<p>Esto muestra lo siguiente:</p> + +<p><label>Seleciona un archivo menor a 75KB : </label> <input></p> + + + +<p>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:</p> + +<pre class="brush: js notranslate">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(""); +}</pre> + + + +<p>Finalmente, anclamos el método al evento requerido:</p> + +<pre class="brush: js notranslate">window.onload = function () { + document.getElementById("FS").onchange = checkFileSize; +}</pre> + +<p>Puedes ver <a href="/@api/deki/files/4745/=fileconstraint.html" title="https://developer.mozilla.org/@api/deki/files/4745/=fileconstraint.html">aquí un ejemplo en vivo</a> de la validación de tamaño de archivos.</p> + +<h2 id="Estilos_visuales_de_validación_de_restricciones"><span class="author-g-by4vjwmiwjiydpj7">Estilos visuales de validación de restricciones</span></h2> + +<p>Aparte de establecer las restricciones, los desarrolladores web querrán controlar los mensajes que son desplegados al usuario y los estilos de los mismos.</p> + +<h3 id="Controlando_el_aspecto_de_los_elementos">Controlando el aspecto de los elementos</h3> + +<p>El aspecto de los elementos puede ser controlado por medio de pseudo-clases de CSS.</p> + +<h4 id="Pseudo-clases_required_y_optional">Pseudo-clases :required y :optional</h4> + +<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:required" title=":required"><code>:required</code></a> y <a href="/en-US/docs/Web/CSS/:optional" title=":optional"><code>:optional</code></a> permitene escribir selectores que coincidan con elementos de formulario que tengan el atributo {{ htmlattrxref("required") }} y los que no lo tengan, respectivamente.</p> + +<h4 id="Pseudo-clase_-moz-placeholder">Pseudo-clase :-moz-placeholder</h4> + +<p>Véase <a href="/es/docs/Web/CSS/::placeholder" title="/en-US/docs/Web/CSS/:-moz-placeholder">::placeholder</a> (experimental).</p> + +<h4 id="Pseudo-clases_valid_invalid">Pseudo-clases :valid :invalid</h4> + +<p>Las <a href="/es/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes?redirectlocale=en-US&redirectslug=CSS%2FPseudo-classes">pseudo-clases</a> <a href="/en-US/docs/Web/CSS/:valid" title="/en-US/docs/Web/CSS/:valid">:valid</a> e <a href="/en-US/docs/Web/CSS/:invalid" title="/en-US/docs/Web/CSS/:invalid?redirectlocale=en-US&redirectslug=CSS%2F%3Ainvalid">:invalid</a> 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.</p> + +<h4 id="Estilos_predeterminados">Estilos predeterminados</h4> + +<h3 id="Controlando_el_texto_de_incumplimiento_de_restricciones">Controlando el texto de incumplimiento de restricciones</h3> + +<h4 id="El_atributo_x-moz-errormessage">El atributo x-moz-errormessage</h4> + +<p>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.</p> + +<div class="note"> +<p style="margin-left: 40px;">Nota: Esta extensión no es estándar.</p> +</div> + +<h4 id="element.setCustomValidity_de_la_API_de_Validación_de_Restricciones">element.setCustomValidity() de la API de Validación de Restricciones</h4> + +<p>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.</p> + +<h4 id="Objeto_ValidityState_de_la_API_de_Validación_de_Restricciones"><span class="author-g-by4vjwmiwjiydpj7">Objeto ValidityState</span> de la API de Validación de Restricciones</h4> + +<p>La interfaz de DOM <code><a href="/es/docs/Web/API/ValidityState">ValidityState</a></code><a href="/es/docs/Web/API/ValidityState"> </a>representa los <em>estados de validez</em> 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.</p> + +<h3 id="Examples_of_personalized_styling"><span class="author-g-by4vjwmiwjiydpj7">Examples of personalized styling</span></h3> + +<h3 id="HTML4_fallback"><span class="author-g-by4vjwmiwjiydpj7">HTML4 fallback</span></h3> + +<h4 id="Trivial_fallback"><span class="author-g-by4vjwmiwjiydpj7">Trivial fallback</span></h4> + +<h4 id="JS_fallback"><span class="author-g-by4vjwmiwjiydpj7">JS fallback</span></h4> + +<h2 id="Conclusión"><span class="author-g-by4vjwmiwjiydpj7">Conclusión</span></h2> 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 +--- +<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">{{ gecko_minversion_header("2") }}{{ draft() }}</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Gecko 2 introduce un nuevo analizador basado en HTML 5.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">El nuevo analizador presenta estas mejoras importantes:</span></span></p> +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Las llamadas a <code>innerHTML</code> son mucho más rápidas.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Se han corregido <a class="external" href="http://tinyurl.com/html-parser-bugs" title="http://tinyurl.com/html-parser-bugs">decenas de errores relacionados desde hace tiempo con el analizador</a>.</span></span></li> +</ul> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">La <a class="external" href="http://www.w3.org/TR/html5/" title="http://www.w3.org/TR/html5/">especificación de HTML 5</a> 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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.</span></span></p> +<h2 id="Conductas_del_analizador_modificadas"><span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Conductas del analizador modificadas</span></span></h2> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></p> +<h3 id="Tokenización_del_ángulo_izquierdo_del_soporte_dentro_de_una_etiqueta"><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Tokenización del ángulo izquierdo del soporte dentro de una etiqueta</span></span></h3> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Teniendo en cuenta la cadena <code><foo<bar></code> , el nuevo analizador la lee como una etiqueta llamada <code>foo<bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, <code>foo</code> y <code>bar</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span></p> +<h3 id="Llamar_a_document.write_()_durante_el_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Llamar a document.write () durante el análisis</span></span></h3> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-23"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Antes de HTML5, Gecko y WebKit permitían las llamadas a <a href="/en/DOM/document.write" title="en/DOM/document.write"><code>document.write()</code></a> <em>durante el análisis</em> para insertar contenido en la secuencia de origen.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Este comportamiento daba lugar inherentemente a <a class="external" href="http://en.wikipedia.org/wiki/Race_condition" title="http://en.wikipedia.org/wiki/Race_condition">condiciones de carrera</a>, puesto que el contenido se insertaba, </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">en la secuencia de origen, en</span></span><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"> un punto dependiente de los tiempos de ejecución.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En IE, este tipo de llamadas son ignoradas o implican una llamada a <a href="/en/DOM/document.open" title="en/DOM/document.open"><code>document.open()</code></a>, sustituyendo el documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-27"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">En HTML5, <code>document.write()</code> sólo se puede llamar desde un script que creado mediante la etiqueta {{ HTMLElement ("script") }} que no tenga establecidos los atributos <code><a href="/En/HTML/Element/Script#attr_async" title="En/HTML/Element/Script#attr async">async</a></code> o <code><a href="/En/HTML/Element/Script#attr_defer" title="En/HTML/Element/Script#attr defer">defer</a></code>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-28"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Con el analizador de HTML 5, las llamadas a <code>document.write()</code> en cualquier otro contexto o se ignoran o sustituyen el documento.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Algunos contextos en los que <em>no</em> debes llamar a <code>document.write()</code> incluyen:</span></span></p> +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">scripts creados con <a href="/en/DOM/document.createElement" title="en/DOM/document.createElement">document.createElement ()</a></span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">controladores de eventos</span></span></li> + <li><a href="/en/DOM/window.setTimeout" title="en/DOM/window.setTimeout"><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setTimeout ()</span></span></a></li> + <li><a href="/en/DOM/window.setInterval" title="en/DOM/window.setInterval"><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">setInterval ()</span></span></a></li> + <li><code><script async src="..."></code></li> + <li><code><script defer src="..."></code></li> +</ul> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a <code>document.write()</code> .</span></span></p> +<h3 id="Falta_de_repetición_del_análisis"><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Falta de repetición del análisis</span></span></h3> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, si el documento carecía de una etiqueta de cierre <code></title></code>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este comportamiento creaba una vulnerabilidad de seguridad.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-42"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Con HTML 5, los analizadores ya no repiten análisis de ningún documento.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Este cambio tiene las siguientes consecuencias para los desarrolladores web:</span></span></p> +<ul> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página <em>fallará</em> el análisis.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></li> + <li><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">En un script alineado, con el fin de utilizar las cadenas literales <code></script></code> y <code><!--</code> , deberías evitar que se analicen literalmente, expresándolas como <code>\u003c/script></code> y <code>\u003c!--</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">La práctica anterior de escapar de la cadena <code></script></code> 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).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.</span></span></li> +</ul> +<h2 id="Mejora_del_rendimiento_con_el_análisis_especulativo"><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Mejora del rendimiento con el análisis especulativo</span></span></h2> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza <em>el análisis especulativo</em>, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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 <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write ()</a> , escribas un <em>subárbol equilibrado</em> dentro de ese trozo de script.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada <code>document.write()</code>, siempre y cuando estén dentro de la misma etiqueta <code><script></code>.</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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') }}.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">(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.)</span></span></p> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Por ejemplo, el siguiente código escribe un subárbol equilibrado:</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><script></span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("<div>");</span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">document.write ("<p> Aquí va el contenido. </ p>");</span></span> + <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">document.write ("</ div>");</span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""></ script></span></span> +<span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><!-- Aquí va el HTML sin script. --> +</span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">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.</span></span></p> +<pre><span class="goog-gtc-unit" id="goog-gtc-unit-68-goog-gtc-unit-69-goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" style=""><script>document.write("<div>");</script> +<p>El contenido va aquí.</p> +<script>document.write("</div>");</script> +</span></span> +</pre> +<p><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Para obtener más información, consulta <a href="/en/HTML/HTML5/Optimizing_Your_Pages_for_Speculative_Parsing" title="en/HTML/HTML5/Optimizing Your Pages for Speculative Parsing">Optimizar tus páginas para el análisis especulativo</a></span></span></p> +<p>{{ languages( { "en": "en/HTML/HTML5/HTML5_Parser" } ) }}</p> 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 +--- +<p style="line-height: 22px;"><span class="seoSummary"><strong>HTML5 </strong> <span style="line-height: 21px;">es la última versión de</span> <a href="/en-US/docs/HTML" title="HTML">HTML</a>. </span><span style="line-height: 21px;">El término representa dos conceptos diferentes:</span></p> + +<ul style="line-height: 22px;"> + <li><span class="seoSummary">Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos.</span></li> + <li><span class="seoSummary">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.</span> A este conjunto se le llama <em>HTML5 y amigos</em>, a menudo reducido a <em>HTML5</em> .</li> +</ul> + +<p style="line-height: 22px;"><span style="line-height: 21px;">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. </span></p> + +<ul style="line-height: 22px;"> + <li><em>Semántica</em>: Permite describir con mayor precisión <span id="docs-internal-guid-624d18e2-7fff-fe56-de5d-c9472725617e" style="background-color: transparent; color: #000000; font-family: Arial; font-size: 11pt; font-style: normal; font-variant: normal; font-weight: 400; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;">cuál</span> es su contenido.</li> + <li><em>Conectividad</em>: Permite comunicarse con el servidor de formas nuevas e innovadoras.</li> + <li><em>Sin conexión y almacenamiento</em>: Permite a las páginas web almacenar datos localmente en el lado del cliente y operar sin conexión de manera más eficiente.</li> + <li><em>Multimedia</em>: <span style="background-color: #ffffff; color: #4d4e53; display: inline !important; float: none; font-family: open sans,sans-serif; font-size: 14px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 21px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal;">Nos otorga un excelente soporte para utilizar contenido multimedia</span> como lo son audio y video nativamente.</li> + <li><em>Gráficos y efectos 2D/3D</em>: 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.</li> + <li><em>Rendimiento e Integración</em>: Proporciona una mayor optimización de la velocidad y un mejor uso del hardware.</li> + <li><em>Acceso al dispositivo</em>: Proporciona APIs para el uso de varios componentes internos de entrada y salida de nuestro dispositivo.</li> + <li><em>CSS3</em>: Nos ofrece una nueva gran variedad de opciones para hacer diseños más sofisticados.</li> +</ul> + +<div class="cleared row topicpage-table" style="line-height: 22px;"> +<div class="section" style="width: 436px;"> +<h2 id="SEMÁNTICA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3827/HTML5_Semantics_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">SEMÁNTICA</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/es/docs/Sections_and_Outlines_of_an_HTML5_document" title="Sections and Outlines of an HTML5 document">Secciones y contenidos en HTML5</a></dt> + <dd>Un vistazo al nuevo esquema y secciones de un documento HTML5: <span style="line-height: 1.572;">{{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}}.</span></dd> + <dt><a href="/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content" title="Uso de audio y video en HTML5">Uso de audio y video en HTML5</a></dt> + <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulacion de nuevo contenido multimedia.</dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/es/docs/HTML/HTML5/Formularios_en_HTML5" title="Forms in HTML5">Formularios en HTML5</a></dt> + <dd>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<span style="line-height: 1.572;"> {{HTMLElement("input")}} como el atributo {{htmlattrxref("type", "input")}} y el nuevo elemento {{HTMLElement("output")}}.</span></dd> + <dt><span style="line-height: 1.572;">Nuevos elementos semánticos</span></dt> + <dd>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 <a href="/en-US/docs/HTML/HTML5/HTML5_element_list" title="HTML/HTML5/HTML5_element_list">elementos de HTML5 validos</a>. + <dl> + <dt></dt> + <dt>Mejora en {{HTMLElement("iframe")}}</dt> + <dd>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")}}.</dd> + <dt><a href="/en-US/docs/MathML" title="MathML">MathML</a></dt> + <dd>Permite integrar directamente fórmulas matemáticas.</dd> + <dd></dd> + <dt><a href="/en-US/docs/HTML/HTML5/Introduction_to_HTML5" title="HTML/HTML5/Introduction_to_HTML5">Introducción a HTML5</a></dt> + <dd><span id="result_box" lang="es"><span class="hps">En este artículo</span> <span class="hps">se explica cómo</span> <span class="hps">indicar al</span> <span class="hps">navegador</span> <span class="hps">que está utilizando</span> <span class="hps">HTML5</span> <span class="hps">en</span> <span class="hps">su diseño web</span> <span class="hps">o aplicación web</span><span>.</span></span></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_Parser" title="HTML/HTML5/HTML5 parser">Analizador de HTML5 compatible</a></dt> + <dd>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.</dd> + </dl> + + <h2 id="CONECTIVIDAD" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3839/HTML5_Connectivity_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CONECTIVIDAD</h2> + + <dl> + <dt><a href="/en-US/docs/WebSockets" title="WebSockets">Web Sockets</a></dt> + <dd>Permite crear una conexión permanente entre la página y el servidor e intercambiar datos no HTML a través de ese medio.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events" title="Server-sent_events/Using_server-sent_events">Eventos de servidor enviados</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>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.</dd> + </dl> + + <h2 id="Sin_Conexión_Y_ALMACENAMIENTO" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3833/HTML5_Offline_Storage_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">Sin Conexión Y ALMACENAMIENTO</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache" title="Offline_resources_in_Firefox">Recursos sin conexión: el caché de la aplicación</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos con y sin conexión</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Storage" title="DOM / Almacenamiento">WHATWG sesión del lado cliente y el almacenamiento continuo (Almacenamiento DOM)</a></dt> + <dd>Sesión del lado del cliente y el almacenamiento continuo permite a las aplicaciones web almacenar datos estructurados en el lado del cliente.</dd> + <dt><a href="/en-US/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications" title="Using_files_from_web_applications">Uso de archivos desde aplicaciones web</a></dt> + <dd>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<span style="line-height: 1.572;"> </span><span style="font-family: monospace; line-height: 1.572;">{{HTMLElement("input")}}</span><span style="line-height: 1.572;"> de </span><strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-type" style="line-height: 1.572;" title="HTML/Element/input#attr-type">tipo</a></strong><span style="line-height: 1.572;"> <em>file</em> </span>del elemento HTML <strong style="line-height: 1.572;"><a href="/en-US/docs/HTML/Element/Input#attr-multiple" style="line-height: 1.572;" title="HTML/Element/input#attr-multiple">múltiple</a>s </strong><span style="line-height: 1.572;">atributos. </span>También esta<span style="line-height: 1.572;"> </span><a href="/en-US/docs/DOM/FileReader" style="line-height: 1.572;" title="DOM/FileReader"><code style="font-size: 14px;">FileReader</code></a><span style="line-height: 1.572;">.</span></dd> + </dl> + + <h2 id="MULTIMEDIA" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3835/HTML5_Multimedia_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">MULTIMEDIA</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="Using_audio_and_video_in_Firefox">Usando HTML5 de audio y video</a></dt> + <dd>Los elementos {{HTMLElement("audio")}} y {{HTMLElement("video")}} permiten la manipulación de nuevos contenidos multimedia. + <dl> + <dt></dt> + <dt><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt> + <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd> + <dt>Track and WebVTT</dt> + <dd>El elemento {{HTMLElement("track")}} permite subtítulos y capítulos. <a href="/en-US/docs/HTML/WebVTT" title="HTML/WebVTT">WebVTT</a> <span style="line-height: 1.572;">es un formato de pista de texto.</span></dd> + </dl> + + <h2 id="3D_GRAFICOS_EFECTOS" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3841/HTML5_3D_Effects_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">3D, GRAFICOS & EFECTOS</h2> + + <dl> + <dt><a href="/en-US/docs/Canvas_tutorial" title="Canvas tutorial">Canvas Tutorial</a></dt> + <dd>Conozca el nuevo elemento <span style="font-family: courier new,andale mono,monospace; line-height: normal;">{{HTMLElement("canvas")}}</span> y cómo dibujar gráficos y otros objetos en Firefox</dd> + <dt><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">API de texto para elementos <code style="font-size: 14px;"><canvas></code> </a></dt> + <dd>El API de texto HTML5 es ahora compatible con elementos {{HTMLElement("canvas")}} .</dd> + <dt><a href="/en-US/docs/WebGL" title="WebGL">WebGL</a></dt> + <dd>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 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas"><code style="font-size: 14px;"><canvas></code></a> HTML5 .</dd> + <dt><a href="/en-US/docs/SVG" title="SVG">SVG</a></dt> + <dd>Un formato basado en XML de imágenes vectoriales que directamente se pueden incrustar en el código HTML.</dd> + <dt></dt> + </dl> + </dd> + </dl> + </dd> +</dl> +</div> + +<div class="section" style="width: 435px;"> +<h2 id="RESULTADOS_e_INTEGRACIÓN" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3831/HTML5_Performance_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">RESULTADOS e INTEGRACIÓN</h2> + +<dl> + <dt><a href="/en-US/docs/DOM/Using_web_workers" title="Using web workers">Web Workers</a></dt> + <dd>Permite delegar la evaluación JavaScript para subprocesos en segundo plano, lo que evita que estas actividades ralenticen eventos interactivos.</dd> + <dt><code style="font-size: 14px;"><a href="/en-US/docs/DOM/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></code> Nivel 2</dt> + <dd>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<span style="line-height: 1.572;"> </span><a href="/en-US/docs/AJAX" style="line-height: 1.572;" title="AJAX">Ajax</a><span style="line-height: 1.572;">.</span></dd> +</dl> + +<dl> + <dt>Motores JIT compilación de JavaScript</dt> + <dd>La nueva generación de motores de JavaScript son mucho más poderosos, lo que lleva a un mayor rendimiento.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history" title="DOM/Manipulating_the_browser_history">History API</a></dt> + <dd>Permite la manipulación del historial del navegador. Esto es especialmente útil para la carga interactivamente nueva información en las páginas.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_Editable" title="HTML / contenido editable">El atributo contentEditable: transformar su sitio web en una wiki!</a></dt> + <dd>HTML5 ha estandarizado el atributo contentEditable. Aprenda más sobre esta opción.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop" title="DragDrop / Drag_and_Drop">Arrastrar y soltar</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Focus_management_in_HTML" title="Focus_management_in_HTML">Gestión del foco en HTML</a></dt> + <dd>Los nuevos atributos HTML5 <code style="font-size: 14px;">activeElement</code> y <code style="font-size: 14px;">hasFocus</code> son soportados.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web-based_protocol_handlers" title="Web-based_protocol_handlers">Manejadores de protocolo basados en web</a></dt> + <dd>Ahora puede registrar las aplicaciones web como controladores de protocolo utilizando el metodo <code style="font-size: 14px;">navigator.registerProtocolHandler()</code>.</dd> + <dt><a href="/en-US/docs/DOM/window.requestAnimationFrame" title="DOM/window.requestAnimationFrame"><code style="font-size: 14px;">requestAnimationFrame</code></a></dt> + <dd>Permite controlar la renderización de animaciones para obtener un óptimo rendimiento.</dd> + <dt><a href="/en-US/docs/DOM/Using_full-screen_mode" title="DOM/Using_full-screen_mode">Fullscreen API</a></dt> + <dd>Controla el uso de la pantalla completa de una página Web o aplicación, sin la interfáz de usuario del explorador mostrada.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt> + <dd>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.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events" title="Online_and_offline_events">Eventos en línea y fuera de línea</a></dt> + <dd> + <dl style="margin: 0px 0px 1.286em; padding: 0px;"> + <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px;">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.</dd> + </dl> + </dd> +</dl> + +<h2 id="ACCESO_al_dispositivo" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3837/HTML5_Device_Access_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">ACCESO al dispositivo</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Using_the_Camera_API" title="DOM / Using_the_Camera_API">Usando la API de la cámara</a></dt> + <dd>Permite utilizar, manipular y almacenar una imagen de la cámara del ordenador.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events" title="DOM / Touch_events">Eventos táctiles</a></dt> + <dd>Manipuladores para reaccionar a los eventos creados por un usuario cuando pulsa pantallas táctiles.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Using_geolocation" title="El uso de geolocalización">El uso de geolocalización</a></dt> + <dd>Permite a los navegadores localizar la posición del usuario mediante geolocalización.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Detecting_device_orientation" title="Detecting_device_orientation">Detección de la orientación del dispositivo</a></dt> + <dd>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).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API" title="API / Pointer_Lock_API">API Pointer Lock</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="CSS3_STYLING" style="font-family: 'Bebas Neue', 'League Gothic', Haettenschweiler, 'Arial Narrow', sans-serif; border: none; font-size: 24px; margin: 0px 0px 0.25em; font-weight: 200; line-height: 1; letter-spacing: 1px; text-transform: uppercase;"><img alt="" src="/files/3829/HTML5_Styling_512.png" style="height: 64px; padding-right: 0.5em; vertical-align: middle; width: 64px;">CSS3 STYLING</h2> + +<p><a href="/en-US/docs/CSS" title="CSS">CSS </a> <font>se ha ampliado para ser capaz de menajar elementos de estilo de una manera mucho más compleja. </font><font>Esto se refiere a menudo como</font> <a href="/en-US/docs/CSS/CSS3" title="CSS/CSS3">CSS3</a>, <span style="line-height: 21px;">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.</span></p> + +<dl> + <dt>Nuevas características de diseño de fondo</dt> + <dd>Ahora es posible poner una sombra a un cuadro, con <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow"><code style="font-size: 14px;">box-shadow</code></a> y <a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS / Multiple_backgrounds">varios fondos</a> se pueden ajustar.</dd> +</dl> + +<dl> + <dt>Bordes mas "lujosos"</dt> + <dd>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 <span style="line-height: 1.572;">longhand</span><span style="line-height: 1.572;">, </span>aunque los bordes redondeados son apoyados a través de propiedades <span style="line-height: 1.572;">{{cssxref("border-radius")}} .</span></dd> + <dt>Animación de su estilo</dt> + <dd>Utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_transitions" title="CSS / Using_CSS_transitions">Transiciones CSS</a> para animar entre los diferentes estados o utilizando <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_animations" title="CSS / Using_CSS_animations">animaciones CSS</a> para animar partes de la página, sin que el evento se dispare, ahora puede controlar los elementos móviles en su página.</dd> + <dt>Tipografía mejorada</dt> + <dd>Los autores tienen un mejor control para usar la tipografía. Se puede controlar <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow"><code style="font-size: 14px;">el texto </code></a>{{cssxref("text-overflow")}} y <a href="https://developer.mozilla.org/en-US/docs/CSS/hyphens" title="CSS / guiones">guiones</a> y también puede poner una<a href="https://developer.mozilla.org/en-US/docs/CSS/text-shadow" title="CSS / text-shadow"> sombra</a> o controlar con mayor precisión sus <a href="https://developer.mozilla.org/en-US/docs/CSS/text-decoration" title="SVG / atributo / text-decoration">decoraciones</a> . Los tipos de letra personalizados se pueden descargar y aplicar gracias a la nueva regla <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face"><code style="font-size: 14px;">@font-face</code></a> .</dd> + <dt>Nuevos diseños de presentación</dt> + <dd>Con el fin de mejorar la flexibilidad de los diseños, se han añadido dos nuevos diseños: el <a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="CSS / Using_CSS_multi-column_layouts">CSS diseño de varias columnas</a> , y el <a href="https://developer.mozilla.org/en-US/docs/CSS/Flexbox" title="CSS / Flexbox">cuadro de distribución flexible de CSS</a> .</dd> +</dl> +</div> +</div> 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 +--- +<p><br> + <span lang="es-ES"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">HTML5</a>, 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.</span> <span lang="es-ES">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.</span></p> +<p><span lang="es-ES">Al estar HTML5 aún en la fase de diseño, son inevitables los cambios en las especificaciones.</span> <span lang="es-ES">Debido a esto, algunos navegadores no admiten aún determinadas características.</span> <span lang="es-ES">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.</span> <span lang="es-ES">Puedes encontrar una lista de las características de HTML5 que admite Gecko en la <a href="/es/HTML/HTML5" title="es/HTML/HTML5">página principal de HTML5</a>.</span></p> +<h2 id="El_tipo_de_documento_HTML5">El tipo de documento HTML5</h2> +<p><span lang="es-ES">El tipo de documento para HTML5 es muy sencillo.</span> <span lang="es-ES">Para indicar que el contenido de tu HTML usa HTML5, simplemente utiliza:</span></p> +<pre lang="es-ES" style="margin-bottom: 0.5cm;"><!DOCTYPE html></pre> +<p lang="es-ES">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.</p> +<p lang="es-ES">{{ languages( { "en": "en/HTML/HTML5/Introduction_to_HTML5" } ) }}</p> 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 ---- -<p>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.</p> - -<p>Varias tecnologías (como <a href="/en-US/docs/CSS" title="CSS">CSS</a>, <a href="/en-US/docs/JavaScript/About_JavaScript" title="JavaScript/About_JavaScript">JavaScript</a>, <a href="/en-US/docs/Scripting_Plugins/Adobe_Flash" title="Scripting_Plugins/Adobe_Flash">Flash</a>, <a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JSON" title="JSON">JSON</a>) 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 <a href="/en-US/docs/HTML" title="HTML"><strong>HTML</strong></a> (<strong>HyperText Markup Language)</strong>. Sin HTML, no habría páginas web.</p> - -<p>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.</p> - -<h2 id="Una_breve_historia_del_HTML">Una breve historia del HTML</h2> - -<p>A finales de la década de los 80s, <a href="http://www.w3.org/People/Berners-Lee/" title="http://www.w3.org/People/Berners-Lee/">Tim Berners-Lee</a> estuvo trabajando como físico en <a href="http://public.web.cern.ch/public/" title="http://public.web.cern.ch/public/">CERN</a> (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, <a href="http://en.wikipedia.org/wiki/Ftp" title="http://en.wikipedia.org/wiki/Ftp">FTP</a> (File Transfer Protocol), y <a href="http://en.wikipedia.org/wiki/Usenet" title="http://en.wikipedia.org/wiki/Usenet">Usenet</a>- 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).</p> - -<h2 id="¿Qué_es_el_HTML">¿Qué es el HTML?</h2> - -<p>HTML es un <strong>lenguaje de etiquetas</strong>. 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 /.</p> - -<p>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> - -<div id="Spl1"> -<pre class="brush:html;"><p>Mi perro odia el pescado.</p></pre> -</div> - -<p>Cuando este contenido se muestra en una página web, mediante un navegador, aparece así:</p> - -<p>{{ EmbedLiveSample("Spl1", 400, 50) }}</p> - -<p>El navegador emplea las etiquetas como guías para saber cómo debe ser mostrado el contenido que hay dentro de dichas etiquetas.</p> - -<p>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> - -<div id="Spl2"> -<pre class="brush:html;"><p>Mi perro <em>odia</em> el pescado.</p></pre> -</div> - -<p>Cuando se muestre se verá del siguiente modo:</p> - -<p>{{ EmbedLiveSample("Spl2", 400, 50) }}</p> - -<p>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:</p> - -<pre class="brush:html;"><img src="smileyface.jpg"></pre> - -<p>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 <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> es obligatoria (que es un lenguaje que permite una forma de poder implementar XML en los elementos del HTML).</p> - -<p>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 <a href="http://thimble.webmaker.org/en-US/projects/wrangler/edit" title="http://thimble.webmaker.org/en-US/projects/wrangler/edit">Mozilla Thimble</a>, que es un editor online interactivo que enseña cómo escribir HTML. Además, en el <a href="/en-US/docs/HTML/HTML_Elements" title="HTML/HTML_Elements">HTML Elements</a> 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.</p> - -<h2 id="Elementos_—_los_bloques_básicos_de_construcción">Elementos — los bloques básicos de construcción</h2> - -<p>El HTML consiste en una serie de elementos. Los Elementos definen el significado <strong>semántico</strong> 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 <a href="/en-US/docs/HTML/Element" title="HTML/Element">HTML Elements</a> para ver una lista completa de todos los elementos.</p> - -<p>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.</p> - -<p>Muchos elementos contienen otros elementos, formando una estructura jerárquica. Un ejemplo simple, pero completo de una página web sería este:</p> - -<pre class="brush:html;"><html> - <body> - - <p>Mi perro <em>odia</em> el pescado.</p> - - </body> -</html></pre> - -<p>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 <strong>DOM</strong>: siglas inglesas del Documento Objeto Modelo (<strong>Document Object Model)</strong>.</p> - -<h2 id="Etiquetas">Etiquetas</h2> - -<p>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 <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> (Asociación Global que vela por mantener los estándares HTML) recomiendan usar minúsculas (y además el <a href="/en-US/docs/XHTML" title="XHTML">XHTML</a> requiere de las minúsculas).</p> - -<p>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> - -<pre class="brush: xml"><p>Esto es texto dentro de un párrafo.</p> -</pre> - -<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 <strong>código válido</strong>.</p> - -<p>Esto es un ejemplo de <em>código válido</em>:</p> - -<pre class="brush: xml"><em>Me <strong>refiero</strong> a eso</em>. -</pre> - -<p>Esto es un ejemplo de <em>código inválido</em>:</p> - -<pre class="brush: xml">Invalido: <em>Me <strong>refiero</em> a eso</strong>.</pre> - -<p>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.</p> - -<div class="note"> -<p>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 <a class="external" href="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars" title="http://arstechnica.com/open-source/news/2011/11/a-look-at-the-state-of-html5-parsing-and-the-opera-1160-beta.ars">en todos los navegadores modernos</a>.</p> -</div> - -<p>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:</p> - -<pre class="brush: xml"><img src="smileyface.jpg"></pre> - -<p>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).</p> - -<pre class="brush: xml"><img src="smileyface.jpg" /></pre> - -<p>En HTML esta barra no aporta ninguna funcionalidad técnica y su uso es solamente una elección de estilo.</p> - -<h2 id="Atributos">Atributos</h2> - -<p>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 <strong>atributos</strong>. Los atributos suelen consistir en dor partes:</p> - -<ul> - <li>Un atributo <strong>nombre </strong>(name).</li> - <li>Un atributo <strong>valor</strong> (value).</li> -</ul> - -<p>Algunos atributos sólo pueden tener un único valor. Son atributos <strong>Booleanos</strong> 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:</p> - -<pre class="brush: xml"><input required="required"> - -<input required=""> - -<input required> -</pre> - -<p>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> - -<pre class="brush: xml"><p class=foo bar> (Ten cuidado, esto probablemente no quiere decir lo que piensas que significa.)</pre> - -<p>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> - -<pre class="brush: xml"><p class="foo" bar=""></pre> - -<h2 id="Nombre_de_caracteres_referenciados">Nombre de caracteres referenciados</h2> - -<p>Los<strong> Caraceteres Referenciados </strong> (a veces llamados<em> entidades) </em>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:</p> - -<ul> - <li><code>&gt;</code> representa el carater mayor que (<code>></code>)</li> - <li><code>&lt;</code> representa el caracter menor que (<code><</code>)</li> - <li><code>&amp;</code> representa el caracter ampersand (<code>&</code>)</li> - <li><code>&quot;</code> representa el caracter de comillas dobles (")</li> -</ul> - -<p>Hay <a class="external" href="http://www.w3.org/TR/2011/WD-html5-20110113/named-character-references.html" title="http://www.w3.org/TR/html5/named-character-references.html#named-character-references">muchas más entidades</a>, pero estas cuatro son las más importantes por que representan caracteres que tienen un significado especial en HTML.</p> - -<h2 id="Tipo_de_documento_y_comentarios">Tipo de documento y comentarios</h2> - -<p>Además de las etiquetas, el contenido y las entidades, un documento de HTML debe contener una declaración <strong>doctype</strong> en la primera línea. En el HTML actual esto se escribe del siguiente modo:</p> - -<pre class="brush: xml"><!DOCTYPE html></pre> - -<p>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 <a href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> y que no trate de emular que se trata de un Internet Explorer de los 90's. (Consultar <a href="/en-US/docs/Quirks_Mode_and_Standards_Mode" title="Mozilla's Quirks Mode">peculiaridades</a>.)</p> - -<p>HTML tiene un mecanismo para poder introducir <strong>comentarios</strong> 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:</p> - -<pre class="brush: xml"><!-- Esto es un comentario de texto --></pre> - -<h2 id="Un_pequeño_documento_pero_completo">Un pequeño documento pero completo</h2> - -<p>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 <em>myfirstdoc.html</em> 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.</p> - -<pre class="brush: xml"><!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> -</pre> 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 +--- +<p>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.</p> + +<div class="note"> +<p>A lo largo de este documento se empleará la palabra <strong>esquema</strong> 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 <strong>algoritmo de esquematizado</strong> al proceso de construir el esquema infiriéndolo del contenido.</p> +</div> + +<h2 id="Estructura_de_un_documento_HTML_4">Estructura de un documento HTML 4</h2> + +<p>La estructura de un documento, por ejemplo la estructura semántica de lo que está entre<code> <body></code> y <code></body></code> 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.</p> + +<p>Entonces el siguiente marcado:</p> + +<div style="overflow: hidden;"> +<pre class="brush:xml"><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> +</pre> +</div> + +<p>genera el siguiente esquema:</p> + +<pre>1. El zorro + 1.1 Hábitat +</pre> + +<p>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,</p> + +<pre class="brush:xml"><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> +</pre> + +<p>genera el siguiente esquema:</p> + +<pre>1. El zorro + 1.1 Hábitat + 1.2 Costumbres +2. El oso +</pre> + +<h2 id="Problemas_resueltos_por_HTML5">Problemas resueltos por HTML5</h2> + +<p>La definición de la estructura de un documento en HTML 4 y su algoritmo de esquematizado es muy tosco y genera numerosos problemas:</p> + +<ol> + <li>El uso de {{HTMLElement("div")}} para definir secciones semánticas sin definir valores específicos para los atributos <strong>class</strong> 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 <a class="external" href="https://es.wikipedia.org/wiki/Tecnolog%C3%ADas_de_apoyo" title="http://en.wikipedia.org/wiki/Assistive_technology">tecnologías de apoyo</a>, 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.</li> + <li>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.</li> + <li>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, <code><h1>Mozart</h1><h2>El genio salzburgués</h2></code> crea el esquema <code>1. Mozart 1.1 El genio salzburgués</code>). HTML5 introduce el elemento {{HTMLElement("hgroup")}} que oculta todos los elementos de cabecera excepto el primero de más alto rango (por ejemplo, <code><hgroup><h1>Mozart</h1><h2>El genio salzburgués</h2></hgroup></code> crea el esquema <code>1. Mozart</code>).</li> + <li>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.</li> + <li>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.</li> +</ol> + +<p>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.</p> + +<h2 id="El_algoritmo_de_esquematizado_de_HTML5">El algoritmo de esquematizado de HTML5</h2> + +<h3 id="Definiendo_secciones_en_HTML5">Definiendo secciones en HTML5</h3> + +<p>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")}}.</p> + +<div class="note"><strong>Nota: </strong>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 <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5" title="en-US/docs/Sections_and_Outlines_of_an_HTML5_document#Defining_Headings_in_HTML5">Definiendo cabeceras en HTML5</a>.</div> + +<p>Ejemplo:</p> + +<pre class="brush:xml"><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></pre> + +<p>El bloque de HTML define dos secciones de alto nivel:</p> + +<pre><span style="color: red;"><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></span> + +<span style="color: green;"><footer> + <p>(c) 2010 The Example company +</footer></span></pre> + +<p>La primera sección tiene tres subsecciones:</p> + +<pre><section> + <h1>El pato</h1> + + <span style="color: red;"><section> + <h1>Introducción</h1> + <p>En esta sección, ampliaremos nuestro concepto del pato. + </section></span> + + <span style="color: green;"><section> + <h1>Hábitat</h1> + <p>El pato, como fiero depredador, necesita un entorno con abundantes lobos que cazar. + </section></span> + + <span style="color: blue;"><aside> + <p>Otros estudiosos del lobo + </aside></span> +</section> + +<footer> + <p>(c) 2010 The Example company +</footer></pre> + +<p>Esto genera la siguiente estructura:</p> + +<pre>1. El pato + 1.1 Introducción + 1.2 Hábitat + 1.3 Section (aside) +</pre> + +<h3 id="Definiendo_cabeceras_en_HTML5">Definiendo cabeceras en HTML5</h3> + +<p>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.</p> + +<p>Los elementos de cabecera tienen un <em>rango</em> dado por el número del nombre del elemento, donde {{HTMLElement("h1")}} tiene el rango <em>más alto</em>, y {{HTMLElement("h6")}} tiene el rango <em>más bajo</em>. 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:</p> + +<pre class="brush:xml"><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></pre> + +<p>Genera el siguiente esquema:</p> + +<pre>1. La mosca + 1.1 Hábitat +2. El mosquito</pre> + +<p>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).</p> + +<h3 id="Seccionado_implícito">Seccionado implícito</h3> + +<p>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 <em>seccionado implícito</em>.</p> + +<p>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:</p> + +<pre class="brush:xml"><section> + <h1>El águila</h1> + <p> .... + + <h3 class="subsec-implicita">Hábitat</h3> + <p> ... +</section></pre> + +<p>Genera el siguiente esquema:</p> + +<pre><strong>1. El águila</strong> + <strong>1.1 Hábitat</strong> <em>(impícitamente definido mediante <h3>)</em> +</pre> + +<p>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: </p> + +<pre class="brush:xml"><section> + <h1>El águila</h1> + <p>... + <h1 class="secc-implicita">El buitre</h1> + <p>... +</section></pre> + +<p>genera el siguiente esquema: </p> + +<pre><strong>1. El águila</strong> +<strong>2. El buitre</strong> <em>(implícitamente definido por <h1>, quien al mismo tiempo cierra el <h1> anterior)</em> +</pre> + +<p>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:</p> + +<pre class="brush:xml"><body> + <h1>Colores</h1> + <h2>Rojo</h2> + <p> ... + <section> + <h3>Amarillo</h3> + <p> ... + <h3>Verde</h3> + <p> ... + <h2>Sabores</h2> + <p>... + </section> +</body></pre> + +<p>generando el siguiente esquema:</p> + +<pre><strong>1. Colores + 1.1 Rojo</strong> <em>(implícitamente con <code><h2></code> )</em> + <strong>1.2 Amarillo</strong><em>(explícitamente con <code><section> </code>)</em> + <strong>1.3 Verde</strong> <em>(impícitamente con <code><h3></code>, cerrando el <code><h3></code> previo)</em> +<strong>2. Sabores</strong> <em>(implícitamente con <h2>, cerrando el <section> previo)</em> +</pre> + +<p>É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</p> + +<ul> + <li>Usar <strong>etiquetas explícitas</strong> para abrir y cerrar secciones.</li> + <li> Acomodar el rango de cabecera al nivel de anidamiento de la sección deseada. </li> +</ul> + +<p>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.</p> + +<p>Una <strong>excepción</strong> 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 <strong>reutilizadas</strong> 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.</p> + +<h3 id="Sobreescribiendo_seccionamiento_implícito">Sobreescribiendo seccionamiento implícito</h3> + +<p>A veces una sección necesita tener varios encabezamientos. Unos pocos casos usuales son:</p> + +<ul> + <li>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: + <pre class="brush:xml"><section> + <h1>La flauta mágica</h1> + <h2>Ópera en dos actos del genio salzburgués</h2> +</section></pre> + + <p>genera el siguiente esquema, que claramene <strong>no</strong> es el que se desea:</p> + + <pre>1. La flauta mágica + 1.1 Ópera en dos actos del genio salzburgués +</pre> + </li> + <li>El encabezado secundario puede ser usado por una lista de etiquetas: + <pre class="brush:xml"><section> + <h1>Secciones y esquema del documento</h1> + <h2>HTML, HTML5, secciones, esquema</h2> +</section></pre> + + <p>genera el siguiente esquema, que <strong>tampoco es</strong> el que se desea:</p> + + <pre>1. Secciones y esquema del documento + 1.1 HTML, HTML5, secciones, esquema</pre> + </li> +</ul> + +<p>Debido al seccionado implícito, <strong>esto no es posible sin la ayuda del elemento de agrupamiento de cabeceras</strong> ({{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:</p> + +<pre class="brush:xml"><section> + <hgroup> + <h1>La flauta mágica</h1> + <h2>Ópera en dos actos del genio salzburgués</h2> + </hgroup> + ... algún contenido ... +</section> +</pre> + +<p>genera el siguiente esquema, que es el que se desea:</p> + +<pre>1. La flauta mágica</pre> + +<h3 id="Secciones_desacopladas"><a name="sectioning_root">Secciones desacopladas</a></h3> + +<p>Piensa por un momento en una sección <strong><em>A</em></strong> que contiene una subsección <strong><em>B</em></strong>. A veces es conveniente que <em><strong>B</strong></em> mantenga su esquema interno ( subsecciones, encabezados, etc. ), pero que no "ensucie" el esquema de<em><strong> A</strong></em>, dando lugar a esquemas más claros.</p> + +<p>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")}}.<br> + Estos elementos no se "montan" sobre el esquema global, sin importar su contenido, lo que conlleva un desacoplo o aislamiento entre las partes.</p> + +<p>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.</p> + +<p>Ejemplo:</p> + +<pre class="brush: html"><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></pre> + +<p>Este ejemplo resulta en el siguiente esquema:</p> + +<pre>1. Bach + 1.1 Introducción + 1.2 La Pasión según s. Mateo</pre> + +<p>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.</p> + +<h3 id="Secciones_fuera_del_esquema">Secciones fuera del esquema</h3> + +<p>HTML5 introduce cuatro nuevos elementos que permiten definir secciones que no pertenecen al esquema principal de un documento web:</p> + +<ol> + <li>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.</li> + <li>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.</li> + <li>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.</li> + <li>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.</li> +</ol> + +<h2 id="Direcciones_y_tiempo_de_publicación_en_elementos_de_seccionado">Direcciones y tiempo de publicación en elementos de seccionado</h2> + +<p>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.</p> + +<p>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")}}.</p> + +<p>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")}}.</p> + +<h2 id="Usando_elementos_HTML5_en_navegadores_no_HTML5">Usando elementos HTML5 en navegadores no HTML5</h2> + +<p>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 <code>display:inline</code> por defecto:</p> + +<pre class="brush: css">section, article, aside, footer, header, nav, hgroup { + display:block; +} +</pre> + +<p>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.<br> + <br> + 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:</p> + +<pre class="brush:xml"><!--[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]--></pre> + +<p>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.</p> + +<pre class="brush:xml"><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></pre> + +<p>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:</p> + +<pre class="brush:xml"><!--[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]--></pre> + +<h2 id="Conclusión">Conclusión</h2> + +<p>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.</p> + +<div>{{HTML5ArticleTOC()}}</div> diff --git a/files/es/web/guide/movil/index.html b/files/es/web/guide/mobile/index.html index 684d3df672..684d3df672 100644 --- a/files/es/web/guide/movil/index.html +++ b/files/es/web/guide/mobile/index.html 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 ---- -<p class="note">{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</p> - -<p>El atributo global <strong>dropzone </strong>es un atributo enumerado que indica qué los tipos de contenido pueden ser soltados en un elemento , usando la <a href="/es/docs/DragDrop/Drag_and_Drop">API Drag and Drop</a> . Pueden tener los siguientes valores :</p> - -<ul> - <li>copy , indica que el soltado creará una copia del elemento que fue arrastrado .</li> - <li>move , indica que el elemento que fue arrastrado será movido a su nueva localización .</li> - <li>link, indica que creara un link para el dato arrastrado.</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Sin cambio desde el último snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot de {{SpecName('HTML WHATWG')}}, definición inicial .</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores </h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracterísitica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Cataracterística</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown}}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también </h2> - -<ul> - <li>Tos los atributos globales </li> -</ul> diff --git a/files/es/web/html/atributos/accept/index.html b/files/es/web/html/attributes/accept/index.html index b98ff8b644..b98ff8b644 100644 --- a/files/es/web/html/atributos/accept/index.html +++ b/files/es/web/html/attributes/accept/index.html diff --git a/files/es/web/html/atributos/autocomplete/index.html b/files/es/web/html/attributes/autocomplete/index.html index b8546e368d..b8546e368d 100644 --- a/files/es/web/html/atributos/autocomplete/index.html +++ b/files/es/web/html/attributes/autocomplete/index.html diff --git a/files/es/web/html/atributos_de_configuracion_cors/index.html b/files/es/web/html/attributes/crossorigin/index.html index f7453daa96..f7453daa96 100644 --- a/files/es/web/html/atributos_de_configuracion_cors/index.html +++ b/files/es/web/html/attributes/crossorigin/index.html diff --git a/files/es/web/html/atributos/index.html b/files/es/web/html/attributes/index.html index 03e7d8baee..03e7d8baee 100644 --- a/files/es/web/html/atributos/index.html +++ b/files/es/web/html/attributes/index.html diff --git a/files/es/web/html/atributos/min/index.html b/files/es/web/html/attributes/min/index.html index 4060bd81f4..4060bd81f4 100644 --- a/files/es/web/html/atributos/min/index.html +++ b/files/es/web/html/attributes/min/index.html diff --git a/files/es/web/html/atributos/minlength/index.html b/files/es/web/html/attributes/minlength/index.html index 23056673e2..23056673e2 100644 --- a/files/es/web/html/atributos/minlength/index.html +++ b/files/es/web/html/attributes/minlength/index.html diff --git a/files/es/web/html/atributos/multiple/index.html b/files/es/web/html/attributes/multiple/index.html index cbf465b0b8..cbf465b0b8 100644 --- a/files/es/web/html/atributos/multiple/index.html +++ b/files/es/web/html/attributes/multiple/index.html 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 ---- -<div class="note"> - <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p> -</div> -<h2 id="Introduction" name="Introduction">Introduction</h2> -<p>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.</p> -<p>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 <a href="/es-ES/docs/WebGL">representación del contexto WebGL</a></p> -<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">El contexto de representación 2D</h2> -<h3 id="A_Simple_Example" name="A_Simple_Example">Un ejemplo sencillo</h3> -<p>Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.</p> -<pre class="brush: js">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); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="120" height="120"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p> -<p>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.</p> -<p>El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo. Para representar formas más complejas, se usan trayectorias. </p> -<h3 id="Using_Paths" name="Using_Paths">Usando trayectorias</h3> -<p>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.</p> -<pre class="brush: js">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(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="160" height="160"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p> -<p>Llamando fill() o stroke() causa que el trazo sea usado. Para ser llenado o juntado otra vez, el trazo debe ser recreado.</p> -<h3 id="Graphics_State" name="Graphics_State">Estado de gráficos</h3> -<p>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.</p> -<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">Un ejemplo más complicado</h3> -<p>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.</p> -<pre class="brush: js">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(); -} -</pre> -<div class="hidden"> - <pre class="brush: html"><canvas id="canvas" width="185" height="185"></canvas></pre> - <pre class="brush: js">draw();</pre> -</div> -<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p> -<p>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.</p> -<p>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 ().</p> -<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibilidad con Apple <canvas></h2> -<p>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í.</p> -<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Etiqueta </canvas> requerida </h3> -<p>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.</p> -<p>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.</p> -<p>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).</p> -<pre>canvas { - font-size: 0.00001px !ie; -}</pre> -<h2 id="Additional_Features" name="Additional_Features">Caracteristicas adicionales </h2> -<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Renderizando el contenido we dentro de un Canvas.</h3> -<div class="note"> - Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome. No esta permitido en paginas HTML normales. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Porqué leer</a>.</div> -<p>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:</p> -<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)"); -</pre> -<p>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).</p> -<p>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.</p> -<p>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.</p> -<p>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. </p> -<div class="note"> - 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 </div> -<h2 id="See_also" name="See_also">See also</h2> -<ul> - <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> - <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li> - <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li> - <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li> - <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>: - <ul> - <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li> - <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li> - <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li> - <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li> - <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li> - </ul> - </li> - <li><a href="/en-US/docs/tag/canvas">And more...</a></li> -</ul> diff --git a/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html b/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/index.html deleted file mode 100644 index b44128e05d..0000000000 --- a/files/es/web/html/consejos_para_la_creación_de_páginas_html_de_carga_rápida/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 ---- -<h2 id="Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida">Consejos para la creación de páginas HTML de carga rápida</h2> - -<p>Estos consejos estan basados en conocimiento común y experimentación.</p> - -<p>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.</p> - -<p>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. <span id="result_box" lang="es"><span class="hps">Es</span> <span class="hps">tan importante</span> <span class="hps">para el contenido</span> <span class="hps">de banda ancha</span> <span class="hps">y puede conducir a</span> <span class="hps">mejoras espectaculares</span> <span class="hps">incluso</span> <span class="hps">para sus</span> <span class="hps">visitantes con</span> <span class="hps">las conexiones más rápidas</span><span>.</span></span></p> - -<h3 id="Consejos">Consejos</h3> - -<h4 id="Reducir_el_peso_de_las_páginas_web">Reducir el peso de las páginas web</h4> - -<p>El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.</p> - -<p>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.</p> - -<p>Herramientas como <a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> pueden <span id="result_box" lang="es"><span class="hps">quitar</span> <span class="hps">automáticamente</span> <span class="hps">espacios en blanco</span> <span class="hps">y las líneas</span> <span class="hps">en blanco adicionales</span> <span class="hps">de</span> <span class="hps">código fuente HTML valido</span><span class="hps">. Otras herramientas pueden "comprimir"</span></span> JavaScript al reformatear el codigo fuente o <span id="result_box" lang="es"><span class="hps">por</span> <span class="alt-edited hps">ofuscación</span> <span class="hps">la fuente</span> <span class="hps">y la sustitución de</span> <span class="hps">los identificadores largos con versiones mas cortas.</span></span></p> - -<h3 id="Minimizar_el_número_de_archivos">Minimizar el número de archivos</h3> - -<p>Reducir el número de archivos referentes en una pagina web baja el número de conexiones <a href="https://developer.mozilla.org/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para bajar la página.</p> - -<p>Dependiendo de la configuración de cache de un navegador, puede enviar una petición <span id="result_box" lang="es"><span class="hps">"If</span><span>-Modified-Since"</span></span> 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.</p> - -<p>Al reducir el número de archivos que son refereciados dentro de una página web, <span id="result_box" lang="es"><span class="hps">se reduce el</span> <span class="hps">tiempo necesario para que</span> <span class="hps">estas solicitudes</span> <span class="hps">se envíen</span><span>,</span> <span class="hps">y</span> <span class="hps">para que sus</span> <span class="hps">respuestas</span> <span class="hps">que se reciban</span><span>.</span></span></p> - -<p>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 <span id="result_box" lang="es"><span class="hps">se aplica la</span> <span class="hps">misma imagen</span> <span class="hps">cada</span> <span class="hps">vez que lo necesite</span> <span class="hps">para un fondo,</span> <span class="hps">ajustando las coordenadas el eje (X / Y</span></span>) 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.</p> - -<p>Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, <span id="result_box" lang="es"><span class="hps">ya que el</span> <span class="hps">explorador debe</span> <span class="hps">comprobar</span> <span class="hps">la fecha de modificación</span> <span class="hps">de cada</span> <span class="hps">archivo</span> <span class="hps">CSS o</span> <span class="hps">JavaScript</span><span>, antes de pintar la página.</span></span></p> - -<h3 id="Reducir_la_busqueda_de_dominios">Reducir la busqueda de dominios</h3> - -<p>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 <span id="result_box" lang="es"><span class="hps">que aparecen en</span> <span class="hps">enlace</span> <span class="hps">CSS</span> <span class="atn hps">(</span><span>s</span><span>)</span>, <span class="hps"> JavaScript</span> <span class="hps">y</span> <span class="hps">recursos de</span> <span class="hps">imagen.</span></span></p> - -<p>Esto no puede ser siempre práctico; sin embargo <span id="result_box" lang="es"><span class="hps">siempre se debe</span> <span class="hps">tener cuidado de usar</span> <span class="hps">sólo el número</span> <span class="hps">mínimo necesario</span> <span class="hps">de los diferentes dominios</span> <span class="hps">en</span> <span class="hps">sus páginas</span></span>.</p> - -<h3 id="Reutilización_de_contenido_de_cache">Reutilización de contenido de cache</h3> - -<p><span id="result_box" lang="es"><span class="hps">Asegúrese de que cualquier</span> <span class="hps">contenido que se pueden</span> <span class="hps">almacenar en caché</span><span>,</span> <span class="hps">se almacena en caché</span><span>,</span> <span class="hps">y</span> <span class="hps">con</span> <span class="hps">fechas de caducidad</span> <span class="hps">correspondientes.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">En particular</span><span>,</span> <span class="hps">prestar atención a la</span> <span class="hps">cabecera</span></span> "<code>Last-Modified</code>". Permite el eficiente almacenamiento en cache de la página; <span id="result_box" lang="es"><span class="hps">por medio de</span> <span class="hps">esta cabecera</span><span>, la información</span> <span class="hps">se transmite al</span> <span class="hps">agente de usuario</span> <span class="hps">sobre el archivo</span> <span class="hps">que quiere</span> <span class="hps">cargar</span><span>,</span> <span class="hps">por ejemplo, </span></span><span id="result_box" lang="es"><span class="hps">como cuando</span> <span class="hps">fue</span> <span class="hps">modificada por última vez</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">servidores web</span> <span class="hps">añadirá automáticamente</span> <span class="hps">la</span> <span class="hps">cabecera Last-Modified</span> <span class="hps">para</span> <span class="hps">páginas estáticas</span> <span class="hps">(por ejemplo</span> <span class="hps">.html</span><span>,</span> <span class="hps">.css</span><span>)</span><span>,</span></span> <span id="result_box" lang="es"><span class="hps">basado en</span> <span class="hps">la</span> <span class="hps">fecha de última modificación</span> <span class="hps">almacenada en</span> <span class="hps">el sistema de archivos</span><span>.</span> <span class="hps">Con</span> <span class="hps">páginas dinámicas</span> <span class="hps">(por ejemplo,</span> <span class="hps">.php</span><span>,</span> <span class="hps">.aspx</span><span>)</span><span>,</span> <span class="hps">esto, por supuesto</span><span>,</span> <span class="hps">no se puede hacer</span><span>, y</span> <span class="hps">la cabecera</span> <span class="hps">no se envía</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Así</span><span>,</span> <span class="hps">en particular</span> <span class="hps">para las páginas</span> <span class="hps">que se generan</span> <span class="hps">de forma dinámica</span><span>,</span> <span class="hps">un poco de investigación</span> <span class="hps">sobre este tema es</span> <span class="hps">beneficioso.</span> <span class="hps">Puede ser</span> <span class="hps">un poco</span> <span class="hps">complicada, pero</span> <span class="hps">se ahorrará mucho</span> <span class="hps">en</span> <span class="hps">las solicitudes de página</span> <span class="hps">en las páginas</span> <span class="hps">que</span> <span class="hps">normalmente no serían</span> <span class="hps">cacheable</span><span>.</span></span></p> diff --git a/files/es/web/html/imagen_con_cors_habilitado/index.html b/files/es/web/html/cors_enabled_image/index.html index 4de4e94617..4de4e94617 100644 --- a/files/es/web/html/imagen_con_cors_habilitado/index.html +++ b/files/es/web/html/cors_enabled_image/index.html diff --git a/files/es/web/html/elemento/a/index.html b/files/es/web/html/element/a/index.html index e35402f7a5..e35402f7a5 100644 --- a/files/es/web/html/elemento/a/index.html +++ b/files/es/web/html/element/a/index.html diff --git a/files/es/web/html/elemento/abbr/index.html b/files/es/web/html/element/abbr/index.html index 8646722071..8646722071 100644 --- a/files/es/web/html/elemento/abbr/index.html +++ b/files/es/web/html/element/abbr/index.html diff --git a/files/es/web/html/elemento/acronym/index.html b/files/es/web/html/element/acronym/index.html index 94581489a3..94581489a3 100644 --- a/files/es/web/html/elemento/acronym/index.html +++ b/files/es/web/html/element/acronym/index.html diff --git a/files/es/web/html/elemento/address/index.html b/files/es/web/html/element/address/index.html index fdfacfeba1..fdfacfeba1 100644 --- a/files/es/web/html/elemento/address/index.html +++ b/files/es/web/html/element/address/index.html diff --git a/files/es/web/html/elemento/applet/index.html b/files/es/web/html/element/applet/index.html index 51282989af..51282989af 100644 --- a/files/es/web/html/elemento/applet/index.html +++ b/files/es/web/html/element/applet/index.html diff --git a/files/es/web/html/elemento/area/index.html b/files/es/web/html/element/area/index.html index 201e8745a2..201e8745a2 100644 --- a/files/es/web/html/elemento/area/index.html +++ b/files/es/web/html/element/area/index.html diff --git a/files/es/web/html/elemento/article/index.html b/files/es/web/html/element/article/index.html index 8df680ad6b..8df680ad6b 100644 --- a/files/es/web/html/elemento/article/index.html +++ b/files/es/web/html/element/article/index.html diff --git a/files/es/web/html/elemento/aside/index.html b/files/es/web/html/element/aside/index.html index 1032e47e9c..1032e47e9c 100644 --- a/files/es/web/html/elemento/aside/index.html +++ b/files/es/web/html/element/aside/index.html diff --git a/files/es/web/html/elemento/audio/index.html b/files/es/web/html/element/audio/index.html index 02c621f421..02c621f421 100644 --- a/files/es/web/html/elemento/audio/index.html +++ b/files/es/web/html/element/audio/index.html diff --git a/files/es/web/html/elemento/b/index.html b/files/es/web/html/element/b/index.html index e4281a9296..e4281a9296 100644 --- a/files/es/web/html/elemento/b/index.html +++ b/files/es/web/html/element/b/index.html diff --git a/files/es/web/html/elemento/base/index.html b/files/es/web/html/element/base/index.html index 4912e33f0b..4912e33f0b 100644 --- a/files/es/web/html/elemento/base/index.html +++ b/files/es/web/html/element/base/index.html diff --git a/files/es/web/html/elemento/basefont/index.html b/files/es/web/html/element/basefont/index.html index 5b86ea16a3..5b86ea16a3 100644 --- a/files/es/web/html/elemento/basefont/index.html +++ b/files/es/web/html/element/basefont/index.html diff --git a/files/es/web/html/elemento/bdi/index.html b/files/es/web/html/element/bdi/index.html index 075afa13a6..075afa13a6 100644 --- a/files/es/web/html/elemento/bdi/index.html +++ b/files/es/web/html/element/bdi/index.html diff --git a/files/es/web/html/elemento/bdo/index.html b/files/es/web/html/element/bdo/index.html index 0a4af7fe92..0a4af7fe92 100644 --- a/files/es/web/html/elemento/bdo/index.html +++ b/files/es/web/html/element/bdo/index.html diff --git a/files/es/web/html/elemento/bgsound/index.html b/files/es/web/html/element/bgsound/index.html index 81b73a1e30..81b73a1e30 100644 --- a/files/es/web/html/elemento/bgsound/index.html +++ b/files/es/web/html/element/bgsound/index.html diff --git a/files/es/web/html/elemento/big/index.html b/files/es/web/html/element/big/index.html index a15f1b5da9..a15f1b5da9 100644 --- a/files/es/web/html/elemento/big/index.html +++ b/files/es/web/html/element/big/index.html diff --git a/files/es/web/html/elemento/blink/index.html b/files/es/web/html/element/blink/index.html index f63821708a..f63821708a 100644 --- a/files/es/web/html/elemento/blink/index.html +++ b/files/es/web/html/element/blink/index.html diff --git a/files/es/web/html/elemento/blockquote/index.html b/files/es/web/html/element/blockquote/index.html index d8f71a7ed4..d8f71a7ed4 100644 --- a/files/es/web/html/elemento/blockquote/index.html +++ b/files/es/web/html/element/blockquote/index.html diff --git a/files/es/web/html/elemento/body/index.html b/files/es/web/html/element/body/index.html index 32b0a64328..32b0a64328 100644 --- a/files/es/web/html/elemento/body/index.html +++ b/files/es/web/html/element/body/index.html diff --git a/files/es/web/html/elemento/br/index.html b/files/es/web/html/element/br/index.html index 1e9cff3b58..1e9cff3b58 100644 --- a/files/es/web/html/elemento/br/index.html +++ b/files/es/web/html/element/br/index.html diff --git a/files/es/web/html/elemento/button/index.html b/files/es/web/html/element/button/index.html index abcab78469..abcab78469 100644 --- a/files/es/web/html/elemento/button/index.html +++ b/files/es/web/html/element/button/index.html diff --git a/files/es/web/html/elemento/canvas/index.html b/files/es/web/html/element/canvas/index.html index 63e3e260a3..63e3e260a3 100644 --- a/files/es/web/html/elemento/canvas/index.html +++ b/files/es/web/html/element/canvas/index.html diff --git a/files/es/web/html/elemento/caption/index.html b/files/es/web/html/element/caption/index.html index 84d06cffaa..84d06cffaa 100644 --- a/files/es/web/html/elemento/caption/index.html +++ b/files/es/web/html/element/caption/index.html diff --git a/files/es/web/html/elemento/center/index.html b/files/es/web/html/element/center/index.html index 1a24bbaf4b..1a24bbaf4b 100644 --- a/files/es/web/html/elemento/center/index.html +++ b/files/es/web/html/element/center/index.html diff --git a/files/es/web/html/elemento/cite/index.html b/files/es/web/html/element/cite/index.html index 237934b396..237934b396 100644 --- a/files/es/web/html/elemento/cite/index.html +++ b/files/es/web/html/element/cite/index.html diff --git a/files/es/web/html/elemento/code/index.html b/files/es/web/html/element/code/index.html index dfcac59bfd..dfcac59bfd 100644 --- a/files/es/web/html/elemento/code/index.html +++ b/files/es/web/html/element/code/index.html diff --git a/files/es/web/html/elemento/col/index.html b/files/es/web/html/element/col/index.html index 4f8c415f87..4f8c415f87 100644 --- a/files/es/web/html/elemento/col/index.html +++ b/files/es/web/html/element/col/index.html diff --git a/files/es/web/html/elemento/colgroup/index.html b/files/es/web/html/element/colgroup/index.html index da87284232..da87284232 100644 --- a/files/es/web/html/elemento/colgroup/index.html +++ b/files/es/web/html/element/colgroup/index.html diff --git a/files/es/web/html/elemento/content/index.html b/files/es/web/html/element/content/index.html index 0e380c1cd9..0e380c1cd9 100644 --- a/files/es/web/html/elemento/content/index.html +++ b/files/es/web/html/element/content/index.html diff --git a/files/es/web/html/elemento/data/index.html b/files/es/web/html/element/data/index.html index 8f202fa334..8f202fa334 100644 --- a/files/es/web/html/elemento/data/index.html +++ b/files/es/web/html/element/data/index.html diff --git a/files/es/web/html/elemento/datalist/index.html b/files/es/web/html/element/datalist/index.html index 40049a9734..40049a9734 100644 --- a/files/es/web/html/elemento/datalist/index.html +++ b/files/es/web/html/element/datalist/index.html diff --git a/files/es/web/html/elemento/dd/index.html b/files/es/web/html/element/dd/index.html index 3296e7758b..3296e7758b 100644 --- a/files/es/web/html/elemento/dd/index.html +++ b/files/es/web/html/element/dd/index.html diff --git a/files/es/web/html/elemento/del/index.html b/files/es/web/html/element/del/index.html index b38c85a532..b38c85a532 100644 --- a/files/es/web/html/elemento/del/index.html +++ b/files/es/web/html/element/del/index.html diff --git a/files/es/web/html/elemento/details/index.html b/files/es/web/html/element/details/index.html index cd8b0c5abb..cd8b0c5abb 100644 --- a/files/es/web/html/elemento/details/index.html +++ b/files/es/web/html/element/details/index.html diff --git a/files/es/web/html/elemento/dfn/index.html b/files/es/web/html/element/dfn/index.html index 03242c90bd..03242c90bd 100644 --- a/files/es/web/html/elemento/dfn/index.html +++ b/files/es/web/html/element/dfn/index.html diff --git a/files/es/web/html/elemento/dialog/index.html b/files/es/web/html/element/dialog/index.html index e44363c003..e44363c003 100644 --- a/files/es/web/html/elemento/dialog/index.html +++ b/files/es/web/html/element/dialog/index.html diff --git a/files/es/web/html/elemento/dir/index.html b/files/es/web/html/element/dir/index.html index 6c95601436..6c95601436 100644 --- a/files/es/web/html/elemento/dir/index.html +++ b/files/es/web/html/element/dir/index.html diff --git a/files/es/web/html/elemento/div/index.html b/files/es/web/html/element/div/index.html index 5421099e45..5421099e45 100644 --- a/files/es/web/html/elemento/div/index.html +++ b/files/es/web/html/element/div/index.html diff --git a/files/es/web/html/elemento/dl/index.html b/files/es/web/html/element/dl/index.html index 9bea9588ce..9bea9588ce 100644 --- a/files/es/web/html/elemento/dl/index.html +++ b/files/es/web/html/element/dl/index.html diff --git a/files/es/web/html/elemento/dt/index.html b/files/es/web/html/element/dt/index.html index 7cbf0c3182..7cbf0c3182 100644 --- a/files/es/web/html/elemento/dt/index.html +++ b/files/es/web/html/element/dt/index.html diff --git a/files/es/web/html/elemento/em/index.html b/files/es/web/html/element/em/index.html index d24fa05f81..d24fa05f81 100644 --- a/files/es/web/html/elemento/em/index.html +++ b/files/es/web/html/element/em/index.html diff --git a/files/es/web/html/elemento/embed/index.html b/files/es/web/html/element/embed/index.html index d489014613..d489014613 100644 --- a/files/es/web/html/elemento/embed/index.html +++ b/files/es/web/html/element/embed/index.html diff --git a/files/es/web/html/elemento/fieldset/index.html b/files/es/web/html/element/fieldset/index.html index bb29878206..bb29878206 100644 --- a/files/es/web/html/elemento/fieldset/index.html +++ b/files/es/web/html/element/fieldset/index.html diff --git a/files/es/web/html/elemento/figcaption/index.html b/files/es/web/html/element/figcaption/index.html index b212c17632..b212c17632 100644 --- a/files/es/web/html/elemento/figcaption/index.html +++ b/files/es/web/html/element/figcaption/index.html diff --git a/files/es/web/html/elemento/figure/index.html b/files/es/web/html/element/figure/index.html index 1ad3d12a07..1ad3d12a07 100644 --- a/files/es/web/html/elemento/figure/index.html +++ b/files/es/web/html/element/figure/index.html diff --git a/files/es/web/html/elemento/font/index.html b/files/es/web/html/element/font/index.html index e1020b3d95..e1020b3d95 100644 --- a/files/es/web/html/elemento/font/index.html +++ b/files/es/web/html/element/font/index.html diff --git a/files/es/web/html/elemento/footer/index.html b/files/es/web/html/element/footer/index.html index fb29106abc..fb29106abc 100644 --- a/files/es/web/html/elemento/footer/index.html +++ b/files/es/web/html/element/footer/index.html diff --git a/files/es/web/html/elemento/form/index.html b/files/es/web/html/element/form/index.html index d0ade4348c..d0ade4348c 100644 --- a/files/es/web/html/elemento/form/index.html +++ b/files/es/web/html/element/form/index.html diff --git a/files/es/web/html/elemento/frame/index.html b/files/es/web/html/element/frame/index.html index 21df468c42..21df468c42 100644 --- a/files/es/web/html/elemento/frame/index.html +++ b/files/es/web/html/element/frame/index.html diff --git a/files/es/web/html/elemento/frameset/index.html b/files/es/web/html/element/frameset/index.html index cf90335bc6..cf90335bc6 100644 --- a/files/es/web/html/elemento/frameset/index.html +++ b/files/es/web/html/element/frameset/index.html diff --git a/files/es/web/html/elemento/head/index.html b/files/es/web/html/element/head/index.html index e0e6e13fe1..e0e6e13fe1 100644 --- a/files/es/web/html/elemento/head/index.html +++ b/files/es/web/html/element/head/index.html diff --git a/files/es/web/html/elemento/header/index.html b/files/es/web/html/element/header/index.html index f4bdcd9a75..f4bdcd9a75 100644 --- a/files/es/web/html/elemento/header/index.html +++ b/files/es/web/html/element/header/index.html diff --git a/files/es/web/html/elemento/elementos_títulos/index.html b/files/es/web/html/element/heading_elements/index.html index be0dd6801b..be0dd6801b 100644 --- a/files/es/web/html/elemento/elementos_títulos/index.html +++ b/files/es/web/html/element/heading_elements/index.html diff --git a/files/es/web/html/elemento/hgroup/index.html b/files/es/web/html/element/hgroup/index.html index 18aa804ac2..18aa804ac2 100644 --- a/files/es/web/html/elemento/hgroup/index.html +++ b/files/es/web/html/element/hgroup/index.html diff --git a/files/es/web/html/elemento/hr/index.html b/files/es/web/html/element/hr/index.html index 22b569e245..22b569e245 100644 --- a/files/es/web/html/elemento/hr/index.html +++ b/files/es/web/html/element/hr/index.html diff --git a/files/es/web/html/elemento/html/index.html b/files/es/web/html/element/html/index.html index 48fd5f469e..48fd5f469e 100644 --- a/files/es/web/html/elemento/html/index.html +++ b/files/es/web/html/element/html/index.html diff --git a/files/es/web/html/elemento/i/index.html b/files/es/web/html/element/i/index.html index e3b318e367..e3b318e367 100644 --- a/files/es/web/html/elemento/i/index.html +++ b/files/es/web/html/element/i/index.html diff --git a/files/es/web/html/elemento/iframe/index.html b/files/es/web/html/element/iframe/index.html index 23d58f54e8..23d58f54e8 100644 --- a/files/es/web/html/elemento/iframe/index.html +++ b/files/es/web/html/element/iframe/index.html diff --git a/files/es/web/html/elemento/image/index.html b/files/es/web/html/element/image/index.html index e48d44488f..e48d44488f 100644 --- a/files/es/web/html/elemento/image/index.html +++ b/files/es/web/html/element/image/index.html diff --git a/files/es/web/html/elemento/img/index.html b/files/es/web/html/element/img/index.html index 6345af1848..6345af1848 100644 --- a/files/es/web/html/elemento/img/index.html +++ b/files/es/web/html/element/img/index.html diff --git a/files/es/web/html/elemento/index.html b/files/es/web/html/element/index.html index 537ca3cd41..537ca3cd41 100644 --- a/files/es/web/html/elemento/index.html +++ b/files/es/web/html/element/index.html diff --git a/files/es/web/html/elemento/input/botón/index.html b/files/es/web/html/element/input/button/index.html index 7fbe354405..7fbe354405 100644 --- a/files/es/web/html/elemento/input/botón/index.html +++ b/files/es/web/html/element/input/button/index.html diff --git a/files/es/web/html/elemento/input/checkbox/index.html b/files/es/web/html/element/input/checkbox/index.html index 1798198434..1798198434 100644 --- a/files/es/web/html/elemento/input/checkbox/index.html +++ b/files/es/web/html/element/input/checkbox/index.html diff --git a/files/es/web/html/elemento/input/color/index.html b/files/es/web/html/element/input/color/index.html index 09773888f0..09773888f0 100644 --- a/files/es/web/html/elemento/input/color/index.html +++ b/files/es/web/html/element/input/color/index.html diff --git a/files/es/web/html/elemento/input/date/index.html b/files/es/web/html/element/input/date/index.html index a1c36c5530..a1c36c5530 100644 --- a/files/es/web/html/elemento/input/date/index.html +++ b/files/es/web/html/element/input/date/index.html diff --git a/files/es/web/html/elemento/input/datetime/index.html b/files/es/web/html/element/input/datetime/index.html index f1f4aeac25..f1f4aeac25 100644 --- a/files/es/web/html/elemento/input/datetime/index.html +++ b/files/es/web/html/element/input/datetime/index.html diff --git a/files/es/web/html/elemento/input/email/index.html b/files/es/web/html/element/input/email/index.html index f07953bb29..f07953bb29 100644 --- a/files/es/web/html/elemento/input/email/index.html +++ b/files/es/web/html/element/input/email/index.html diff --git a/files/es/web/html/elemento/input/hidden/index.html b/files/es/web/html/element/input/hidden/index.html index b7c1c42126..b7c1c42126 100644 --- a/files/es/web/html/elemento/input/hidden/index.html +++ b/files/es/web/html/element/input/hidden/index.html diff --git a/files/es/web/html/elemento/input/index.html b/files/es/web/html/element/input/index.html index 7af5101141..7af5101141 100644 --- a/files/es/web/html/elemento/input/index.html +++ b/files/es/web/html/element/input/index.html diff --git a/files/es/web/html/elemento/input/number/index.html b/files/es/web/html/element/input/number/index.html index 102e540f7e..102e540f7e 100644 --- a/files/es/web/html/elemento/input/number/index.html +++ b/files/es/web/html/element/input/number/index.html diff --git a/files/es/web/html/elemento/input/password/index.html b/files/es/web/html/element/input/password/index.html index 2fd6cd5cb2..2fd6cd5cb2 100644 --- a/files/es/web/html/elemento/input/password/index.html +++ b/files/es/web/html/element/input/password/index.html diff --git a/files/es/web/html/elemento/input/range/index.html b/files/es/web/html/element/input/range/index.html index e0cf92d55a..e0cf92d55a 100644 --- a/files/es/web/html/elemento/input/range/index.html +++ b/files/es/web/html/element/input/range/index.html diff --git a/files/es/web/html/elemento/input/text/index.html b/files/es/web/html/element/input/text/index.html index b98f985679..b98f985679 100644 --- a/files/es/web/html/elemento/input/text/index.html +++ b/files/es/web/html/element/input/text/index.html diff --git a/files/es/web/html/elemento/ins/index.html b/files/es/web/html/element/ins/index.html index 8201603d48..8201603d48 100644 --- a/files/es/web/html/elemento/ins/index.html +++ b/files/es/web/html/element/ins/index.html diff --git a/files/es/web/html/elemento/isindex/index.html b/files/es/web/html/element/isindex/index.html index 520c286c08..520c286c08 100644 --- a/files/es/web/html/elemento/isindex/index.html +++ b/files/es/web/html/element/isindex/index.html diff --git a/files/es/web/html/elemento/kbd/index.html b/files/es/web/html/element/kbd/index.html index 1f29dead64..1f29dead64 100644 --- a/files/es/web/html/elemento/kbd/index.html +++ b/files/es/web/html/element/kbd/index.html diff --git a/files/es/web/html/elemento/keygen/index.html b/files/es/web/html/element/keygen/index.html index 0370a780cd..0370a780cd 100644 --- a/files/es/web/html/elemento/keygen/index.html +++ b/files/es/web/html/element/keygen/index.html diff --git a/files/es/web/html/elemento/label/index.html b/files/es/web/html/element/label/index.html index 3017c1ba36..3017c1ba36 100644 --- a/files/es/web/html/elemento/label/index.html +++ b/files/es/web/html/element/label/index.html diff --git a/files/es/web/html/elemento/legend/index.html b/files/es/web/html/element/legend/index.html index 1aaaecced4..1aaaecced4 100644 --- a/files/es/web/html/elemento/legend/index.html +++ b/files/es/web/html/element/legend/index.html diff --git a/files/es/web/html/elemento/li/index.html b/files/es/web/html/element/li/index.html index 5c9755e528..5c9755e528 100644 --- a/files/es/web/html/elemento/li/index.html +++ b/files/es/web/html/element/li/index.html diff --git a/files/es/web/html/elemento/link/index.html b/files/es/web/html/element/link/index.html index e604bf0f30..e604bf0f30 100644 --- a/files/es/web/html/elemento/link/index.html +++ b/files/es/web/html/element/link/index.html diff --git a/files/es/web/html/elemento/main/index.html b/files/es/web/html/element/main/index.html index fd3fd6c917..fd3fd6c917 100644 --- a/files/es/web/html/elemento/main/index.html +++ b/files/es/web/html/element/main/index.html diff --git a/files/es/web/html/elemento/map/index.html b/files/es/web/html/element/map/index.html index 1a87193ffc..1a87193ffc 100644 --- a/files/es/web/html/elemento/map/index.html +++ b/files/es/web/html/element/map/index.html diff --git a/files/es/web/html/elemento/mark/index.html b/files/es/web/html/element/mark/index.html index 38ed980e3a..38ed980e3a 100644 --- a/files/es/web/html/elemento/mark/index.html +++ b/files/es/web/html/element/mark/index.html diff --git a/files/es/web/html/elemento/marquee/index.html b/files/es/web/html/element/marquee/index.html index 5eeeec12bf..5eeeec12bf 100644 --- a/files/es/web/html/elemento/marquee/index.html +++ b/files/es/web/html/element/marquee/index.html diff --git a/files/es/web/html/elemento/menu/index.html b/files/es/web/html/element/menu/index.html index 887e230f1b..887e230f1b 100644 --- a/files/es/web/html/elemento/menu/index.html +++ b/files/es/web/html/element/menu/index.html diff --git a/files/es/web/html/elemento/meta/index.html b/files/es/web/html/element/meta/index.html index c2fa5ce5a5..c2fa5ce5a5 100644 --- a/files/es/web/html/elemento/meta/index.html +++ b/files/es/web/html/element/meta/index.html diff --git a/files/es/web/html/elemento/multicol/index.html b/files/es/web/html/element/multicol/index.html index e03e9ae580..e03e9ae580 100644 --- a/files/es/web/html/elemento/multicol/index.html +++ b/files/es/web/html/element/multicol/index.html diff --git a/files/es/web/html/elemento/nav/index.html b/files/es/web/html/element/nav/index.html index c8d998cef2..c8d998cef2 100644 --- a/files/es/web/html/elemento/nav/index.html +++ b/files/es/web/html/element/nav/index.html diff --git a/files/es/web/html/elemento/nobr/index.html b/files/es/web/html/element/nobr/index.html index 2585c6c084..2585c6c084 100644 --- a/files/es/web/html/elemento/nobr/index.html +++ b/files/es/web/html/element/nobr/index.html diff --git a/files/es/web/html/elemento/noframes/index.html b/files/es/web/html/element/noframes/index.html index 97f1c8e234..97f1c8e234 100644 --- a/files/es/web/html/elemento/noframes/index.html +++ b/files/es/web/html/element/noframes/index.html diff --git a/files/es/web/html/elemento/noscript/index.html b/files/es/web/html/element/noscript/index.html index c90b056c7b..c90b056c7b 100644 --- a/files/es/web/html/elemento/noscript/index.html +++ b/files/es/web/html/element/noscript/index.html diff --git a/files/es/web/html/elemento/object/index.html b/files/es/web/html/element/object/index.html index d859ea1b66..d859ea1b66 100644 --- a/files/es/web/html/elemento/object/index.html +++ b/files/es/web/html/element/object/index.html diff --git a/files/es/web/html/elemento/ol/index.html b/files/es/web/html/element/ol/index.html index f62713c92b..f62713c92b 100644 --- a/files/es/web/html/elemento/ol/index.html +++ b/files/es/web/html/element/ol/index.html diff --git a/files/es/web/html/elemento/option/index.html b/files/es/web/html/element/option/index.html index 3b97475475..3b97475475 100644 --- a/files/es/web/html/elemento/option/index.html +++ b/files/es/web/html/element/option/index.html diff --git a/files/es/web/html/elemento/p/index.html b/files/es/web/html/element/p/index.html index 5e9216b1f5..5e9216b1f5 100644 --- a/files/es/web/html/elemento/p/index.html +++ b/files/es/web/html/element/p/index.html diff --git a/files/es/web/html/elemento/param/index.html b/files/es/web/html/element/param/index.html index b9314fa0c1..b9314fa0c1 100644 --- a/files/es/web/html/elemento/param/index.html +++ b/files/es/web/html/element/param/index.html diff --git a/files/es/web/html/elemento/picture/index.html b/files/es/web/html/element/picture/index.html index 99d681da97..99d681da97 100644 --- a/files/es/web/html/elemento/picture/index.html +++ b/files/es/web/html/element/picture/index.html diff --git a/files/es/web/html/elemento/pre/index.html b/files/es/web/html/element/pre/index.html index 2ec0cf56dc..2ec0cf56dc 100644 --- a/files/es/web/html/elemento/pre/index.html +++ b/files/es/web/html/element/pre/index.html diff --git a/files/es/web/html/elemento/progress/index.html b/files/es/web/html/element/progress/index.html index 581c0da783..581c0da783 100644 --- a/files/es/web/html/elemento/progress/index.html +++ b/files/es/web/html/element/progress/index.html diff --git a/files/es/web/html/elemento/q/index.html b/files/es/web/html/element/q/index.html index edcc4076e6..edcc4076e6 100644 --- a/files/es/web/html/elemento/q/index.html +++ b/files/es/web/html/element/q/index.html diff --git a/files/es/web/html/elemento/s/index.html b/files/es/web/html/element/s/index.html index e515a0257f..e515a0257f 100644 --- a/files/es/web/html/elemento/s/index.html +++ b/files/es/web/html/element/s/index.html diff --git a/files/es/web/html/elemento/samp/index.html b/files/es/web/html/element/samp/index.html index 2957372979..2957372979 100644 --- a/files/es/web/html/elemento/samp/index.html +++ b/files/es/web/html/element/samp/index.html diff --git a/files/es/web/html/elemento/section/index.html b/files/es/web/html/element/section/index.html index 3a68adbae3..3a68adbae3 100644 --- a/files/es/web/html/elemento/section/index.html +++ b/files/es/web/html/element/section/index.html diff --git a/files/es/web/html/elemento/select/index.html b/files/es/web/html/element/select/index.html index edaf0488ab..edaf0488ab 100644 --- a/files/es/web/html/elemento/select/index.html +++ b/files/es/web/html/element/select/index.html diff --git a/files/es/web/html/elemento/shadow/index.html b/files/es/web/html/element/shadow/index.html index bd3cc37616..bd3cc37616 100644 --- a/files/es/web/html/elemento/shadow/index.html +++ b/files/es/web/html/element/shadow/index.html diff --git a/files/es/web/html/elemento/slot/index.html b/files/es/web/html/element/slot/index.html index b7a7407d83..b7a7407d83 100644 --- a/files/es/web/html/elemento/slot/index.html +++ b/files/es/web/html/element/slot/index.html diff --git a/files/es/web/html/elemento/small/index.html b/files/es/web/html/element/small/index.html index 21f0cb4331..21f0cb4331 100644 --- a/files/es/web/html/elemento/small/index.html +++ b/files/es/web/html/element/small/index.html diff --git a/files/es/web/html/elemento/source/index.html b/files/es/web/html/element/source/index.html index c116ef3464..c116ef3464 100644 --- a/files/es/web/html/elemento/source/index.html +++ b/files/es/web/html/element/source/index.html diff --git a/files/es/web/html/elemento/span/index.html b/files/es/web/html/element/span/index.html index 38a79bda5c..38a79bda5c 100644 --- a/files/es/web/html/elemento/span/index.html +++ b/files/es/web/html/element/span/index.html diff --git a/files/es/web/html/elemento/strike/index.html b/files/es/web/html/element/strike/index.html index cb33cc0fe7..cb33cc0fe7 100644 --- a/files/es/web/html/elemento/strike/index.html +++ b/files/es/web/html/element/strike/index.html diff --git a/files/es/web/html/elemento/strong/index.html b/files/es/web/html/element/strong/index.html index e04ea0a0e7..e04ea0a0e7 100644 --- a/files/es/web/html/elemento/strong/index.html +++ b/files/es/web/html/element/strong/index.html diff --git a/files/es/web/html/elemento/style/index.html b/files/es/web/html/element/style/index.html index c298d810ad..c298d810ad 100644 --- a/files/es/web/html/elemento/style/index.html +++ b/files/es/web/html/element/style/index.html diff --git a/files/es/web/html/elemento/sub/index.html b/files/es/web/html/element/sub/index.html index 4140eaa5cf..4140eaa5cf 100644 --- a/files/es/web/html/elemento/sub/index.html +++ b/files/es/web/html/element/sub/index.html diff --git a/files/es/web/html/elemento/sup/index.html b/files/es/web/html/element/sup/index.html index 51f98765f1..51f98765f1 100644 --- a/files/es/web/html/elemento/sup/index.html +++ b/files/es/web/html/element/sup/index.html diff --git a/files/es/web/html/elemento/table/index.html b/files/es/web/html/element/table/index.html index 1dffe0d7c2..1dffe0d7c2 100644 --- a/files/es/web/html/elemento/table/index.html +++ b/files/es/web/html/element/table/index.html diff --git a/files/es/web/html/elemento/td/index.html b/files/es/web/html/element/td/index.html index dc8867d87f..dc8867d87f 100644 --- a/files/es/web/html/elemento/td/index.html +++ b/files/es/web/html/element/td/index.html diff --git a/files/es/web/html/elemento/template/index.html b/files/es/web/html/element/template/index.html index b6fe0ca924..b6fe0ca924 100644 --- a/files/es/web/html/elemento/template/index.html +++ b/files/es/web/html/element/template/index.html diff --git a/files/es/web/html/elemento/textarea/index.html b/files/es/web/html/element/textarea/index.html index f062f6e1c6..f062f6e1c6 100644 --- a/files/es/web/html/elemento/textarea/index.html +++ b/files/es/web/html/element/textarea/index.html diff --git a/files/es/web/html/elemento/th/index.html b/files/es/web/html/element/th/index.html index dae17481e0..dae17481e0 100644 --- a/files/es/web/html/elemento/th/index.html +++ b/files/es/web/html/element/th/index.html diff --git a/files/es/web/html/elemento/time/index.html b/files/es/web/html/element/time/index.html index 8216d3b167..8216d3b167 100644 --- a/files/es/web/html/elemento/time/index.html +++ b/files/es/web/html/element/time/index.html diff --git a/files/es/web/html/elemento/title/index.html b/files/es/web/html/element/title/index.html index 978149f8a6..978149f8a6 100644 --- a/files/es/web/html/elemento/title/index.html +++ b/files/es/web/html/element/title/index.html diff --git a/files/es/web/html/elemento/tr/index.html b/files/es/web/html/element/tr/index.html index 6e57c8d5e0..6e57c8d5e0 100644 --- a/files/es/web/html/elemento/tr/index.html +++ b/files/es/web/html/element/tr/index.html diff --git a/files/es/web/html/elemento/track/index.html b/files/es/web/html/element/track/index.html index e05d9f0a9e..e05d9f0a9e 100644 --- a/files/es/web/html/elemento/track/index.html +++ b/files/es/web/html/element/track/index.html diff --git a/files/es/web/html/elemento/tt/index.html b/files/es/web/html/element/tt/index.html index 3bdd50de49..3bdd50de49 100644 --- a/files/es/web/html/elemento/tt/index.html +++ b/files/es/web/html/element/tt/index.html diff --git a/files/es/web/html/elemento/u/index.html b/files/es/web/html/element/u/index.html index 1a355b443d..1a355b443d 100644 --- a/files/es/web/html/elemento/u/index.html +++ b/files/es/web/html/element/u/index.html diff --git a/files/es/web/html/elemento/ul/index.html b/files/es/web/html/element/ul/index.html index 6279c722bc..6279c722bc 100644 --- a/files/es/web/html/elemento/ul/index.html +++ b/files/es/web/html/element/ul/index.html diff --git a/files/es/web/html/elemento/var/index.html b/files/es/web/html/element/var/index.html index dd29c31159..dd29c31159 100644 --- a/files/es/web/html/elemento/var/index.html +++ b/files/es/web/html/element/var/index.html diff --git a/files/es/web/html/elemento/video/index.html b/files/es/web/html/element/video/index.html index e816c5db91..e816c5db91 100644 --- a/files/es/web/html/elemento/video/index.html +++ b/files/es/web/html/element/video/index.html diff --git a/files/es/web/html/elemento/wbr/index.html b/files/es/web/html/element/wbr/index.html index 2cee9077c4..2cee9077c4 100644 --- a/files/es/web/html/elemento/wbr/index.html +++ b/files/es/web/html/element/wbr/index.html diff --git a/files/es/web/html/elemento/xmp/index.html b/files/es/web/html/element/xmp/index.html index 88ab19b65e..88ab19b65e 100644 --- a/files/es/web/html/elemento/xmp/index.html +++ b/files/es/web/html/element/xmp/index.html diff --git a/files/es/web/html/elemento/command/index.html b/files/es/web/html/elemento/command/index.html deleted file mode 100644 index eaaeb3118c..0000000000 --- a/files/es/web/html/elemento/command/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: <command> -slug: Web/HTML/Elemento/command -tags: - - HTML - - Obsoleto -translation_of: Web/HTML/Element/command ---- -<div>{{obsolete_header()}}</div> - -<div class="note"> -<p><span style="font-size: 14px; line-height: 21px;"><strong>Nota: </strong>El elemento <code>command</code> ha sido removido de </span>{{Gecko("24.0")}} en favor del elemento {{HTMLElement("menuitem")}} . Firefox nunca ha soportado este elemento <code>command , </code>y la implementación existente de la interface DOM {{domxref("HTMLCommandElement")}} ha sido removida de <a href="/en-US/docs/Site_Compatibility_for_Firefox_24">Firefox 24</a>.</p> -</div> - -<h2 id="Resumen_de_el_catalogo">Resumen de el catalogo</h2> - -<pre><command function="About live stream"></pre> - -<h3 class="brush: html" id="sect1"></h3> - -<h4 id="El_elemento_command_representa_un_comando_que_el_usuario_puede_invocar_.">El elemento <code>command </code>representa un comando que el usuario puede invocar .</h4> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido">Categorías de contenido</a></th> - <td>Contenido dinámico , contenido estático de texto, contenido de metadata .</td> - </tr> - <tr> - <th scope="row">Contenido permitido</th> - <td>Ninguno , es un {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Omisión de etiquetas</th> - <td>La etiqueta de inicio es obligatoria , pero como es un elemento vacío , el uso de una etiqueta de cierre está prohibido . </td> - </tr> - <tr> - <th scope="row">Elementos padre permitidos </th> - <td>Solamente {{HTMLElement("colgroup")}} ,aunque puede ser definido implícitamente ya que su etiqueta de inicio no es obligatoria .El {{HTMLElement("colgroup")}} no debe de tener un {{HTMLElement("span")}} como hijo .</td> - </tr> - <tr> - <th scope="row">Interface DOM </th> - <td>{{domxref("HTMLCommandElement")}} {{ obsolete_inline(24) }}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos">Atributos</h2> - -<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a> .</p> - -<ul> - <li><code>command</code> o <code>empty</code> el cual es el estado por default e indica que este es un comando normal.</li> - <li><code>checkbox</code> indica que el comando puede ser alternado usando un checkbox.</li> - <li><code>radio</code> indica que el comando puede ser alternado usando un radiobutton.</li> -</ul> - -<dl> - <dt>{{htmlattrdef("checked")}}</dt> - <dd>Indica si el comando es seleccionado . Debe de ser omitido al menos que el atributo <code>type </code>sea <code>checkbox </code>o <code>radio.</code></dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>Indica que el comando no está disponible .</dd> - <dt>{{htmlattrdef("icon")}}</dt> - <dd>Proporciona una imagen que representa el comando.</dd> - <dt>{{htmlattrdef("label")}}</dt> - <dd>El nombre del comando como se muestra al usuario .</dd> - <dt>{{htmlattrdef("radiogroup")}}</dt> - <dd>Este atributo proporciona el nombre del grupo de comandos , con un atributo <code>type </code>de<code> tipo radio ,</code>que será alternado cuando el comando en sí mismo sea alternado . Este atributo debe de ser omitido al menos que el atributo <code>type </code>sea del tipo <code>radio .</code></dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Este atributo indica el tipo de comando . Este puede ser uno de los siguientes tres valores :</dd> -</dl> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre class="brush: html"><command type="command" label="Save" icon="icons/save.png" onclick="save()"> -</pre> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'commands.html', '<command>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_exploradores">Compatibilidad en exploradores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>{{ HTMLRef }}</p> diff --git a/files/es/web/html/elemento/element/index.html b/files/es/web/html/elemento/element/index.html deleted file mode 100644 index 814711131f..0000000000 --- a/files/es/web/html/elemento/element/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: <element> -slug: Web/HTML/Elemento/element -translation_of: Web/HTML/Element/element ---- -<div class="note"> -<p><strong>Nota:</strong> Este elemento ha sido borrado de la especificación. Mira <a href="http://lists.w3.org/Archives/Public/public-webapps/2013JulSep/0287.html">esto</a> para obtener más información desde el editor de la espeficicación.</p> -</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>El <strong>elemento <a href="/es/docs/Web/HTML">HTML</a> <code><element></code></strong> es utilizado para personalizar los elementos DOM.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido" title="HTML/Categorias_de_contenido">Categorias de contenido</a></th> - <td><a href="/es/docs/Web/Guide/HTML/categorias_de_contenido#Modelo_de_contenido_transparente">Contenido transparente</a>.</td> - </tr> - <tr> - <th scope="row">Contenido Permitido</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Etiquetas omitidas</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Elementos padre permitidos</th> - <td>???</td> - </tr> - <tr> - <th scope="row">Interfaz DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Atributos" name="Atributos">Atributos</h2> - -<p>Este elemento incluye los <a href="/es/docs/Web/HTML/Atributos_Globales">atributos globales</a>.</p> - -<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2> - -<p>El texto va aquí</p> - -<pre class="brush: html">Más texto va aquí. -</pre> - -<h2 id="Especificaciones" name="Especificaciones">Especificaciones</h2> - -<p>El elemento <code><element></code> fue formulado en un borrador de la especificación de <a href="http://w3c.github.io/webcomponents/spec/custom/">elementos personalizados</a>, que se ha eliminado.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad dee navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver También" name="Ver También">Ver También</h2> - -<ul> - <li>Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("template")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html b/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html deleted file mode 100644 index e18dd89f0d..0000000000 --- a/files/es/web/html/elemento/etiqueta_personalizada_html5/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Etiqueta Personalizada HTML5 -slug: Web/HTML/Elemento/Etiqueta_Personalizada_HTML5 ---- -<p>Una etiqueta personalizada sencilla, es crear una plantilla de elementos.</p> - -<p>Un sencillo ejemplo donde con poner la etiqueta <corazon> nos muetra un corazon en el documento:</p> - -<h2 id="corazon.js" name="corazon.js">corazon.js</h2> - -<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> - -<pre class="brush: js">function ini(){ -document.createElement('corazon');//creamos el elemento corazon -var corazon = document.getElementsByTagName('corazon');//llamamos todos los elemento corazon del documento - var i; - for (i = 0; i < corazon.length; i++) {//ejecuta acciones para esos elementos -//creamos estilos para nuetras etiquetas - corazon[i].style.backgroundImage= "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACaElEQVR4nO2by7WCMBCGKYECyJgSLIESLCEnwT0l0IElWIIlWIIlsAxhkxLuXZh45YrKI+QF/zmznvn+TAYYj0myadOmTSMkMUl5VuQN0JIDrVooTmLHLhxoxRElPCtyjgk2nZdjgnlW5BxRcs/Lzi2wMwdaNUBLnhW56ZzdArIib4GdBTApgP0MiBtHlMzJKTFJBWIHAew2MOdPC+wsEDsYwlbgiF2HFtBfVHEaC95CcRphdu8BtPi4nwz+VMRk8H9RDymoxcf9mBMf0hGT4MWOXQzCP6IBWr7L2wAtZ576226QmKSD4DkmWACrl4D/dCocaLVkTgFMfh3OEpN07n0fHE+DiiNKrOQEVn80QE15G4XcOwEf9+rOL9H2/TkRu/bCq8eNNXgVUhgceEPj5fEsMUldFOIwZMcANX1dF2W3C4BWf3ff1uDzK+5doIaQ62LcdAEmeJXtr6MBWiZLvfEFETt2Wev911EnYuHXXs9DJsLiW5iPsfYOqNc+A27WP4B8ihaxa2J46xNUtFCc9IeQ82JcxGOTLNY5CG9Pi5D1XYPO16C6BmvqAvmyJLW4l3MendPvrMXWsRV6vyJXVyHmV2P59ccZ9btAjCZ8h388FeLbEsnRP5hGZMJ4+IhMmA4fgQnz4QM2wRx8gCaYhw/IhOXgAzBheXiPTbAH76EJ9uE9MsEdvAcmuIfXcmCCP/BaFk3wD17Lggn+wmstaIL/8FoLmBAOvJZBE8KD1zJgQrjwWjNMCB9ea4IJ8cBrjTAhPnitASbEC6/1wYT44bV6TFgPvBbHBHOgFQdazfpz06ZNmzbN0C97EM/d8hW+4gAAAABJRU5ErkJggg==')"; - corazon[i].style.position="relative"; - corazon[i].style.display="block"; - corazon[i].style.width="64px"; - corazon[i].style.height="64px"; - } -} -window.addEventListener('load',ini,false);//ejecuta la funcion ini al cargar el documento</pre> - -<p>Ahora solo llamamos a nuestro archivo corazon.js desde nuetro html y podremos usar libremente nuetra etiqueta <corazon> con la cual nos mostrara un corazon.</p> - -<h2 id="index.html" name="index.html">index.html</h2> - -<h3 id="Contenido_HTML">Contenido HTML</h3> - -<p><!DOCTYPE html><br> - <html><br> - <head><br> - <meta charset="utf-8"><br> - <title>Mi Etiqueta</title><br> - <script src="corazon.js" type="text/javascript"></script><br> - </head><br> - <body><br> - <corazon></corazon><br> - </body><br> - </html></p> - -<p> </p> diff --git a/files/es/web/html/elemento/tipos_de_elementos/index.html b/files/es/web/html/elemento/tipos_de_elementos/index.html deleted file mode 100644 index e93752b734..0000000000 --- a/files/es/web/html/elemento/tipos_de_elementos/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Tipos de elementos -slug: Web/HTML/Elemento/Tipos_de_elementos -tags: - - HTML - - 'HTML:Elemento' - - Todas_las_Categorías ---- -<p>Los elementos se pueden agrupan de varias manera, aquí ofrecenos las siguientes: formal, estructural y funcional.</p> - -<h2 id="Seg.C3.BAn_el_doctype" name="Seg.C3.BAn_el_doctype">Según el doctype</h2> - -<p>Todo documento HTML debe tener un doctype, en el doctype se indica la dtd que se aplica al documento. La dtd es un archivo que, entre otras cosas, indica qué elementos pueden usarse en el documento, o cuales son sus atributos.</p> - -<p>Los doctypes válidos en HTML 4.01 son tres:</p> - -<h3 id="Para_marcos" name="Para_marcos">Para marcos</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" - "<a class="external" href="http://www.w3.org/TR/html4/frameset.dtd" rel="freelink">http://www.w3.org/TR/html4/frameset.dtd</a>"> -</pre> - -<p>Con este doctype pueden usarse todos los elementos del html.</p> - -<h3 id="De_transici.C3.B3n" name="De_transici.C3.B3n">De transición</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" - "<a class="external" href="http://www.w3.org/TR/html4/loose.dtd" rel="freelink">http://www.w3.org/TR/html4/loose.dtd</a>"> -</pre> - -<p>Pueden usarse todos los elementos <strong>menos</strong> los especificos de marcos que son: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a></p> - -<h3 id="Estrictos" name="Estrictos">Estrictos</h3> - -<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" - "<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"> -</pre> - -<p>Con este doctype pueden usarse todos los elementos <strong>menos</strong> los específicos de los marcos: <a href="/es/docs/HTML/Elemento/frame">frame</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a> <a href="/es/docs/HTML/Elemento/menu">menu</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a> <a href="/es/docs/HTML/Elemento/u">u</a></p> - -<h2 id="Seg.C3.BAn_su_estructura" name="Seg.C3.BAn_su_estructura">Según su estructura</h2> - -<p>Se dividen en tres grupos: básicos, de cabecera y de cuerpo.</p> - -<h3 id="Los_elementos_b.C3.A1sicos" name="Los_elementos_b.C3.A1sicos">Los elementos básicos</h3> - -<p>Son los elemento que conforman la columna vertebral de un documento html:</p> - -<dl> - <dt>Para un documento normal</dt> - <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/body">body</a></dd> -</dl> - -<dl> - <dt>para uno de marcos</dt> - <dd><a href="/es/docs/HTML/Elemento/html">html</a> <a href="/es/docs/HTML/Elemento/head">head</a> <a href="/es/docs/HTML/Elemento/frameset">frameset</a> <a href="/es/docs/HTML/Elemento/frame">frame</a></dd> -</dl> - -<h3 id="De_cabecera" name="De_cabecera">De cabecera</h3> - -<p>Los de cabecera contienen la información necesaria para el correcto funcionamiento del documento.</p> - -<dl> - <dt>Elementos de cabecera son</dt> - <dd> </dd> - <dd>El obligatorio: <a href="/es/docs/HTML/Elemento/title">title</a></dd> - <dd>Los opcionales: <a href="/es/docs/HTML/Elemento/base">base</a> <a href="/es/docs/HTML/Elemento/meta">meta</a> <a href="/es/docs/HTML/Elemento/link">link</a></dd> - <dd>Los mixtos: <a href="/es/docs/HTML/Elemento/style">style</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/object">object</a> y el transicional: <a href="/es/docs/HTML/Elemento/isindex">isindex</a>. Estos elementos pueden actuar como elementos de cabecera y de cuerpo.</dd> -</dl> - -<h3 id="De_cuerpo" name="De_cuerpo">De cuerpo</h3> - -<p>Son los que estructuran el contenido del documento, pueden clasificarse en dos o tres grupos, los que forman parte del flujo del documento, estos son los elementos en bloque y los elementos en línea; y los que no forman parte directa del flujo.</p> - -<h4 id="En_bloque" name="En_bloque">En bloque</h4> - -<dl> - <dt>Elementos en bloque son</dt> - <dd> </dd> - <dd><a href="/es/docs/HTML/Elemento/p">p</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> <a href="/es/docs/HTML/Elemento/div">div</a> <a href="/es/docs/HTML/Elemento/address">address</a> <a href="/es/docs/HTML/Elemento/hr">hr</a> <a href="/es/docs/HTML/Elemento/blockquote">blockquote</a> <a href="/es/docs/HTML/Elemento/form">form</a> <a href="/es/docs/HTML/Elemento/table">table</a> <a href="/es/docs/HTML/Elemento/fieldset">fieldset</a> <a href="/es/docs/HTML/Elemento/pre">pre</a> <a href="/es/docs/HTML/Elemento/noscript">noscript</a> <a href="/es/docs/HTML/Elemento/noframes">noframes</a> Y los transicionales: <a href="/es/docs/HTML/Elemento/center">center</a> <a href="/es/docs/HTML/Elemento/isindex">isindex</a></dd> - <dd>Los elementos de encabezados: <a href="/es/docs/HTML/Elemento/h1">h1</a> <a href="/es/docs/HTML/Elemento/h2">h2</a> <a href="/es/docs/HTML/Elemento/h3">h3</a> <a href="/es/docs/HTML/Elemento/h4">h4</a> <a href="/es/docs/HTML/Elemento/h5">h5</a> <a href="/es/docs/HTML/Elemento/h6">h6</a></dd> - <dd>los elementos para listas: <a href="/es/docs/HTML/Elemento/ul">ul</a> y <a href="/es/docs/HTML/Elemento/ol">ol</a>. Y los transicionales: <a href="/es/docs/HTML/Elemento/dir">dir</a> <a href="/es/docs/HTML/Elemento/menu">menu</a></dd> -</dl> - -<h4 id="En_l.C3.ADnea" name="En_l.C3.ADnea">En línea</h4> - -<dl> - <dt>Elementos en línea son</dt> - <dd> </dd> - <dd>Los elementos de frase: <a href="/es/docs/HTML/Elemento/abbr">abbr</a> <a href="/es/docs/HTML/Elemento/acronym">acronym</a> <a href="/es/docs/HTML/Elemento/cite">cite</a> <a href="/es/docs/HTML/Elemento/code">code</a> <a href="/es/docs/HTML/Elemento/em">em</a> <a href="/es/docs/HTML/Elemento/strong">strong</a> <a href="/es/docs/HTML/Elemento/dfn">dfn</a> <a href="/es/docs/HTML/Elemento/kbd">kbd</a> <a href="/es/docs/HTML/Elemento/samp">samp</a> <a href="/es/docs/HTML/Elemento/var">var</a></dd> - <dd>Los elementos de estilo de fuente: <a href="/es/docs/HTML/Elemento/b">b</a> <a href="/es/docs/HTML/Elemento/big">big</a> <a href="/es/docs/HTML/Elemento/i">i</a> <a href="/es/docs/HTML/Elemento/small">small</a> <a href="/es/docs/HTML/Elemento/tt">tt</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/u">u</a> <a href="/es/docs/HTML/Elemento/s">s</a> <a href="/es/docs/HTML/Elemento/strike">strike</a></dd> - <dd>Los elementos especiales: <a href="/es/docs/HTML/Elemento/a">a</a> <a href="/es/docs/HTML/Elemento/bdo">bdo</a> <a href="/es/docs/HTML/Elemento/br">br</a> <a href="/es/docs/HTML/Elemento/img">img</a> <a href="/es/docs/HTML/Elemento/map">map</a> <a href="/es/docs/HTML/Elemento/object">object</a> <a href="/es/docs/HTML/Elemento/q">q</a> <a href="/es/docs/HTML/Elemento/script">script</a> <a href="/es/docs/HTML/Elemento/span">span</a> <a href="/es/docs/HTML/Elemento/sub">sub</a> <a href="/es/docs/HTML/Elemento/sup">sup</a> y los desaprobados: <a href="/es/docs/HTML/Elemento/applet">applet</a> <a href="/es/docs/HTML/Elemento/font">font</a> <a href="/es/docs/HTML/Elemento/basefont">basefont</a> <a href="/es/docs/HTML/Elemento/iframe">iframe</a></dd> - <dd>Los elementos de controles de formulario: <a href="/es/docs/HTML/Elemento/button">button</a> <a href="/es/docs/HTML/Elemento/input">input</a> <a href="/es/docs/HTML/Elemento/label">label</a> <a href="/es/docs/HTML/Elemento/select">select</a> <a href="/es/docs/HTML/Elemento/textarea">textarea</a></dd> -</dl> - -<h4 id="Ni_en_bloque_ni_en_l.C3.ADnea" name="Ni_en_bloque_ni_en_l.C3.ADnea">Ni en bloque ni en línea</h4> - -<p>Son los elementos que no forman parte del flujo por que son elementos subordinados a otros elementos.</p> - -<dl> - <dt>Elementos subordinados son</dt> - <dd> </dd> - <dd>Subordinados a table: <a href="/es/docs/HTML/Elemento/caption">caption</a> <a href="/es/docs/HTML/Elemento/tr">tr</a> <a href="/es/docs/HTML/Elemento/th">th</a> <a href="/es/docs/HTML/Elemento/td">td</a> <a href="/es/docs/HTML/Elemento/thead">thead</a> <a href="/es/docs/HTML/Elemento/tbody">tbody</a> <a href="/es/docs/HTML/Elemento/tfoot">tfoot</a> <a href="/es/docs/HTML/Elemento/col">col</a> <a href="/es/docs/HTML/Elemento/colgroup">colgroup</a></dd> - <dd>Subordinados de listas: <a href="/es/docs/HTML/Elemento/li">li</a> <a href="/es/docs/HTML/Elemento/dd">dd</a> <a href="/es/docs/HTML/Elemento/dl">dl</a> Subordinados a select son: <a href="/es/docs/HTML/Elemento/optgroup">optgroup</a> <a href="/es/docs/HTML/Elemento/option">option</a></dd> - <dd>Por último, <a href="/es/docs/HTML/Elemento/area">area</a> subordinado a map. <a href="/es/docs/HTML/Elemento/param">param</a> subordinado a object. y <a href="/es/docs/HTML/Elemento/legend">legend</a> subordinado a fieldset.</dd> -</dl> - -<h4 id="En_bloque_y_en_l.C3.ADnea" name="En_bloque_y_en_l.C3.ADnea">En bloque y en línea</h4> - -<p>Los elementos <a href="/es/docs/HTML/Elemento/ins">ins</a> y <a href="/es/docs/HTML/Elemento/del">del</a> pueden ser elementos en línea o en bloque según convenga.</p> - -<h2 id="Seg.C3.BAn_su_funci.C3.B3n" name="Seg.C3.BAn_su_funci.C3.B3n">Según su función</h2> - - -<div class="note"> -<p>Estamos ampliando este documento, posiblemente contenga carencias y defectos. ¡Estamos en obras!... disculpen las molestias.</p> - -<p>¿Quieres participar en su elaboración? Para saber cómo hacerlo consulta <a>Cómo ayudar</a>.</p> -</div> diff --git a/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html b/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html deleted file mode 100644 index f342f64d11..0000000000 --- a/files/es/web/html/formatos_admitidos_de_audio_y_video_en_html5/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: Formatos de medios admitidos por los elementos HTML audio y video -slug: Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5 -translation_of: Web/Media/Formats -translation_of_original: Web/HTML/Supported_media_formats ---- -<p>Las etiquetas {{ HTMLElement("audio") }} y {{ HTMLElement("video") }} <span id="result_box" lang="es"><span class="hps">proporcionan apoyo</span> <span class="hps">para la reproducción de</span> <span class="hps">audio</span> <span class="hps">y video</span> <span class="hps">sin necesidad de</span> <span class="atn hps">plug-</span><span>ins.</span> <span class="hps">Codecs</span> <span class="hps">de vídeo</span> <span class="hps">y codecs</span> <span class="hps">de audio</span> <span class="hps">se utilizan para manejar</span> <span class="hps">vídeo y</span> <span class="hps">audio,</span> <span class="hps">y los diferentes</span> <span class="hps">codecs</span> <span class="hps">ofrecen diferentes</span> <span class="hps">niveles de compresión</span> <span class="hps">y calidad.</span> <span class="hps">Un</span> <span class="hps">formato de contenedor</span> <span class="hps">se utiliza para</span> <span class="hps">almacenar y transmitir</span> <span class="hps">el vídeo</span> <span class="hps">y el audio</span> <span class="hps">codificado</span> <span class="hps">juntos.</span> <span class="hps">Muchos</span> <span class="hps">codecs</span> <span class="hps">y formatos</span> <span class="hps">de contenedor</span> <span class="hps">existe</span><span>,</span> <span class="hps">e incluso hay</span> <span class="hps">más combinaciones de</span> <span class="hps">ellos.</span> <span class="hps">Para su uso</span> <span class="hps">en la web,</span> <span class="hps">sólo un puñado de</span> <span class="hps">combinaciones</span> <span class="hps">son relevantes.</span></span></p> - -<p>Diferentes navegadores no soportan los mismos formatos para audio y video en HTML5, principalmente debido a problemas de patentes. El área de formatos de medios en la web ha sufrido mucho por la ley de patentes en muchos paises, incluyendo EE.UU y la UE (La memoria de las patentes en este articulo se proporciona tal cual y sin ningun tipo de garantia.)</p> - -<p><span id="result_box" lang="es"><span class="hps">Para hacer</span> <span class="hps">un vídeo de</span> <span class="hps">HTML5</span><span>, que</span> <span class="hps">trabaja en</span> <span class="hps">las nuevas versiones de</span> <span class="hps">los principales navegadores</span><span>, puede</span> <span class="hps">usar el elemento {{HTMLElement("source")}} para reproducir</span> <span class="hps">en formatos WebM</span> o el formato <span class="hps">AAC</span> <span class="hps">MPEG</span> <span class="hps">H.264,</span> <span class="hps">usando el</span> <span class="hps">elemento de origen</span> <span class="hps">de esta manera:</span></span></p> - -<pre class="brush: html"><video controls> - <source src="somevideo.webm" type="video/webm"> - <source src="somevideo.mp4" type="video/mp4"> - I'm sorry; your browser doesn't support HTML5 video. - <!-- You can embed a Flash player here, to play your mp4 video in older browsers --> -</video> -</pre> - -<h3 id="WebM">WebM</h3> - -<p><span id="result_box" lang="es"><span class="hps">El formato</span> <a href="http://www.webmproject.org/" title="http://www.webmproject.org/"><span class="hps">WebM</span></a> <span class="hps">se basa en</span> <span class="hps">una versión restringida</span> <span class="hps">del</span> <span class="hps">formato contenedor</span> <span class="hps">Matroska</span><span>.</span> <span class="hps">Siempre</span> <span class="hps">utiliza</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span><span>.</span> <span class="hps">WebM</span> <span class="hps">es</span> <span class="hps">soportado nativamente</span> <span class="hps">en</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span></span></p> - -<p><a href="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/02/02/html5-and-web-video-questions-for-the-industry-from-the-community.aspx"><span id="result_box" lang="es"><span class="hps">Declaración</span> <span class="hps">de</span> <span class="hps">Microsoft</span> <span class="hps">sobre por qué</span> <span class="hps">IE9</span> <span class="hps">no tiene soporte</span> <span class="hps">WebM</span> <span class="hps">nativo.</span></span></a></p> - -<p><span id="result_box" lang="es"><span class="hps">El formato</span> <span class="hps">WebM</span><span>,</span> <span class="hps">específicamente</span> <span class="hps">el códec de vídeo</span> <span class="hps">VP8</span><span>,</span> <span class="alt-edited hps">habría</span> sido <span class="alt-edited hps">acusado</span> <span class="hps">de</span> <span class="hps">infracción de derechos de</span> <span class="hps">patente</span> <span class="hps">por un grupo de</span> <span class="hps">empresas de</span> <span class="hps">responder a una llamada</span> <span class="hps">por la</span> <span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">para la formación de</span> <span class="hps">un consorcio de patentes</span><span>, pero</span> <a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">MPEG</span> <span class="hps">LA</span> <span class="hps">se ha comprometido a</span> <span class="hps">licenciar</span> <span class="hps">las patentes</span> <span class="hps">de</span> <span class="hps">Google</span></a> <span class="hps">bajo</span> <span class="atn hps">"</span><a href="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8" title="http://www.businesswire.com/news/home/20130307006192/en/Google-MPEG-LA-Announce-Agreement-Covering-VP8"><span class="hps">transferible y de licencia gratuita</span></a><span class="atn hps">"</span><span>.</span> <span class="hps">Esto significa,</span> <span class="hps">efectivamente</span><span>,</span> <span class="hps">que todas las patentes</span> <span class="hps">conocidas en</span> <span class="hps">el formato</span> <span class="hps">WebM</span> <span class="hps">tienen licencia</span> <span class="hps">para todo el mundo</span> <span class="hps">de forma gratuita.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="hps">para los archivos WebM:</span></span></p> - -<dl> - <dt><code>video/webm</code></dt> - <dd>Un archivo WebM que es capaz de reproducir video (y es posible audio también)</dd> - <dt><code>audio/webm</code></dt> - <dd>Un archivo WebM que contiene audio unicamente.</dd> -</dl> - -<h3 id="Ogg_Theora_Vorbis">Ogg Theora Vorbis</h3> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">Ogg</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">Theora</span> <span class="hps">y</span> <span class="hps">el códec de audio</span> <span class="hps">Vorbis</span> <span class="hps">es compatible con</span> <span class="hps">Gecko</span> <span class="atn hps">(</span><span>Firefox)</span><span>, Chrome</span> <span class="hps">y</span> <span class="hps">Opera,</span> <span class="hps">y el</span> <span class="hps">soporte para el formato</span> <span class="hps">se puede agregar a</span> <span class="hps">Safari</span> <span class="hps">mediante la instalación de</span> <span class="hps">un add</span><span>-on</span><span>.</span> <span class="hps">El formato no</span> <span class="hps">es compatible en Internet</span> <span class="hps">Explorer.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">WebM</span> <span class="alt-edited hps">es preferente</span>, <span class="hps">generalmente sobre</span> <span class="hps">Theora</span> <span class="hps">Ogg</span> <span class="hps">Vorbis</span> <span class="hps">cuando esté disponible</span></span><span id="result_box" lang="es"><span>,</span> <span class="hps">ya que proporciona</span> <span class="hps">una mejor</span> <span class="hps">relación de</span> <span class="hps">compresión para</span> <span class="hps">la calidad</span> <span class="hps">y</span> <span class="hps">se apoya</span> <span class="hps">en</span> <span class="hps">más navegadores</span><span>.</span> <span class="hps">El formato</span> <span class="hps">Ogg</span> <span class="hps">sin embargo, puede</span> <span class="hps">ser utilizado para apoyar</span> <span class="hps">versiones de los navegadores</span> <span class="hps">más antiguos</span><span>, en los que</span> <span class="hps">aún no</span> <span class="hps">se dispone de</span> <span class="hps">soporte para</span> <span class="hps">WebM</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">La</span> <span class="hps">situación de las patentes</span> <span class="hps">de</span> <span class="hps">Theora</span> <span class="hps">es</span> <span class="hps">similar a la de</span> <span class="hps">WebM</span><span>.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Usted puede aprender</span> <span class="hps">más sobre la creación</span> <span class="hps">de medios</span> <span class="hps">Ogg</span> <span class="hps">leyendo </span></span><a class="external" href="http://en.flossmanuals.net/ogg-theora/" title="http://en.flossmanuals.net/ogg-theora/">the Theora Cookbook</a>.</p> - -<p>Gecko reconoce los siguientes tipos de MIME para el archivo Ogg:</p> - -<dl> - <dt><code>audio/ogg</code></dt> - <dd><span class="short_text" id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">que contiene sólo</span> <span class="hps">audio.</span></span></dd> - <dt><code>video/ogg</code></dt> - <dd><span id="result_box" lang="es"><span class="hps">Un video</span> <span class="hps">que contiene</span> <span class="hps">el archivo</span> <span class="hps">ogg</span> <span class="hps">(y posiblemente </span><span class="hps">audio también)</span><span>.</span></span></dd> - <dt><code>application/ogg</code></dt> - <dd><span id="result_box" lang="es"><span class="hps">Un archivo</span> <span class="hps">Ogg</span> <span class="hps">con el contenido</span> <span class="hps">especificado.</span> <span class="hps">Utilizando uno de</span> <span class="hps">los otros dos tipos</span> <span class="hps">MIME</span> <span class="hps">es</span> <span class="hps">preferido</span><span>,</span> <span class="hps">pero se puede usar</span> <span class="hps">esta opción si</span> <span class="hps">usted no sabe</span> <span class="hps">lo que</span> <span class="hps">el contenido</span> <span class="hps">del fichero es</span></span>.</dd> -</dl> - -<h3 id="Ogg_Opus">Ogg Opus</h3> - -<p><span id="result_box" lang="es"><span class="hps">El contenedor</span> <span class="hps">Ogg</span> <span class="hps">también puede contener</span> <span class="hps">audio codificado</span> <span class="hps">con el <a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/">códec</a></span><a href="http://www.opus-codec.org/" title="http://www.opus-codec.org/"> <span class="hps">Opus</span><span>.</span></a> <span class="hps">El apoyo a esta</span> <span class="hps">disponible en</span></span> Gecko 15.0 {{ geckoRelease("15.0") }} y superior.</p> - -<h3 id="MP4_H.264_(AAC_o_MP3)">MP4 H.264 (AAC o MP3)</h3> - -<p><span id="result_box" lang="es"><span class="hps">El</span> <span class="hps">formato contenedor</span> <span class="hps">MP4</span> <span class="hps">con</span> <span class="hps">el códec de vídeo</span> <span class="hps">H.264</span> <span class="hps">y, o bien</span> <span class="hps">el códec de audio</span> <span class="hps">AAC</span> <span class="hps">o</span> <span class="hps">el códec de audio</span> <span class="hps">MP3</span> <span class="alt-edited hps">es</span> <span class="alt-edited hps">nativamente</span> <span class="hps">compatible con</span> <span class="hps">Internet</span> <span class="hps">Explorer,</span> <span class="hps">Safari</span> <span class="hps">y</span> <span class="hps">Chrome,</span> pero <span class="hps">Chromium y</span> <span class="hps">Opera</span> <span class="hps">no son compatibles con</span> <span class="hps">el formato</span><span>.</span> <span class="hps">Firefox</span> <span class="hps">pronto</span> <span class="hps">admite el formato</span><span>, pero sólo cuando</span> <span class="hps">un decodificador</span> <span class="hps">de terceros</span> <span class="hps">esté disponible.</span></span></p> - -<p><span id="result_box" lang="es"><span class="hps">Los</span> <span class="hps">formatos</span> <span class="hps">MPEG</span> <span class="hps">están cubiertos por</span> <span class="hps">patentes, que</span> <span class="hps">no tienen licencia</span> <span class="hps">libre</span><span>.</span> <span class="hps">Todas</span> <span class="hps">las licencias necesarias</span> <span class="hps">se pueden comprar de</span> <span class="hps">MPEG</span> <span class="hps">LA.</span> <span class="hps">Desde</span> <span class="hps">H.264</span> <span class="hps">no está en</span> <span class="hps">un formato</span> <span class="hps">libre de</span> <span class="hps">regalías,</span> <span class="hps">no es apto</span> <span class="hps">para la plataforma</span> <span class="hps">web de código abierto</span><span>, de acuerdo con</span> <span class="hps">Mozilla</span> <span class="atn hps">[</span><a href="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/" title="http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/"><span>1</span></a><span>,</span> <a href="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html" title="http://robert.ocallahan.org/2010/01/video-freedom-and-mozilla_23.html"><span class="hps">2</span></a><span>]</span><span>,</span> <span class="hps">Google</span> <span class="atn hps">[</span><a href="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html" title="http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html"><span>1</span></a><span>,</span> <a href="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html" title="http://blog.chromium.org/2011/01/more-about-chrome-html-video-codec.html"><span class="hps">2</span></a><span>]</span> <span class="hps">y Opera.</span> <span class="hps">Sin embargo, los</span> <span class="hps">formatos libres</span> <span class="hps">no son compatibles con</span> <span class="hps">Internet</span> <span class="hps">Explorer y</span> <span class="hps">Safari</span><span>, <a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">Mozilla</a></span><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/"> <span class="hps">ha decidido apoyar</span> <span class="hps">el formato de</span> </a><span class="hps"><a href="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/" title="https://hacks.mozilla.org/2012/03/video-mobile-and-the-open-web/">todos modos</a>, y</span> <span class="hps">Google</span> <span class="hps">no</span> <span class="hps">cumplió</span> <span class="hps">su promesa de</span> <span class="hps">eliminar el soporte</span> <span class="hps">para él en</span> <span class="hps">Chrome.</span></span></p> - -<h3 id="WAVE_PCM">WAVE PCM</h3> - -<p>El formato contenedor WAVE, con el códec de audio PCM (WAVE codec "1") con el apoyo de Gecko (Firefox), y Safari. Archivos en el formato contenedor WAVE normalmente terminan con la extensión ". wav".</p> - -<div class="note"><strong>Nota: </strong><span class="short_text" id="result_box" lang="es"><span class="hps">Consulte</span> <a href="http://www.rfc-editor.org/rfc/rfc2361.txt" title="http://www.rfc-editor.org/rfc/rfc2361.txt"><span class="hps">RFC</span> <span class="hps">2361</span></a> <span class="hps">para</span> <span class="hps">el registro</span> <span class="hps">códec</span> <span class="hps">WAVE</span><span>.</span></span></div> - -<p><span id="result_box" lang="es"><span class="hps">Gecko</span> <span class="hps">reconoce los siguientes</span> <span class="hps">tipos MIME</span> <span class="alt-edited hps">en archivos de audio</span> <span class="hps">WAVE</span><span>:</span></span></p> - -<ul> - <li><code>audio/wave</code> (preferido)</li> - <li><code>audio/wav</code></li> - <li><code>audio/x-wav</code></li> - <li><code>audio/x-pn-wav</code></li> -</ul> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.0</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>9.0</td> - <td>10.50</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: WAVE, PCM</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: WebM, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.60</td> - <td>3.1 (must be installed separately)</td> - </tr> - <tr> - <td><code><audio></code>: Ogg, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><code><audio></code>: MP4, MP3</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td> - <p>Partial (see below)</p> - </td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: MP4, AAC</td> - <td> - <p>{{ CompatVersionUnknown() }} (Main only) (Not in Chromium)</p> - </td> - <td> - <p>Partial (see below)</p> - </td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><audio></code>: Ogg, Opus</td> - <td>27.0</td> - <td>{{ CompatGeckoDesktop("15.0") }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code><video></code>: WebM, VP8, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("2.0") }}</td> - <td>9.0 (<a class="external" href="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx" title="http://blogs.msdn.com/b/ie/archive/2011/03/16/html5-video-update-webm-for-ie9.aspx">must be installed separately</a>, e.g. <a class="external" href="http://tools.google.com/dlpage/webmmf/" title="http://tools.google.com/dlpage/webmmf/">WebM MF</a>)</td> - <td>10.60</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://perian.org/" title="http://perian.org/">Perian</a>)</td> - </tr> - <tr> - <td><code><video></code>: Ogg, Theora, Vorbis</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatNo() }}</td> - <td>10.50</td> - <td>3.1 (must be installed separately, e.g. <a class="external" href="http://www.xiph.org/quicktime/" title="http://www.xiph.org/quicktime/">XiphQT</a>)</td> - </tr> - <tr> - <td><code><video></code>: MP4, H.264, MP3</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td><code><video></code>: MP4, H.264, AAC</td> - <td> - <p>{{ CompatVersionUnknown() }} (Not in Chromium)</p> - </td> - <td>Partial (see below)</td> - <td>9.0</td> - <td>{{ CompatNo() }}</td> - <td>3.1</td> - </tr> - <tr> - <td>any other format</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>3.1 (plays all formats available via QuickTime)</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p><span id="result_box" lang="es"><span class="hps">Para evitar</span> <span class="hps">problemas de patentes</span><span>, el apoyo a</span> <span class="hps">MPEG</span> <span class="hps">4</span><span>, H.264</span><span>, MP3</span> <span class="hps">y</span> <span class="hps">AAC</span> <span class="hps">no</span> <span class="hps">está integrado directamente en</span> <span class="hps">Firefox.</span> <span class="hps">En su lugar,</span> <span class="hps">se basa en</span> <span class="hps">el apoyo del</span> <span class="hps">sistema operativo o</span> <span class="hps">hardware.</span> <span class="hps">Firefox</span> <span class="hps">soporta</span> <span class="hps">estos formatos</span> <span class="hps">en las siguientes plataformas</span><span>:</span></span></p> - -<table class="standard-table" style="height: 159px; width: 285px;"> - <thead> - <tr> - <th scope="col">Plataforma</th> - <th scope="col">Versión de Firefox</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=799315" title="https://bugzilla.mozilla.org/show_bug.cgi?id=799315">Windows 7+</a></td> - <td>21.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=825153" title="https://bugzilla.mozilla.org/show_bug.cgi?id=825153">Windows Vista</a></td> - <td>22.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=748351" title="https://bugzilla.mozilla.org/show_bug.cgi?id=748351">Android</a></td> - <td>20.0</td> - </tr> - <tr> - <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=714408" title="https://bugzilla.mozilla.org/show_bug.cgi?id=714408">Firefox OS</a></td> - <td>15.0</td> - </tr> - <tr> - <td>OS X 10.7</td> - <td>22.0</td> - </tr> - </tbody> -</table> - -<ul> - <li><a class="external" href="http://dev.opera.com/articles/view/introduction-html5-video/#codecs" title="http://dev.opera.com/articles/view/introduction-html5-video/#codecs">Video codecs in Opera</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975073%28v=VS.85%29.aspx">Video codecs in Internet Explorer</a></li> - <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ff975061%28v=vs.85%29.aspx">Audio codecs in Internet Explorer</a></li> - <li><a href="http://www.chromium.org/audio-video" title="http://www.chromium.org/audio-video">Audio & Video codecs in Chrome</a></li> -</ul> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li><a class="internal" href="/en/Using_HTML5_audio_and_video" title="En/Using audio and video in Firefox">Using audio and video in Firefox</a></li> - <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#media-elements" title="http://www.whatwg.org/specs/web-apps/current-work/#media-elements">Media elements</a> (HTML 5 specification)</li> - <li><code><a class="internal" href="/en/HTML/Element/Video" title="En/HTML/Element/Video">video</a></code></li> - <li><a class="internal" href="/en/HTML/Element/Audio" title="En/HTML/Element/Audio"><code>audio</code></a></li> -</ul> diff --git a/files/es/web/html/atributos_globales/accesskey/index.html b/files/es/web/html/global_attributes/accesskey/index.html index cb8bbcc16c..cb8bbcc16c 100644 --- a/files/es/web/html/atributos_globales/accesskey/index.html +++ b/files/es/web/html/global_attributes/accesskey/index.html diff --git a/files/es/web/html/atributos_globales/autocapitalize/index.html b/files/es/web/html/global_attributes/autocapitalize/index.html index d1f8fc446c..d1f8fc446c 100644 --- a/files/es/web/html/atributos_globales/autocapitalize/index.html +++ b/files/es/web/html/global_attributes/autocapitalize/index.html diff --git a/files/es/web/html/atributos_globales/class/index.html b/files/es/web/html/global_attributes/class/index.html index ba82c66e65..ba82c66e65 100644 --- a/files/es/web/html/atributos_globales/class/index.html +++ b/files/es/web/html/global_attributes/class/index.html diff --git a/files/es/web/html/atributos_globales/contenteditable/index.html b/files/es/web/html/global_attributes/contenteditable/index.html index 9db8119af2..9db8119af2 100644 --- a/files/es/web/html/atributos_globales/contenteditable/index.html +++ b/files/es/web/html/global_attributes/contenteditable/index.html diff --git a/files/es/web/html/atributos_globales/contextmenu/index.html b/files/es/web/html/global_attributes/contextmenu/index.html index 9cc32f7ace..9cc32f7ace 100644 --- a/files/es/web/html/atributos_globales/contextmenu/index.html +++ b/files/es/web/html/global_attributes/contextmenu/index.html diff --git a/files/es/web/html/atributos_globales/data-_star_/index.html b/files/es/web/html/global_attributes/data-_star_/index.html index 436b156299..436b156299 100644 --- a/files/es/web/html/atributos_globales/data-_star_/index.html +++ b/files/es/web/html/global_attributes/data-_star_/index.html diff --git a/files/es/web/html/atributos_globales/dir/index.html b/files/es/web/html/global_attributes/dir/index.html index 4bcd43eb40..4bcd43eb40 100644 --- a/files/es/web/html/atributos_globales/dir/index.html +++ b/files/es/web/html/global_attributes/dir/index.html diff --git a/files/es/web/html/atributos_globales/draggable/index.html b/files/es/web/html/global_attributes/draggable/index.html index 2aee2d8443..2aee2d8443 100644 --- a/files/es/web/html/atributos_globales/draggable/index.html +++ b/files/es/web/html/global_attributes/draggable/index.html diff --git a/files/es/web/html/atributos_globales/hidden/index.html b/files/es/web/html/global_attributes/hidden/index.html index bc29d88b5a..bc29d88b5a 100644 --- a/files/es/web/html/atributos_globales/hidden/index.html +++ b/files/es/web/html/global_attributes/hidden/index.html diff --git a/files/es/web/html/atributos_globales/id/index.html b/files/es/web/html/global_attributes/id/index.html index 3dd947cf27..3dd947cf27 100644 --- a/files/es/web/html/atributos_globales/id/index.html +++ b/files/es/web/html/global_attributes/id/index.html diff --git a/files/es/web/html/atributos_globales/index.html b/files/es/web/html/global_attributes/index.html index 86769245c6..86769245c6 100644 --- a/files/es/web/html/atributos_globales/index.html +++ b/files/es/web/html/global_attributes/index.html diff --git a/files/es/web/html/atributos_globales/is/index.html b/files/es/web/html/global_attributes/is/index.html index aa57cab27d..aa57cab27d 100644 --- a/files/es/web/html/atributos_globales/is/index.html +++ b/files/es/web/html/global_attributes/is/index.html diff --git a/files/es/web/html/atributos_globales/itemid/index.html b/files/es/web/html/global_attributes/itemid/index.html index 72ce64456e..72ce64456e 100644 --- a/files/es/web/html/atributos_globales/itemid/index.html +++ b/files/es/web/html/global_attributes/itemid/index.html diff --git a/files/es/web/html/atributos_globales/itemprop/index.html b/files/es/web/html/global_attributes/itemprop/index.html index 232af938aa..232af938aa 100644 --- a/files/es/web/html/atributos_globales/itemprop/index.html +++ b/files/es/web/html/global_attributes/itemprop/index.html diff --git a/files/es/web/html/atributos_globales/itemref/index.html b/files/es/web/html/global_attributes/itemref/index.html index 9dac55140b..9dac55140b 100644 --- a/files/es/web/html/atributos_globales/itemref/index.html +++ b/files/es/web/html/global_attributes/itemref/index.html diff --git a/files/es/web/html/atributos_globales/itemscope/index.html b/files/es/web/html/global_attributes/itemscope/index.html index b57fc1c6bc..b57fc1c6bc 100644 --- a/files/es/web/html/atributos_globales/itemscope/index.html +++ b/files/es/web/html/global_attributes/itemscope/index.html diff --git a/files/es/web/html/atributos_globales/lang/index.html b/files/es/web/html/global_attributes/lang/index.html index dcea33a66f..dcea33a66f 100644 --- a/files/es/web/html/atributos_globales/lang/index.html +++ b/files/es/web/html/global_attributes/lang/index.html diff --git a/files/es/web/html/atributos_globales/slot/index.html b/files/es/web/html/global_attributes/slot/index.html index ed2b8688db..ed2b8688db 100644 --- a/files/es/web/html/atributos_globales/slot/index.html +++ b/files/es/web/html/global_attributes/slot/index.html diff --git a/files/es/web/html/atributos_globales/spellcheck/index.html b/files/es/web/html/global_attributes/spellcheck/index.html index c6ced2de46..c6ced2de46 100644 --- a/files/es/web/html/atributos_globales/spellcheck/index.html +++ b/files/es/web/html/global_attributes/spellcheck/index.html diff --git a/files/es/web/html/atributos_globales/style/index.html b/files/es/web/html/global_attributes/style/index.html index 1da99e039b..1da99e039b 100644 --- a/files/es/web/html/atributos_globales/style/index.html +++ b/files/es/web/html/global_attributes/style/index.html diff --git a/files/es/web/html/atributos_globales/tabindex/index.html b/files/es/web/html/global_attributes/tabindex/index.html index 2159639208..2159639208 100644 --- a/files/es/web/html/atributos_globales/tabindex/index.html +++ b/files/es/web/html/global_attributes/tabindex/index.html diff --git a/files/es/web/html/atributos_globales/title/index.html b/files/es/web/html/global_attributes/title/index.html index ab8e0dd92f..ab8e0dd92f 100644 --- a/files/es/web/html/atributos_globales/title/index.html +++ b/files/es/web/html/global_attributes/title/index.html diff --git a/files/es/web/html/atributos_globales/translate/index.html b/files/es/web/html/global_attributes/translate/index.html index 5182acec3c..5182acec3c 100644 --- a/files/es/web/html/atributos_globales/translate/index.html +++ b/files/es/web/html/global_attributes/translate/index.html diff --git a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html b/files/es/web/html/global_attributes/x-ms-acceleratorkey/index.html index 26cf4a2599..26cf4a2599 100644 --- a/files/es/web/html/atributos_globales/x-ms-acceleratorkey/index.html +++ b/files/es/web/html/global_attributes/x-ms-acceleratorkey/index.html diff --git a/files/es/web/html/índice/index.html b/files/es/web/html/index/index.html index 5beb1776d4..5beb1776d4 100644 --- a/files/es/web/html/índice/index.html +++ b/files/es/web/html/index/index.html diff --git a/files/es/web/html/elementos_en_línea/index.html b/files/es/web/html/inline_elements/index.html index 192715aef3..192715aef3 100644 --- a/files/es/web/html/elementos_en_línea/index.html +++ b/files/es/web/html/inline_elements/index.html diff --git a/files/es/web/html/la_importancia_de_comentar_correctamente/index.html b/files/es/web/html/la_importancia_de_comentar_correctamente/index.html deleted file mode 100644 index f110fc9851..0000000000 --- a/files/es/web/html/la_importancia_de_comentar_correctamente/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: La importancia de comentar correctamente -slug: Web/HTML/La_importancia_de_comentar_correctamente -tags: - - HTML - - Todas_las_Categorías - - XHTML - - XML -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started#HTML_comments -translation_of_original: Web/Guide/HTML/The_Importance_of_Correct_HTML_Commenting ---- -<p> </p> -<p><br> - Cuando escribimos HTML en <a class="external" href="http://www.mozilla.org/docs/web-developer/quirks/doctypes.html">modo estándar</a>, los comentarios mal formados pueden romper las páginas, causando que los contenidos del documento sean parcial o totalmente comentados. Al escribir XHTML o XML, los comentarios incorrectos darán lugar a que sus documentos no puedan ser mostrados.</p> -<h3 id="HTML_4.01" name="HTML_4.01">HTML 4.01</h3> -<p> - <i> - De la <a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación del W3C HTML 4.01 Sección 3.2.4 - Comentarios</a>:</i> -</p> -<blockquote> - No se permite espacio en blanco entre el delimitador de apertura de declaración de etiqueta ("<!") y el delimitador de apertura de comentario ("--"), pero sí se permite entre el delimitador de cierre de comentario ("--" y el delimitador de cierre de declaración de etiqueta (">"). Un error común es incluir una cadena de guiones ("---") dentro de un comentario. Los autores deberían evitar *poner dos o más guiones adyacentes dentro de un comentario.</blockquote> -<h4 id="Ejemplos" name="Ejemplos">Ejemplos</h4> -<p>Los siguientes son comentarios válidos en HTML.</p> -<pre class="eval"><!-- comentario html válido --> -<!-- comentario html válido -- > -</pre> -<p>El siguiente no es un comentario válido en HTML.</p> -<pre class="eval"><!-- comentario html -- no válido --> -</pre> -<h3 id="XML" name="XML">XML</h3> -<p> - <i> - De la <a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación del W3C XML 1.0 Sección 2.5 - Comentarios</a>:</i> -</p> -<blockquote> - {{ mediawiki.external('Definición: Los comentarios pueden aparecer en cualquier lugar de un documento fuera de otras marcas; Adicionalmente pueden aparecer en lugares permitidos por la gramática. No son parte de los datos de caracter de un documento; un procesador de XML puede, pero no tiene que, hacer posible que la aplicación recupere el texto de comentarios.') }} Por compatibilidad, la cadena "--" (doble guión) no debe ocurrir dentro de comentarios. - <pre>[15] Comment ::= '<!--' ((Char - '-') | ('-' (Char - '-')))* '-->' -</pre> -</blockquote> -<p>Según lo descrito en la gramática de XML sobre comentarios, un comentario tiene la siguiente forma:</p> -<pre class="eval"><!-- cualquier letra o signo, menos guiones seguidos --> -</pre> -<h4 id="Ejemplos_2" name="Ejemplos_2">Ejemplos</h4> -<p>El siguiente es un comentario válido en XML y XHTML.</p> -<pre class="eval"><!-- comentario xml/xhtml válido --> -</pre> -<p>Los siguientes son comentarios no válidos en XML y XHTML.</p> -<pre class="eval"><!-- comentario xml -- no válido --> -<!-- comentario xml no válido ---> -<!-- comentario xml no válido -- > -</pre> -<h3 id="Otras_lecturas" name="Otras_lecturas">Otras lecturas</h3> -<ul> - <li><a class="external" href="http://html.conclase.net/w3c/html401-es/intro/sgmltut.html#h-3.2.4">Recomendación HTML 4.01: 3.2.4 - Comentarios</a></li> - <li><a class="external" href="http://www.sidar.org/recur/desdi/traduc/es/xml/xml1/index.html#sec-comments">Recomendación XML: 2.5 - Comentarios</a></li> - <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=144432">Bugzilla bug 144432</a></li> - <li><a class="external" href="http://bugzilla.mozilla.org/show_bug.cgi?id=102127">Bugzilla bug 102127</a></li> -</ul> -<div class="originaldocinfo"> - <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3> - <ul> - <li>Last Updated Date: May 19th, 2003</li> - <li>Copyright © 2001-2003 Netscape. All rights reserved.</li> - </ul> -</div> -<p> </p> diff --git a/files/es/web/html/tipos_de_enlaces/index.html b/files/es/web/html/link_types/index.html index 9cfc5089d5..9cfc5089d5 100644 --- a/files/es/web/html/tipos_de_enlaces/index.html +++ b/files/es/web/html/link_types/index.html diff --git a/files/es/web/html/microdatos/index.html b/files/es/web/html/microdata/index.html index 33e73cdb0d..33e73cdb0d 100644 --- a/files/es/web/html/microdatos/index.html +++ b/files/es/web/html/microdata/index.html diff --git a/files/es/web/html/microformatos/index.html b/files/es/web/html/microformats/index.html index 6dd963a227..6dd963a227 100644 --- a/files/es/web/html/microformatos/index.html +++ b/files/es/web/html/microformats/index.html diff --git a/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html b/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html deleted file mode 100644 index 6509450cf9..0000000000 --- a/files/es/web/html/optimizing_your_pages_for_speculative_parsing/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Optimizar sus páginas para análisis especulativo -slug: Web/HTML/Optimizing_your_pages_for_speculative_parsing -tags: - - Avanzado - - Desarrollo web - - HTML - - HTML5 -translation_of: Glossary/speculative_parsing ---- -<p><span class="seoSummary">Tradicionalmente en los navegadores el analizador de HTML corre en el hilo de ejecución principal y se queda bloqueado después de una etiqueta </script> hasta que el código se haya recuperado y ejecutado. El analizador de HTML de Firefox 4 y posteriores soporta análisis especulativo fuera del hilo de ejecución principal. Este analiza anticipadamente mientras el codigo está siendo descargado y ejecutado. Como en Firefox 3.5 y 3.6, el analizador de HTML es el que inicia la carga especulativa de código, las hojas de estilos y las imagenes que va encontrando en el flujo de la página. Sin embargo en Firefox 4 y posteriores el analizador de HTML también ejecuta el algoritmo especulativo de la construcción del árbol HTML. La ventaja es que cuando lo especulado tiene exito, no hay necesidad de reanalizar la parte del archivo de entrada que ya fue analizada junto la descarga de código, hojas de estilo y las imágenes. La desventaja es que se ha realizado un trabajo inútil cuando la especulación fracasa.</span></p> - -<p>Este documento le ayuda a evitar este tipo de situaciones que hacen que la especulación falle y ralentize la carga de la página.</p> - -<h2 id="Haciendo_cargas_especulativas_exitosas">Haciendo cargas especulativas exitosas</h2> - -<p>Hay solo una regla para hacer cargas especulativas exitosas en scripts enlazados, hojas de estilo e imagenes:</p> - -<ul> - <li>Si usted usa el elemento <base> para anular la base URI de su pagina, ponga el elemento en la parte no-escrita de el documento. No la añada via document.write() o document.createElement().</li> -</ul> - -<h2 id="Evitando_perder_la_salida_del_generador_de_arbol">Evitando perder la salida del generador de arbol</h2> - -<p>La generación de árbol especulativo falla cuando <code>document.write()</code> cambia el estado del generador de árbol de tal manera que el estado especulativo después del tag <code></script></code> no se mantiene cuando todo el contenido es inertado por <code>document.write()</code> ha sido analizado. Sin embargo, sólo usos inusuales de <code>document.write()</code> causa problemas. Aquí están las cosas a evitar:</p> - -<ul> - <li>No escriba árboles desbalanceados. <code><script>document.write("<div>");</script></code> está mal. <code><script>document.write("<div></div>");</script></code> es correcto.</li> - <li>No escriba un token sin finalizar. <code><script>document.write("<div></div");</script></code> esta mal.</li> - <li>No termine con un carater de retorno de carro. <code><script>document.write("Hello World!\r");</script></code> está mal. <code><script>document.write("Hello World!\n");</script></code> es correcto.</li> - <li>Note que escribiendo etiquetas balanceadas pueden causarse que se creen otras etiquetas desbalanceadas. Ej. <code><script>document.write("<div></div>");</script></code> dentro del elemento <code>head</code> será interpretado como <code><script>document.write("</head><body><div></div>");</script></code> el cual está desbalanceado.</li> - <li>No formatee parte de una tabla. <code><table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table></code> está mal. Sin embargo, <code><script>document.write("</code><code><table></code><code><tr><td>Hello World!</td></tr></code><code></table></code><code>");</script></code> está correcto.</li> - <li>HAGA: document.write dentro de otro elemento de formateo.</li> -</ul> diff --git a/files/es/web/html/referencia/index.html b/files/es/web/html/reference/index.html index 25534cd46f..25534cd46f 100644 --- a/files/es/web/html/referencia/index.html +++ b/files/es/web/html/reference/index.html diff --git a/files/es/web/html/usando_audio_y_video_con_html5/index.html b/files/es/web/html/usando_audio_y_video_con_html5/index.html deleted file mode 100644 index 77810a8e65..0000000000 --- a/files/es/web/html/usando_audio_y_video_con_html5/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: Usando audio y video con HTML5 -slug: Web/HTML/Usando_audio_y_video_con_HTML5 -tags: - - Flash - - Ogg - - applet - - busqueda - - errores - - especificacion - - gestion - - opciones - - reproduccion - - reserva -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video ---- -<p>HTML5 introduce soporte integrado para el contenido multimedia gracias a los elementos {{ HTMLElement("audio") }} y {{ HTMLElement("video") }}, ofreciendo la posibilidad de insertar contenido multimedia en documentos HTML.</p> - -<h2 id="Insertando_contenido_multimedia">Insertando contenido multimedia</h2> - -<p>Insertar contenido multimedia en tus documentos HTML es muy sencillo:</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Este ejemplo reproduce un vídeo de ejemplo, con los controles de reproducción, desde el sitio Web de Theora.</p> - -<p>Este es un ejemplo para insertar <em>audio</em> en tu documento HTML</p> - -<pre class="brush: html"><audio src="/test/audio.ogg"> -<p>Tu navegador no implementa el elemento audio.</p> -</audio></pre> -</div> - -<p>El atributo <code>src</code> puede ser una URL del archivo de audio o la ruta al archivo en el sistema local.</p> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.ogg" controls autoplay loop> -<p>Tu navegador no implementa el elemento audio</p> -</audio></pre> -</div> - -<p>Este código de ejemplo usa los atributos del elemento {{ HTMLElement("audio") }}:</p> - -<ul> - <li><code>controls</code> : muestra los controles estándar de HTML5 para audio en una página web.</li> - <li><code>autoplay</code> : hace que el audio se reproduzca automáticamente.</li> - <li><code>loop</code> : hace que el audio se repita automáticamente.</li> -</ul> - -<div style="overflow: hidden;"> -<pre class="brush: html"><audio src="audio.mp3" preload="auto" controls></audio></pre> -</div> - -<p>El atributo <code>preload</code> es usado en el elemento audio para almacenar temporalmente (buffering) archivos de gran tamaño. Este puede tomar uno de 3 valores:</p> - -<ul> - <li><code>"none"</code> no almacena temporalmente el archivo</li> - <li><code>"auto"</code> almacena temporalmente el archivo multimedia</li> - <li><code>"metadata"</code> almacena temporalmente sólo los metadatos del archivo</li> -</ul> - -<p>Se pueden especificar múltiples fuentes de archivos usando el elemento {{ HTMLElement("source") }} <span id="result_box" lang="es"><span class="hps">con el fin de</span> <span class="hps">proporcionar vídeo</span> <span class="hps">o</span> <span class="hps">audio</span> <span class="hps">codificados en formatos</span> <span class="hps">diferentes</span> <span class="hps">para</span> <span class="hps">diferentes navegadores</span></span>. Por ejemplo:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg"> - <source src="foo.mp4" type="video/mp4"> - Tu navegador no implementa el elemento <code>video</code>. -</video> -</pre> - -<p>Esto reproduce el archivo Ogg en navegadores que admiten el formato Ogg. Si el navegador no admite Ogg, el navegador usará el archivo MPEG-4. Mira también la lista de <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia admitidos por los elementos audio y video</a> en los diferentes navegadores.</p> - -<p>También puedes especificar qué codecs requiere el archivo multimedia; de esta forma el navegador tomará decisiones más inteligentes:</p> - -<pre class="brush: html"><video controls> - <source src="foo.ogg" type="video/ogg; codecs=dirac, speex"> - Tu navegador no implementa el elemento <code>video</code>. -</video></pre> - -<p>Aquí, especificamos que el vídeo usa los codecs Dirac y Speex. Si el navegador implementa Ogg, pero no los codecs especificados, el vídeo no será cargado.</p> - -<p>Si el atributo <code>type</code> no está especificado, el tipo de contenido multimedia se obtiene del servidor <span id="result_box" lang="es"><span class="hps">y</span> se <span class="hps">comprueba para</span> <span class="hps">ver</span> <span class="hps">si el navegador</span> <span class="hps">lo puede manejar</span></span>; si no puede ser mostrado, se comprueba el siguiente <code>source</code> , si ninguno de los elementos <code>source</code> especificados pueden ser usados, un evento de <code>error</code> es enviado al elemento <code>video</code>. Si el atributo <code>type</code> está especificado, es comparado con los tipos que el navegador puede reproducir, y si no es reconocido, no se hace la consulta al servidor; en su lugar, el siguiente <code>source</code> se comprueba una vez.</p> - -<p>Mira <a href="/en-US/docs/DOM/Media_events" title="https://developer.mozilla.org/en/DOM/Media_events">los eventos del contenido multimedia</a> para una lista completa de eventos asociados con la producción multimedia. Para detalles en los formatos multimedia soportados por los diferentes navegadores, mira <a href="/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Media formats supported by the audio and video elements">los formatos multimedia sportados por los elementos audio y video</a>.</p> - -<h2 id="Controlando_la_reproducción_multimedia">Controlando la reproducción multimedia</h2> - -<p>Una vez que has incrustado el contenido multimedia en tu documento HTML usando los nuevos elementos, puedes controlarlos mediante programación en JavaScript. Por ejemplo, para iniciar (o reiniciar) la reproducción, puedes hacer esto:</p> - -<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; -v.play(); -</pre> - -<p>La primera línea obtiene el primer elemento video en el documento, y la segunda línea llama al método <a href="/en-US/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement#play()" title="nsIDOMHTMLMediaElement#play()"><code>play()</code></a> del elemento, como está definido en la interfaz {{ interface("nsIDOMHTMLMediaElement") }} que es usada para implementar los elementos multimedia.</p> - -<p>Controlar un reproductor de audio en HTML5 para reproducir, pausar, aumentar y disminuir el volumen usando algo de Javascript es muy sencillo.</p> - -<pre class="brush: html"><audio id="demo" src="audio.mp3"></audio> -<div> - <button onclick="document.getElementById('demo').play()">Reproducir el Audio</button> - <button onclick="document.getElementById('demo').pause()">Pausar el Audio</button> - <button onclick="document.getElementById('demo').volume+=0.1">Aumentar el Volumen</button> - <button onclick="document.getElementById('demo').volume-=0.1">Disminuir el Volumen</button> -</div> -</pre> - -<h2 id="Deteniendo_la_descarga_de_contenido_multimedia">Deteniendo la descarga de contenido multimedia</h2> - -<p>Mientras que detener la reproducción multimedia es tan fácil como llamar al método pause() del elemento, el navegador sigue descargando el contenido multimedia hasta que el elemento multimedia es eliminado <span id="result_box" lang="es"><span class="hps">a través de</span> <span class="hps">la recolección de basura</span></span>.</p> - -<p>Aquí un truco para detener la descarga de una sola vez:</p> - -<pre class="brush: js">var mediaElement = document.getElementById("myMediaElementID"); -mediaElement.pause(); -mediaElement.src = ""; -</pre> - -<p>Estableciendo una cadena vacía al atributo <code>src</code> del elemento multimedia, tu destruyes el decodificador interno del elemento con lo que detienes la descarga.</p> - -<h2 id="Buscando_a_través_de_los_medios" style="margin: 0px 0px 0.8em; padding: 0px;">Buscando a través de los medios</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Los elementos de los medios proporcionan apoyo para mover la posición de reproducción actual a puntos específicos en el contenido de los medios. </font>Esto se hace estableciendo el valor de la propiedad <code style="font-size: 14px;">horaActual</code> en el elemento; ver <a class="new" href="https://developer.mozilla.org/es/docs/Web/API/HTMLMediaElement" title="/ Es / docs / Web / API / HTMLMediaElement"><code style="font-size: 14px;">HTMLMediaElement</code></a> para más detalles sobre las propiedades del elemento. Basta con establecer el valor en el tiempo, en segundos, con el que desea reproducir para continuar.</p> - -<p><span style="line-height: 1.5em;">Usted puede utilizar el elemento </span><code style="font-size: 14px;">seekable</code><span style="line-height: 1.5em;"> propiedad para determinar los rangos de los medios de comunicación que están disponibles para la búsqueda de la actualidad. Esto devuelve un objeto </span><a class="new" href="https://developer.mozilla.org/es/docs/Web/API/TimeRanges" style="line-height: 1.5em;" title="/ Es / docs / Web / API / TimeRanges"><code style="font-size: 14px;">TimeRanges</code></a><span style="line-height: 1.5em;"> que enumera los rangos de veces que se puede tratar de:</span></p> - -<pre class="brush: js">var mediaElement = document.getElementById('mediaElementID'); -mediaElement.seekable.start(); // Returns the starting time (in seconds) -mediaElement.seekable.end(); // Returns the ending time (in seconds) -mediaElement.currentTime = 122; // Seek to 122 seconds -mediaElement.played.end(); // Returns the number of seconds the browser has played -</pre> - -<h2 id="Especificación_del_rango_de_reproducción" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Especificación del rango de reproducción</font></h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Al especificar el URI de los medios de comunicación para un elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> o <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , puede incluir opcionalmente información adicional para especificar la parte de los medios a reproducir. Para ello, añada una almohadilla ("#"), seguida de la descripción del fragmento de medios.</p> - -<p><span style="line-height: 1.5em;">Un intervalo de tiempo se especifica mediante la sintaxis:</span></p> - -<pre>#t=[starttime][,endtime]</pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>El tiempo se puede especificar como un número de segundos (como un valor de punto flotante) o como una hora / minuto / segundo tiempo separado con dos puntos (por ejemplo, 2:05:01 durante 2 horas, 5 minutos y 1 segundo).</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Algunos ejemplos:</p> - -<dl> -</dl> - -<dl> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 10,20</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo debe desempeñar el rango de 10 segundos a través de 20 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 10.5</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de 10,5 segundos.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t =, 02:00:00</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se reproducirá desde el principio a través de dos horas.</dd> - <dt style="margin: 0px; padding: 0px; line-height: 22px;"><span class="nowiki">http://foo.com/video.ogg # t = 60</span></dt> - <dd style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;">Especifica que el vídeo se debe reproducir desde los 60 segundos hasta el final.</dd> -</dl> - -<div class="geckoVersionNote" style=""> -<p>{{ gecko_callout_heading("9.0") }}</p> -<font><font>La porción rango de reproducción del elemento de la especificación URI media esta en Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). </font><font>En este momento, esta es la única parte de la </font></font><a class="external" href="http://www.w3.org/TR/media-frags/" style="padding-right: 16px; line-height: 21px;" title="http://www.w3.org/TR/media-frags/"><font>especificación de los medios de comunicación Fragmentos URI</font></a><font><font>implementado por el Gecko, y sólo se puede utilizar cuando se especifica la fuente para los elementos de los medios de comunicación, y no en la barra de direcciones.</font></font> - -<p> </p> -</div> - -<h2 id="Opciones_de_reserva" style="margin: 0px 0px 0.8em; padding: 0px;">Opciones de reserva</h2> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">HTML incluido entre, por ejemplo, las etiquetas de apertura y cierre de los elementos de los medios de comunicación son procesados por los navegadores que no admitan medios de HTML5. Usted puede tomar ventaja de este hecho para proporcionar medios alternativos de reserva para esos navegadores.</p> - -<p><span style="line-height: 1.5em;">Esta sección proporciona dos opciones de reserva para video. </span><font>En cada caso, si el navegador soporta vídeo HTML5, que se utiliza, de lo contrario, se utiliza la opción de reserva.</font></p> - -<h3 id="Utilización_de_Flash" style="margin: 0px 0px 0.8em; padding: 0px;">Utilización de Flash</h3> - -<p><span style="line-height: 1.5em;">Puede usar Flash para reproducir una película formato Flash si el </span><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video" style="line-height: 1.5em;"><code style="font-size: 14px;"><video></code></a><span style="line-height: 1.5em;"> no se admite elemento</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="video.ogv" controls> - <object data="flvplayer.swf" type="application/x-shockwave-flash"> - <param value="flvplayer.swf" name="movie"/> - </object> -</video></pre> - -<p><font>Tenga en cuenta que no se debe incluir </font><code style="font-size: 14px;">classid</code><font> en el </font><code style="font-size: 14px;">objeto</code><font> tag con el fin de ser compatible con los navegadores que no sean Internet Explorer.</font></p> - -<p> </p> - -<p> </p> - -<p> </p> - -<h3 id="Reproducción_de_vídeos_Ogg_utilizando_un_applet_de_Java" style="margin: 0px 0px 0.8em; padding: 0px;"><font>Reproducción de vídeos Ogg utilizando un applet de Java</font></h3> - -<p><span style="line-height: 1.5em;">Hay un applet de Java llamada </span><a class="external" href="http://maikmerten.livejournal.com/2256.html" style="line-height: 1.5em; padding-right: 16px; background-color: transparent;" title="http://maikmerten.livejournal.com/2256.html">Cortado</a><span style="line-height: 1.5em;"> que se puede utilizar como reserva para reproducir vídeos Ogg en los navegadores que no tienen soporte para Java, pero no es compatible con vídeo HTML5</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> - <object type="application/x-java-applet" width="320" height="240"> - <param name="archive" value="cortado.jar"> - <param name="code" value="com.fluendo.player.Cortado.class"> - <param name="url" value="my_ogg_video.ogg"> - <p>You need to install Java to play this file.</p> - </object> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><font>Si no se crea un elemento secundario alternativa del elemento de objeto cortado, como el </font><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/p"><code style="font-size: 14px;"><font><p></font></code></a><font> elemento superior, Firefox 3.5 instalaciones que manejan el video de forma nativa, pero no tienen Java instalado incorrectamente informarán al usuario de que es necesario instalar un plugin para ver el contenido en la página.</font></p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<div style="line-height: 22px;"><span class="geckoMinVerMethod indicatorInHeadline minVer">(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)</span> - -<h1 id="Gestión_de_errores" style="margin: 0px 0px 0.8em; padding: 0px; font-size: 1.857em;">Gestión de errores</h1> -</div> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"> </p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">A partir de Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), el tratamiento de errores se ha revisado para que coincida con la última versión de la especificación HTML5. En lugar de que el <code style="font-size: 14px;">error sea</code> enviado al elemento en sí, ahora se entrega a los elementos "hijos" <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> correspondientes a las fuentes que resultan en el error.</p> - -<p><span style="line-height: 1.5em;">Esto permite detectar las fuentes no pudieron cargar, que puede ser útil. Considere este HTML</span><span style="line-height: inherit;">:</span></p> - -<pre class="brush: html"><video> -<source id="mp4_src" - src="video.mp4" - type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> -</source> -<source id="3gp_src" - src="video.3gp" - type='video/3gpp; codecs="mp4v.20.8, samr"'> -</source> -<source id="ogg_src" - src="video.ogv" - type='video/ogg; codecs="theora, vorbis"'> -</source> -</video></pre> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Dado que Firefox no es compatible con MP4 y 3GP, debido a su naturaleza de patente gravado, los <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> elementos con el ID "mp4_src" y "3gp_src" recibirán <code style="font-size: 14px;">error</code> eventos antes de cargar el recurso Ogg. Las fuentes son juzgados en el orden en el que aparecen, y una vez que uno carga con éxito, las fuentes restantes no se trataron en absoluto.</p> - -<h3 id="Detectar_si_las_fuentes_no_han_cargado" style="margin: 0px 0px 0.8em; padding: 0px;">Detectar si las fuentes no han cargado</h3> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;"><code>Para detectar qué todos los elementos </code><a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> no han podido cargarse, se debe comprobar el valor de la propiedad <code style="font-size: 14px;">NetworkState</code> qué poseen todos los elementos de tipo multimedia. Si el valor es <code style="font-size: 14px;">HTMLMediaElement.NETWORK_NO_SOURCE</code>, se sabrá que las fuentes no se cargaron correctamente.</p> - -<p style="margin: 0px 0px 1.286em; padding: 0px; line-height: 1.5em;">Si en ese momento se agrega otra fuente mediante la inserción de un nuevo elemento <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> como hijo del elemento multimedia, Gecko intenta cargar el recurso especificado.</p> - -<h3 id="Mostrando_contenido_fallback_cuando_la_fuente_no_puede_ser_cargada">Mostrando contenido <em>fallback</em> cuando la fuente no puede ser cargada</h3> - -<p>Otra forma de mostrar el contenido <em>fallback</em> de un vídeo cuando ninguna de sus fuentes pudieron ser cargadas, es añadir un manejador de excepciones o errores en el último elemento {{ HTMLElement("source") }}. Así usted podrá reemplazar el vídeo con el contenido <em>fallback</em>:</p> - -<pre class="brush: html language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>video</span> <span class="attr-name token">controls</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>source</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>video/mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>source</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>a</span> <span class="attr-name token">href</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.mp4<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>img</span> <span class="attr-name token">src</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dynamicsearch.jpg<span class="punctuation token">"</span></span> <span class="attr-name token">alt</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>App de b&uaacute;squeda din&aacute;mica en Firefox OS<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>a</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Clic en la im&aacute;gen para reproducir un v&iacute;deo demo de la app de b&uaacute;squeda din&aacute;mica<<span class="tag token"><span class="tag token"><span class="punctuation token">/</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>video</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: js language-js"><code class="language-js"><span class="keyword token">var</span> v <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector<span class="punctuation token">(</span></span><span class="string token">'video'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - sources <span class="operator token">=</span> v<span class="punctuation token">.</span><span class="function token">querySelectorAll<span class="punctuation token">(</span></span><span class="string token">'source'</span><span class="punctuation token">)</span><span class="punctuation token">,</span> - lastsource <span class="operator token">=</span> sources<span class="punctuation token">[</span>sources<span class="punctuation token">.</span>length<span class="number token">-1</span><span class="punctuation token">]</span><span class="punctuation token">;</span> -lastsource<span class="punctuation token">.</span><span class="function token">addEventListener<span class="punctuation token">(</span></span><span class="string token">'error'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>ev<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> d <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement<span class="punctuation token">(</span></span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - d<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> v<span class="punctuation token">.</span>innerHTML<span class="punctuation token">;</span> - v<span class="punctuation token">.</span>parentNode<span class="punctuation token">.</span><span class="function token">replaceChild<span class="punctuation token">(</span></span>d<span class="punctuation token">,</span> v<span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> - -<h2 id="sect1" style="margin: 0px 0px 0.8em; padding: 0px;"> </h2> - -<h2 id="Véase_también" style="margin: 0px 0px 0.8em; padding: 0px;">Véase también</h2> - -<ul style="margin: 0px 0px 1.286em; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; line-height: 22px;"> - <li>Los elementos relacionados con los medios HTML: <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/audio"><code style="font-size: 14px;"><audio></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/video"><code style="font-size: 14px;"><video></code></a> , <a href="https://developer.mozilla.org/es/docs/HTML/Elemento/source"><code style="font-size: 14px;"><source></code></a> ;</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Manipulating_video_using_canvas" title="Vídeo Manipular con tela">Vídeo Manipular con canvas</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Introducing_the_Audio_API_Extension" title="Presentación de la extensión de API Audio">Presentación de la extensión de API Audio</a></li> - <li><code style="font-size: 14px;"><a class="external" href="http://developer.mozilla.org/es/docs/XPCOM_Interface_Reference/nsIDOMHTMLMediaElement" style="padding-right: 16px; background-color: transparent;">nsIDOMHTMLMediaElement</a></code></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements" title="Formatos de los medios admitidos por los elementos de audio y vídeo">Formatos de los medios admitidos por los elementos de audio y vídeo</a></li> - <li><a class="external" href="http://en.flossmanuals.net/ogg-theora/" style="padding-right: 16px; background-color: transparent;" title="http://en.flossmanuals.net/ogg-theora/">Theora Cookbook</a></li> - <li><a class="external" href="http://popcornjs.org/" style="padding-right: 16px; background-color: transparent;" title="http://popcornjs.org/">Popcorn.js - Media Framework HTML5</a></li> - <li><a class="external" href="http://www.html5video.org/kaltura-html5/" style="padding-right: 16px; background-color: transparent;" title="http://www.html5video.org/kaltura-html5/">Kaltura Solución videoteca</a> , una biblioteca de JavaScript (mwEmbed) que soporta un retorno sin problemas con HTML5, VLC Player, Java Cortado y OMTK Vorbis reproductor de Flash. (Es utilizado por Wikimedia)</li> - <li><a class="external" href="http://omtk.org/flash/index.html" style="padding-right: 16px; background-color: transparent;" title="http://omtk.org/flash/index.html">OMTK - flash</a> , una biblioteca de Flash que implementa un decodificador Vorbis</li> - <li><a class="external" href="http://www.projekktor.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.projekktor.com">Projekktor jugador</a> , un contenedor de JavaScript para audio vídeo-tags con fallback flash, de código abierto, GPL</li> - <li><a class="external" href="http://www.theora.org/cortado/" style="padding-right: 16px; background-color: transparent;" title="http://www.theora.org/cortado/">Applet Cortado</a> , una solución de reproducción de audio / vídeo en Java que mantiene Xiph.org</li> - <li><a class="external" href="http://videojs.com/" style="padding-right: 16px; background-color: transparent;" title="Video.js HTML5 Video Player">Video.JS</a> , un reproductor de vídeo HTML5 de código abierto y un marco.</li> - <li><a class="external" href="http://mediaelementjs.com/" style="padding-right: 16px; background-color: transparent;" title="http://mediaelementjs.com/">MediaElement.js</a> - marco audio / video HTML5 de código abierto con una cuña de Flash personalizada que imitan API multimedia HTML5 para exploradores más antiguos.</li> - <li><a class="external" href="http://www.hdwebplayer.com/" style="padding-right: 16px; background-color: transparent;" title="http://www.hdwebplayer.com">FLV Player</a> - HTML5 reserva soporte del reproductor de vídeo</li> -</ul> - -<p><span style="line-height: inherit;">{{ HTML5ArticleTOC() }}</span></p> diff --git a/files/es/web/html/recursos_offline_en_firefox/index.html b/files/es/web/html/using_the_application_cache/index.html index dfed8fe0d5..dfed8fe0d5 100644 --- a/files/es/web/html/recursos_offline_en_firefox/index.html +++ b/files/es/web/html/using_the_application_cache/index.html diff --git a/files/es/web/http/basics_of_http/datos_uris/index.html b/files/es/web/http/basics_of_http/data_uris/index.html index 6fa23a5ba3..6fa23a5ba3 100644 --- a/files/es/web/http/basics_of_http/datos_uris/index.html +++ b/files/es/web/http/basics_of_http/data_uris/index.html diff --git a/files/es/web/http/basics_of_http/identificación_recursos_en_la_web/index.html b/files/es/web/http/basics_of_http/identifying_resources_on_the_web/index.html index f666c9240f..f666c9240f 100644 --- a/files/es/web/http/basics_of_http/identificación_recursos_en_la_web/index.html +++ b/files/es/web/http/basics_of_http/identifying_resources_on_the_web/index.html diff --git a/files/es/web/http/peticiones_condicionales/index.html b/files/es/web/http/conditional_requests/index.html index c480c68ee2..c480c68ee2 100644 --- a/files/es/web/http/peticiones_condicionales/index.html +++ b/files/es/web/http/conditional_requests/index.html diff --git a/files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html b/files/es/web/http/connection_management_in_http_1.x/index.html index 5e9fff8fa9..5e9fff8fa9 100644 --- a/files/es/web/http/gestion_de_la_conexion_en_http_1.x/index.html +++ b/files/es/web/http/connection_management_in_http_1.x/index.html diff --git a/files/es/web/http/access_control_cors/index.html b/files/es/web/http/cors/index.html index efd60a179a..efd60a179a 100644 --- a/files/es/web/http/access_control_cors/index.html +++ b/files/es/web/http/cors/index.html diff --git a/files/es/web/api/subtlecrypto/encrypt/index.html b/files/es/web/http/headers/digest/index.html index 8f35030d35..8f35030d35 100644 --- a/files/es/web/api/subtlecrypto/encrypt/index.html +++ b/files/es/web/http/headers/digest/index.html diff --git a/files/es/web/http/headers/user-agent/firefox/index.html b/files/es/web/http/headers/user-agent/firefox/index.html new file mode 100644 index 0000000000..4dbd1908cf --- /dev/null +++ b/files/es/web/http/headers/user-agent/firefox/index.html @@ -0,0 +1,55 @@ +--- +title: Cadenas del User Agent de Gecko +slug: Cadenas_del_User_Agent_de_Gecko +tags: + - Desarrollo_Web + - Todas_las_Categorías +translation_of: Web/HTTP/Headers/User-Agent/Firefox +--- +<h3 id="Uso_Apropiado" name="Uso_Apropiado">Uso Apropiado</h3> +<p>No se recomienda el uso de las cadenas del User Agent como su principal opción para la detección del navegador. Vea <a href="es/Deteccion_Cross_browser_y_Soporte_Cross_Browser"> Deteccion Cross browser y Soporte Cross Browser</a> para una ojeada mas en profundo a varias técnicas sobre detección de navegadores con recomendaciones.</p> +<p>En particular, recomendamos usar la detección de la cadena del User Agent para detección del navegador del lado del servidor. Si su actual código del lado cliente usa detección de la cadena del User Agent, simplemente puede hacer una búsqueda por la cadena "Gecko" en el User Agent para detectar cualquier navegador basado en Gecko.</p> +<p>Para todos los detalles que lidian con detecciones con Gecko los cuales lidian con bugs especificos o los cuales requieran conocimiento de strings especificos o fechas de la compilación, use el objeto <a href="es/DOM_Client_Object_Cross-Reference/navigator">navigator</a>.</p> +<h3 id="Lista_de_user_agents_liberados_por_Netscape_y_AOL_basados_en_Gecko" name="Lista_de_user_agents_liberados_por_Netscape_y_AOL_basados_en_Gecko">Lista de user agents liberados por Netscape y AOL basados en Gecko</h3> +<p>Vea <a class="external" href="http://www.mozilla.org/build/revised-user-agent-strings.html">mozilla.org's user-agent strings reference</a> para Plataforma específico, + <i> + Seguridad</i> + , + <i> + Sistema Operativo</i> + o + <i> + CPU</i> + y valores de + <i> + localización</i> + .</p> +<ul> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.4) Gecko/20030624 Netscape/7.1 (ax)</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20030208 Netscape/7.02</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.2) Gecko/20021120 Netscape/7.01</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0.1) Gecko/20020823 Netscape/7.0</tt></li> + <li><tt>Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US; rv:1.0.1) Gecko/20020730 AOL/7.0</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:1.0rc2) Gecko/20020512 Netscape/7.0b1</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.2) Gecko/20020220 CS 2000 7.0/7.0</tt> + <ul> + <li><tt>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.4.2) Gecko/20020502 CS 2000 7.0/7.0</tt></li> + </ul> + </li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4.1) Gecko/20020314 Netscape6/6.2.2</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.4) Gecko/20011128 Netscape6/6.2.1</tt></li> + <li><tt>Mozilla/5.0 (Platform; Security; OS-or-CPU; Localization; rv:0.9.2) Gecko/20010726 Netscape6/6.1</tt></li> +</ul> +<p><br> + Para una información más detallada sobre liberaciones de Netscape y Mozilla, por favor vea el <a class="external" href="http://www.mozilla.org/releases/cvstags.html">mozilla.org cvstags reference</a>.</p> +<p> </p> +<div class="originaldocinfo"> + <h3 id="Informacion_Del_documento_Original" name="Informacion_Del_documento_Original">Informacion Del documento Original</h3> + <ul> + <li>Autor: Bob Clary</li> + <li>Última Actualización: Junio 30, 2003</li> + <li>Copyright © 2001-2003 Netscape. Todos los derechos reservados.</li> + </ul> +</div> +<p> </p> diff --git a/files/es/web/http/mecanismo_actualizacion_protocolo/index.html b/files/es/web/http/protocol_upgrade_mechanism/index.html index 74ef3b57f7..74ef3b57f7 100644 --- a/files/es/web/http/mecanismo_actualizacion_protocolo/index.html +++ b/files/es/web/http/protocol_upgrade_mechanism/index.html diff --git a/files/es/web/http/recursos_y_especificaciones/index.html b/files/es/web/http/resources_and_specifications/index.html index 0c36d6e3e6..0c36d6e3e6 100644 --- a/files/es/web/http/recursos_y_especificaciones/index.html +++ b/files/es/web/http/resources_and_specifications/index.html diff --git a/files/es/web/http/sesión/index.html b/files/es/web/http/session/index.html index 3d6e2d938b..3d6e2d938b 100644 --- a/files/es/web/http/sesión/index.html +++ b/files/es/web/http/session/index.html diff --git a/files/es/web/http/status/8080/index.html b/files/es/web/http/status/413/index.html index 10ad4ac7b2..10ad4ac7b2 100644 --- a/files/es/web/http/status/8080/index.html +++ b/files/es/web/http/status/413/index.html diff --git a/files/es/web/javascript/una_re-introducción_a_javascript/index.html b/files/es/web/javascript/a_re-introduction_to_javascript/index.html index b8f2756627..b8f2756627 100644 --- a/files/es/web/javascript/una_re-introducción_a_javascript/index.html +++ b/files/es/web/javascript/a_re-introduction_to_javascript/index.html diff --git a/files/es/web/javascript/acerca_de_javascript/index.html b/files/es/web/javascript/about_javascript/index.html index a66f16e061..a66f16e061 100644 --- a/files/es/web/javascript/acerca_de_javascript/index.html +++ b/files/es/web/javascript/about_javascript/index.html diff --git a/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html b/files/es/web/javascript/enumerability_and_ownership_of_properties/index.html index fbe97185f6..fbe97185f6 100644 --- a/files/es/web/javascript/enumeracion_y_propietario_de_propiedades/index.html +++ b/files/es/web/javascript/enumerability_and_ownership_of_properties/index.html diff --git a/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html b/files/es/web/javascript/guide/control_flow_and_error_handling/index.html index d685818029..d685818029 100644 --- a/files/es/web/javascript/guide/control_de_flujo_y_manejo_de_errores/index.html +++ b/files/es/web/javascript/guide/control_flow_and_error_handling/index.html diff --git a/files/es/web/javascript/guide/funciones/index.html b/files/es/web/javascript/guide/functions/index.html index 9594a71f4c..9594a71f4c 100644 --- a/files/es/web/javascript/guide/funciones/index.html +++ b/files/es/web/javascript/guide/functions/index.html diff --git a/files/es/web/javascript/guide/colecciones_indexadas/index.html b/files/es/web/javascript/guide/indexed_collections/index.html index baf55a84d5..baf55a84d5 100644 --- a/files/es/web/javascript/guide/colecciones_indexadas/index.html +++ b/files/es/web/javascript/guide/indexed_collections/index.html diff --git a/files/es/web/javascript/guide/introducción/index.html b/files/es/web/javascript/guide/introduction/index.html index 6200c2c7d6..6200c2c7d6 100644 --- a/files/es/web/javascript/guide/introducción/index.html +++ b/files/es/web/javascript/guide/introduction/index.html diff --git a/files/es/web/javascript/guide/bucles_e_iteración/index.html b/files/es/web/javascript/guide/loops_and_iteration/index.html index 07b7c12e31..07b7c12e31 100644 --- a/files/es/web/javascript/guide/bucles_e_iteración/index.html +++ b/files/es/web/javascript/guide/loops_and_iteration/index.html diff --git a/files/es/web/javascript/guide/módulos/index.html b/files/es/web/javascript/guide/modules/index.html index eacc6835f6..eacc6835f6 100644 --- a/files/es/web/javascript/guide/módulos/index.html +++ b/files/es/web/javascript/guide/modules/index.html diff --git a/files/es/web/javascript/guide/regular_expressions/aserciones/index.html b/files/es/web/javascript/guide/regular_expressions/assertions/index.html index b822cdd2bf..b822cdd2bf 100644 --- a/files/es/web/javascript/guide/regular_expressions/aserciones/index.html +++ b/files/es/web/javascript/guide/regular_expressions/assertions/index.html diff --git a/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html b/files/es/web/javascript/guide/regular_expressions/character_classes/index.html index 6de027b270..6de027b270 100644 --- a/files/es/web/javascript/guide/regular_expressions/clases_de_caracteres/index.html +++ b/files/es/web/javascript/guide/regular_expressions/character_classes/index.html diff --git a/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html b/files/es/web/javascript/guide/regular_expressions/cheatsheet/index.html index accc783aff..accc783aff 100644 --- a/files/es/web/javascript/guide/regular_expressions/hoja_de_referencia/index.html +++ b/files/es/web/javascript/guide/regular_expressions/cheatsheet/index.html diff --git a/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html b/files/es/web/javascript/guide/regular_expressions/groups_and_ranges/index.html index 34eed03589..34eed03589 100644 --- a/files/es/web/javascript/guide/regular_expressions/grupos_y_rangos/index.html +++ b/files/es/web/javascript/guide/regular_expressions/groups_and_ranges/index.html diff --git a/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html b/files/es/web/javascript/guide/regular_expressions/quantifiers/index.html index bc2821219f..bc2821219f 100644 --- a/files/es/web/javascript/guide/regular_expressions/cuantificadores/index.html +++ b/files/es/web/javascript/guide/regular_expressions/quantifiers/index.html diff --git a/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html b/files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html index 7fc434a0dc..7fc434a0dc 100644 --- a/files/es/web/javascript/guide/regular_expressions/escapes_de_propiedades_unicode/index.html +++ b/files/es/web/javascript/guide/regular_expressions/unicode_property_escapes/index.html diff --git a/files/es/web/javascript/guide/usar_promesas/index.html b/files/es/web/javascript/guide/using_promises/index.html index 4b84166fe6..4b84166fe6 100644 --- a/files/es/web/javascript/guide/usar_promesas/index.html +++ b/files/es/web/javascript/guide/using_promises/index.html diff --git a/files/es/web/javascript/guide/trabajando_con_objectos/index.html b/files/es/web/javascript/guide/working_with_objects/index.html index 84a9854d9a..84a9854d9a 100644 --- a/files/es/web/javascript/guide/trabajando_con_objectos/index.html +++ b/files/es/web/javascript/guide/working_with_objects/index.html diff --git a/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.html index f237f7c5fa..f237f7c5fa 100644 --- a/files/es/web/javascript/herencia_y_la_cadena_de_protipos/index.html +++ b/files/es/web/javascript/inheritance_and_the_prototype_chain/index.html diff --git a/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html b/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html deleted file mode 100644 index 83c8f0a7c9..0000000000 --- a/files/es/web/javascript/introducción_a_javascript_orientado_a_objetos/index.html +++ /dev/null @@ -1,385 +0,0 @@ ---- -title: Introducción a JavaScript orientado a objetos -slug: Web/JavaScript/Introducción_a_JavaScript_orientado_a_objetos -tags: - - Constructor - - Herencia - - JavaScript - - Objetos - - Orientado a objetos - - POO - - espacio de nombres -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -<p>{{jsSidebar("Introductory")}}</p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>JavaScript</strong> dispone de fuertes capacidades de programación orientada a objetos, a pesar de que han tenido lugar algunos debates respecto a las diferencias de sus capacidades en comparación con otros lenguajes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Este artículo comienza con una Introducción a la programación orientada a objetos, luego examina el modelo de objetos de JavaScript, y finalmente, muestra los conceptos de programación orientada a objetos en JavaScript.</span></span></p> - -<h2 id="JavaScript_Review" name="JavaScript_Review"><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Revisión de JavaScript</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Si no te sientes seguro acerca de los conceptos de JavaScript tales como variables, tipos, funciones y el ámbito de aplicación, puedes leer sobre estos temas en: <a href="/en/JavaScript/A_re-introduction_to_JavaScript" title="en/JavaScript/A re-introduction to JavaScript">Una nueva introducción a JavaScript</a> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">También puedes consultar la <a href="/en/JavaScript/Guide" title="en/JavaScript/Guide">Guía de JavaScript 1.5</a>.</span></span></p> - -<h2 id="Object-oriented_programming" name="Object-oriented_programming"><span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Programación orientada a objetos</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados en el mundo real.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Utiliza diversas técnicas de paradigmas previamente establecidas, incluyendo la <strong>modularidad</strong>, <strong>polimorfismo</strong> y <strong>encapsulamiento</strong>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hoy en día, muchos lenguajes de programación (como Java, JavaScript, C#, C++, Python, PHP, Ruby y Objective-C) soportan programación orientada a objetos (POO).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación orientada a objetos puede considerarse como el diseño de software a través de un conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones para la computadora.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-13"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-14"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">POO pretende promover una mayor flexibilidad y facilidad de mantenimiento en la programación y es muy popular en la ingeniería de software a gran escala.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-15"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Gracias a su fuerte énfasis en la modularidad, el código orientado a objetos está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> - -<h2 id="Terminology" name="Terminology"><span class="goog-gtc-unit" id="goog-gtc-unit-16"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Terminología</span></span></h2> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-17"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Clase</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-18"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Define las características del Objeto.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-19"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Objeto</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-20"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una instancia de una Clase.</span></span></dd> - <dt><span style="line-height: 1.5;">Propiedad</span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-24"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una característica del Objeto, como el color.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-25"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Método</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-26"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Una capacidad del Objeto, como caminar.</span></span></dd> -</dl> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-21"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Constructor</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-22"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Es un método llamado en el momento de la creación de instancias.</span></span></dd> - <dt><span style="line-height: 1.5;">Herencia</span></dt> - <dd><span class="goog-gtc-unit"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase puede heredar características de otra Clase.</span></span></dd> -</dl> - -<dl> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-29"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Encapsulamiento</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-30"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-31"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-32"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La conjunción de herencia compleja, métodos y propiedades que un objeto debe ser capaz de simular en un modelo de la realidad.</span></span></dd> - <dt><span class="goog-gtc-unit" id="goog-gtc-unit-33"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Polimorfismo</span></span></dt> - <dd><span class="goog-gtc-unit" id="goog-gtc-unit-34"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Diferentes Clases podrían definir el mismo método o propiedad.</span></span></dd> -</dl> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-35"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para una descripción más extensa de programación orientada a objetos, consulta <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" title="http://es.wikipedia.org/wiki/Programación_orientada_a_objetos">Programación orientada a objetos</a> en Wikipedia.</span></span></p> - -<h2 id="Programación_basada_en_prototipos"><span class="goog-gtc-unit" id="goog-gtc-unit-36"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación basada en prototipos</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-37"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La programación basada en prototipos es un estilo de programación orientada a objetos en la que las clases no están presentes y la reutilización de comportamiento (conocido como herencia en lenguajes basados en clases) se lleva a cabo a través de un proceso de decoración de objetos existentes que sirven de prototipos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-38"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Este modelo también se conoce como programación sin clases, orientada a prototipos o basada en ejemplos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-39"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El ejemplo original (y más canónico) de un lenguaje basado en prototipos es el lenguaje de programación <a href="https://en.wikipedia.org/wiki/Self_%28programming_language%29">Self</a> desarrollado por David Ungar y Randall Smith.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Sin embargo, el estilo de programación sin clases se ha hecho cada vez más popular y ha sido adoptado para lenguajes de programación como JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (cuando se utiliza el Viewer framework para manipular los componentes Morphic) y varios otros. <sup><a href="/#Referencia" title="#Referencia">2</a></sup></span></span></p> - -<h2 id="JavaScript_Object_Oriented_Programming" name="JavaScript_Object_Oriented_Programming"><span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Programación orientada a objetos de JavaScript </span></span></h2> - -<h3 id="Core_Objects" name="Core_Objects"><span style="font-size: 1.714285714285714rem;">Namespace</span></h3> - -<p>Un <strong>espacio de nombres</strong> es un contenedor que permite asociar toda la funcionalidad de un determinado objeto con un nombre único. En JavaScript un espacio de nombres es un objeto que permite a métodos, propiedades y objetos asociarse. La idea de crear espacios de nombres en JavaScript es simple: Crear un único objeto global para las variables, métodos, funciones convirtiendolos en propiedades de ese objeto. El uso de los namespace permite minimizar el conflicto de nombres con otros objetos haciéndolos únicos dentro de nuestra aplicación.</p> - -<div>Un <strong>espacio de nombres</strong> es un objeto: </div> - -<div><br> -<span style="line-height: 1.5;">Vamos a crear un objeto global llamado MIAPLICACION</span></div> - -<div> </div> - -<pre class="brush: js">// namespace global - -var MIAPLICACION = MIAPLICACION || {};</pre> - -<div> </div> - -<div class="note"> -<p><strong>Nota:</strong> Para continuar con las mejores prácticas vamos a utilizar mayúsculas para los namespace.</p> -</div> - -<div> -<div>En el código de ejemplo anterior comprobamos si MIAPLICACION ya se encuentra definida. Si es así utilizamos el objeto global MIAPLICACION que existe; si este no existe creamos un objeto vacío llamado MIAPLICACION que encapsulará métodos, funciones, variables y otros objetos que vayamos a crear.</div> - -<div> </div> - -<div>También podemos crear <strong>Sub-espacios de nombres</strong>:</div> - -<div> </div> - -<pre class="brush: js">// Sub-namespace - -MIAPLICACION.event = {} ;</pre> -</div> - -<div>A continuación se muestra el código para la creación de un <strong>espacio de nombre</strong> y cómo agregar variables, funciones y métodos:</div> - -<div> </div> - -<pre class="brush: js">// Creación del contenedor llamado MIAPLICACION.metodoComun de método y propiedades comunes. -MIAPLICACION.metodoComun = { - regExParaNombre: "", // define regex para la validación del nombre - regExParaTelefono: "", // define regex para validación del teléfono - validaNombre: function(nombre){ - // Hace algo con el nombre que usted ingresa a la variable reExParaNombre - // usando "this.regExParaNombre" - }, - - validaNroTelefono: function (numTelefono){ - // Hace algo con el número de teléfono - } -} - -// Objeto junto a la declaración del método -MIAPLICACION.event = { - addListener: function(el, type, fn){ - // código de relleno - }, - removeListener: function(el, type, fn){ - // código de relleno - }, - getEvent: function(e) { - // código de relleno - } - - // Puedes agregar otras propiedades y métodos -} - -// Sintaxis de utilización del método addListener: -MIAPLICACION.event.addListener("turel", "tipo", callback); - - -</pre> - -<div> -<h3 id="Core_Objects" name="Core_Objects" style="line-height: 24px;"><span style="font-size: 1.714285714285714rem;">Objetos básicos</span></h3> -</div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-43"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-44"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El siguiente ejemplo muestra cómo utilizar el objeto Math para obtener un número al azar mediante el uso de su método <code>random()</code>.</span></span></p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-45"><span class="brush: js" dir="ltr">alert (Math.random ());</span></span> -</pre> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-46"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr"><strong>Nota:</strong> este y todos los demás ejemplos suponen que una función llamada <code>alert</code> (como el que se incluye en los navegadores web) se define de forma global.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-47"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La función <code>alert</code> no es realmente parte de JavaScript.</span></span></div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-48"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta <a href="/En/Core_JavaScript_1.5_Reference/Global_Objects" title="En/Core JavaScript 1.5 Reference/Global Objects">Core JavaScript 1.5 Reference:Global Objects</a> para obtener una lista de los objetos básicos en JavaScript.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-49"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada objeto en JavaScript es una instancia del objeto <code>Object</code>, por lo tanto, hereda todas sus propiedades y métodos.</span></span></p> - -<h3 id="Custom_Objects" name="Custom_Objects"><span class="goog-gtc-unit" id="goog-gtc-unit-50"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Objetos personalizados</span></span></h3> - -<h4 id="The_Class" name="The_Class"><span class="goog-gtc-unit" id="goog-gtc-unit-51"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La clase</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-52"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript es un lenguaje basado en prototipos que no contiene ninguna declaración de clase, como se encuentra, por ejemplo, en C + + o Java.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-53"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto es a veces confuso para los programadores acostumbrados a los lenguajes con una declaración de clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-54"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En su lugar, JavaScript utiliza funciones como clases.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-55"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Definir una clase es tan fácil como definir una función.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-56"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo siguiente se define una nueva clase llamada <strong>Persona</strong>.</span></span></p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-57"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">function Persona() { }</span></span> -</pre> - -<h4 id="The_Object_.28Class_Instance.29" name="The_Object_.28Class_Instance.29"><span class="goog-gtc-unit" id="goog-gtc-unit-58"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El objeto (ejemplo de clase)</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-59"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Para crear un nuevo ejemplo de un objeto <em><code>obj</code></em> utilizamos la declaración <code>new <em>obj</em></code> , asignando el resultado (que es de tipo <em><code>obj</code></em> ) a una variable para tener acceso más tarde.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-60"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define una clase llamada <code>Persona</code> y creamos dos instancias ( <code>persona1</code> y <code>persona2</code> ).</span></span></p> - -<pre class="brush: js">function Persona() { -} - -var persona1 = new Persona(); -var persona2 = new Persona();</pre> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Por favor, consulta también <a href="/en/JavaScript/Reference/Global_Objects/Object/create" title="en/JavaScript/Reference/Global Objects/Object/create">Object.create</a> para ver un método nuevo y alternativo de creación de ejemplos.</span></span></div> - -<h4 id="The_Constructor" name="The_Constructor"><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor es llamado en el momento de la creación de la instancia (el momento en que se crea la instancia del objeto).</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">El constructor es un método de la clase.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">En JavaScript, la función sirve como el constructor del objeto, por lo tanto, no hay necesidad de definir explícitamente un método constructor.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Cada acción declarada en la clase es ejecutada en el momento de la creación de la instancia.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">El constructor se usa para establecer las propiedades del objeto o para llamar a los métodos para preparar el objeto para su uso. Más adelante describiremos como agregar </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">métodos a clase y sus definiciones ya que se realiza utilizando una sintaxis diferente.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo, el constructor de la clase <code>Persona</code> muestra un alerta que dice (<strong>Una instancia de persona)</strong> cuando se crea la instancia de la clase <code>Persona</code>.</span></span></p> - -<pre class="brush: js">function Persona() { - alert('Una instancia de Persona'); -} - -var persona1 = new Persona(); -var persona2 = new Persona();</pre> - -<h4 id="The_Property_.28object_attribute.29" name="The_Property_.28object_attribute.29"><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">La propiedad (atributo del objeto)</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades son variables contenidas en la clase, cada instancia del objeto tiene dichas propiedades.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las propiedades deben establecerse a la propiedad prototipo de la clase (función), para que la herencia funcione correctamente.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Para trabajar con propiedades dentro de la clase se utiliza la palabra reservada <strong><code>this</code></strong> , que se refiere al objeto actual.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82-goog-gtc-unit-83"><span class="goog-gtc-from-human goog-gtc-translatable">El acceso (lectura o escritura) a una propiedad desde fuera de la clase se hace con la sintaxis: <strong>NombreDeLaInstancia<code>.Propiedad</code></strong>. Es la misma sintaxis utilizada por C++, Java y algunos lenguajes más.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84-goog-gtc-unit-85"><span class="goog-gtc-from-human goog-gtc-translatable">(Desde dentro de la clase la sintaxis es <strong><code>this.</code><code>Propiedad</code></strong> que se utiliza para obtener o establecer el valor de la propiedad).</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la propiedad <font face="Courier New, Andale Mono, monospace"><strong>primerNombre </strong></font>de la clase <code>Persona</code> y la definimos en la creación de la instancia.</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; - alert('Una instancia de Persona'); -} - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); - -// Muestra el primer nombre de persona1 -alert ('persona1 es ' + persona1.primerNombre); // muestra "persona1 es Alicia" -alert ('persona2 es ' + persona2.primerNombre); // muestra "persona2 es Sebastian"</pre> - -<h4 id="The_methods" name="The_methods"><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Los métodos siguen la misma lógica que las propiedades, la diferencia es que son funciones y se definen como funciones.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Llamar a un método es similar a acceder a una propiedad, pero se agrega <code>()</code> al final del nombre del método, posiblemente con argumentos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-99"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo se define y utiliza el método diHola<code>()</code> para la clase <code>Persona</code>.</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -Persona.prototype.diHola = function() { - alert ('Hola, Soy ' + this.primerNombre); -}; - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); - -// Llamadas al método diHola de la clase Persona. -persona1.diHola(); // muestra "Hola, Soy Alicia" -persona2.diHola(); // muestra "Hola, Soy Sebastian"</pre> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-113"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En JavaScript los métodos son objetos como lo es una función normal y se vinculan a un objeto como lo hace una propiedad, lo que significa que se pueden invocar desde "fuera de su contexto".</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-114"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Considera el siguiente código de ejemplo:</span></span></p> - -<pre class="brush: js">function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -Persona.prototype.diHola = function() { - alert ("Hola, Soy " + this.primerNombre); -}; - -var persona1 = new Persona("Alicia"); -var persona2 = new Persona("Sebastian"); -var funcionSaludar = persona1.diHola; - -persona1.diHola(); // muestra "Hola, Soy Alicia" -persona2.diHola(); // muestra "Hola, Soy Sebastian" -funcionSaludar(); // muestra "Hola, Soy undefined (ó da un error con el - // TypeError en modo estricto - -alert(funcionSaludar === persona1.diHola); // muestra true (verdadero) -alert(funcionSaludar === Persona.prototype.diHola); // muestra true (verdadero) -funcionSaludar.call(persona1); // muestra "Hola, Soy Alicia"</pre> - -<div>En el ejemplo se muestran todas las referencias que tenemos de la función <strong>diHola</strong> — una de ellas es <strong>persona1, </strong>otra en <strong>Persona.prototype</strong>, en la variable <strong>funcionSaludar</strong>, etc. — todas se refieren a la misma función. El valor durante una llamada a la función depende de como realizamos esa llamada. <span style="line-height: 1.5;">En el común de los casos cuando la llamamos desde una expresión donde tenemos a la función desde la propiedad del objeto — <strong>persona1.diHola()</strong>.</span><span style="line-height: 1.5;">— Se establece en el objeto que tenemos en la función (persona1), razón por la cual <strong>persona1.diHola()</strong> utiliza el nombre "Alicia" y <strong>persona2.diHola()</strong> utiliza el nombre "Sebastian". </span><span style="line-height: 1.5;">Pero si realizamos la llamada de otra manera, se establecerá de forma diferente: Llamándola desde una variable —<strong>funcionSaludar()</strong> — Este </span><span style="line-height: 1.5;">establece </span><span style="line-height: 1.5;">al objeto global (windows, en los navegadores). </span><span style="line-height: 1.5;">Desde este objeto (probablemente) no tiene a la propiedad <strong>primerNombre</strong>, por lo que finalizará con "Hola, Soy indefinido". </span><span style="line-height: 1.5;">(El cual se incluye en modo </span>de código suelto, sino sería diferente [un error] en modo estricto, pero para evitar confusiones ahora no vamos a entra en detalles.) O podemos establecerla de forma explicita utilizando Function.call (ó Function.apply), como se muestra al final del ejemplo <strong>funcionSaludar.call(persona1)</strong>.</div> - -<div> </div> - -<div class="note"><span class="goog-gtc-unit" id="goog-gtc-unit-133"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Consulta más información al respecto en <a href="/en/JavaScript/Reference/Global_Objects/Function/call" title="en/JavaScript/Reference/Global Objects/Function/call">Function.call</a> y <a href="/en/JavaScript/Reference/Global_Objects/Function/apply" title="en/JavaScript/Reference/Global Objects/Function/apply">Function.apply</a></span></span></div> - -<h4 id="Inheritance" name="Inheritance"><span class="goog-gtc-unit" id="goog-gtc-unit-134"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Herencia</span></span></h4> - -<div>La herencia es una manera de crear una clase como una versión especializada de una o más clases (JavaScript sólo permite herencia simple). La clase especializada comúnmente se llama hija o secundaria, y la otra clase se le llama padre o primaria. En JavaScript la herencia se logra mediante la asignación de una instancia de la clase primaria a la clase secundaria, y luego se hace la especialización. </div> - -<div> </div> - -<div class="note"> -<p>JavaScript no detecta la clase hija prototype.constructor (vea las propiedades del <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/prototype">Core JavaScript 1.5 Reference:Global Objects:Object:prototype</a>) así que debemos decírselo de forma manual.</p> -</div> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-140" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el siguiente ejemplo definimos la clase <strong><code>Estudiante</code></strong> como una clase secundaria de <strong><code>Persona</code></strong> .</span></span><span style="line-height: 1.5;"> </span><span class="goog-gtc-unit" id="goog-gtc-unit-141" style="line-height: 1.5;"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Luego redefinimos el método <strong>diHola<code>()</code></strong> y agregamos el método <strong>diAdios<code>()</code></strong>.</span></span></p> - -<pre class="brush: js">// Definimos el constructor Persona -function Persona(primerNombre) { - this.primerNombre = primerNombre; -} - -// Agregamos un par de métodos a Persona.prototype -Persona.prototype.caminar = function() { - alert("Estoy caminando!"); -}; -Persona.prototype.diHola = function(){ - alert("Hola, Soy" + this.primerNombre); -}; - -// Definimos el constructor Estudiante -function Estudiante(primerNombre, asignatura) { - // Llamamos al constructor padre, nos aseguramos (utilizando Function#call) que "this" se - // ha establecido correctamente durante la llamada - Persona.call(this, primerNombre); - - //Inicializamos las propiedades específicas de Estudiante - this.asignatura = asignatura; -}; - -// Creamos el objeto Estudiante.prototype que hereda desde Persona.prototype -// Nota: Un error común es utilizar "new Persona()" para crear Estudiante.prototype -// Esto es incorrecto por varias razones, y no menos importante que no le estamos pasando nada -// a Persona desde el argumento "primerNombre". El lugar correcto para llamar a Persona -// es arriba, donde llamamos a Estudiante. -Estudiante.prototype = Object.create(Persona.prototype); // Vea las siguientes notas - -// Establecer la propiedad "constructor" para referencias a Estudiante -Estudiante.prototype.constructor = Estudiante; - -// Reemplazar el método "diHola" -Estudiante.prototype.diHola = function(){ - alert("Hola, Soy " + this.primerNombre + ". Estoy estudiando " + this.asignatura + "."); -}; - -// Agregamos el método "diAdios" -Estudiante.prototype.diAdios = function() { - alert("¡ Adios !"); -}; - -// Ejemplos de uso -var estudiante1 = new Estudiante("Carolina", "Física Aplicada"); -estudiante1.diHola(); // muestra "Hola, Soy Carolina. Estoy estudianto Física Aplicada." -estudiante1.caminar(); // muestra "Estoy caminando!" -estudiante1.diAdios(); // muestra "¡ Adios !" - -// Comprobamos que las instancias funcionan correctamente -alert(estudiante1 instanceof Persona); // devuelve true -alert(estudiante1 instanceof Estudiante); // devuelve true -</pre> - -<p>Con respecto a la línea <strong>Estudiante.prototype = Object.create(Persona.prototype); </strong>: Sobre los motores antiguos de JavaScript sin <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a>, se puede utilizar un "polyfill" (aka "shim", vea el enlace del artículo), o se puede utilizar una función que obtiene el mismo resultado, como por ejemplo:</p> - -<pre class="brush: js">function crearObjeto(proto) { - function ctor() { } - ctor.prototype = proto; - return new ctor(); -} - -// uso: -Estudiante.prototype = crearObjeto(Persona.prototype); </pre> - -<div class="note"> -<p>Ver <a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/create">Object.create</a> para conocer más sobre lo que hace, y complementar con los motores antiguos.</p> -</div> - -<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Encapsulación</span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-172"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">En el ejemplo anterior, <code>Estudiante</code> no tiene que saber cómo se aplica el método <code>caminar()</code> de la clase <code>Persona</code>, pero, sin embargo, puede utilizar ese método. La clase <code>Estudiante</code> no tiene que definir explícitamente ese método, a menos que queramos cambiarlo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-173"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se denomina <strong>la encapsulación</strong>, por medio de la cual cada clase hereda los métodos de su elemento primario y sólo tiene que definir las cosas que desea cambiar.</span></span></p> - -<h4 id="Abstraction" name="Abstraction"><span class="goog-gtc-unit" id="goog-gtc-unit-174"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Abstracción</span></span></h4> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-175"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Un mecanismo que permite modelar la parte actual del problema de trabajo.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-176"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto se puede lograr por herencia (especialización) o por composición.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-177"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">JavaScript logra la especialización por herencia y por composición al permitir que las instancias de clases sean los valores de los atributos de otros objetos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-178"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">La clase Function de JavaScript hereda de la clase de Object (esto demuestra la especialización del modelo) y la propiedad Function.prototype es un ejemplo de Objeto (esto demuestra la composición)</span></span></p> - -<p> </p> - -<pre class="brush: js"><span class="goog-gtc-unit" id="goog-gtc-unit-179"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">v</span></span>ar foo = function() {}; -alert( 'foo es una Función: ' + (foo instanceof Function) ); -alert( 'foo.prototype es un Objeto: ' + (foo.prototype instanceof Object) ); -</pre> - -<p><span style="font-family: open sans light,sans-serif; font-size: 1.285714285714286rem; letter-spacing: -0.25px; line-height: 18px;">Polimorfismo</span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-183"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Al igual que todos los métodos y propiedades están definidas dentro de la propiedad prototipo, las diferentes clases pueden definir métodos con el mismo nombre. Los métodos están en el ámbito de la clase en que están definidos.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-184"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Esto sólo es verdadero cuando las dos clases no tienen una relación primario-secundario (cuando uno no hereda del otro en una cadena de herencia).</span></span></p> - -<h2 id="Notes" name="Notes"><span class="goog-gtc-unit" id="goog-gtc-unit-185"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Notas</span></span></h2> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-186"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Las técnicas presentadas en este artículo para aplicar la programación orientada a objetos no son las únicas que se pueden utilizar en JavaScript, que es muy flexible en términos de cómo se puede realizar la programación orientada a objetos.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-187"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Del mismo modo, las técnicas presentadas aquí no utilizan ninguna modificación o hack de lenguaje ni imitan las implementaciones de teorías de objetos de otros lenguajes.</span></span></p> - -<p><span class="goog-gtc-unit" id="goog-gtc-unit-188"><span class="goog-gtc-from-human goog-gtc-translatable" dir="ltr">Hay otras técnicas que hacen incluso programación orientado a objetos más avanzada en JavaScript, pero que están fuera del alcance de este artículo introductorio.</span></span></p> - -<h2 id="References" name="References"><span class="goog-gtc-unit" id="goog-gtc-unit-189"><span class="goog-gtc-from-mt goog-gtc-translatable" dir="ltr">Referencias</span></span></h2> - -<ol> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-190-goog-gtc-unit-191-goog-gtc-unit-192"><span class="goog-gtc-from-human goog-gtc-translatable">Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide.</span></span></li> - <li><span class="goog-gtc-unit" id="goog-gtc-unit-193-goog-gtc-unit-194-goog-gtc-unit-195"><span class="goog-gtc-from-human goog-gtc-translatable">Wikipedia. "Programación orientada a objetos", <a class="external" href="http://es.wikipedia.org/wiki/Programaci%C3%B3n_orientada_a_objetos" rel="freelink">http://es.wikipedia.org/wiki/Program...tada_a_objetos</a>.</span></span></li> - <li><a href="http://davidwalsh.name/javascript-objects">Descripción general de POO en JavaScript</a> por Kyle Simpson.</li> -</ol> diff --git a/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html b/files/es/web/javascript/javascript_technologies_overview/index.html index b61a56c1e5..b61a56c1e5 100644 --- a/files/es/web/javascript/descripción_de_las_tecnologías_javascript/index.html +++ b/files/es/web/javascript/javascript_technologies_overview/index.html diff --git a/files/es/web/javascript/gestion_de_memoria/index.html b/files/es/web/javascript/memory_management/index.html index 3e2a47287f..3e2a47287f 100644 --- a/files/es/web/javascript/gestion_de_memoria/index.html +++ b/files/es/web/javascript/memory_management/index.html diff --git a/files/es/web/javascript/referencia/acerca_de/index.html b/files/es/web/javascript/reference/about/index.html index 3382ea7dca..3382ea7dca 100644 --- a/files/es/web/javascript/referencia/acerca_de/index.html +++ b/files/es/web/javascript/reference/about/index.html diff --git a/files/es/web/javascript/referencia/classes/constructor/index.html b/files/es/web/javascript/reference/classes/constructor/index.html index 9ad7ec8de9..9ad7ec8de9 100644 --- a/files/es/web/javascript/referencia/classes/constructor/index.html +++ b/files/es/web/javascript/reference/classes/constructor/index.html diff --git a/files/es/web/javascript/referencia/classes/extends/index.html b/files/es/web/javascript/reference/classes/extends/index.html index 6781c3801e..6781c3801e 100644 --- a/files/es/web/javascript/referencia/classes/extends/index.html +++ b/files/es/web/javascript/reference/classes/extends/index.html diff --git a/files/es/web/javascript/referencia/classes/index.html b/files/es/web/javascript/reference/classes/index.html index 0f108dda68..0f108dda68 100644 --- a/files/es/web/javascript/referencia/classes/index.html +++ b/files/es/web/javascript/reference/classes/index.html diff --git a/files/es/web/javascript/referencia/classes/private_class_fields/index.html b/files/es/web/javascript/reference/classes/private_class_fields/index.html index 5826cc125b..5826cc125b 100644 --- a/files/es/web/javascript/referencia/classes/private_class_fields/index.html +++ b/files/es/web/javascript/reference/classes/private_class_fields/index.html diff --git a/files/es/web/javascript/referencia/classes/class_fields/index.html b/files/es/web/javascript/reference/classes/public_class_fields/index.html index 446c63c001..446c63c001 100644 --- a/files/es/web/javascript/referencia/classes/class_fields/index.html +++ b/files/es/web/javascript/reference/classes/public_class_fields/index.html diff --git a/files/es/web/javascript/referencia/classes/static/index.html b/files/es/web/javascript/reference/classes/static/index.html index 92f972f171..92f972f171 100644 --- a/files/es/web/javascript/referencia/classes/static/index.html +++ b/files/es/web/javascript/reference/classes/static/index.html diff --git a/files/es/web/javascript/referencia/características_desaprobadas/index.html b/files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html index f0f18cfbd7..f0f18cfbd7 100644 --- a/files/es/web/javascript/referencia/características_desaprobadas/index.html +++ b/files/es/web/javascript/reference/deprecated_and_obsolete_features/index.html diff --git a/files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html b/files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html index 5ef865f0bb..5ef865f0bb 100644 --- a/files/es/web/javascript/referencia/características_desaprobadas/the_legacy_iterator_protocol/index.html +++ b/files/es/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html diff --git a/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html b/files/es/web/javascript/reference/errors/bad_regexp_flag/index.html index 3bb05d9b89..3bb05d9b89 100644 --- a/files/es/web/javascript/reference/errors/indicador_regexp_no-val/index.html +++ b/files/es/web/javascript/reference/errors/bad_regexp_flag/index.html diff --git a/files/es/web/javascript/reference/errors/caracter_ilegal/index.html b/files/es/web/javascript/reference/errors/illegal_character/index.html index cc9422a21d..cc9422a21d 100644 --- a/files/es/web/javascript/reference/errors/caracter_ilegal/index.html +++ b/files/es/web/javascript/reference/errors/illegal_character/index.html diff --git a/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html b/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html index c03cb15dd2..c03cb15dd2 100644 --- a/files/es/web/javascript/reference/errors/falta_puntoycoma_antes_de_declaracion/index.html +++ b/files/es/web/javascript/reference/errors/missing_semicolon_before_statement/index.html diff --git a/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html b/files/es/web/javascript/reference/errors/strict_non_simple_params/index.html index 2ca6ef8de4..2ca6ef8de4 100644 --- a/files/es/web/javascript/reference/errors/strict_y_parámetros_complejos/index.html +++ b/files/es/web/javascript/reference/errors/strict_non_simple_params/index.html diff --git a/files/es/web/javascript/referencia/funciones/arguments/callee/index.html b/files/es/web/javascript/reference/functions/arguments/callee/index.html index 1902131055..1902131055 100644 --- a/files/es/web/javascript/referencia/funciones/arguments/callee/index.html +++ b/files/es/web/javascript/reference/functions/arguments/callee/index.html diff --git a/files/es/web/javascript/referencia/funciones/arguments/index.html b/files/es/web/javascript/reference/functions/arguments/index.html index ab768cff21..ab768cff21 100644 --- a/files/es/web/javascript/referencia/funciones/arguments/index.html +++ b/files/es/web/javascript/reference/functions/arguments/index.html diff --git a/files/es/web/javascript/referencia/funciones/arguments/length/index.html b/files/es/web/javascript/reference/functions/arguments/length/index.html index b1d7698194..b1d7698194 100644 --- a/files/es/web/javascript/referencia/funciones/arguments/length/index.html +++ b/files/es/web/javascript/reference/functions/arguments/length/index.html diff --git a/files/es/web/javascript/referencia/funciones/arrow_functions/index.html b/files/es/web/javascript/reference/functions/arrow_functions/index.html index 6ea9a35595..6ea9a35595 100644 --- a/files/es/web/javascript/referencia/funciones/arrow_functions/index.html +++ b/files/es/web/javascript/reference/functions/arrow_functions/index.html diff --git a/files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html b/files/es/web/javascript/reference/functions/default_parameters/index.html index e319a3606b..e319a3606b 100644 --- a/files/es/web/javascript/referencia/funciones/parametros_por_defecto/index.html +++ b/files/es/web/javascript/reference/functions/default_parameters/index.html diff --git a/files/es/web/javascript/referencia/funciones/get/index.html b/files/es/web/javascript/reference/functions/get/index.html index 7125ab0caa..7125ab0caa 100644 --- a/files/es/web/javascript/referencia/funciones/get/index.html +++ b/files/es/web/javascript/reference/functions/get/index.html diff --git a/files/es/web/javascript/referencia/funciones/index.html b/files/es/web/javascript/reference/functions/index.html index ac1bea24ea..ac1bea24ea 100644 --- a/files/es/web/javascript/referencia/funciones/index.html +++ b/files/es/web/javascript/reference/functions/index.html diff --git a/files/es/web/javascript/referencia/funciones/method_definitions/index.html b/files/es/web/javascript/reference/functions/method_definitions/index.html index 2aa23ca9b3..2aa23ca9b3 100644 --- a/files/es/web/javascript/referencia/funciones/method_definitions/index.html +++ b/files/es/web/javascript/reference/functions/method_definitions/index.html diff --git a/files/es/web/javascript/referencia/funciones/parametros_rest/index.html b/files/es/web/javascript/reference/functions/rest_parameters/index.html index 2e26e2c6e0..2e26e2c6e0 100644 --- a/files/es/web/javascript/referencia/funciones/parametros_rest/index.html +++ b/files/es/web/javascript/reference/functions/rest_parameters/index.html diff --git a/files/es/web/javascript/referencia/funciones/set/index.html b/files/es/web/javascript/reference/functions/set/index.html index ef555e6759..ef555e6759 100644 --- a/files/es/web/javascript/referencia/funciones/set/index.html +++ b/files/es/web/javascript/reference/functions/set/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html b/files/es/web/javascript/reference/global_objects/aggregateerror/index.html index 524d0f9f5a..524d0f9f5a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/aggregateerror/index.html +++ b/files/es/web/javascript/reference/global_objects/aggregateerror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html b/files/es/web/javascript/reference/global_objects/array/@@iterator/index.html index 65ac581204..65ac581204 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/@@iterator/index.html +++ b/files/es/web/javascript/reference/global_objects/array/@@iterator/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html b/files/es/web/javascript/reference/global_objects/array/@@species/index.html index 2f15ad345a..2f15ad345a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/@@species/index.html +++ b/files/es/web/javascript/reference/global_objects/array/@@species/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html b/files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html index 43dc771ae7..43dc771ae7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/@@unscopables/index.html +++ b/files/es/web/javascript/reference/global_objects/array/@@unscopables/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/concat/index.html b/files/es/web/javascript/reference/global_objects/array/concat/index.html index dc7dfc999d..dc7dfc999d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/concat/index.html +++ b/files/es/web/javascript/reference/global_objects/array/concat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html b/files/es/web/javascript/reference/global_objects/array/copywithin/index.html index e28b99c382..e28b99c382 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/copywithin/index.html +++ b/files/es/web/javascript/reference/global_objects/array/copywithin/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/entries/index.html b/files/es/web/javascript/reference/global_objects/array/entries/index.html index 89fef6475f..89fef6475f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/entries/index.html +++ b/files/es/web/javascript/reference/global_objects/array/entries/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/every/index.html b/files/es/web/javascript/reference/global_objects/array/every/index.html index 540ebbdfa9..540ebbdfa9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/every/index.html +++ b/files/es/web/javascript/reference/global_objects/array/every/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/fill/index.html b/files/es/web/javascript/reference/global_objects/array/fill/index.html index 7113df34bd..7113df34bd 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/fill/index.html +++ b/files/es/web/javascript/reference/global_objects/array/fill/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html b/files/es/web/javascript/reference/global_objects/array/filter/index.html index 98e6843c4f..98e6843c4f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/filter/index.html +++ b/files/es/web/javascript/reference/global_objects/array/filter/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/find/index.html b/files/es/web/javascript/reference/global_objects/array/find/index.html index 7de7850cca..7de7850cca 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/find/index.html +++ b/files/es/web/javascript/reference/global_objects/array/find/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html b/files/es/web/javascript/reference/global_objects/array/findindex/index.html index c249a3b2df..c249a3b2df 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/findindex/index.html +++ b/files/es/web/javascript/reference/global_objects/array/findindex/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/flat/index.html b/files/es/web/javascript/reference/global_objects/array/flat/index.html index 67d1b3a4c7..67d1b3a4c7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/flat/index.html +++ b/files/es/web/javascript/reference/global_objects/array/flat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html b/files/es/web/javascript/reference/global_objects/array/flatmap/index.html index 0a93f97675..0a93f97675 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/flatmap/index.html +++ b/files/es/web/javascript/reference/global_objects/array/flatmap/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html b/files/es/web/javascript/reference/global_objects/array/foreach/index.html index bc6b693176..bc6b693176 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/foreach/index.html +++ b/files/es/web/javascript/reference/global_objects/array/foreach/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/from/index.html b/files/es/web/javascript/reference/global_objects/array/from/index.html index a11d0ebd53..a11d0ebd53 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/from/index.html +++ b/files/es/web/javascript/reference/global_objects/array/from/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/includes/index.html b/files/es/web/javascript/reference/global_objects/array/includes/index.html index 3831c7d73d..3831c7d73d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/includes/index.html +++ b/files/es/web/javascript/reference/global_objects/array/includes/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/index.html b/files/es/web/javascript/reference/global_objects/array/index.html index 45531c7a3e..45531c7a3e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/index.html +++ b/files/es/web/javascript/reference/global_objects/array/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html b/files/es/web/javascript/reference/global_objects/array/indexof/index.html index 7aad7773b1..7aad7773b1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/indexof/index.html +++ b/files/es/web/javascript/reference/global_objects/array/indexof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html b/files/es/web/javascript/reference/global_objects/array/isarray/index.html index b2a115a814..b2a115a814 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/isarray/index.html +++ b/files/es/web/javascript/reference/global_objects/array/isarray/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/join/index.html b/files/es/web/javascript/reference/global_objects/array/join/index.html index ea9ba3e544..ea9ba3e544 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/join/index.html +++ b/files/es/web/javascript/reference/global_objects/array/join/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/keys/index.html b/files/es/web/javascript/reference/global_objects/array/keys/index.html index ff7cb593f5..ff7cb593f5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/keys/index.html +++ b/files/es/web/javascript/reference/global_objects/array/keys/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html b/files/es/web/javascript/reference/global_objects/array/lastindexof/index.html index 19667a54af..19667a54af 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/lastindexof/index.html +++ b/files/es/web/javascript/reference/global_objects/array/lastindexof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/length/index.html b/files/es/web/javascript/reference/global_objects/array/length/index.html index cbbb1a46db..cbbb1a46db 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/length/index.html +++ b/files/es/web/javascript/reference/global_objects/array/length/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/map/index.html b/files/es/web/javascript/reference/global_objects/array/map/index.html index 8b958a4945..8b958a4945 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/map/index.html +++ b/files/es/web/javascript/reference/global_objects/array/map/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/of/index.html b/files/es/web/javascript/reference/global_objects/array/of/index.html index f57c7e2bc1..f57c7e2bc1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/of/index.html +++ b/files/es/web/javascript/reference/global_objects/array/of/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/pop/index.html b/files/es/web/javascript/reference/global_objects/array/pop/index.html index acc6d06885..acc6d06885 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/pop/index.html +++ b/files/es/web/javascript/reference/global_objects/array/pop/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/push/index.html b/files/es/web/javascript/reference/global_objects/array/push/index.html index fc00ce7e7a..fc00ce7e7a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/push/index.html +++ b/files/es/web/javascript/reference/global_objects/array/push/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html b/files/es/web/javascript/reference/global_objects/array/reduce/index.html index 68d7a9cb2f..68d7a9cb2f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/reduce/index.html +++ b/files/es/web/javascript/reference/global_objects/array/reduce/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html b/files/es/web/javascript/reference/global_objects/array/reduceright/index.html index cff59fddf4..cff59fddf4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/reduceright/index.html +++ b/files/es/web/javascript/reference/global_objects/array/reduceright/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html b/files/es/web/javascript/reference/global_objects/array/reverse/index.html index 7399f8dcda..7399f8dcda 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/reverse/index.html +++ b/files/es/web/javascript/reference/global_objects/array/reverse/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/shift/index.html b/files/es/web/javascript/reference/global_objects/array/shift/index.html index 7391f6c325..7391f6c325 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/shift/index.html +++ b/files/es/web/javascript/reference/global_objects/array/shift/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html b/files/es/web/javascript/reference/global_objects/array/slice/index.html index e3ddd7e8a5..e3ddd7e8a5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html +++ b/files/es/web/javascript/reference/global_objects/array/slice/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/some/index.html b/files/es/web/javascript/reference/global_objects/array/some/index.html index d04b57b025..d04b57b025 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/some/index.html +++ b/files/es/web/javascript/reference/global_objects/array/some/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/sort/index.html b/files/es/web/javascript/reference/global_objects/array/sort/index.html index ac28826327..ac28826327 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/sort/index.html +++ b/files/es/web/javascript/reference/global_objects/array/sort/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/splice/index.html b/files/es/web/javascript/reference/global_objects/array/splice/index.html index 5d7992a2c4..5d7992a2c4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/splice/index.html +++ b/files/es/web/javascript/reference/global_objects/array/splice/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html index 0fc418ab47..0fc418ab47 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/tolocalestring/index.html +++ b/files/es/web/javascript/reference/global_objects/array/tolocalestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html b/files/es/web/javascript/reference/global_objects/array/tosource/index.html index ffd8df0b3b..ffd8df0b3b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/tosource/index.html +++ b/files/es/web/javascript/reference/global_objects/array/tosource/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html b/files/es/web/javascript/reference/global_objects/array/tostring/index.html index 402f011e0f..402f011e0f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/array/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html b/files/es/web/javascript/reference/global_objects/array/unshift/index.html index 4641a05d98..4641a05d98 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/unshift/index.html +++ b/files/es/web/javascript/reference/global_objects/array/unshift/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/values/index.html b/files/es/web/javascript/reference/global_objects/array/values/index.html index dbc76e8634..dbc76e8634 100644 --- a/files/es/web/javascript/referencia/objetos_globales/array/values/index.html +++ b/files/es/web/javascript/reference/global_objects/array/values/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html b/files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html index ab87242260..ab87242260 100644 --- a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/@@species/index.html +++ b/files/es/web/javascript/reference/global_objects/arraybuffer/@@species/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html b/files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html index e553024b1e..e553024b1e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/bytelength/index.html +++ b/files/es/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html b/files/es/web/javascript/reference/global_objects/arraybuffer/index.html index 4a83b5a24d..4a83b5a24d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/index.html +++ b/files/es/web/javascript/reference/global_objects/arraybuffer/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html b/files/es/web/javascript/reference/global_objects/asyncfunction/index.html index bdb37b012c..bdb37b012c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/funcionesasíncronas/index.html +++ b/files/es/web/javascript/reference/global_objects/asyncfunction/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html b/files/es/web/javascript/reference/global_objects/boolean/boolean/index.html index 924ab7ccef..924ab7ccef 100644 --- a/files/es/web/javascript/referencia/objetos_globales/boolean/boolean/index.html +++ b/files/es/web/javascript/reference/global_objects/boolean/boolean/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/index.html b/files/es/web/javascript/reference/global_objects/boolean/index.html index 17a0f7d9e9..17a0f7d9e9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/boolean/index.html +++ b/files/es/web/javascript/reference/global_objects/boolean/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html b/files/es/web/javascript/reference/global_objects/boolean/tosource/index.html index e42f79f26b..e42f79f26b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/boolean/tosource/index.html +++ b/files/es/web/javascript/reference/global_objects/boolean/tosource/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html b/files/es/web/javascript/reference/global_objects/date/getdate/index.html index 451f889003..451f889003 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getdate/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getdate/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getday/index.html b/files/es/web/javascript/reference/global_objects/date/getday/index.html index f384f21b71..f384f21b71 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getday/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getday/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html b/files/es/web/javascript/reference/global_objects/date/getfullyear/index.html index 0d047fbbc3..0d047fbbc3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getfullyear/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getfullyear/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html b/files/es/web/javascript/reference/global_objects/date/gethours/index.html index b669c976c7..b669c976c7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/gethours/index.html +++ b/files/es/web/javascript/reference/global_objects/date/gethours/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html b/files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html index cf673a530a..cf673a530a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getmilliseconds/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getmilliseconds/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html b/files/es/web/javascript/reference/global_objects/date/getminutes/index.html index 9b144239b9..9b144239b9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getminutes/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getminutes/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html b/files/es/web/javascript/reference/global_objects/date/getmonth/index.html index 08a7e1d143..08a7e1d143 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getmonth/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getmonth/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html b/files/es/web/javascript/reference/global_objects/date/getseconds/index.html index 875fe3f48b..875fe3f48b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getseconds/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getseconds/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html b/files/es/web/javascript/reference/global_objects/date/gettime/index.html index f08882be5e..f08882be5e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/gettime/index.html +++ b/files/es/web/javascript/reference/global_objects/date/gettime/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html b/files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html index f2133bfc02..f2133bfc02 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getutcfullyear/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getutcfullyear/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html b/files/es/web/javascript/reference/global_objects/date/getutchours/index.html index 1e7a7a1ce2..1e7a7a1ce2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/getutchours/index.html +++ b/files/es/web/javascript/reference/global_objects/date/getutchours/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/index.html b/files/es/web/javascript/reference/global_objects/date/index.html index 20e05539e5..20e05539e5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/index.html +++ b/files/es/web/javascript/reference/global_objects/date/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/now/index.html b/files/es/web/javascript/reference/global_objects/date/now/index.html index 6c611710bb..6c611710bb 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/now/index.html +++ b/files/es/web/javascript/reference/global_objects/date/now/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/parse/index.html b/files/es/web/javascript/reference/global_objects/date/parse/index.html index 15536775d7..15536775d7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/parse/index.html +++ b/files/es/web/javascript/reference/global_objects/date/parse/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html b/files/es/web/javascript/reference/global_objects/date/setfullyear/index.html index e272f78fc3..e272f78fc3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/setfullyear/index.html +++ b/files/es/web/javascript/reference/global_objects/date/setfullyear/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html b/files/es/web/javascript/reference/global_objects/date/setmonth/index.html index 04aa9ec82a..04aa9ec82a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/setmonth/index.html +++ b/files/es/web/javascript/reference/global_objects/date/setmonth/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html b/files/es/web/javascript/reference/global_objects/date/todatestring/index.html index b0a3b5f431..b0a3b5f431 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/todatestring/index.html +++ b/files/es/web/javascript/reference/global_objects/date/todatestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html b/files/es/web/javascript/reference/global_objects/date/toisostring/index.html index b3461f355d..b3461f355d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/toisostring/index.html +++ b/files/es/web/javascript/reference/global_objects/date/toisostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html b/files/es/web/javascript/reference/global_objects/date/tojson/index.html index 7d44a716c2..7d44a716c2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/tojson/index.html +++ b/files/es/web/javascript/reference/global_objects/date/tojson/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html b/files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html index 26b773ba9a..26b773ba9a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/tolocaledatestring/index.html +++ b/files/es/web/javascript/reference/global_objects/date/tolocaledatestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html index 77f48344d3..77f48344d3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/tolocalestring/index.html +++ b/files/es/web/javascript/reference/global_objects/date/tolocalestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html b/files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html index c3954096f6..c3954096f6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/tolocaletimestring/index.html +++ b/files/es/web/javascript/reference/global_objects/date/tolocaletimestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html b/files/es/web/javascript/reference/global_objects/date/toutcstring/index.html index 4742a6eacf..4742a6eacf 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/toutcstring/index.html +++ b/files/es/web/javascript/reference/global_objects/date/toutcstring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/date/utc/index.html b/files/es/web/javascript/reference/global_objects/date/utc/index.html index 605ae2819d..605ae2819d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/date/utc/index.html +++ b/files/es/web/javascript/reference/global_objects/date/utc/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html b/files/es/web/javascript/reference/global_objects/decodeuri/index.html index dc8264eebe..dc8264eebe 100644 --- a/files/es/web/javascript/referencia/objetos_globales/decodeuri/index.html +++ b/files/es/web/javascript/reference/global_objects/decodeuri/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html b/files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html index 05d9bd4b52..05d9bd4b52 100644 --- a/files/es/web/javascript/referencia/objetos_globales/decodeuricomponent/index.html +++ b/files/es/web/javascript/reference/global_objects/decodeuricomponent/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html b/files/es/web/javascript/reference/global_objects/encodeuri/index.html index 51277231e0..51277231e0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/encodeuri/index.html +++ b/files/es/web/javascript/reference/global_objects/encodeuri/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html b/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html index 53af149970..53af149970 100644 --- a/files/es/web/javascript/referencia/objetos_globales/encodeuricomponent/index.html +++ b/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html b/files/es/web/javascript/reference/global_objects/error/error/index.html index 114831c512..114831c512 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/constructor_error/index.html +++ b/files/es/web/javascript/reference/global_objects/error/error/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/filename/index.html b/files/es/web/javascript/reference/global_objects/error/filename/index.html index 8e633934e0..8e633934e0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/filename/index.html +++ b/files/es/web/javascript/reference/global_objects/error/filename/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/index.html b/files/es/web/javascript/reference/global_objects/error/index.html index 03cbd038da..03cbd038da 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/index.html +++ b/files/es/web/javascript/reference/global_objects/error/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html b/files/es/web/javascript/reference/global_objects/error/linenumber/index.html index 0efec0696f..0efec0696f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/linenumber/index.html +++ b/files/es/web/javascript/reference/global_objects/error/linenumber/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/message/index.html b/files/es/web/javascript/reference/global_objects/error/message/index.html index 3f14983d6e..3f14983d6e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/message/index.html +++ b/files/es/web/javascript/reference/global_objects/error/message/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/name/index.html b/files/es/web/javascript/reference/global_objects/error/name/index.html index 841cc7cbc4..841cc7cbc4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/name/index.html +++ b/files/es/web/javascript/reference/global_objects/error/name/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html b/files/es/web/javascript/reference/global_objects/error/tosource/index.html index fb1b429884..fb1b429884 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/tosource/index.html +++ b/files/es/web/javascript/reference/global_objects/error/tosource/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html b/files/es/web/javascript/reference/global_objects/error/tostring/index.html index f4ea4a44b9..f4ea4a44b9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/error/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/error/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/escape/index.html b/files/es/web/javascript/reference/global_objects/escape/index.html index 4925618b0e..4925618b0e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/escape/index.html +++ b/files/es/web/javascript/reference/global_objects/escape/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/eval/index.html b/files/es/web/javascript/reference/global_objects/eval/index.html index 52375445c4..52375445c4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/eval/index.html +++ b/files/es/web/javascript/reference/global_objects/eval/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/evalerror/index.html b/files/es/web/javascript/reference/global_objects/evalerror/index.html index 13fbe371e4..13fbe371e4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/evalerror/index.html +++ b/files/es/web/javascript/reference/global_objects/evalerror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/apply/index.html b/files/es/web/javascript/reference/global_objects/function/apply/index.html index 07f47b42f2..07f47b42f2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/apply/index.html +++ b/files/es/web/javascript/reference/global_objects/function/apply/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html b/files/es/web/javascript/reference/global_objects/function/arguments/index.html index f0f8f6ca90..f0f8f6ca90 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/arguments/index.html +++ b/files/es/web/javascript/reference/global_objects/function/arguments/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html b/files/es/web/javascript/reference/global_objects/function/bind/index.html index bdc7b5b73c..bdc7b5b73c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/bind/index.html +++ b/files/es/web/javascript/reference/global_objects/function/bind/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/call/index.html b/files/es/web/javascript/reference/global_objects/function/call/index.html index 4200c5d2a5..4200c5d2a5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/call/index.html +++ b/files/es/web/javascript/reference/global_objects/function/call/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/caller/index.html b/files/es/web/javascript/reference/global_objects/function/caller/index.html index 942df69a68..942df69a68 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/caller/index.html +++ b/files/es/web/javascript/reference/global_objects/function/caller/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html b/files/es/web/javascript/reference/global_objects/function/displayname/index.html index d464266838..d464266838 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/displayname/index.html +++ b/files/es/web/javascript/reference/global_objects/function/displayname/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/función/index.html b/files/es/web/javascript/reference/global_objects/function/function/index.html index af4dff0361..af4dff0361 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/función/index.html +++ b/files/es/web/javascript/reference/global_objects/function/function/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/index.html b/files/es/web/javascript/reference/global_objects/function/index.html index 5b586f3611..5b586f3611 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/index.html +++ b/files/es/web/javascript/reference/global_objects/function/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/length/index.html b/files/es/web/javascript/reference/global_objects/function/length/index.html index 7638859bba..7638859bba 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/length/index.html +++ b/files/es/web/javascript/reference/global_objects/function/length/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/name/index.html b/files/es/web/javascript/reference/global_objects/function/name/index.html index 2440bd60f1..2440bd60f1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/name/index.html +++ b/files/es/web/javascript/reference/global_objects/function/name/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html b/files/es/web/javascript/reference/global_objects/function/tosource/index.html index 3cee3c1d4c..3cee3c1d4c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/tosource/index.html +++ b/files/es/web/javascript/reference/global_objects/function/tosource/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html b/files/es/web/javascript/reference/global_objects/function/tostring/index.html index b5ee70147e..b5ee70147e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/function/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/function/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/index.html b/files/es/web/javascript/reference/global_objects/generator/index.html index ec92ca413f..ec92ca413f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/generador/index.html +++ b/files/es/web/javascript/reference/global_objects/generator/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/next/index.html b/files/es/web/javascript/reference/global_objects/generator/next/index.html index 6b6bf61cbe..6b6bf61cbe 100644 --- a/files/es/web/javascript/referencia/objetos_globales/generador/next/index.html +++ b/files/es/web/javascript/reference/global_objects/generator/next/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/return/index.html b/files/es/web/javascript/reference/global_objects/generator/return/index.html index 649d5b8dec..649d5b8dec 100644 --- a/files/es/web/javascript/referencia/objetos_globales/generador/return/index.html +++ b/files/es/web/javascript/reference/global_objects/generator/return/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html b/files/es/web/javascript/reference/global_objects/generator/throw/index.html index 9f4cd76fbe..9f4cd76fbe 100644 --- a/files/es/web/javascript/referencia/objetos_globales/generador/throw/index.html +++ b/files/es/web/javascript/reference/global_objects/generator/throw/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/index.html b/files/es/web/javascript/reference/global_objects/index.html index 9946b3f648..9946b3f648 100644 --- a/files/es/web/javascript/referencia/objetos_globales/index.html +++ b/files/es/web/javascript/reference/global_objects/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/infinity/index.html b/files/es/web/javascript/reference/global_objects/infinity/index.html index 2a0a716eeb..2a0a716eeb 100644 --- a/files/es/web/javascript/referencia/objetos_globales/infinity/index.html +++ b/files/es/web/javascript/reference/global_objects/infinity/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/internalerror/index.html b/files/es/web/javascript/reference/global_objects/internalerror/index.html index e7754d1575..e7754d1575 100644 --- a/files/es/web/javascript/referencia/objetos_globales/internalerror/index.html +++ b/files/es/web/javascript/reference/global_objects/internalerror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html b/files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html index ba895aaff9..ba895aaff9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/internalerror/constructor_internalerror/index.html +++ b/files/es/web/javascript/reference/global_objects/internalerror/internalerror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/index.html b/files/es/web/javascript/reference/global_objects/intl/index.html index c1a2a47243..c1a2a47243 100644 --- a/files/es/web/javascript/referencia/objetos_globales/intl/index.html +++ b/files/es/web/javascript/reference/global_objects/intl/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html b/files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html index 713302ea3c..713302ea3c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/format/index.html +++ b/files/es/web/javascript/reference/global_objects/intl/numberformat/format/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html b/files/es/web/javascript/reference/global_objects/intl/numberformat/index.html index 7ee880d0e8..7ee880d0e8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/intl/numberformat/index.html +++ b/files/es/web/javascript/reference/global_objects/intl/numberformat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html b/files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html index fc15049fa6..fc15049fa6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/intl/relativetimeformat/index.html +++ b/files/es/web/javascript/reference/global_objects/intl/relativetimeformat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/isfinite/index.html b/files/es/web/javascript/reference/global_objects/isfinite/index.html index 1227071c44..1227071c44 100644 --- a/files/es/web/javascript/referencia/objetos_globales/isfinite/index.html +++ b/files/es/web/javascript/reference/global_objects/isfinite/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/isnan/index.html b/files/es/web/javascript/reference/global_objects/isnan/index.html index d2607d0134..d2607d0134 100644 --- a/files/es/web/javascript/referencia/objetos_globales/isnan/index.html +++ b/files/es/web/javascript/reference/global_objects/isnan/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/json/index.html b/files/es/web/javascript/reference/global_objects/json/index.html index 2744fb71e5..2744fb71e5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/json/index.html +++ b/files/es/web/javascript/reference/global_objects/json/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/json/parse/index.html b/files/es/web/javascript/reference/global_objects/json/parse/index.html index d8816fe8ff..d8816fe8ff 100644 --- a/files/es/web/javascript/referencia/objetos_globales/json/parse/index.html +++ b/files/es/web/javascript/reference/global_objects/json/parse/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html b/files/es/web/javascript/reference/global_objects/json/stringify/index.html index 13f508d7f7..13f508d7f7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/json/stringify/index.html +++ b/files/es/web/javascript/reference/global_objects/json/stringify/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/clear/index.html b/files/es/web/javascript/reference/global_objects/map/clear/index.html index 67e8288ad2..67e8288ad2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/clear/index.html +++ b/files/es/web/javascript/reference/global_objects/map/clear/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/delete/index.html b/files/es/web/javascript/reference/global_objects/map/delete/index.html index cbd6e02a50..cbd6e02a50 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/delete/index.html +++ b/files/es/web/javascript/reference/global_objects/map/delete/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/entries/index.html b/files/es/web/javascript/reference/global_objects/map/entries/index.html index 76a4ca10b7..76a4ca10b7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/entries/index.html +++ b/files/es/web/javascript/reference/global_objects/map/entries/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html b/files/es/web/javascript/reference/global_objects/map/foreach/index.html index 00d8e85ff8..00d8e85ff8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/foreach/index.html +++ b/files/es/web/javascript/reference/global_objects/map/foreach/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/get/index.html b/files/es/web/javascript/reference/global_objects/map/get/index.html index 7f53d850e3..7f53d850e3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/get/index.html +++ b/files/es/web/javascript/reference/global_objects/map/get/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/has/index.html b/files/es/web/javascript/reference/global_objects/map/has/index.html index c556a00dae..c556a00dae 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/has/index.html +++ b/files/es/web/javascript/reference/global_objects/map/has/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/index.html b/files/es/web/javascript/reference/global_objects/map/index.html index e3ad7812b7..e3ad7812b7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/index.html +++ b/files/es/web/javascript/reference/global_objects/map/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/keys/index.html b/files/es/web/javascript/reference/global_objects/map/keys/index.html index 6f67e49dee..6f67e49dee 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/keys/index.html +++ b/files/es/web/javascript/reference/global_objects/map/keys/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/set/index.html b/files/es/web/javascript/reference/global_objects/map/set/index.html index 27faa5a1a6..27faa5a1a6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/set/index.html +++ b/files/es/web/javascript/reference/global_objects/map/set/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/size/index.html b/files/es/web/javascript/reference/global_objects/map/size/index.html index 3ca4d446db..3ca4d446db 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/size/index.html +++ b/files/es/web/javascript/reference/global_objects/map/size/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/map/values/index.html b/files/es/web/javascript/reference/global_objects/map/values/index.html index c81b54dbe7..c81b54dbe7 100644 --- a/files/es/web/javascript/referencia/objetos_globales/map/values/index.html +++ b/files/es/web/javascript/reference/global_objects/map/values/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/abs/index.html b/files/es/web/javascript/reference/global_objects/math/abs/index.html index eb286dcc59..eb286dcc59 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/abs/index.html +++ b/files/es/web/javascript/reference/global_objects/math/abs/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/acos/index.html b/files/es/web/javascript/reference/global_objects/math/acos/index.html index 3280a9b17f..3280a9b17f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/acos/index.html +++ b/files/es/web/javascript/reference/global_objects/math/acos/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html b/files/es/web/javascript/reference/global_objects/math/acosh/index.html index 8819e3c69a..8819e3c69a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/acosh/index.html +++ b/files/es/web/javascript/reference/global_objects/math/acosh/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/asin/index.html b/files/es/web/javascript/reference/global_objects/math/asin/index.html index 1a6c78d6a5..1a6c78d6a5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/asin/index.html +++ b/files/es/web/javascript/reference/global_objects/math/asin/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html b/files/es/web/javascript/reference/global_objects/math/asinh/index.html index 9a3204a6a8..9a3204a6a8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/asinh/index.html +++ b/files/es/web/javascript/reference/global_objects/math/asinh/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/atan/index.html b/files/es/web/javascript/reference/global_objects/math/atan/index.html index abb0453e6c..abb0453e6c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/atan/index.html +++ b/files/es/web/javascript/reference/global_objects/math/atan/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html b/files/es/web/javascript/reference/global_objects/math/atan2/index.html index 7b0dc147da..7b0dc147da 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/atan2/index.html +++ b/files/es/web/javascript/reference/global_objects/math/atan2/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html b/files/es/web/javascript/reference/global_objects/math/atanh/index.html index 85022b4138..85022b4138 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/atanh/index.html +++ b/files/es/web/javascript/reference/global_objects/math/atanh/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html b/files/es/web/javascript/reference/global_objects/math/cbrt/index.html index 350bc03054..350bc03054 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/cbrt/index.html +++ b/files/es/web/javascript/reference/global_objects/math/cbrt/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html b/files/es/web/javascript/reference/global_objects/math/ceil/index.html index 52b43cd3a2..52b43cd3a2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/ceil/index.html +++ b/files/es/web/javascript/reference/global_objects/math/ceil/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/cos/index.html b/files/es/web/javascript/reference/global_objects/math/cos/index.html index 82a0793769..82a0793769 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/cos/index.html +++ b/files/es/web/javascript/reference/global_objects/math/cos/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/e/index.html b/files/es/web/javascript/reference/global_objects/math/e/index.html index 2fdc92d125..2fdc92d125 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/e/index.html +++ b/files/es/web/javascript/reference/global_objects/math/e/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/exp/index.html b/files/es/web/javascript/reference/global_objects/math/exp/index.html index ca60758600..ca60758600 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/exp/index.html +++ b/files/es/web/javascript/reference/global_objects/math/exp/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html b/files/es/web/javascript/reference/global_objects/math/expm1/index.html index d8679d9230..d8679d9230 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/expm1/index.html +++ b/files/es/web/javascript/reference/global_objects/math/expm1/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/floor/index.html b/files/es/web/javascript/reference/global_objects/math/floor/index.html index 867f3e8dac..867f3e8dac 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/floor/index.html +++ b/files/es/web/javascript/reference/global_objects/math/floor/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/fround/index.html b/files/es/web/javascript/reference/global_objects/math/fround/index.html index 73d773e5b0..73d773e5b0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/fround/index.html +++ b/files/es/web/javascript/reference/global_objects/math/fround/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html b/files/es/web/javascript/reference/global_objects/math/hypot/index.html index 21d6850e44..21d6850e44 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/hypot/index.html +++ b/files/es/web/javascript/reference/global_objects/math/hypot/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/index.html b/files/es/web/javascript/reference/global_objects/math/index.html index bdf0d21e74..bdf0d21e74 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/index.html +++ b/files/es/web/javascript/reference/global_objects/math/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html b/files/es/web/javascript/reference/global_objects/math/ln10/index.html index 8b9f40b77b..8b9f40b77b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/ln10/index.html +++ b/files/es/web/javascript/reference/global_objects/math/ln10/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html b/files/es/web/javascript/reference/global_objects/math/ln2/index.html index 4a447f677a..4a447f677a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/ln2/index.html +++ b/files/es/web/javascript/reference/global_objects/math/ln2/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log/index.html b/files/es/web/javascript/reference/global_objects/math/log/index.html index d243cd0501..d243cd0501 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/log/index.html +++ b/files/es/web/javascript/reference/global_objects/math/log/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log10/index.html b/files/es/web/javascript/reference/global_objects/math/log10/index.html index dc97208b63..dc97208b63 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/log10/index.html +++ b/files/es/web/javascript/reference/global_objects/math/log10/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html b/files/es/web/javascript/reference/global_objects/math/log10e/index.html index 755b6ceb1a..755b6ceb1a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/log10e/index.html +++ b/files/es/web/javascript/reference/global_objects/math/log10e/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log2/index.html b/files/es/web/javascript/reference/global_objects/math/log2/index.html index b394270684..b394270684 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/log2/index.html +++ b/files/es/web/javascript/reference/global_objects/math/log2/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html b/files/es/web/javascript/reference/global_objects/math/log2e/index.html index f9593b4bc6..f9593b4bc6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/log2e/index.html +++ b/files/es/web/javascript/reference/global_objects/math/log2e/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/max/index.html b/files/es/web/javascript/reference/global_objects/math/max/index.html index 0e0f82881c..0e0f82881c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/max/index.html +++ b/files/es/web/javascript/reference/global_objects/math/max/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/min/index.html b/files/es/web/javascript/reference/global_objects/math/min/index.html index a2dbf8348a..a2dbf8348a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/min/index.html +++ b/files/es/web/javascript/reference/global_objects/math/min/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/pi/index.html b/files/es/web/javascript/reference/global_objects/math/pi/index.html index d4428498cd..d4428498cd 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/pi/index.html +++ b/files/es/web/javascript/reference/global_objects/math/pi/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/pow/index.html b/files/es/web/javascript/reference/global_objects/math/pow/index.html index 7185cffede..7185cffede 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/pow/index.html +++ b/files/es/web/javascript/reference/global_objects/math/pow/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/random/index.html b/files/es/web/javascript/reference/global_objects/math/random/index.html index ace95bc0cf..ace95bc0cf 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/random/index.html +++ b/files/es/web/javascript/reference/global_objects/math/random/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/round/index.html b/files/es/web/javascript/reference/global_objects/math/round/index.html index 0257148e69..0257148e69 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/round/index.html +++ b/files/es/web/javascript/reference/global_objects/math/round/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sign/index.html b/files/es/web/javascript/reference/global_objects/math/sign/index.html index 3c48027556..3c48027556 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/sign/index.html +++ b/files/es/web/javascript/reference/global_objects/math/sign/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/seno/index.html b/files/es/web/javascript/reference/global_objects/math/sin/index.html index a89a6e635e..a89a6e635e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/seno/index.html +++ b/files/es/web/javascript/reference/global_objects/math/sin/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html b/files/es/web/javascript/reference/global_objects/math/sqrt/index.html index a3977c6f08..a3977c6f08 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/sqrt/index.html +++ b/files/es/web/javascript/reference/global_objects/math/sqrt/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html b/files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html index de9bd99eb9..de9bd99eb9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/sqrt1_2/index.html +++ b/files/es/web/javascript/reference/global_objects/math/sqrt1_2/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html b/files/es/web/javascript/reference/global_objects/math/sqrt2/index.html index 7e23295f25..7e23295f25 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/sqrt2/index.html +++ b/files/es/web/javascript/reference/global_objects/math/sqrt2/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/tan/index.html b/files/es/web/javascript/reference/global_objects/math/tan/index.html index 8a773b0da5..8a773b0da5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/tan/index.html +++ b/files/es/web/javascript/reference/global_objects/math/tan/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html b/files/es/web/javascript/reference/global_objects/math/tanh/index.html index 138c466b37..138c466b37 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/tanh/index.html +++ b/files/es/web/javascript/reference/global_objects/math/tanh/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html b/files/es/web/javascript/reference/global_objects/math/trunc/index.html index 9efe511927..9efe511927 100644 --- a/files/es/web/javascript/referencia/objetos_globales/math/trunc/index.html +++ b/files/es/web/javascript/reference/global_objects/math/trunc/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/nan/index.html b/files/es/web/javascript/reference/global_objects/nan/index.html index f107f1bb3c..f107f1bb3c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/nan/index.html +++ b/files/es/web/javascript/reference/global_objects/nan/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/null/index.html b/files/es/web/javascript/reference/global_objects/null/index.html index 94d1a392c5..94d1a392c5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/null/index.html +++ b/files/es/web/javascript/reference/global_objects/null/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/index.html b/files/es/web/javascript/reference/global_objects/number/index.html index 72c1425b8b..72c1425b8b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/index.html +++ b/files/es/web/javascript/reference/global_objects/number/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html b/files/es/web/javascript/reference/global_objects/number/isfinite/index.html index f26af9f671..f26af9f671 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/isfinite/index.html +++ b/files/es/web/javascript/reference/global_objects/number/isfinite/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html b/files/es/web/javascript/reference/global_objects/number/isinteger/index.html index 6fdafca32e..6fdafca32e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/isinteger/index.html +++ b/files/es/web/javascript/reference/global_objects/number/isinteger/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html b/files/es/web/javascript/reference/global_objects/number/isnan/index.html index cc9c62274c..cc9c62274c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/isnan/index.html +++ b/files/es/web/javascript/reference/global_objects/number/isnan/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html b/files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html index b12c4cf4d6..b12c4cf4d6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/issafeinteger/index.html +++ b/files/es/web/javascript/reference/global_objects/number/issafeinteger/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html b/files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html index e5fa9df144..e5fa9df144 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/max_safe_integer/index.html +++ b/files/es/web/javascript/reference/global_objects/number/max_safe_integer/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html b/files/es/web/javascript/reference/global_objects/number/max_value/index.html index 60c3d04e95..60c3d04e95 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/max_value/index.html +++ b/files/es/web/javascript/reference/global_objects/number/max_value/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html b/files/es/web/javascript/reference/global_objects/number/min_value/index.html index dadda2e337..dadda2e337 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/min_value/index.html +++ b/files/es/web/javascript/reference/global_objects/number/min_value/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/nan/index.html b/files/es/web/javascript/reference/global_objects/number/nan/index.html index 79db15a598..79db15a598 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/nan/index.html +++ b/files/es/web/javascript/reference/global_objects/number/nan/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html b/files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html index 2e2d7d1573..2e2d7d1573 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/negative_infinity/index.html +++ b/files/es/web/javascript/reference/global_objects/number/negative_infinity/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html b/files/es/web/javascript/reference/global_objects/number/parsefloat/index.html index 6285aa9b5a..6285aa9b5a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/parsefloat/index.html +++ b/files/es/web/javascript/reference/global_objects/number/parsefloat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html b/files/es/web/javascript/reference/global_objects/number/parseint/index.html index e899827599..e899827599 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/parseint/index.html +++ b/files/es/web/javascript/reference/global_objects/number/parseint/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html b/files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html index 41d101a569..41d101a569 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/positive_infinity/index.html +++ b/files/es/web/javascript/reference/global_objects/number/positive_infinity/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html b/files/es/web/javascript/reference/global_objects/number/tofixed/index.html index f11ccc3938..f11ccc3938 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/tofixed/index.html +++ b/files/es/web/javascript/reference/global_objects/number/tofixed/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html index d0c28b1431..d0c28b1431 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/tolocalestring/index.html +++ b/files/es/web/javascript/reference/global_objects/number/tolocalestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html b/files/es/web/javascript/reference/global_objects/number/toprecision/index.html index 7a5110d7a9..7a5110d7a9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/toprecision/index.html +++ b/files/es/web/javascript/reference/global_objects/number/toprecision/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html b/files/es/web/javascript/reference/global_objects/number/tostring/index.html index f911fa271e..f911fa271e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/number/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html b/files/es/web/javascript/reference/global_objects/number/valueof/index.html index 588c421746..588c421746 100644 --- a/files/es/web/javascript/referencia/objetos_globales/number/valueof/index.html +++ b/files/es/web/javascript/reference/global_objects/number/valueof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html b/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html index fceb708912..fceb708912 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/__definegetter__/index.html +++ b/files/es/web/javascript/reference/global_objects/object/__definegetter__/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html b/files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html index 8292222a38..8292222a38 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/__lookupgetter__/index.html +++ b/files/es/web/javascript/reference/global_objects/object/__lookupgetter__/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/assign/index.html b/files/es/web/javascript/reference/global_objects/object/assign/index.html index 17de417d75..17de417d75 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/assign/index.html +++ b/files/es/web/javascript/reference/global_objects/object/assign/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html b/files/es/web/javascript/reference/global_objects/object/constructor/index.html index 3871c41fe3..3871c41fe3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/constructor/index.html +++ b/files/es/web/javascript/reference/global_objects/object/constructor/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/create/index.html b/files/es/web/javascript/reference/global_objects/object/create/index.html index 94608d1c58..94608d1c58 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/create/index.html +++ b/files/es/web/javascript/reference/global_objects/object/create/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html b/files/es/web/javascript/reference/global_objects/object/defineproperties/index.html index 3002dd200d..3002dd200d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/defineproperties/index.html +++ b/files/es/web/javascript/reference/global_objects/object/defineproperties/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html b/files/es/web/javascript/reference/global_objects/object/defineproperty/index.html index f971d5a131..f971d5a131 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/defineproperty/index.html +++ b/files/es/web/javascript/reference/global_objects/object/defineproperty/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/entries/index.html b/files/es/web/javascript/reference/global_objects/object/entries/index.html index 98aff1178a..98aff1178a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/entries/index.html +++ b/files/es/web/javascript/reference/global_objects/object/entries/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html b/files/es/web/javascript/reference/global_objects/object/freeze/index.html index 890d0d07b4..890d0d07b4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/freeze/index.html +++ b/files/es/web/javascript/reference/global_objects/object/freeze/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html b/files/es/web/javascript/reference/global_objects/object/fromentries/index.html index 023cc5f8ca..023cc5f8ca 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/fromentries/index.html +++ b/files/es/web/javascript/reference/global_objects/object/fromentries/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html index fb2eaf68da..fb2eaf68da 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptor/index.html +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html index 9585fa80e8..9585fa80e8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertydescriptors/index.html +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html index 5c3819045a..5c3819045a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertynames/index.html +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertynames/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html b/files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html index cf8be23f59..cf8be23f59 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/getownpropertysymbols/index.html +++ b/files/es/web/javascript/reference/global_objects/object/getownpropertysymbols/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html b/files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html index a9b50ec2ec..a9b50ec2ec 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/getprototypeof/index.html +++ b/files/es/web/javascript/reference/global_objects/object/getprototypeof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html b/files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html index d84e5d6a52..d84e5d6a52 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/hasownproperty/index.html +++ b/files/es/web/javascript/reference/global_objects/object/hasownproperty/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/index.html b/files/es/web/javascript/reference/global_objects/object/index.html index 99089bd28e..99089bd28e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/index.html +++ b/files/es/web/javascript/reference/global_objects/object/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/is/index.html b/files/es/web/javascript/reference/global_objects/object/is/index.html index 926357d0ab..926357d0ab 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/is/index.html +++ b/files/es/web/javascript/reference/global_objects/object/is/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html b/files/es/web/javascript/reference/global_objects/object/isextensible/index.html index 30082032ea..30082032ea 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/isextensible/index.html +++ b/files/es/web/javascript/reference/global_objects/object/isextensible/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html b/files/es/web/javascript/reference/global_objects/object/isfrozen/index.html index 9a2bc2ee94..9a2bc2ee94 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/isfrozen/index.html +++ b/files/es/web/javascript/reference/global_objects/object/isfrozen/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html b/files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html index 8275ebafac..8275ebafac 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/isprototypeof/index.html +++ b/files/es/web/javascript/reference/global_objects/object/isprototypeof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html b/files/es/web/javascript/reference/global_objects/object/issealed/index.html index c28437561a..c28437561a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/issealed/index.html +++ b/files/es/web/javascript/reference/global_objects/object/issealed/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/keys/index.html b/files/es/web/javascript/reference/global_objects/object/keys/index.html index d6bd068f2f..d6bd068f2f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/keys/index.html +++ b/files/es/web/javascript/reference/global_objects/object/keys/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html b/files/es/web/javascript/reference/global_objects/object/preventextensions/index.html index 50f51214a8..50f51214a8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/preventextensions/index.html +++ b/files/es/web/javascript/reference/global_objects/object/preventextensions/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html b/files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html index b2ede9dd60..b2ede9dd60 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/propertyisenumerable/index.html +++ b/files/es/web/javascript/reference/global_objects/object/propertyisenumerable/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/proto/index.html b/files/es/web/javascript/reference/global_objects/object/proto/index.html index 24055ac261..24055ac261 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/proto/index.html +++ b/files/es/web/javascript/reference/global_objects/object/proto/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html b/files/es/web/javascript/reference/global_objects/object/seal/index.html index 42c89175a3..42c89175a3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/seal/index.html +++ b/files/es/web/javascript/reference/global_objects/object/seal/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html b/files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html index ff32fc5738..ff32fc5738 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/setprototypeof/index.html +++ b/files/es/web/javascript/reference/global_objects/object/setprototypeof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html b/files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html index d0de708b98..d0de708b98 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/tolocalestring/index.html +++ b/files/es/web/javascript/reference/global_objects/object/tolocalestring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html b/files/es/web/javascript/reference/global_objects/object/tosource/index.html index 713a176b0b..713a176b0b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/tosource/index.html +++ b/files/es/web/javascript/reference/global_objects/object/tosource/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html b/files/es/web/javascript/reference/global_objects/object/tostring/index.html index a9ffc11535..a9ffc11535 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/object/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html b/files/es/web/javascript/reference/global_objects/object/valueof/index.html index 5cf466078d..5cf466078d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/valueof/index.html +++ b/files/es/web/javascript/reference/global_objects/object/valueof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/object/values/index.html b/files/es/web/javascript/reference/global_objects/object/values/index.html index 81b56ef1e0..81b56ef1e0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/object/values/index.html +++ b/files/es/web/javascript/reference/global_objects/object/values/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html b/files/es/web/javascript/reference/global_objects/parsefloat/index.html index 16510d882d..16510d882d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/parsefloat/index.html +++ b/files/es/web/javascript/reference/global_objects/parsefloat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/parseint/index.html b/files/es/web/javascript/reference/global_objects/parseint/index.html index 30e3874a34..30e3874a34 100644 --- a/files/es/web/javascript/referencia/objetos_globales/parseint/index.html +++ b/files/es/web/javascript/reference/global_objects/parseint/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/all/index.html b/files/es/web/javascript/reference/global_objects/promise/all/index.html index 79a16aadc6..79a16aadc6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/all/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/all/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html b/files/es/web/javascript/reference/global_objects/promise/catch/index.html index a99a071979..a99a071979 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/catch/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/catch/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html b/files/es/web/javascript/reference/global_objects/promise/finally/index.html index 8d21aa785a..8d21aa785a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/finally/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/finally/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/index.html b/files/es/web/javascript/reference/global_objects/promise/index.html index 58a2319c2f..58a2319c2f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html b/files/es/web/javascript/reference/global_objects/promise/race/index.html index f24be82a9c..f24be82a9c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/race/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/race/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html b/files/es/web/javascript/reference/global_objects/promise/reject/index.html index 70505d7471..70505d7471 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/reject/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/reject/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html b/files/es/web/javascript/reference/global_objects/promise/resolve/index.html index e91dc7b80d..e91dc7b80d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/resolve/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/resolve/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/then/index.html b/files/es/web/javascript/reference/global_objects/promise/then/index.html index 8998f3b180..8998f3b180 100644 --- a/files/es/web/javascript/referencia/objetos_globales/promise/then/index.html +++ b/files/es/web/javascript/reference/global_objects/promise/then/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/proxy/index.html b/files/es/web/javascript/reference/global_objects/proxy/index.html index 1469b1f138..1469b1f138 100644 --- a/files/es/web/javascript/referencia/objetos_globales/proxy/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/index.html diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html b/files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html index 6c050f7f0a..6c050f7f0a 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/handler/getownpropertydescriptor/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.html diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/index.html b/files/es/web/javascript/reference/global_objects/proxy/proxy/index.html index 2be6abb116..2be6abb116 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/handler/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/proxy/index.html diff --git a/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html b/files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html index ee5ac155e7..ee5ac155e7 100644 --- a/files/es/web/javascript/reference/global_objects/proxy/handler/set/index.html +++ b/files/es/web/javascript/reference/global_objects/proxy/proxy/set/index.html diff --git a/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html b/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html deleted file mode 100644 index fa75157c9d..0000000000 --- a/files/es/web/javascript/reference/global_objects/rangeerror/prototype/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype -tags: - - Error - - JavaScript - - Propiedad - - Prototipo - - Prototype - - RangeError -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError -translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>RangeError.prototype</strong></code> representa el prototipo de {{jsxref("RangeError")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("RangeError")}} heredan de <code>RangeError.prototype</code>. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>RangeError.prototype.constructor</code></dt> - <dd>Especifica la función que crea instancias del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> - <dd>Mensaje de error. Aunque ECMA-262 especifica que {{jsxref("RangeError")}} debe procurar su propio <code>message</code>, en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, se hereda de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> - <dd>Nombre del error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> - <dd>Ruta al fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> - <dd>Número de línea en el fichero en el que se produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> - <dd>Número de columna de la línea en la que se produjo. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> - <dd>Pila de llamadas. Heredada de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<p>Aunque el prototipo del objeto {{jsxref("RangeError")}} no contiene métodos propios, las instancias de {{jsxref("RangeError")}} heredan algunos a través de la <a href="https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos">cadena de prototipos</a>.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Commentario</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido como <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido como <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html b/files/es/web/javascript/reference/global_objects/referenceerror/index.html index 5b48497b5d..5b48497b5d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/referenceerror/index.html +++ b/files/es/web/javascript/reference/global_objects/referenceerror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html b/files/es/web/javascript/reference/global_objects/regexp/compile/index.html index 0bce81a56d..0bce81a56d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/compile/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/compile/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html b/files/es/web/javascript/reference/global_objects/regexp/exec/index.html index 1925e63b67..1925e63b67 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/exec/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/exec/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html b/files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html index 9073d631d1..9073d631d1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/ignorecase/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/ignorecase/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/index.html b/files/es/web/javascript/reference/global_objects/regexp/index.html index 9a26edead0..9a26edead0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html b/files/es/web/javascript/reference/global_objects/regexp/regexp/index.html index ad3a8c90e9..ad3a8c90e9 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/regexp/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/regexp/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html b/files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html index 39530ee1b5..39530ee1b5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/rightcontext/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/rightcontext/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html b/files/es/web/javascript/reference/global_objects/regexp/test/index.html index 4507b57c97..4507b57c97 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/test/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/test/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html b/files/es/web/javascript/reference/global_objects/regexp/tostring/index.html index 50c10d2bb2..50c10d2bb2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/regexp/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/regexp/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html b/files/es/web/javascript/reference/global_objects/set/@@iterator/index.html index 7445821fc0..7445821fc0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/@@iterator/index.html +++ b/files/es/web/javascript/reference/global_objects/set/@@iterator/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/add/index.html b/files/es/web/javascript/reference/global_objects/set/add/index.html index f9385894fb..f9385894fb 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/add/index.html +++ b/files/es/web/javascript/reference/global_objects/set/add/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/clear/index.html b/files/es/web/javascript/reference/global_objects/set/clear/index.html index 0fdca7e492..0fdca7e492 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/clear/index.html +++ b/files/es/web/javascript/reference/global_objects/set/clear/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/delete/index.html b/files/es/web/javascript/reference/global_objects/set/delete/index.html index 3e5544e06a..3e5544e06a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/delete/index.html +++ b/files/es/web/javascript/reference/global_objects/set/delete/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/entries/index.html b/files/es/web/javascript/reference/global_objects/set/entries/index.html index ba07d24187..ba07d24187 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/entries/index.html +++ b/files/es/web/javascript/reference/global_objects/set/entries/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/has/index.html b/files/es/web/javascript/reference/global_objects/set/has/index.html index e133de2d00..e133de2d00 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/has/index.html +++ b/files/es/web/javascript/reference/global_objects/set/has/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/index.html b/files/es/web/javascript/reference/global_objects/set/index.html index db091b3a59..db091b3a59 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/index.html +++ b/files/es/web/javascript/reference/global_objects/set/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/size/index.html b/files/es/web/javascript/reference/global_objects/set/size/index.html index 444ad7ae8a..444ad7ae8a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/size/index.html +++ b/files/es/web/javascript/reference/global_objects/set/size/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/set/values/index.html b/files/es/web/javascript/reference/global_objects/set/values/index.html index 8b7ec88ece..8b7ec88ece 100644 --- a/files/es/web/javascript/referencia/objetos_globales/set/values/index.html +++ b/files/es/web/javascript/reference/global_objects/set/values/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html b/files/es/web/javascript/reference/global_objects/string/anchor/index.html index c34abd62b1..c34abd62b1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/anchor/index.html +++ b/files/es/web/javascript/reference/global_objects/string/anchor/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/big/index.html b/files/es/web/javascript/reference/global_objects/string/big/index.html index 0aa04e5b74..0aa04e5b74 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/big/index.html +++ b/files/es/web/javascript/reference/global_objects/string/big/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/blink/index.html b/files/es/web/javascript/reference/global_objects/string/blink/index.html index cf49f3d840..cf49f3d840 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/blink/index.html +++ b/files/es/web/javascript/reference/global_objects/string/blink/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/bold/index.html b/files/es/web/javascript/reference/global_objects/string/bold/index.html index cc7c841181..cc7c841181 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/bold/index.html +++ b/files/es/web/javascript/reference/global_objects/string/bold/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/charat/index.html b/files/es/web/javascript/reference/global_objects/string/charat/index.html index 6ef6d46e37..6ef6d46e37 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/charat/index.html +++ b/files/es/web/javascript/reference/global_objects/string/charat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html b/files/es/web/javascript/reference/global_objects/string/charcodeat/index.html index 4eccf78f13..4eccf78f13 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/charcodeat/index.html +++ b/files/es/web/javascript/reference/global_objects/string/charcodeat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html b/files/es/web/javascript/reference/global_objects/string/codepointat/index.html index ae3fef3ec8..ae3fef3ec8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/codepointat/index.html +++ b/files/es/web/javascript/reference/global_objects/string/codepointat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/concat/index.html b/files/es/web/javascript/reference/global_objects/string/concat/index.html index d00ffce70e..d00ffce70e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/concat/index.html +++ b/files/es/web/javascript/reference/global_objects/string/concat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html b/files/es/web/javascript/reference/global_objects/string/endswith/index.html index cbeac4f481..cbeac4f481 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/endswith/index.html +++ b/files/es/web/javascript/reference/global_objects/string/endswith/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html b/files/es/web/javascript/reference/global_objects/string/fixed/index.html index 3d188bc39d..3d188bc39d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/fixed/index.html +++ b/files/es/web/javascript/reference/global_objects/string/fixed/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html b/files/es/web/javascript/reference/global_objects/string/fontcolor/index.html index 135e805cb2..135e805cb2 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/fontcolor/index.html +++ b/files/es/web/javascript/reference/global_objects/string/fontcolor/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html b/files/es/web/javascript/reference/global_objects/string/fontsize/index.html index 212c49d638..212c49d638 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/fontsize/index.html +++ b/files/es/web/javascript/reference/global_objects/string/fontsize/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html b/files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html index 7e87f3d90d..7e87f3d90d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/fromcharcode/index.html +++ b/files/es/web/javascript/reference/global_objects/string/fromcharcode/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html b/files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html index 39fe662b75..39fe662b75 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/fromcodepoint/index.html +++ b/files/es/web/javascript/reference/global_objects/string/fromcodepoint/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/includes/index.html b/files/es/web/javascript/reference/global_objects/string/includes/index.html index 094a3fd648..094a3fd648 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/includes/index.html +++ b/files/es/web/javascript/reference/global_objects/string/includes/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/index.html b/files/es/web/javascript/reference/global_objects/string/index.html index a6c5aea8e3..a6c5aea8e3 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/index.html +++ b/files/es/web/javascript/reference/global_objects/string/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html b/files/es/web/javascript/reference/global_objects/string/indexof/index.html index 14f7b01eb8..14f7b01eb8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/indexof/index.html +++ b/files/es/web/javascript/reference/global_objects/string/indexof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/italics/index.html b/files/es/web/javascript/reference/global_objects/string/italics/index.html index 71897293bb..71897293bb 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/italics/index.html +++ b/files/es/web/javascript/reference/global_objects/string/italics/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html b/files/es/web/javascript/reference/global_objects/string/lastindexof/index.html index ffde251071..ffde251071 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/lastindexof/index.html +++ b/files/es/web/javascript/reference/global_objects/string/lastindexof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/length/index.html b/files/es/web/javascript/reference/global_objects/string/length/index.html index 9401b8898a..9401b8898a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/length/index.html +++ b/files/es/web/javascript/reference/global_objects/string/length/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/link/index.html b/files/es/web/javascript/reference/global_objects/string/link/index.html index 021c659f34..021c659f34 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/link/index.html +++ b/files/es/web/javascript/reference/global_objects/string/link/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html b/files/es/web/javascript/reference/global_objects/string/localecompare/index.html index 2bda296c61..2bda296c61 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/localecompare/index.html +++ b/files/es/web/javascript/reference/global_objects/string/localecompare/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/match/index.html b/files/es/web/javascript/reference/global_objects/string/match/index.html index 6403dbaf06..6403dbaf06 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/match/index.html +++ b/files/es/web/javascript/reference/global_objects/string/match/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html b/files/es/web/javascript/reference/global_objects/string/matchall/index.html index a536720dbd..a536720dbd 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/matchall/index.html +++ b/files/es/web/javascript/reference/global_objects/string/matchall/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html b/files/es/web/javascript/reference/global_objects/string/normalize/index.html index 2794644f1c..2794644f1c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/normalize/index.html +++ b/files/es/web/javascript/reference/global_objects/string/normalize/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html b/files/es/web/javascript/reference/global_objects/string/padstart/index.html index 57abbd8f5c..57abbd8f5c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/padstart/index.html +++ b/files/es/web/javascript/reference/global_objects/string/padstart/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html b/files/es/web/javascript/reference/global_objects/string/raw/index.html index 3c8f3c1d55..3c8f3c1d55 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/raw/index.html +++ b/files/es/web/javascript/reference/global_objects/string/raw/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html b/files/es/web/javascript/reference/global_objects/string/repeat/index.html index a449bdfb27..a449bdfb27 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/repeat/index.html +++ b/files/es/web/javascript/reference/global_objects/string/repeat/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/replace/index.html b/files/es/web/javascript/reference/global_objects/string/replace/index.html index 680393ece1..680393ece1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/replace/index.html +++ b/files/es/web/javascript/reference/global_objects/string/replace/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/search/index.html b/files/es/web/javascript/reference/global_objects/string/search/index.html index 23e37234d1..23e37234d1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/search/index.html +++ b/files/es/web/javascript/reference/global_objects/string/search/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/slice/index.html b/files/es/web/javascript/reference/global_objects/string/slice/index.html index cbfe5a716b..cbfe5a716b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/slice/index.html +++ b/files/es/web/javascript/reference/global_objects/string/slice/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/small/index.html b/files/es/web/javascript/reference/global_objects/string/small/index.html index a8b2f302fd..a8b2f302fd 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/small/index.html +++ b/files/es/web/javascript/reference/global_objects/string/small/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/split/index.html b/files/es/web/javascript/reference/global_objects/string/split/index.html index ade291da0f..ade291da0f 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/split/index.html +++ b/files/es/web/javascript/reference/global_objects/string/split/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html b/files/es/web/javascript/reference/global_objects/string/startswith/index.html index c658cc80da..c658cc80da 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/startswith/index.html +++ b/files/es/web/javascript/reference/global_objects/string/startswith/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/strike/index.html b/files/es/web/javascript/reference/global_objects/string/strike/index.html index 20ba5e9c90..20ba5e9c90 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/strike/index.html +++ b/files/es/web/javascript/reference/global_objects/string/strike/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/sub/index.html b/files/es/web/javascript/reference/global_objects/string/sub/index.html index 195bca9d1e..195bca9d1e 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/sub/index.html +++ b/files/es/web/javascript/reference/global_objects/string/sub/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/substr/index.html b/files/es/web/javascript/reference/global_objects/string/substr/index.html index 290d1292ab..290d1292ab 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/substr/index.html +++ b/files/es/web/javascript/reference/global_objects/string/substr/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/substring/index.html b/files/es/web/javascript/reference/global_objects/string/substring/index.html index 9918417f95..9918417f95 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/substring/index.html +++ b/files/es/web/javascript/reference/global_objects/string/substring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/sup/index.html b/files/es/web/javascript/reference/global_objects/string/sup/index.html index 6b8db218b6..6b8db218b6 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/sup/index.html +++ b/files/es/web/javascript/reference/global_objects/string/sup/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html b/files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html index 5c1eae2144..5c1eae2144 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/tolocalelowercase/index.html +++ b/files/es/web/javascript/reference/global_objects/string/tolocalelowercase/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html b/files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html index 7199ca3ae5..7199ca3ae5 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/tolocaleuppercase/index.html +++ b/files/es/web/javascript/reference/global_objects/string/tolocaleuppercase/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html b/files/es/web/javascript/reference/global_objects/string/tolowercase/index.html index 8060f3dd1c..8060f3dd1c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/tolowercase/index.html +++ b/files/es/web/javascript/reference/global_objects/string/tolowercase/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html b/files/es/web/javascript/reference/global_objects/string/tosource/index.html index 104738c22d..104738c22d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/tosource/index.html +++ b/files/es/web/javascript/reference/global_objects/string/tosource/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html b/files/es/web/javascript/reference/global_objects/string/tostring/index.html index 89f53666b1..89f53666b1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/tostring/index.html +++ b/files/es/web/javascript/reference/global_objects/string/tostring/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html b/files/es/web/javascript/reference/global_objects/string/touppercase/index.html index 77b05b28b4..77b05b28b4 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/touppercase/index.html +++ b/files/es/web/javascript/reference/global_objects/string/touppercase/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/trim/index.html b/files/es/web/javascript/reference/global_objects/string/trim/index.html index d958d713eb..d958d713eb 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/trim/index.html +++ b/files/es/web/javascript/reference/global_objects/string/trim/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html b/files/es/web/javascript/reference/global_objects/string/trimend/index.html index 6252141adf..6252141adf 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/trimend/index.html +++ b/files/es/web/javascript/reference/global_objects/string/trimend/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html b/files/es/web/javascript/reference/global_objects/string/valueof/index.html index b287c4d774..b287c4d774 100644 --- a/files/es/web/javascript/referencia/objetos_globales/string/valueof/index.html +++ b/files/es/web/javascript/reference/global_objects/string/valueof/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html b/files/es/web/javascript/reference/global_objects/symbol/for/index.html index 1111e49b7a..1111e49b7a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/symbol/for/index.html +++ b/files/es/web/javascript/reference/global_objects/symbol/for/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html b/files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html index 9149aeda00..9149aeda00 100644 --- a/files/es/web/javascript/referencia/objetos_globales/symbol/hasinstance/index.html +++ b/files/es/web/javascript/reference/global_objects/symbol/hasinstance/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/index.html b/files/es/web/javascript/reference/global_objects/symbol/index.html index ef21b5fb6c..ef21b5fb6c 100644 --- a/files/es/web/javascript/referencia/objetos_globales/symbol/index.html +++ b/files/es/web/javascript/reference/global_objects/symbol/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html b/files/es/web/javascript/reference/global_objects/symbol/iterator/index.html index 4f9e0212cc..4f9e0212cc 100644 --- a/files/es/web/javascript/referencia/objetos_globales/symbol/iterator/index.html +++ b/files/es/web/javascript/reference/global_objects/symbol/iterator/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html b/files/es/web/javascript/reference/global_objects/syntaxerror/index.html index 92bf3f4991..92bf3f4991 100644 --- a/files/es/web/javascript/referencia/objetos_globales/syntaxerror/index.html +++ b/files/es/web/javascript/reference/global_objects/syntaxerror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html b/files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html index 579f8af9bd..579f8af9bd 100644 --- a/files/es/web/javascript/referencia/objetos_globales/typedarray/buffer/index.html +++ b/files/es/web/javascript/reference/global_objects/typedarray/buffer/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/typedarray/index.html b/files/es/web/javascript/reference/global_objects/typedarray/index.html index 644b28c081..644b28c081 100644 --- a/files/es/web/javascript/referencia/objetos_globales/typedarray/index.html +++ b/files/es/web/javascript/reference/global_objects/typedarray/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/uint8array/index.html b/files/es/web/javascript/reference/global_objects/uint8array/index.html index 6402e356b0..6402e356b0 100644 --- a/files/es/web/javascript/referencia/objetos_globales/uint8array/index.html +++ b/files/es/web/javascript/reference/global_objects/uint8array/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/undefined/index.html b/files/es/web/javascript/reference/global_objects/undefined/index.html index 1aa7db29b8..1aa7db29b8 100644 --- a/files/es/web/javascript/referencia/objetos_globales/undefined/index.html +++ b/files/es/web/javascript/reference/global_objects/undefined/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/unescape/index.html b/files/es/web/javascript/reference/global_objects/unescape/index.html index 48418ef48a..48418ef48a 100644 --- a/files/es/web/javascript/referencia/objetos_globales/unescape/index.html +++ b/files/es/web/javascript/reference/global_objects/unescape/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/urierror/index.html b/files/es/web/javascript/reference/global_objects/urierror/index.html index 3ba028a2ab..3ba028a2ab 100644 --- a/files/es/web/javascript/referencia/objetos_globales/urierror/index.html +++ b/files/es/web/javascript/reference/global_objects/urierror/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html b/files/es/web/javascript/reference/global_objects/weakmap/clear/index.html index b5c66c7714..b5c66c7714 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/clear/index.html +++ b/files/es/web/javascript/reference/global_objects/weakmap/clear/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html b/files/es/web/javascript/reference/global_objects/weakmap/delete/index.html index 7f4933eb0b..7f4933eb0b 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/delete/index.html +++ b/files/es/web/javascript/reference/global_objects/weakmap/delete/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html b/files/es/web/javascript/reference/global_objects/weakmap/get/index.html index e60e34f8f1..e60e34f8f1 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/get/index.html +++ b/files/es/web/javascript/reference/global_objects/weakmap/get/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html b/files/es/web/javascript/reference/global_objects/weakmap/has/index.html index dd978ede16..dd978ede16 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/has/index.html +++ b/files/es/web/javascript/reference/global_objects/weakmap/has/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/index.html b/files/es/web/javascript/reference/global_objects/weakmap/index.html index 0fed17e5ca..0fed17e5ca 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/index.html +++ b/files/es/web/javascript/reference/global_objects/weakmap/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html b/files/es/web/javascript/reference/global_objects/weakmap/set/index.html index 0dd654e6ef..0dd654e6ef 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/set/index.html +++ b/files/es/web/javascript/reference/global_objects/weakmap/set/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/weakset/index.html b/files/es/web/javascript/reference/global_objects/weakset/index.html index ab2af60090..ab2af60090 100644 --- a/files/es/web/javascript/referencia/objetos_globales/weakset/index.html +++ b/files/es/web/javascript/reference/global_objects/weakset/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/webassembly/index.html b/files/es/web/javascript/reference/global_objects/webassembly/index.html index 80542d763d..80542d763d 100644 --- a/files/es/web/javascript/referencia/objetos_globales/webassembly/index.html +++ b/files/es/web/javascript/reference/global_objects/webassembly/index.html diff --git a/files/es/web/javascript/referencia/index.html b/files/es/web/javascript/reference/index.html index 29d75a4161..29d75a4161 100644 --- a/files/es/web/javascript/referencia/index.html +++ b/files/es/web/javascript/reference/index.html diff --git a/files/es/web/javascript/referencia/iteration_protocols/index.html b/files/es/web/javascript/reference/iteration_protocols/index.html index 7d8d31f2cd..7d8d31f2cd 100644 --- a/files/es/web/javascript/referencia/iteration_protocols/index.html +++ b/files/es/web/javascript/reference/iteration_protocols/index.html diff --git a/files/es/web/javascript/referencia/gramatica_lexica/index.html b/files/es/web/javascript/reference/lexical_grammar/index.html index fd6a12d8c5..fd6a12d8c5 100644 --- a/files/es/web/javascript/referencia/gramatica_lexica/index.html +++ b/files/es/web/javascript/reference/lexical_grammar/index.html diff --git a/files/es/web/javascript/referencia/operadores/adición/index.html b/files/es/web/javascript/reference/operators/addition/index.html index 888845158a..888845158a 100644 --- a/files/es/web/javascript/referencia/operadores/adición/index.html +++ b/files/es/web/javascript/reference/operators/addition/index.html diff --git a/files/es/web/javascript/referencia/operadores/asignacion/index.html b/files/es/web/javascript/reference/operators/assignment/index.html index 1fa4b79ac4..1fa4b79ac4 100644 --- a/files/es/web/javascript/referencia/operadores/asignacion/index.html +++ b/files/es/web/javascript/reference/operators/assignment/index.html diff --git a/files/es/web/javascript/referencia/operadores/async_function/index.html b/files/es/web/javascript/reference/operators/async_function/index.html index 12e76e6ce5..12e76e6ce5 100644 --- a/files/es/web/javascript/referencia/operadores/async_function/index.html +++ b/files/es/web/javascript/reference/operators/async_function/index.html diff --git a/files/es/web/javascript/referencia/operadores/await/index.html b/files/es/web/javascript/reference/operators/await/index.html index d1a84251f1..d1a84251f1 100644 --- a/files/es/web/javascript/referencia/operadores/await/index.html +++ b/files/es/web/javascript/reference/operators/await/index.html diff --git a/files/es/web/javascript/referencia/operadores/class/index.html b/files/es/web/javascript/reference/operators/class/index.html index e654359035..e654359035 100644 --- a/files/es/web/javascript/referencia/operadores/class/index.html +++ b/files/es/web/javascript/reference/operators/class/index.html diff --git a/files/es/web/javascript/referencia/operadores/operador_coma/index.html b/files/es/web/javascript/reference/operators/comma_operator/index.html index a62701b3e1..a62701b3e1 100644 --- a/files/es/web/javascript/referencia/operadores/operador_coma/index.html +++ b/files/es/web/javascript/reference/operators/comma_operator/index.html diff --git a/files/es/web/javascript/referencia/operadores/conditional_operator/index.html b/files/es/web/javascript/reference/operators/conditional_operator/index.html index 6b48295902..6b48295902 100644 --- a/files/es/web/javascript/referencia/operadores/conditional_operator/index.html +++ b/files/es/web/javascript/reference/operators/conditional_operator/index.html diff --git a/files/es/web/javascript/referencia/operadores/decremento/index.html b/files/es/web/javascript/reference/operators/decrement/index.html index 01fa5f0ee2..01fa5f0ee2 100644 --- a/files/es/web/javascript/referencia/operadores/decremento/index.html +++ b/files/es/web/javascript/reference/operators/decrement/index.html diff --git a/files/es/web/javascript/referencia/operadores/delete/index.html b/files/es/web/javascript/reference/operators/delete/index.html index 99ec3e73dd..99ec3e73dd 100644 --- a/files/es/web/javascript/referencia/operadores/delete/index.html +++ b/files/es/web/javascript/reference/operators/delete/index.html diff --git a/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html b/files/es/web/javascript/reference/operators/destructuring_assignment/index.html index b56e3d3b52..b56e3d3b52 100644 --- a/files/es/web/javascript/referencia/operadores/destructuring_assignment/index.html +++ b/files/es/web/javascript/reference/operators/destructuring_assignment/index.html diff --git a/files/es/web/javascript/referencia/operadores/division/index.html b/files/es/web/javascript/reference/operators/division/index.html index d29816e37a..d29816e37a 100644 --- a/files/es/web/javascript/referencia/operadores/division/index.html +++ b/files/es/web/javascript/reference/operators/division/index.html diff --git a/files/es/web/javascript/referencia/operadores/comparacion/index.html b/files/es/web/javascript/reference/operators/equality/index.html index c60efcaada..c60efcaada 100644 --- a/files/es/web/javascript/referencia/operadores/comparacion/index.html +++ b/files/es/web/javascript/reference/operators/equality/index.html diff --git a/files/es/web/javascript/referencia/operadores/function/index.html b/files/es/web/javascript/reference/operators/function/index.html index d5739239b2..d5739239b2 100644 --- a/files/es/web/javascript/referencia/operadores/function/index.html +++ b/files/es/web/javascript/reference/operators/function/index.html diff --git a/files/es/web/javascript/referencia/operadores/function_star_/index.html b/files/es/web/javascript/reference/operators/function_star_/index.html index 9c38872b7e..9c38872b7e 100644 --- a/files/es/web/javascript/referencia/operadores/function_star_/index.html +++ b/files/es/web/javascript/reference/operators/function_star_/index.html diff --git a/files/es/web/javascript/referencia/operadores/grouping/index.html b/files/es/web/javascript/reference/operators/grouping/index.html index ec78e8518f..ec78e8518f 100644 --- a/files/es/web/javascript/referencia/operadores/grouping/index.html +++ b/files/es/web/javascript/reference/operators/grouping/index.html diff --git a/files/es/web/javascript/referencia/operadores/in/index.html b/files/es/web/javascript/reference/operators/in/index.html index 051056a25f..051056a25f 100644 --- a/files/es/web/javascript/referencia/operadores/in/index.html +++ b/files/es/web/javascript/reference/operators/in/index.html diff --git a/files/es/web/javascript/referencia/operadores/index.html b/files/es/web/javascript/reference/operators/index.html index dca4964faa..dca4964faa 100644 --- a/files/es/web/javascript/referencia/operadores/index.html +++ b/files/es/web/javascript/reference/operators/index.html diff --git a/files/es/web/javascript/referencia/operadores/instanceof/index.html b/files/es/web/javascript/reference/operators/instanceof/index.html index 3b9a45162d..3b9a45162d 100644 --- a/files/es/web/javascript/referencia/operadores/instanceof/index.html +++ b/files/es/web/javascript/reference/operators/instanceof/index.html diff --git a/files/es/web/javascript/referencia/operadores/new.target/index.html b/files/es/web/javascript/reference/operators/new.target/index.html index 0faa0f0878..0faa0f0878 100644 --- a/files/es/web/javascript/referencia/operadores/new.target/index.html +++ b/files/es/web/javascript/reference/operators/new.target/index.html diff --git a/files/es/web/javascript/referencia/operadores/new/index.html b/files/es/web/javascript/reference/operators/new/index.html index 4635b12402..4635b12402 100644 --- a/files/es/web/javascript/referencia/operadores/new/index.html +++ b/files/es/web/javascript/reference/operators/new/index.html diff --git a/files/es/web/javascript/referencia/operadores/operator_precedence/index.html b/files/es/web/javascript/reference/operators/operator_precedence/index.html index 2ff0464afd..2ff0464afd 100644 --- a/files/es/web/javascript/referencia/operadores/operator_precedence/index.html +++ b/files/es/web/javascript/reference/operators/operator_precedence/index.html diff --git a/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html b/files/es/web/javascript/reference/operators/optional_chaining/index.html index 06ccb5a999..06ccb5a999 100644 --- a/files/es/web/javascript/referencia/operadores/encadenamiento_opcional/index.html +++ b/files/es/web/javascript/reference/operators/optional_chaining/index.html diff --git a/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html b/files/es/web/javascript/reference/operators/pipeline_operator/index.html index cb671264cc..cb671264cc 100644 --- a/files/es/web/javascript/referencia/operadores/pipeline_operator/index.html +++ b/files/es/web/javascript/reference/operators/pipeline_operator/index.html diff --git a/files/es/web/javascript/referencia/operadores/miembros/index.html b/files/es/web/javascript/reference/operators/property_accessors/index.html index 565a8b7f92..565a8b7f92 100644 --- a/files/es/web/javascript/referencia/operadores/miembros/index.html +++ b/files/es/web/javascript/reference/operators/property_accessors/index.html diff --git a/files/es/web/javascript/referencia/operadores/resto/index.html b/files/es/web/javascript/reference/operators/remainder/index.html index 1a6a7c56da..1a6a7c56da 100644 --- a/files/es/web/javascript/referencia/operadores/resto/index.html +++ b/files/es/web/javascript/reference/operators/remainder/index.html diff --git a/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html b/files/es/web/javascript/reference/operators/spread_syntax/index.html index 5a17cd05a2..5a17cd05a2 100644 --- a/files/es/web/javascript/referencia/operadores/sintaxis_spread/index.html +++ b/files/es/web/javascript/reference/operators/spread_syntax/index.html diff --git a/files/es/web/javascript/referencia/operadores/strict_equality/index.html b/files/es/web/javascript/reference/operators/strict_equality/index.html index 0d09b1de71..0d09b1de71 100644 --- a/files/es/web/javascript/referencia/operadores/strict_equality/index.html +++ b/files/es/web/javascript/reference/operators/strict_equality/index.html diff --git a/files/es/web/javascript/referencia/operadores/sustracción/index.html b/files/es/web/javascript/reference/operators/subtraction/index.html index 21bfd3a1ac..21bfd3a1ac 100644 --- a/files/es/web/javascript/referencia/operadores/sustracción/index.html +++ b/files/es/web/javascript/reference/operators/subtraction/index.html diff --git a/files/es/web/javascript/referencia/operadores/super/index.html b/files/es/web/javascript/reference/operators/super/index.html index ff2ac5ae0e..ff2ac5ae0e 100644 --- a/files/es/web/javascript/referencia/operadores/super/index.html +++ b/files/es/web/javascript/reference/operators/super/index.html diff --git a/files/es/web/javascript/referencia/operadores/this/index.html b/files/es/web/javascript/reference/operators/this/index.html index 74ed62bb60..74ed62bb60 100644 --- a/files/es/web/javascript/referencia/operadores/this/index.html +++ b/files/es/web/javascript/reference/operators/this/index.html diff --git a/files/es/web/javascript/referencia/operadores/typeof/index.html b/files/es/web/javascript/reference/operators/typeof/index.html index 088791f228..088791f228 100644 --- a/files/es/web/javascript/referencia/operadores/typeof/index.html +++ b/files/es/web/javascript/reference/operators/typeof/index.html diff --git a/files/es/web/javascript/referencia/operadores/void/index.html b/files/es/web/javascript/reference/operators/void/index.html index 0bf8048b21..0bf8048b21 100644 --- a/files/es/web/javascript/referencia/operadores/void/index.html +++ b/files/es/web/javascript/reference/operators/void/index.html diff --git a/files/es/web/javascript/referencia/operadores/yield/index.html b/files/es/web/javascript/reference/operators/yield/index.html index 7237b6d689..7237b6d689 100644 --- a/files/es/web/javascript/referencia/operadores/yield/index.html +++ b/files/es/web/javascript/reference/operators/yield/index.html diff --git a/files/es/web/javascript/referencia/operadores/yield_star_/index.html b/files/es/web/javascript/reference/operators/yield_star_/index.html index e2167b8c41..e2167b8c41 100644 --- a/files/es/web/javascript/referencia/operadores/yield_star_/index.html +++ b/files/es/web/javascript/reference/operators/yield_star_/index.html diff --git a/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html b/files/es/web/javascript/reference/statements/async_function/index.html index 573c10fad8..573c10fad8 100644 --- a/files/es/web/javascript/referencia/sentencias/funcion_asincrona/index.html +++ b/files/es/web/javascript/reference/statements/async_function/index.html diff --git a/files/es/web/javascript/referencia/sentencias/block/index.html b/files/es/web/javascript/reference/statements/block/index.html index 36b2054d60..36b2054d60 100644 --- a/files/es/web/javascript/referencia/sentencias/block/index.html +++ b/files/es/web/javascript/reference/statements/block/index.html diff --git a/files/es/web/javascript/referencia/sentencias/break/index.html b/files/es/web/javascript/reference/statements/break/index.html index aff2a58733..aff2a58733 100644 --- a/files/es/web/javascript/referencia/sentencias/break/index.html +++ b/files/es/web/javascript/reference/statements/break/index.html diff --git a/files/es/web/javascript/referencia/sentencias/class/index.html b/files/es/web/javascript/reference/statements/class/index.html index c37b9ba43b..c37b9ba43b 100644 --- a/files/es/web/javascript/referencia/sentencias/class/index.html +++ b/files/es/web/javascript/reference/statements/class/index.html diff --git a/files/es/web/javascript/referencia/sentencias/const/index.html b/files/es/web/javascript/reference/statements/const/index.html index c55350fbd4..c55350fbd4 100644 --- a/files/es/web/javascript/referencia/sentencias/const/index.html +++ b/files/es/web/javascript/reference/statements/const/index.html diff --git a/files/es/web/javascript/referencia/sentencias/continue/index.html b/files/es/web/javascript/reference/statements/continue/index.html index 5371b4cdd7..5371b4cdd7 100644 --- a/files/es/web/javascript/referencia/sentencias/continue/index.html +++ b/files/es/web/javascript/reference/statements/continue/index.html diff --git a/files/es/web/javascript/referencia/sentencias/debugger/index.html b/files/es/web/javascript/reference/statements/debugger/index.html index bb36e356c0..bb36e356c0 100644 --- a/files/es/web/javascript/referencia/sentencias/debugger/index.html +++ b/files/es/web/javascript/reference/statements/debugger/index.html diff --git a/files/es/web/javascript/referencia/sentencias/do...while/index.html b/files/es/web/javascript/reference/statements/do...while/index.html index 628c1458cd..628c1458cd 100644 --- a/files/es/web/javascript/referencia/sentencias/do...while/index.html +++ b/files/es/web/javascript/reference/statements/do...while/index.html diff --git a/files/es/web/javascript/referencia/sentencias/empty/index.html b/files/es/web/javascript/reference/statements/empty/index.html index 627fd889c7..627fd889c7 100644 --- a/files/es/web/javascript/referencia/sentencias/empty/index.html +++ b/files/es/web/javascript/reference/statements/empty/index.html diff --git a/files/es/web/javascript/referencia/sentencias/export/index.html b/files/es/web/javascript/reference/statements/export/index.html index 6016afd0ba..6016afd0ba 100644 --- a/files/es/web/javascript/referencia/sentencias/export/index.html +++ b/files/es/web/javascript/reference/statements/export/index.html diff --git a/files/es/web/javascript/referencia/sentencias/for-await...of/index.html b/files/es/web/javascript/reference/statements/for-await...of/index.html index 49349d7199..49349d7199 100644 --- a/files/es/web/javascript/referencia/sentencias/for-await...of/index.html +++ b/files/es/web/javascript/reference/statements/for-await...of/index.html diff --git a/files/es/web/javascript/referencia/sentencias/for...in/index.html b/files/es/web/javascript/reference/statements/for...in/index.html index 0680d69dea..0680d69dea 100644 --- a/files/es/web/javascript/referencia/sentencias/for...in/index.html +++ b/files/es/web/javascript/reference/statements/for...in/index.html diff --git a/files/es/web/javascript/referencia/sentencias/for...of/index.html b/files/es/web/javascript/reference/statements/for...of/index.html index 572308b41a..572308b41a 100644 --- a/files/es/web/javascript/referencia/sentencias/for...of/index.html +++ b/files/es/web/javascript/reference/statements/for...of/index.html diff --git a/files/es/web/javascript/referencia/sentencias/for/index.html b/files/es/web/javascript/reference/statements/for/index.html index 875236ba2b..875236ba2b 100644 --- a/files/es/web/javascript/referencia/sentencias/for/index.html +++ b/files/es/web/javascript/reference/statements/for/index.html diff --git a/files/es/web/javascript/referencia/sentencias/function/index.html b/files/es/web/javascript/reference/statements/function/index.html index 36b02935d9..36b02935d9 100644 --- a/files/es/web/javascript/referencia/sentencias/function/index.html +++ b/files/es/web/javascript/reference/statements/function/index.html diff --git a/files/es/web/javascript/referencia/sentencias/function_star_/index.html b/files/es/web/javascript/reference/statements/function_star_/index.html index 79ff51b7f2..79ff51b7f2 100644 --- a/files/es/web/javascript/referencia/sentencias/function_star_/index.html +++ b/files/es/web/javascript/reference/statements/function_star_/index.html diff --git a/files/es/web/javascript/referencia/sentencias/if...else/index.html b/files/es/web/javascript/reference/statements/if...else/index.html index 3bac571218..3bac571218 100644 --- a/files/es/web/javascript/referencia/sentencias/if...else/index.html +++ b/files/es/web/javascript/reference/statements/if...else/index.html diff --git a/files/es/web/javascript/referencia/sentencias/import.meta/index.html b/files/es/web/javascript/reference/statements/import.meta/index.html index 8c09e97475..8c09e97475 100644 --- a/files/es/web/javascript/referencia/sentencias/import.meta/index.html +++ b/files/es/web/javascript/reference/statements/import.meta/index.html diff --git a/files/es/web/javascript/referencia/sentencias/import/index.html b/files/es/web/javascript/reference/statements/import/index.html index 7d2c261d0e..7d2c261d0e 100644 --- a/files/es/web/javascript/referencia/sentencias/import/index.html +++ b/files/es/web/javascript/reference/statements/import/index.html diff --git a/files/es/web/javascript/referencia/sentencias/index.html b/files/es/web/javascript/reference/statements/index.html index bbf0ce42e8..bbf0ce42e8 100644 --- a/files/es/web/javascript/referencia/sentencias/index.html +++ b/files/es/web/javascript/reference/statements/index.html diff --git a/files/es/web/javascript/referencia/sentencias/label/index.html b/files/es/web/javascript/reference/statements/label/index.html index 03f3108e0e..03f3108e0e 100644 --- a/files/es/web/javascript/referencia/sentencias/label/index.html +++ b/files/es/web/javascript/reference/statements/label/index.html diff --git a/files/es/web/javascript/referencia/sentencias/let/index.html b/files/es/web/javascript/reference/statements/let/index.html index 8c450b37d4..8c450b37d4 100644 --- a/files/es/web/javascript/referencia/sentencias/let/index.html +++ b/files/es/web/javascript/reference/statements/let/index.html diff --git a/files/es/web/javascript/referencia/sentencias/return/index.html b/files/es/web/javascript/reference/statements/return/index.html index 6497e97632..6497e97632 100644 --- a/files/es/web/javascript/referencia/sentencias/return/index.html +++ b/files/es/web/javascript/reference/statements/return/index.html diff --git a/files/es/web/javascript/referencia/sentencias/switch/index.html b/files/es/web/javascript/reference/statements/switch/index.html index c550477f2c..c550477f2c 100644 --- a/files/es/web/javascript/referencia/sentencias/switch/index.html +++ b/files/es/web/javascript/reference/statements/switch/index.html diff --git a/files/es/web/javascript/referencia/sentencias/throw/index.html b/files/es/web/javascript/reference/statements/throw/index.html index d3e52f83ac..d3e52f83ac 100644 --- a/files/es/web/javascript/referencia/sentencias/throw/index.html +++ b/files/es/web/javascript/reference/statements/throw/index.html diff --git a/files/es/web/javascript/referencia/sentencias/try...catch/index.html b/files/es/web/javascript/reference/statements/try...catch/index.html index d429db6163..d429db6163 100644 --- a/files/es/web/javascript/referencia/sentencias/try...catch/index.html +++ b/files/es/web/javascript/reference/statements/try...catch/index.html diff --git a/files/es/web/javascript/referencia/sentencias/var/index.html b/files/es/web/javascript/reference/statements/var/index.html index 006e40a270..006e40a270 100644 --- a/files/es/web/javascript/referencia/sentencias/var/index.html +++ b/files/es/web/javascript/reference/statements/var/index.html diff --git a/files/es/web/javascript/referencia/sentencias/while/index.html b/files/es/web/javascript/reference/statements/while/index.html index 8eab047884..8eab047884 100644 --- a/files/es/web/javascript/referencia/sentencias/while/index.html +++ b/files/es/web/javascript/reference/statements/while/index.html diff --git a/files/es/web/javascript/referencia/sentencias/with/index.html b/files/es/web/javascript/reference/statements/with/index.html index d5dc78d600..d5dc78d600 100644 --- a/files/es/web/javascript/referencia/sentencias/with/index.html +++ b/files/es/web/javascript/reference/statements/with/index.html diff --git a/files/es/web/javascript/referencia/modo_estricto/index.html b/files/es/web/javascript/reference/strict_mode/index.html index d6a596b3e5..d6a596b3e5 100644 --- a/files/es/web/javascript/referencia/modo_estricto/index.html +++ b/files/es/web/javascript/reference/strict_mode/index.html diff --git a/files/es/web/javascript/referencia/template_strings/index.html b/files/es/web/javascript/reference/template_literals/index.html index 708c879383..708c879383 100644 --- a/files/es/web/javascript/referencia/template_strings/index.html +++ b/files/es/web/javascript/reference/template_literals/index.html diff --git a/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html deleted file mode 100644 index 2098f514ad..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/array/prototype/index.html +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: Array.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Array/prototype -tags: - - Array - - Arreglo - - JavaScript - - Property - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Array/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <strong><code>Array.prototype</code></strong> representa el prototipo del constructor {{jsxref("Array")}} y le permite agregar nuevas propiedades y métodos a todos los objetos Array.</p> - -<pre class="brush: js">// Si JavaScript no proporciona un método first() de forma nativa, -// agrega un nuevo método que devuelve el primer elemento de una matriz. - -if (!Array.prototype.first) { - Array.prototype.first = function() { - return this[0]; - } -} -</pre> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Las instancias {{jsxref("Array")}} heredan de <code>Array.prototype</code>. Al igual que con todos los constructores, puede cambiar el prototipo del constructor del objeto para realizar cambios en todas las instancias {{jsxref("Array")}} . Por ejemplo, puede agregar nuevos métodos y propiedades para extender todos los objetos <code>Array</code>. Esto se usa para {{Glossary("Polyfill", "polyfilling")}}, por ejemplo.</p> - -<p>Un hecho poco conocido: <code>Array.prototype</code> en sí es un {{jsxref("Array")}}:</p> - -<pre class="brush: js">Array.isArray(Array.prototype); // true</pre> - -<p>{{js_property_attributes(0, 0, 0)}}</p> - -<h2 id="Properties" name="Properties">Propiedades</h2> - -<dl> - <dt><code>Array.prototype.constructor</code></dt> - <dd>Especifica la función que crea el prototipo de un objeto.</dd> - <dt>{{jsxref("Array.prototype.length")}}</dt> - <dd>Refleja el número de elementos en un array.</dd> - <dt>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</dt> - <dd>Un símbolo que contiene nombres de propiedades para excluir de un ámbito vinculante <code><a href="/es/docs/Web/JavaScript/Reference/Statements/with">with</a></code>.</dd> -</dl> - -<h2 id="Methods" name="Methods">Métodos</h2> - -<h3 id="Mutator_methods" name="Mutator_methods">Métodos de mutación</h3> - -<p>Estos métodos modifican el array:</p> - -<dl> - <dt>{{jsxref("Array.prototype.copyWithin()")}}</dt> - <dd>Copia una secuencia de elementos dentro del array.</dd> - <dt>{{jsxref("Array.prototype.fill()")}}</dt> - <dd>Rellena todos los elementos de un array desde un índice de inicio hasta un índice de fin con un valor determinado.</dd> - <dt>{{jsxref("Array.prototype.pop()")}}</dt> - <dd>Elimina el último elemento de un array y devuelve dicho elemento.</dd> - <dt>{{jsxref("Array.prototype.push()")}}</dt> - <dd>Añade uno o más elementos al final de un array y devuelve la nueva longitud del array.</dd> - <dt>{{jsxref("Array.prototype.reverse()")}}</dt> - <dd>Invierte el orden de los elementos de un array — el primero será el último y el último será el primero.</dd> - <dt>{{jsxref("Array.prototype.shift()")}}</dt> - <dd>Elimina el primer elemento de un array y devuelve dicho elemento.</dd> - <dt>{{jsxref("Array.prototype.sort()")}}</dt> - <dd>Ordena los elementos de un array y devuelve el array.</dd> - <dt>{{jsxref("Array.prototype.splice()")}}</dt> - <dd>Añade o elimina elementos de un array.</dd> - <dt>{{jsxref("Array.prototype.unshift()")}}</dt> - <dd>Añade uno o más elementos al principio del array y devuelve la nueva longitud del array.</dd> -</dl> - -<h3 id="Accessor_methods" name="Accessor_methods">Métodos de consulta</h3> - -<p>Estos métodos no modifican el array y devuelven alguna representación del array.</p> - -<dl> - <dt>{{jsxref("Array.prototype.concat()")}}</dt> - <dd>Devuelve un nuevo array compuesto por este array unido con otro(s) array(s) y/o valor(es).</dd> - <dt>{{jsxref("Array.prototype.includes()")}}</dt> - <dd>Determina si un array contiene cierto elemento, devolviendo <code>true</code> o <code>false</code> apropiadamente.</dd> - <dt>{{jsxref("Array.prototype.indexOf()")}}</dt> - <dd>Devuelve el primer (menor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> - <dt>{{jsxref("Array.prototype.join()")}}</dt> - <dd>Une todos los elementos de un array en una cadena de texto.</dd> - <dt>{{jsxref("Array.prototype.lastIndexOf()")}}</dt> - <dd>Devuelve el último (mayor) índice de un elemento dentro del array que sea igual al valor especificado, o -1 si no contiene dicho valor.</dd> - <dt>{{jsxref("Array.prototype.slice()")}}</dt> - <dd>Extrae una sección de un array y devuelve un nuevo array.</dd> - <dt>{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Devuelve el array literal que representa al propio array especificado; puedes usar este valor para crear un nuevo array. Reemplaza al método {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Array.prototype.toString()")}}</dt> - <dd>Devuelve una cadena de texto que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("Array.prototype.toLocaleString()")}}</dt> - <dd>Devuelve una cadena de texto localizada que representa el array y sus elementos. Reemplaza el método {{jsxref("Object.prototype.toLocaleString()")}}.</dd> -</dl> - -<h3 id="Iteration_methods" name="Iteration_methods">Métodos de iteración</h3> - -<p>Muchos métodos toman como argumentos funciones que son llamadas mientras se procesa el array. Cuando estos métodos son llamados, la longitud (<code style="font-style: normal;">length</code>) del array es muestreado, y cualquier elemento añadido por encima de esta longitud dentro de la función (<span style="font-family: consolas,monaco,andale mono,monospace;">callback</span>) no es visitado. Otros cambios sobre el array (establecer el valor o eliminar un elemento) podría afectar el resultado de la operación si el método visita el elemento después. Mientras que el comportamiento especifico de estos métodos en muchos casos es bien definido, no deberías delegar sobre eso con la finalidad de no confundir a otros que podrían leer tu código. Si debes modificar el array, copialo en un nuevo array en su lugar.</p> - -<dl> - <dt>{{jsxref("Array.prototype.entries()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los pares clave/valor para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.every()")}}</dt> - <dd>Devuelve true si cada elemento en este array satisface la función de testeo proporcionada.</dd> - <dt>{{jsxref("Array.prototype.filter()")}}</dt> - <dd>Crea un nuevo array con todos los elementos de este array para los cuales la función de filtrado proporcionada devuelve true.</dd> - <dt>{{jsxref("Array.prototype.find()")}}</dt> - <dd>Devuelve el elemento hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o <code>undefined</code> si no se halla ninguno.</dd> - <dt>{{jsxref("Array.prototype.findIndex()")}}</dt> - <dd>Devuelve el índice hallado en el array si un elemento en el array satisface la función de testeo proporcionada, o -1 si no se halla ninguno.</dd> -</dl> - -<dl> - <dt>{{jsxref("Array.prototype.forEach()")}}</dt> - <dd>Llama a una función para cada elemento del array.</dd> - <dt>{{jsxref("Array.prototype.keys()")}}</dt> - <dd>Devuelve un nuevo <code>Array Iterator</code> que contiene las claves para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.map()")}}</dt> - <dd>Crea un nuevo array con el resultado de llamar a la función proporcionada sobre cada elemento de este array.</dd> - <dt>{{jsxref("Array.prototype.reduce()")}}</dt> - <dd>Aplica una función que recibe un acumulador y cada valor del array (de izquierda a derecha) para reducirlo a un único valor.</dd> - <dt>{{jsxref("Array.prototype.reduceRight()")}}</dt> - <dd>Aplica una función que recibe un acumulador y cada valor del array (de derecha a izquierda) para reducirlo a un único valor.</dd> - <dt>{{jsxref("Array.prototype.some()")}}</dt> - <dd>Devuelve true si al menos un elemento en este array satisface la función de testeo proporcionada.</dd> - <dt>{{jsxref("Array.prototype.values()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> - <dt>{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Array Iterator</code> que contiene los valores para cada índice en el array.</dd> -</dl> - -<h3 id="Generic_methods" name="Generic_methods">Métodos genéricos (no estándar)</h3> - -<p>Muchos métodos en el objeto Javascript Array son diseñados para ser generalmente llamados para todos los objetos que "parecen" Arrays. Es decir, pueden ser usados sobre cualquier objeto que tenga una propiedad longitud (<code style="font-style: normal;">length</code>), y puedan ser accedidos usando nombres de propiedades numéricos (como con la indexación <code><span style="font-family: consolas,monaco,andale mono,monospace;">array[5]</span></code>). Algunos métodos, tales como {{jsxref("Array.join", "join")}}, sólo leen la <code>longitud</code> y propiedades numéricas del objeto sobre el cual son llamados. Otros, como {{jsxref("Array.reverse", "reverse")}}, requieren que las propiedades numéricas del objeto y la <code>longitud</code> sean mutables; estos métodos, por tanto, no pueden ser llamados sobre objetos como {{jsxref("String")}}, los cuales no permiten que su longitud o propiedades numéricas sintetizadas sean establecidas.</p> - -<h2 id="Specifications" name="Specifications">Especificaciones</h2> - -<p> </p> - -<table> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.4.3.1', 'Array.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>Se agregaron los métodos <code>copyWithin()</code>, <code>fill()</code>, <code>entries()</code>, <code>keys()</code>, <code>values()</code>, <code>find()</code>, <code>findIndex()</code>.</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES7', '#sec-array.prototype', 'Array.prototype')}}</td> - <td>{{Spec2('ES7')}}</td> - <td>Se agregó el método <code>includes()</code>.</td> - </tr> - </tbody> -</table> - -<p> </p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2> - -<div>{{Compat("javascript.builtins.Array.prototype")}}</div> - -<div id="compat-mobile"> </div> - -<h2 id="See_also" name="See_also">Ver también</h2> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html deleted file mode 100644 index fef80071de..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/arraybuffer/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: ArrayBuffer.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/ArrayBuffer/prototype -tags: - - ArrayBuffer - - JavaScript - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <strong><code>ArrayBuffer.prototype</code></strong> representa el prototipo para el objeto {{jsxref("ArrayBuffer")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Las instancias de <code>ArrayBuffer</code> heredan de <code>ArrayBuffer.prototype</code>. Como con todos los constructores, puedes modificar el prototipo del constructor para aplicar cambios sobre todas las instancias de <code>ArrayBuffer</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>ArrayBuffer.prototype.constructor</dt> - <dd>Especifica la función que se encarga de crear el prototipo del objeto. El valor inicial es el constructor incluido en el estándar <code>ArrayBuffer</code>.</dd> - <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> - <dd>El tamaño, en bytes, del array. Este valor se establece al construir el objeto y no se puede modificar. <strong>Sólo lectura.</strong></dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> - <dd>Retorna un nuevo <code>ArrayBuffer</code> cuyo contenido es una copia los bytes de este <code>ArrayBuffer</code> desde <code>begin</code>, incluido, hasta <code>end</code>, no incluido. Si <code>begin</code> o <code>end</code> son negativos, éstos hacen referencia a un índice que comienza a partir del final del array.</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> - -<div id="compat-mobile"> </div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("ArrayBuffer")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html deleted file mode 100644 index de92c8ee02..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/date/prototype/index.html +++ /dev/null @@ -1,201 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Date/prototype -tags: - - Date - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -<div> - {{JSRef("Objetos_globales", "Date")}}</div> -<h2 id="Resumen">Resumen</h2> -<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p> -<div> - {{js_property_attributes(0,0,1)}}</div> -<h2 class="noinclude" id="Propriedades">Propriedades</h2> -<dl> - <dt class="noinclude"> - <code>Date.prototype.constructor</code></dt> - <dd> - </dd> -</dl> -<div> - {{ jsOverrides("Object", "properties", "constructor") }}</div> -<h2 id="Métodos">Métodos</h2> -<dl> - <dt> - {{jsxref("Date.prototype.getDate()")}}</dt> - <dd> - Devuelve el día del mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getDay()")}}</dt> - <dd> - Devuelve el día de la semana de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getFullYear()")}}</dt> - <dd> - Devuelve el año de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getHours()")}}</dt> - <dd> - Devuelve la hora de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getMilliseconds()")}}</dt> - <dd> - Devuelve los milisegundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getMinutes()")}}</dt> - <dd> - Devuelve los minutos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getMonth()")}}</dt> - <dd> - Devuelve el mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getSeconds()")}}</dt> - <dd> - Devuelve los segundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.getTime()")}}</dt> - <dd> - Devuelve el valor numérico correspondiente a la hora especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> - <dd> - Devuelve la diferencia horaria en minutos para la zona geográfica actual.</dd> - <dt> - {{jsxref("Date.prototype.getUTCDate()")}}</dt> - <dd> - Devuelve el día del mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCDay()")}}</dt> - <dd> - Devuelve el día de la semana de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCFullYear()")}}</dt> - <dd> - Devuelve el día el año de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCHours()")}}</dt> - <dd> - Devuelve las horas de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> - <dd> - Devuelve los milisegundos de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCMinutes()")}}</dt> - <dd> - Devuelve los minutos de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCMonth()")}}</dt> - <dd> - Devuelve el mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getUTCSeconds()")}}</dt> - <dd> - Devuelve los segundos de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.getYear()")}} {{ deprecated_inline() }}</dt> - <dd> - Devuelve el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.getFullYear()")}} a cambio.</dd> - <dt> - {{jsxref("Date.prototype.setDate()")}}</dt> - <dd> - Establece el día del mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setFullYear()")}}</dt> - <dd> - Establece el año completo de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setHours()")}}</dt> - <dd> - Establece las horas de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setMilliseconds()")}}</dt> - <dd> - Establece los milisegundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setMinutes()")}}</dt> - <dd> - Establece los minutos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setMonth()")}}</dt> - <dd> - Establece el mes de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setSeconds()")}}</dt> - <dd> - Establece los segundos de la fecha especificada según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setTime()")}}</dt> - <dd> - Establece el valor del objeto <code>Date</code> según la hora local.</dd> - <dt> - {{jsxref("Date.prototype.setUTCDate()")}}</dt> - <dd> - Establece el día del mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCFullYear()")}}</dt> - <dd> - Establece el año completo de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCHours()")}}</dt> - <dd> - Establece la hora de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> - <dd> - Establece los milisegundos de la fecha especificada según la hora universal..</dd> - <dt> - {{jsxref("Date.prototype.setUTCMinutes()")}}</dt> - <dd> - Establece los minutos de la fecha especificada según la hora universal..</dd> - <dt> - {{jsxref("Date.prototype.setUTCMonth()")}}</dt> - <dd> - Establece el mes de la fecha especificada según la hora universal.</dd> - <dt> - {{jsxref("Date.prototype.setUTCSeconds()")}}</dt> - <dd> - Establece los segundos de la fecha especificada según la hora universal..</dd> - <dt> - {{jsxref("Date.prototype.setYear ()")}}{{deprecated_inline}}</dt> - <dd> - Establece el año de la fecha especificada según la hora local. Use {{jsxref("Date.prototype.setFullYear()")}} a cambio.</dd> - <dt> - {{jsxref("Date.prototype.toGMTString()")}} {{ deprecated_inline}}</dt> - <dd> - Convierte una fecha en una cadena, usando las convenciones de Internet GMT. Utilice {{jsxref("Date.prototype.toUTCString()")}} a cambio.</dd> - <dt> - {{jsxref("Date.prototype.toLocaleString()")}}</dt> - <dd> - Convierte una fecha en una cadena, usando las reglas de la localización actual. Sobreescribe el método {{jsxref("Object.toLocaleString()")}}.</dd> - <dt> - {{jsxref("Date.prototype.toLocaleDateString()")}}</dt> - <dd> - Devuelve la porción fecha (sin la hora) de una fecha como una cadena, usando las reglas de la localización actual.</dd> - <dt> - {{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> - <dd> - Devuelve la porción hora (sin la fecha) de una fecha como una cadena, siguiendo las reglas de la localización actual.</dd> - <dt> - {{jsxref("Date.prototype.toSource()")}}</dt> - <dd> - Devuelve un literal que representa al objeto <code>Date</code> especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.toSource()")}}.</dd> - <dt> - {{jsxref("Date.prototype.toString()")}}</dt> - <dd> - Devuelve una cadena representando el objeto <code>Date</code> especificado. Sobreescribe el método {{jsxref("Object.toString()")}}.</dd> - <dt> - {{jsxref("Date.prototype.toUTCString()")}}</dt> - <dd> - Convierte una fecha en una cadena, usando las reglas horarias universales.</dd> - <dt> - {{jsxref("Date.prototype.valueOf()")}}</dt> - <dd> - Devuelve el valor primitivo de un objeto <code>Date</code>. Sobreescribe el método {{jsxref("Object.valueOf()")}}.</dd> -</dl> -<p>{{ jsOverrides("Object", "methods", "getDate", "getDay", "getFullYear", "getHours", "getMilliseconds", "getMinutes", "getMonth", "getSeconds", "getTime", "getTimezoneOffset", "getUTCDate", "getUTCDay", "getUTCFullYear", "getUTCHours", "getUTCMilliseconds", "getUTCMinutes", "getUTCMonth", "getUTCSeconds", "getYear", "setdate", "setFullYear", "setHours", "setMilliseconds", "setMinutes", "setMontth", "setSeconds", "setTime", "setUTCDate", "setUTCFullYear", "setUTCHours", "setUTCMilliseconds", "setUTCMinutes", "setUTCMonth", "setUTCSeconds", "setYear", "toDateString", "toGMTString", "toLocaleDateString", "toLocaleFormat", "toLocaleString", "toLocaleTimeString", "toSource", "toString", "toTimeString", "toUTCString", "valueOf") }}</p> diff --git a/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html deleted file mode 100644 index aac1516fc2..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/error/prototype/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Error.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Error/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Error -translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>Error.prototype</strong></code> representa el prototipo del constructor {{jsxref("Error")}}.</p> - -<div>{{js_property_attributes(0, 0, 0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("Error")}} e instancias de {{jsxref("Global_Objects/Error", "errores no genéricos", "#Error_types", 1)}}, heredan de <code>Error.prototype</code>. Como todas las funciones constructoras, se puede usar el protoipo del constructor para añadir propiedades o métodos a todas las instancias creadas con este constructor.</p> - -<h2 id="Properties">Properties</h2> - -<h3 id="Propiedades_estándar">Propiedades estándar</h3> - -<dl> - <dt><code>Error.prototype.constructor</code></dt> - <dd>Especifica la función que crea una instancia del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message")}}</dt> - <dd>Mensaje de error.</dd> - <dt>{{jsxref("Error.prototype.name")}}</dt> - <dd>Nombre del error.</dd> -</dl> - -<h3 id="Extensiones_específicas_del_proveedor">Extensiones específicas del proveedor</h3> - -<div>{{non-standard_header}}</div> - -<h4 id="Microsoft">Microsoft</h4> - -<dl> - <dt>{{jsxref("Error.prototype.description")}}</dt> - <dd>Descripción del error. Similar a {{jsxref("Error.prototype.message", "message")}}.</dd> - <dt>{{jsxref("Error.prototype.number")}}</dt> - <dd>Número de error.</dd> -</dl> - -<h4 id="Mozilla">Mozilla</h4> - -<dl> - <dt>{{jsxref("Error.prototype.fileName")}}</dt> - <dd>Ruta del archivo que lanzó el error.</dd> - <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> - <dd>Número de fila en el archivo que lanzó el error.</dd> - <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> - <dd>Número de columna en el archivo que lanzó el error.</dd> - <dt>{{jsxref("Error.prototype.stack")}}</dt> - <dd>Seguimiento de la pila.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Error.prototype.toSource()")}} {{non-standard_inline}}</dt> - <dd>Devuelve una cadena que contiene el codígo del objeto {{jsxref("Error")}}; se puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("Error.prototype.toString()")}}</dt> - <dd>Devuelve una cadena que representa el objeto. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.1.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("Object.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html deleted file mode 100644 index 9d8671c534..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/function/prototype/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Function.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Function/prototype -tags: - - Function - - JavaScript - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Function -translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype ---- -<div>{{JSRef("Objetos_globales", "Function")}}</div> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>Un valor desde cuyas instancias de una clase particular son creados. Cada objeto que puede ser creado por la invocación a la función constructora posee una propiedad prototype asociada.</p> - -<h2 id="Descripci.C3.B3n" name="Descripci.C3.B3n">Descripción</h2> - -<p>Puede añadir propiedades o métodos a una clase existente mediante la adición de ellos al prototipo asociado con la función constructora para esa clase.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>{{jsxref("Function.arguments")}} {{Deprecated_inline}}</dt> - <dd>Una matriz correspondiente a los argumentos pasados a una función. Como propiedad de una <code>Function</code>, este uso está obsoleto. Se recomenda el uso del objeto {{jsxref("Functiones/arguments", "arguments")}}.</dd> - <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt> - <dd>Especifica el número de argumentos que espera la función. Se recomienda, no obstante, utilizar la función {{jsxref("Function.length", "length")}}.</dd> - <dt>{{jsxref("Function.caller")}}</dt> - <dd>Especifica la función que invoca la ejecución de la función actual (no estándar).</dd> - <dt>{{jsxref("Function.constructor")}}</dt> - <dd>Especifica la función que crea un prototipo de objeto.</dd> - <dt>{{jsxref("Function.length")}}</dt> - <dd>Specifica el número de argumentos esperados por la función.</dd> - <dt>{{jsxref("Function.name")}}</dt> - <dd>El nombre de la función (no forma parte del estándar).</dd> - <dt>{{jsxref("Function.prototype")}}</dt> - <dd>Permite añadir propiedades a los objetos función (ambos, los construidos usando <code>Function</code> y los declarados usando una declaración de función o una expresión de función).</dd> -</dl> - -<div>{{ jsOverrides("Object", "properties", "arguments", "arity", "caller", "constructor", "length", "name", "displayName") }}</div> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Function.prototype.apply()")}}</dt> - <dd>Le permite aplicar el método de otro objeto en el contexto de un objeto diferente (el objeto llamado).</dd> - <dt>{{jsxref("Function.prototype.call()")}}</dt> - <dd>Le Permite llamar (ejecutar) a un método de otro objeto en el contexto de un objeto diferente (el objeto que llama).</dd> - <dt>{{jsxref("Function.prototype.toSource()")}}</dt> - <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd> - <dt>{{jsxref("Function.prototype.toString()")}}</dt> - <dd>Devuelve una cadena que representa el código fuente de la función. Anula al método {{jsxref("Object.toSource")}}.</dd> -</dl> - -<div>{{ jsOverrides("Object", "methods", "apply", "call", "toSource", "toString") }}</div> - -<dl> - <dt> </dt> -</dl> - -<h2 id="Vea_También">Vea También</h2> - -<ul> - <li>{{jsxref("Objetos_globales/Function", "Function")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html deleted file mode 100644 index b255e65b69..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/map/prototype/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Map/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>Map</strong></code><strong><code>.prototype</code></strong> representa el prototipo del constructor {{jsxref("Map")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>La instancia de {{jsxref("Map")}} hereda de {{jsxref("Map.prototype")}}. Puedes utilizar el constructor del prototipo del objeto para agregar propiedades o métodos a todas las instancias de <code>Map</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>Map.prototype.constructor</code></dt> - <dd>Devuelve la función que creó el prototipo de una instancia. Esta es la función de {{jsxref("Map")}} por defecto.</dd> - <dt>{{jsxref("Map.prototype.size")}}</dt> - <dd>Devuelve el número de conjuntos de llave/valor en el objeto <code>Map</code>.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Map.prototype.clear()")}}</dt> - <dd>Elimina todos los conjuntos de llave/valor del objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.delete", "Map.prototype.delete(key)")}}</dt> - <dd>Elimina cualquier valor asociado a la <code>llave</code> y devuelve el valor que <code>Map.prototype.has(key)</code> tenía previamente. Después <code>Map.prototype.has(key)</code> devolverá <code>false</code>.</dd> - <dt>{{jsxref("Map.prototype.entries()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> - <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> - <dd>Llama a la callbackFn una vez por cada conjunto llave/valor presentes en cada objeto <code>Map</code>, en orden de inserción. Si se le proporciona un parámetro thisArg a forEach, se usará como valor "this" para cada callback.</dd> - <dt>{{jsxref("Map.get", "Map.prototype.get(key)")}}</dt> - <dd>Devuelve el valor asociado a la <code>llave</code>, o <code>undefined</code> si no tiene ninguno.</dd> - <dt>{{jsxref("Map.has", "Map.prototype.has(key)")}}</dt> - <dd>Devuelve un booleano que indica si un valor se ha asociado a la <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: #eeeeee;">llave</span></font> en el objeto <code>Map</code> o no se ha asociado.</dd> - <dt>{{jsxref("Map.prototype.keys()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene las <strong>llaves</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> - <dt>{{jsxref("Map.set", "Map.prototype.set(key, value)")}}</dt> - <dd>Establece un valor para la <code>llave</code> en el objeto <code>Map</code>. Devuelve el objeto <code>Map</code>.</dd> - <dt>{{jsxref("Map.prototype.values()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene los <strong>valores</strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> - <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> - <dd>Devuelve un nuevo objeto <code>Iterador</code> que contiene<strong> un array de <code>[llave, valor]</code></strong> para cada elemento en el objeto <code>Map</code> en orden de inserción.</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>38</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop("13") }}</td> - <td>11</td> - <td>25</td> - <td>7.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>38</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("13")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td> - <p>8</p> - </td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>{{jsxref("Set.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html deleted file mode 100644 index c15b5b5fcb..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/number/prototype/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Number/prototype -tags: - - JavaScript - - Number - - Property -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -<div> - {{JSRef("Objetos_globales", "Number")}}</div> -<h3 id="Resumen" name="Resumen">Resumen</h3> -<p>Representa el prototipo para esta clase. Puede utilizar el prototipo para añadir propiedades o métodos a todas las instancias de una clase. Para información acerca de prototipos.</p> -<div class="noinclude"> - </div> diff --git a/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html deleted file mode 100644 index 9b55c9cccc..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/object/prototype/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Object/prototype -tags: - - JavaScript - - Objeto - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -<div>{{JSRef("Objetos_globales", "Object")}}</div> - -<h2 id="Summary" name="Summary">Resumen</h2> - -<p>La propiedad <code><strong>Object.prototype</strong></code> representa al objeto prototipo de {{jsxref("Object")}}.</p> - -<p>{{js_property_attributes(0,0,0)}}</p> - -<h2 id="Description" name="Description">Descripción</h2> - -<p>Todos los objetos en JavaScript provienen de {{jsxref("Global_Objects/Object", "Object")}}; todos los objetos heredan métodos y propiedades de<code> Object.prototype</code>, aunque pueden ser sobrecargados. Sin embargo, un <code>Object</code> puede ser deliberadamente creado para que esto no sea cierto (por ejemplo usando {{jsxref("Object.create", "Object.create(null)")}}), o bien alterado para que no cumpla esta propiedad (por ejemplo usando {{jsxref("Object.setPrototypeOf")}}).</p> - -<p>Cambios en el prototipo de {{jsxref("Object")}} son vistos por <strong>todos </strong>los objetos a traves de el encadenado de prototype, a no ser que las propiedades y los metodos sujetos a estos cambios sean sobreescritos en algun lugar de la cadena de prototype. Este poderoso y a la vez potencialmente peligroso mecanismo permite extender o sobreescribir el comportamiento de un objeto.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>{{jsxref("Object.prototype.constructor")}}</dt> - <dd>Especifica la función que crea el prototipo de un objeto.</dd> - <dt>{{jsxref("Object.proto", "Object.prototype.__proto__")}} {{Non-standard_inline}}</dt> - <dd>Apunta al objeto que se usó como prototipo cuando fue instanciado.</dd> - <dt>{{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} {{Non-standard_inline}}</dt> - <dd>Permite a una función ser definida que sera ejecutada cuando un miembro del objeto es llamado como un metodo.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.count", "Object.prototype.__count__")}} {{obsolete_inline()}}</s></dt> - <dd>Se utiliza para devolver el número de propiedades enumerables directamente en un objeto definido por el usuario, pero que ha sido eliminado.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.parent", "Object.prototype.__parent__")}} {{obsolete_inline()}}</s></dt> - <dd><s class="obsoleteElement">Apunta al contexto de un objeto. Ha sido borrado.</s></dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Object.defineGetter", "Object.prototype.__defineGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Asocia una función con una propiedad que, cuando se accede a ella, ejecuta esa función y devuelve su valor de retorno.</dd> - <dt>{{jsxref("Object.defineSetter", "Object.prototype.__defineSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Asocia una función con una propiedad que al establecerse ejecuta esa función que modifica la propiedad.</dd> - <dt>{{jsxref("Object.lookupGetter", "Object.prototype.__lookupGetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Devuelve la función asociada con la propiedad indicada por el método {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> - <dt>{{jsxref("Object.lookupSetter", "Object.prototype.__lookupSetter__()")}} {{Non-standard_inline}} {{deprecated_inline()}}</dt> - <dd>Devuelve la función asociada con la propiedad indicada en el método {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> - <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> - <dd>Devuelve un valor lógico (boolean) que indica si el objeto contiene la propiedad indicada como una propiedad directa de ese objeto y no heredada por la cadena de prototipo.</dd> - <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> - <dd>Devuelve una indicación <em>booleana</em> cuando el objeto especificado está en la cadena de prototipos del objeto sobre el cuál éste método es llamado.</dd> - <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> - <dd>Devuelve un valor lógico (boolean) indicando si el attributo <a href="/es/docs/Web/JavaScript/Data_structures#Objetos">ECMAScript [[Enumerable]]</a> está definido.</dd> - <dt>{{jsxref("Object.prototype.toSource()")}} {{Non-standard_inline}}</dt> - <dd>Devuelve una cadena con el fuente de un literal de objeto que representa el objeto desde el que este método es llamado; se puede usar este valor para crear un nuevo objeto.</dd> - <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> - <dd>Llama a {{jsxref("Object.toString", "toString()")}}.</dd> - <dt>{{jsxref("Object.prototype.toString()")}}</dt> - <dd>Devuelve la cadena de texto (string) que representa al objeto.</dd> - <dt>{{jsxref("Object.prototype.unwatch()")}} {{Non-standard_inline}}</dt> - <dd>Remueve un punto de mira de una propiedad del objeto.</dd> - <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> - <dd>Devuelve el valor primitivo del objeto indicado.</dd> - <dt>{{jsxref("Object.prototype.watch()")}} {{Non-standard_inline}}</dt> - <dd>Agrega un punto de mira a una propiedad del objeto.</dd> - <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{ obsolete_inline()}}</s></dt> - <dd><s class="obsoleteElement">Se utiliza para evaluar una cadena de código JavaScript en el contexto del objeto especificado, pero que ha sido removido.</s></dd> -</dl> - -<h2 id="Ejemplos">Ejemplos</h2> - -<p>Al alterar el comportamiento de un método existente en Object.prototype, es oportuno considerar envolver el código de tu extensión antes o después de la existente lógica. Por ejemplo, este trozo de código (sin testear) ejecutara una determinada lógica antes de que la lógica existente o la de algún otro elemento sea ejecutada.</p> - -<p>Cuando una función es llamada, los parámetros de la llamada son mantenidos en el argumento parecido a una array llamado "arguments". Por ejemplo, en la llamada "myFn(a, b, c)", los parámetros dentro del cuerpo de la función myFn estarán contenidos en una variable llamada "arguments". Si se desea llamar al siguiente método de la cadena de prototype, simplemente añade this y arguments a la funcion apply(). Este patrón puede ser usado en cualquier prototype, por ejemplo Node.prototype, Function.prototype, etc.</p> - -<pre class="brush: js">var current = Object.prototype.valueOf; - -// Como mi propiedad "-prop-value" es un atajo y no se encuentra siempre -// en la cadena de prototype, queremos modificar Object.prototype: -Object.prototype.valueOf = function() { - if (this.hasOwnProperty('-prop-value')) { - return this['-prop-value']; - } else { - // No parece que este objeto sea uno de los mios, por lo que recaeeremos - // en el comportamiento por defecto lo mejor que podamos. - // La llamada apply se comporta como el "super" en otros lenguages de programación. - // A pesar de que valueOf() no tiene parametros, alguna otra llamada podria tenerlos. - return current.apply(this, arguments); - } -}</pre> - -<p>Como JavaScript no tiene objetos de tipo “subclase”, prototype es realmente útil para crear un objeto “base” donde ciertas funciones actúan como objetos. Por ejemplo:</p> - -<pre class="brush: js">var Person = function(name) { - this.name = name; - this.canTalk = true; -}; - -Person.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name); - } -}; - -var Employee = function(name, title) { - Person.call(this, name); - this.title = title; -}; - -Employee.prototype = Object.create(Person.prototype); -Employee.prototype.constructor = Employee; - -Employee.prototype.greet = function() { - if (this.canTalk) { - console.log('Hi, I am ' + this.name + ', the ' + this.title); - } -}; - -var Customer = function(name) { - Person.call(this, name); -}; - -Customer.prototype = Object.create(Person.prototype); -Customer.prototype.constructor = Customer; - -var Mime = function(name) { - Person.call(this, name); - this.canTalk = false; -}; - -Mime.prototype = Object.create(Person.prototype); -Mime.prototype.constructor = Mime; - -var bob = new Employee('Bob', 'Builder'); -var joe = new Customer('Joe'); -var rg = new Employee('Red Green', 'Handyman'); -var mike = new Customer('Mike'); -var mime = new Mime('Mime'); - -bob.greet(); -// Hi, I am Bob, the Builder - -joe.greet(); -// Hi, I am Joe - -rg.greet(); -// Hi, I am Red Green, the Handyman - -mike.greet(); -// Hi, I am Mike - -mime.greet();</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Observación</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td> - <p>Definición inicial.Implementado en JavaScript 1.0.</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p> </p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.builtins.Object.prototype")}}</p> diff --git a/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html deleted file mode 100644 index c15107912a..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/promise/prototype/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/Promise/prototype -tags: - - JavaScript - - Promesa - - Propiedad -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>Promise.prototype</strong></code> representa el prototipo del constructor de {{jsxref("Promise")}}</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Las instancias de {{jsxref("Promise")}} heredan de {{jsxref("Promise.prototype")}}. Se puede usar el objeto prototipo del constructor para agregar propiedades o métodos a todas las instancias de <code>Promise</code>.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>Promise.prototype.constructor</code></dt> - <dd>Retorna la función que creó el prototipo de una instancia. Esta es la función por defecto de {{jsxref("Promise")}}.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("Promise.catch", "Promise.prototype.catch(alRechazarse)")}}</dt> - <dd>Anexa a la promesa un callback manejador de rechazo, y retorna una nueva promesa que resuelve al valor de retorno del callback si es llamado, o de lo contrario a su valor de cumplimiento original si la promesa es cumplida.</dd> - <dt>{{jsxref("Promise.then", "Promise.prototype.then(alCumplirse, alRechazarse)")}}</dt> - <dd>Anexa a la promesa manejadores de cumplimiento y rechazo, y retorna una nueva promesa que resuelve al valor de retorno del manejador llamado, o a su valor de <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise#settledNote">determinación (settled)</a> original si la promesa no fue manejada (p.ej. si el manejador relevante <code>alCumplirse</code> o <code>alRechazarse</code> no es una función).</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estatus</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p class="hidden">To contribute to this compatibility data, please write a pull request against this file: <a href="https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json">https://github.com/mdn/browser-compat-data/blob/master/javascript/promise.json</a>.</p> - -<p>{{Compat("javascript/promise","Promise.prototype")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Promise")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html deleted file mode 100644 index 89519b08d2..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/string/prototype/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/String/prototype -tags: - - JavaScript - - Property - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -<p>{{JSRef("Objetos_globales", "String")}}</p> - -<h2 id="Resumen" name="Resumen">Resumen</h2> - -<p>The <strong><code>String.prototype</code></strong> propiedad representa el prototipo de esta clase. Puede usar el prototipo para añadir propiedades o métodos a todas las instancias de una clase.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>String.prototype.constructor</code></dt> - <dd>Especifica la función que crea un prototipo de objeto.</dd> - <dt>{{jsxref("String.prototype.length")}}</dt> - <dd>Refleja la longitud de la cadena.</dd> -</dl> - -<div>{{ jsOverrides("Object", "properties", "constructor", "length") }}</div> - -<h2 id="Métodos">Métodos</h2> - -<h3 id="M.C3.A9todos_no_relacionados_con_HTML" name="M.C3.A9todos_no_relacionados_con_HTML">Métodos no relacionados con HTML</h3> - -<dl> - <dt>{{jsxref("String.prototype.charAt()")}}</dt> - <dd>Devuelve el carácter en el índice especificado.</dd> - <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> - <dd>Devuelve el número que indica el valor Unicode del carácter en el índice especificado.</dd> - <dt>{{jsxref("String.prototype.concat()")}}</dt> - <dd>Combina el texto de dos cadenas y devuelve una nueva cadena.</dd> - <dt>{{jsxref("String.prototype.indexOf()")}}</dt> - <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la primera ocurrencia del valor especificado, o -1 si no lo encuentra.</dd> - <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> - <dd>Devuelve el índice dentro del objeto <code>String</code> que realiza la llamada de la última ocurrencia del valor especificado, o -1 si no lo encuentra.</dd> - <dt>{{jsxref("String.prototype.match()")}}</dt> - <dd>Se usa para emparejar una expresión regular con una cadena.</dd> - <dt>{{jsxref("String.prototype.replace()")}}</dt> - <dd>Se usa para emparejar una expresión regular con una cadena, y reemplezar la subcadena emparejada con una nueva subcadena.</dd> - <dt>{{jsxref("String.prototype.search()")}}</dt> - <dd>Realiza una búsqueda de una expresión regular en una cadena especificada.</dd> - <dt>{{jsxref("String.prototype.slice()")}}</dt> - <dd>Extrae una sección de una cadena y devuelve una nueva cadena.</dd> - <dt>{{jsxref("String.prototype.split()")}}</dt> - <dd>Divide un objeto <code>String</code> en un arreglo de cadenas, separando la cadena en subcadenas.</dd> - <dt>{{jsxref("String.prototype.substr()")}}</dt> - <dd>Devuelve los caracteres de una cadena comenzando en la localización especificada y hasta el número de caracteres especificado.</dd> - <dt>{{jsxref("String.prototype.substring()")}}</dt> - <dd>Devuelve los caracteres de una cadena entre dos índices dentro de la cadena.</dd> - <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> - <dd>Devuelve el valor de la cadena que realiza la llamada en minúsculas.</dd> - <dt>{{jsxref("String.prototype.toSource()")}}</dt> - <dd>Devuelve el objeto literal que representa el objeto especificado; puede usar este valor para crear un nuevo objeto. Sobreescribe el método {{jsxref("Object.prototype.toSource()")}}.</dd> - <dt>{{jsxref("String.prototype.toString()")}}</dt> - <dd>Devuelve una cadena que representa el objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.toString()")}}.</dd> - <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> - <dd>Devuelve el valor de la cadena que realiza la llamada en mayúsculas.</dd> - <dt>{{jsxref("String.prototype.valueOf()")}}</dt> - <dd>Devuelve el valor primitivo del objeto especificado. Sobreescribe el método {{jsxref("Object.prototype.valueOf()")}}.</dd> -</dl> - -<h3 id="HTML_wrapper_methods" name="HTML_wrapper_methods">Métodos de encapsulado HTML</h3> - -<p>Cada uno de los métodos siguientes devuelve una copia de la cadena encapsulada dentro de una etiqueta HTML. Por ejemplo, "test".bold() devuelve "<b>test</b>".</p> - -<dl> - <dt>{{jsxref("String.prototype.anchor()")}}</dt> - <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-name-A"><code><a name="<em>name</em>"></code></a> (Ancha Hipertexto)</dd> - <dt>{{jsxref("String.prototype.big()")}}</dt> - <dd>{{HTMLElement("big")}}</dd> - <dt>{{jsxref("String.prototype.blink()")}}</dt> - <dd>{{HTMLElement("blink")}}</dd> - <dt>{{jsxref("String.prototype.bold()")}}</dt> - <dd>{{HTMLElement("b")}}</dd> - <dt>{{jsxref("String.prototype.fixed()")}}</dt> - <dd>{{HTMLElement("tt")}}</dd> - <dt>{{jsxref("String.prototype.fontcolor()")}}</dt> - <dd><code><font color="<em>color</em>"></code></dd> - <dt>{{jsxref("String.prototype.fontsize()")}}</dt> - <dd><code><font size="<em>size</em>"></code></dd> - <dt>{{jsxref("String.prototype.italics()")}}</dt> - <dd>{{HTMLElement("i")}}</dd> - <dt>{{jsxref("String.prototype.link()")}}</dt> - <dd><a class="external" href="http://www.w3.org/TR/html401/struct/links.html#adef-href"><code><a href="<em>url</em>"></code></a> (Enlace a URL)</dd> - <dt>{{jsxref("String.prototype.small()")}}</dt> - <dd>{{HTMLElement("small")}}</dd> - <dt>{{jsxref("String.prototype.strike()")}}</dt> - <dd>{{HTMLElement("strike")}}</dd> - <dt>{{jsxref("String.prototype.sub()")}}</dt> - <dd>{{HTMLElement("sub")}}</dd> - <dt>{{jsxref("String.prototype.sup()")}}</dt> - <dd>{{HTMLElement("sup")}}</dd> -</dl> - -<p>Estos métodos son de uso limitado, ya que sólo están disponibles un subconjunto de etiquetas HTML y atributos.</p> - -<p>{{ jsOverrides("Object", "methods", "charAt", "charCodeAt", "concat", "indexOf", "lastIndexOf", "localeCompare", "match", "quote", "replace", "search", "slice", "split", "substr", "substring", "toLocaleLowerCase", "toLocaleUpperCase", "toLowerCase", "toSource", "toString", "toUpperCase", "trim", "trimLeft", "trimRight", "valueOf", "anchor", "big", "blink", "bold", "fixed", "fontcolor", "fontsize", "italics", "link", "small", "strike", "sub", "sup") }}</p> - -<h2 id="See_also" name="See_also">Vea también</h2> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> - -<dl> - <dt> </dt> -</dl> diff --git a/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html deleted file mode 100644 index 2de491bc21..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/syntaxerror/prototype/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/SyntaxError/prototype -tags: - - Error - - JavaScript - - Property - - Prototype - - SyntaxError -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>SyntaxError.prototype</strong></code> representa el prototipo para el constructor {{jsxref("SyntaxError")}}.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>Todas las instancias de {{jsxref("SyntaxError")}} son heredadas de <code>SyntaxError.prototype</code>. Puedes usar el prototipo para agregar propiedades o metodos a todas las instancias.</p> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>SyntaxError.prototype.constructor</code></dt> - <dd>Especifica la funcion que creó una instancia del prototipo.</dd> - <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> - <dd>Mensaje de error. A pesar de que ECMA-262 especifica que {{jsxref("SyntaxError")}} debe proveer su propia propiedad <code>message</code> , en <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>, es heredada de {{jsxref("Error.prototype.message")}}.</dd> - <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> - <dd>Error name. Inherited from {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> - <dd>Ruta al archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> - <dd>Numero de linea en el archivo que produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> - <dd>Numero de columna en la linea que produjo el error. Heredada de {{jsxref("Error")}}.</dd> - <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> - <dd>Stack trace. Heredada de {{jsxref("Error")}}.</dd> -</dl> - -<h2 id="Metodos">Metodos</h2> - -<p>A pesar de que el objeto prototipo de {{jsxref("SyntaxError")}} no contiene metodos propios, las instancias de {{jsxref("SyntaxError")}} heredan algunos metodos debido a la cadena de prototipos.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Defined as <code><em>NativeError</em>.prototype</code>.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<h2 id="CompatibilityTable"><span style="font-size: 14px; font-weight: normal; line-height: 1.5;">{{CompatibilityTable}}</span></h2> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Véase_también">Véase también</h2> - -<ul> - <li>{{jsxref("Error.prototype")}}</li> - <li>{{jsxref("Function.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html b/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html deleted file mode 100644 index 41d501135d..0000000000 --- a/files/es/web/javascript/referencia/objetos_globales/weakmap/prototype/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Referencia/Objetos_globales/WeakMap/prototype -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -<div>{{JSRef}}</div> - -<p>La propiedad <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> representa el prototipo para el constructor {{jsxref("WeakMap")}}.</p> - -<div>{{js_property_attributes(0,0,0)}}</div> - -<h2 id="Descripción">Descripción</h2> - -<p>Las instancias de {{jsxref("WeakMap")}} heredan de {{jsxref("WeakMap.prototype")}}. Se puede usar el objeto prototipo del constructor para añadir propiedades o métodos para todas las instancias de <code>WeakMap</code>.</p> - -<p><code>WeakMap.prototype</code> por si mismo es solamente un objeto ordinario:</p> - -<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"</pre> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt><code>WeakMap.prototype.constructor</code></dt> - <dd>Retorna la función que creó el prototipo de la instanciaReturns the function that created an instance's prototype. Esta es la función {{jsxref("WeakMap")}} por defecto.</dd> -</dl> - -<h2 id="Métodos">Métodos</h2> - -<dl> - <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}</dt> - <dd>Remueve cualquier valor asociado a la clave. Después de esto <code>WeakMap.prototype.has(key)</code> retornará falso.</dd> - <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}</dt> - <dd>Retorna el valor asociado a la clave, o <code>undefined</code> si no hay ninguno.</dd> - <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}</dt> - <dd>Retorna un valor booleano indicando si hay un valor asociado a la clave en el objeto the <code>WeakMap</code> object o no.</dd> - <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}</dt> - <dd>Asigna el valor para la clave en el objeto <code>WeakMap</code>. Retorna el objeto <code>WeakMap</code>.</dd> - <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}</s></dt> - <dd><s class="obsoleteElement">Remueve todas los pares clave/valore del objeto <code>WeakMap</code>. Notese que es posible implementar un objeto parecido al <code>WeakMap</code> que posea un método <code>.clear()</code>, encapsulando el objeto <code>WeakMap</code> que no lo tiene (ver ejemplo en la página {{jsxref("WeakMap")}})</s></dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>36</td> - <td>{{CompatGeckoDesktop("6.0")}}</td> - <td>11</td> - <td>23</td> - <td>7.1</td> - </tr> - <tr> - <td>Objeto ordinario</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte básico</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("6.0")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>8</td> - </tr> - <tr> - <td>Objeto ordinario</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("40")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Map.prototype")}}</li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/aritméticos/index.html b/files/es/web/javascript/referencia/operadores/aritméticos/index.html deleted file mode 100644 index 71968fda85..0000000000 --- a/files/es/web/javascript/referencia/operadores/aritméticos/index.html +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: Operadores Aritméticos -slug: Web/JavaScript/Referencia/Operadores/Aritméticos -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Los operadores Aritméticos toman valores numéricos (ya sean literales o variables) como sus operandos y retornan un valor numérico único. Los operadores aritméticos estándar son adición o suma (+), sustracción o resta (-), multiplicación (*), y división (/).</p> - -<p>Estos operadores trabajan al igual que en la mayoría de otros lenguajes de programacion, excepto el operador /, que retorna una división de punto flotante en JavaScript, no una división truncada como en lenguajes tales como C o Java. Por ejemplo:</p> - -<p>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</p> - -<h2 id="Suma_o_adición_()"><a name="Addition">Suma o adición (+)</a></h2> - -<p>La operación suma se produce mediante la suma de número o strings concatenados.</p> - -<h3 id="Sintaxis">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x + y</pre> - -<h3 id="Ejemplos">Ejemplos:</h3> - -<pre class="brush: js">// Número + Número = Adición - -1 + 2 // 3 - -// Bolean + Número = Adición - -true + 1 // 2 - -// Bolean + Bolean // Adición - -false + false // 0 - -// Número + String = Concatenación - -5 + 'foo' // "5foo" - -// String + Bolean = Concatenación - -'foo' + true // "footrue" - -// String + String = Concatenación - -'foo' + 'bar' // "foobar" -</pre> - -<h2 id="Resta_o_sustracción_(-)"><a name="Subtraction">Resta o sustracción (-)</a></h2> - -<p>La resta se produce cuando se sutraen el resultado de los operadores, produciendo su diferencia.</p> - -<h3 id="Sintaxis_2">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x - y</pre> - -<h3 id="Ejemplos_2">Ejemplos</h3> - -<pre class="brush: js">5 - 3 // 2 -3 - 5 // -2 -'foo' - 3 // NaN -</pre> - -<h2 id="División_()"><a name="Division">División (/)</a></h2> - -<p>El operador división se produce el cociente de la operación donde el operando izquierdo es el dividendo y el operando derecho es el divisor.</p> - -<h3 id="Sintaxis_3">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x / y</pre> - -<h3 id="Ejemplos_3">Ejemplos</h3> - -<pre class="brush: js">1 / 2 // devuelve 0.5 en JavaScript -1 / 2 // devuelve 0 en Java -// (Ninguno de los números es explícitamente un número de punto flotante) - -1.0 / 2.0 // devuelve 0.5 en JavaScript y Java - -2.0 / 0 // devuelve Infinito en JavaScript -2.0 / 0.0 // devuelve Infinito -2.0 / -0.0 // devuelve -Infinito en JavaScript -</pre> - -<h2 id="Multiplicación_(*)"><a name="Multiplication">Multiplicación (*)</a></h2> - -<p>El operador multiplicación produce el producto de la multiplicación de los operandos.</p> - -<h3 id="Sintaxis_4">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> x * y</pre> - -<h3 id="Ejemplos_4">Ejemplos</h3> - -<pre class="brush: js">2 * 2 // 4 --2 * 2 // -4 -Infinito * 0 // NaN -Infinito * Infinito // Infinito -'foo' * 2 // NaN</pre> - -<h2 id=".25_.28modular.29" name=".25_.28modular.29">Resto o Residuo (%)</h2> - -<p>El operador resto devuelve el resto que queda cuando un operando se divide por un segundo operando. Siempre toma el signo del dividendo, no el divisor. Utiliza una función de <code>modulo</code> incorporada para producir el resultado, que es el resto entero de dividir <code>var1</code> por <code>var2</code> - por ejemplo - <code>var1</code> modulo <code>var2</code>. <a href="http://wiki.ecmascript.org/doku.php?id=strawman:modulo_operator">Existe una propuesta para obtener un operador de módulo real en una versión futura de ECMAScript</a>, con la diferencia de que el resultado del operador de módulo tomaría el signo del divisor, no el dividendo.</p> - -<h3 id="Sintaxis_5">Sintaxis</h3> - -<pre class="brush: js"><strong>Operador:</strong> var1 % var2</pre> - -<h3 id="Ejemplos_5">Ejemplos</h3> - -<pre class="brush: js">12 % 5 // 2 --1 % 2 // -1 -1 % -2 // 1 -NaN % 2 // NaN -1 % 2 // 1 -2 % 3 // 2 --4 % 2 // -0 -5.5 % 2 // 1.5</pre> - -<h2 id="Exponenciación_(**)">Exponenciación (**)</h2> - -<p>El operador de exponenciación devuelve el resultado de elevar el primer operando al segundo operando de potencia. es decir, <code>var1<sup>var2</sup></code>, en la declaración anterior, donde <code>var1</code> y <code>var2</code> son variables. El operador de exponenciación es asociativo a la derecha. <code>a ** b ** c</code> es igual a <code>a ** (b ** c)</code>.</p> - -<h3 id="Sintaxis_6">Sintaxis</h3> - -<pre><strong>Operador:</strong> var1 ** var2</pre> - -<p> </p> - -<h3 id="Notas">Notas</h3> - -<p>En la mayoría de los lenguajes como PHP y Python y otros que tienen un operador de exponenciación (**), el operador de exponenciación se define para tener una precedencia más alta que los operadores unarios, como unario + y unario -, pero hay algunas excepciones. Por ejemplo, en Bash, el operador ** se define como de menor precedencia que los operadores unarios. En JavaScript, es imposible escribir una expresión de exponenciación ambigua, es decir, no se puede poner un operador unario (<code>+/-/~/!/delete/void/typeof</code>) inmediatamente antes del número de base.</p> - -<pre class="brush: js">-2 ** 2; -// 4 en Bash, -4 en otros idiomas. -// Esto no es válido en JavaScript, ya que la operación es ambigua. - - --(2 ** 2); -// -4 en JavaScript y la intención del autor no es ambigua.</pre> - -<h3 id="Ejemplos_6">Ejemplos</h3> - -<pre class="brush: js">2 ** 3 // 8 -3 ** 2 // 9 -3 ** 2.5 // 15.588457268119896 -10 ** -1 // 0.1 -NaN ** 2 // NaN - -2 ** 3 ** 2 // 512 -2 ** (3 ** 2) // 512 -(2 ** 3) ** 2 // 64</pre> - -<p>Para invertir el signo del resultado de una expresión de exponenciación:</p> - -<pre class="brush: js">-(2 ** 2) // -4</pre> - -<p>Para forzar la base de una expresión de exponenciación a ser un número negativo:</p> - -<pre class="brush: js">(-2) ** 2 // 4</pre> - -<div class="note"> -<p><strong>Nota:</strong> JavaScript también tiene <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">un operador bit a bit ^ (logical XOR)</a>. <code>**</code> y <code>^</code> son diferentes (por ejemplo: <code>2 ** 3 === 8</code> cuando <code>2 ^ 3 === 1</code>.)</p> -</div> - -<p> </p> - -<h2 id=".2B.2B_.28incremento.29" name=".2B.2B_.28incremento.29">Incremento (++)</h2> - -<p> </p> - -<p>El operador de incremento incrementa (agrega uno a) su operando y devuelve un valor.</p> - -<ul> - <li>Si se usa postfijo, con el operador después del operando (por ejemplo, x++), devuelve el valor antes de incrementar.</li> - <li>Si se usa prefijo, con el operador antes del operando (por ejemplo, ++x), devuelve el valor después de incrementar.</li> -</ul> - -<h3 id="Sintaxis_7">Sintaxis</h3> - -<pre><strong>Operador:</strong> x++ o ++x</pre> - -<h3 id="Ejemplos_7">Ejemplos</h3> - -<pre class="brush: js">// Postfijo -var x = 3; -y = x++; // y = 3, x = 4 - -// Prefijo -var a = 2; -b = ++a; // a = 3, b = 3 -</pre> - -<h2 id="--_.28decremento.29" name="--_.28decremento.29">Decremento (--)</h2> - -<p>El operador de decremento disminuye (resta uno de) su operando y devuelve un valor.</p> - -<ul> - <li>Si se usa postfijo (por ejemplo, x--), devuelve el valor antes de decrementar.</li> - <li>Si usa el prefijo (por ejemplo, --x), entonces devuelve el valor después de decrementar.</li> -</ul> - -<h3 id="Sintaxis_8">Sintaxis</h3> - -<pre><strong>Operador:</strong> x-- o --x</pre> - -<h3 id="Ejemplos_8">Ejemplos</h3> - -<pre class="brush: js">// Postfijo -var x = 3; -y = x--; // y = 3, x = 2 - -// Prefijo -var a = 2; -b = --a; // a = 1, b = 1</pre> - -<p> </p> - -<h2 id="-_.28negaci.C3.B3n_unitario.29" name="-_.28negaci.C3.B3n_unitario.29">Negación unaria (-)</h2> - -<p>El operador de negación unaria precede su operando y lo niega.</p> - -<h3 id="Sintaxis_9">Sintaxis</h3> - -<pre><strong>Operador:</strong> -x</pre> - -<h3 id="Ejemplos_9">Ejemplos</h3> - -<pre class="brush: js">var x = 3; -y = -x; // y = -3, x = 3 - -// el operador de negación unario puede convertir no-números en un número -var x = "4"; -y = -x; // y = -4</pre> - -<h2 id="Unario_más_()">Unario más (+)</h2> - -<p>El operador unario más precede su operando y evalúa su operando, pero intenta convertirlo en un número, si no lo está. Aunque la negación unaria (-) también puede convertir no números, unario plus es la manera más rápida y preferida de convertir algo en un número, porque no realiza ninguna otra operación en el número. Puede convertir representaciones de cadenas de enteros y flotantes, así como los valores que no sean cadenas <code>true</code>, <code>false</code> y <code>null</code>. Se admiten enteros en formato decimal y hexadecimal ("0x" -prefijado). Los números negativos son compatibles (aunque no para hexadecimal). Si no puede analizar un valor particular, evaluará a <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a>.</p> - -<h3 id="Sintaxis_10">Sintaxis</h3> - -<pre><strong>Operador:</strong> +x</pre> - -<h3 id="Ejemplos_10">Ejemplos</h3> - -<pre class="brush: js">+3 // 3 -+'3' // 3 -+true // 1 -+false // 0 -+null // 0 -+function(val){ return val } // NaN</pre> - -<p> </p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.5">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.3">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4">Operadores unarios.</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Operadores aditivos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">Operadores multiplicativos</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">Expresiones Postfijas</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">Operadores unarios.</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2016')}}</td> - <td><a href="https://github.com/rwaldron/exponentiation-operator">Operador de exponenciación</a> agregado.</td> - </tr> - <tr> - <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> - <td>{{Spec2('ES2017')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<p>{{Compat("javascript.operators.arithmetic")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/es/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Operadores de Asignación</a></li> -</ul> - -<p> </p> diff --git a/files/es/web/javascript/referencia/operadores/assignment_operators/index.html b/files/es/web/javascript/referencia/operadores/assignment_operators/index.html deleted file mode 100644 index 979eff63f2..0000000000 --- a/files/es/web/javascript/referencia/operadores/assignment_operators/index.html +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: Operadores de asignación -slug: Web/JavaScript/Referencia/Operadores/Assignment_Operators -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Un <strong>operador de asignacion</strong> asigna un valor al operando de la izquierda basado en el valor del operando de la derecha.</p> - -<h2 id="Visión_general"><span class="short_text" id="result_box" lang="es"><span>Visión general</span></span></h2> - -<p>El operador de asignación basico es el igual (<code>=</code>), el cual asigna el valor del operando derecho al operando izquierdo. Es decir, x = y asigna el valor de y a x. El otro operador de asignacion son usualmente son abreviaciones para operaciones estandar, como se muestra en las siguientes definiciones y ejemplos.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Nombres</th> - <th>Abreviaciones</th> - <th>Significado</th> - </tr> - <tr> - <td><a href="#Assignment">Asignación</a></td> - <td><code>x = y</code></td> - <td><code>x = y</code></td> - </tr> - <tr> - <td><a href="#Addition_assignment">Asignación de adición</a></td> - <td><code>x += y</code></td> - <td><code>x = x + y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de sustracción</a></td> - <td><code>x -= y</code></td> - <td><code>x = x - y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de multiplicación</a></td> - <td><code>x *= y</code></td> - <td><code>x = x * y</code></td> - </tr> - <tr> - <td><a href="#Subtraction_assignment">Asignación de división</a></td> - <td><code>x /= y</code></td> - <td><code>x = x / y</code></td> - </tr> - <tr> - <td><a href="#Remainder_assignment">Asignación de Resto</a></td> - <td><code>x %= y</code></td> - <td><code>x = x % y</code></td> - </tr> - <tr> - <td><a href="#Exponentiation_assignment">Asignación de exponenciación</a></td> - <td><code>x **= y</code></td> - <td><code>x = x ** y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></td> - <td><code>x <<= y</code></td> - <td><code>x = x << y</code></td> - </tr> - <tr> - <td><a href="#Left_shift_assignment">Asignación de desplazamiento a la derecha</a></td> - <td><code>x >>= y</code></td> - <td><code>x = x >> y</code></td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></td> - <td><code>x >>>= y</code></td> - <td><code>x = x >>> y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_AND_assignment">Asignacion AND</a></td> - <td><code>x &= y</code></td> - <td><code>x = x & y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Asignacion XOR</a></td> - <td><code>x ^= y</code></td> - <td><code>x = x ^ y</code></td> - </tr> - <tr> - <td><a href="#Bitwise_XOR_assignment">Asignacion OR</a></td> - <td><code>x |= y</code></td> - <td><code>x = x | y</code></td> - </tr> - </tbody> -</table> - -<h2 id="Asignación"><a name="Assignment">Asignación</a></h2> - -<p>Operador de asignación simple que asigna un valor a una variable. EL operador de asignación evalua al valor asignado. Encadenando el operador de asignación es posible en orden de asignar un solo valor a multiples variables. Vea el ejemplo.</p> - -<h3 id="Sintaxis">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x = y -</pre> - -<h3 id="Ejemplos">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo las siguientes variables -// x = 5 -// y = 10 -// z = 25 - - -x = y // x es 10 -x = y = z // x, y, z son todas 25 -</pre> - -<h2 id="Asignación_de_Adición"><a name="Addition_assignment">Asignación de Adición</a></h2> - -<p>El operador de asignación de suma <strong>agrega</strong> el valor del operando derecho a la variable y le asigna el resultado a la variable. Los dos tipos de operandos determinan el comportamiento del operador de asignación de adición. Adición o concatenación es posible. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de adición", "#Addition", 1)}} para más detalles.</p> - -<h3 id="Sintaxis_2">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x += y -<strong>Significado:</strong> x = x + y -</pre> - -<h3 id="Ejemplos_2">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asuma las siguientes variables -// foo = "foo" -// bar = 5 -// baz = true - - -// Number + Number -> Adición -bar += 2 // 7 - -// Boolean + Number -> Adición -baz += 1 // 2 - -// Boolean + Boolean -> Adición -baz += false // 1 - -// Number + String -> concatenación -bar += "foo" // "5foo" - -// String + Boolean -> concatenación -foo += false // "foofalse" - -// String + String -> concatenación -foo += "bar" // "foobar" -</pre> - -<h2 id="Asignación_de_Sustracción"><a name="Subtraction_assignment">Asignación de Sustracción</a></h2> - -<p>El operador de asignación de sustracción <strong>sustrae </strong>el valor del operador derecho desde la variable y asigna el resultado a la variable. Mira el {{jsxref("Operators/Arithmetic_Operators", "operador de sustracción", "#Subtraction", 1)}} para mas detalles.</p> - - - -<h4 id="Sintaxis_3">Sintaxis</h4> - - - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x -= y -<strong>Significado:</strong> x = x - y -</pre> - -<h4 id="Ejemplos_3">Ejemplos</h4> - -<pre class="brush: js notranslate">// Asumiendo las siguientes variables -// bar = 5 - -bar -= 2 // 3 -bar -= "foo" // NaN -</pre> - -<h2 id="Asignación_de_Multiplicación">Asignación de Multiplicación </h2> - -<p>El operador de asignación de multiplicación <strong>multiplica </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de Multiplicación", "#Multiplication", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_4">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x *= y -<strong>Significado:</strong> x = x * y -</pre> - -<h3 id="Ejemplos_4">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar *= 2 // 10 -bar *= "foo" // NaN -</pre> - -<h2 id="Asignación_de_división"><a name="Division_assignment">Asignación de división</a></h2> - -<p>El operador de asignación de división <strong>divide </strong>la variable por el valor del operando derecho y asigna el resultado a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "operador de división", "#Division", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_5">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x /= y -<strong>Significado:</strong> x = x / y -</pre> - -<h3 id="Ejemplos_5">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar /= 2 // 2.5 -bar /= "foo" // NaN -bar /= 0 // Infinity -</pre> - -<h2 id="Asignación_de_resto"><a name="Remainder_assignment">Asignación de resto</a></h2> - -<p>El operador de asignación de resto <strong>divide </strong>la variable por el valor del operador derecho y asigna el <strong>resto </strong>a la variable. Vea el {{jsxref("Operators/Arithmetic_Operators", "Operador de resto", "#Remainder", 1)}} para mas detelles.</p> - -<h3 id="Sintaxis_6">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x %= y -<strong>Significado:</strong> x = x % y -</pre> - -<h3 id="Ejemplos_6">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar %= 2 // 1 -bar %= "foo" // NaN -bar %= 0 // NaN -</pre> - -<h2 id="Asignación_de_exponenciación"><a id="Exponentiation_assignment" name="Exponentiation_assignment"></a>Asignación de <span id="result_box" lang="es"><span>exponenciación</span></span></h2> - -<p>El operador de asignación de exponente evalua el resultado de elevar primero el operando a la <strong>potencia </strong>del segundo operando. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de exponenciación", "#Left_shift", 1)}}para mas detalles</p> - -<h3 id="Sintaxis_7">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x **= y -<strong>Significado:</strong> x = x ** y -</pre> - -<h3 id="Ejemplos_7">Ejemplos</h3> - -<pre class="brush: js notranslate">// Asumiendo la siguiente variable -// bar = 5 - -bar **= 2 // 25 -bar **= "foo" // NaN</pre> - -<h2 id="Asignación_de_desplazamiento_a_la_izquierda"><a name="Left_shift_assignment">Asignación de desplazamiento a la izquierda</a></h2> - -<p>El operador de asignación de desplazamiento a la izquierda mueve una cantidad especifica de bits a la izquierda y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la izquierda", "#Left_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_8">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x <<= y -<strong>Significado:</strong> x = x << y -</pre> - -<h3 id="Ejemplos_8">Ejemplos</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar <<= 2; // 20 (00000000000000000000000000010100) -</pre> - -<h2 id="Asignación_de_desplazamiento_a_la_derecha"><a name="Right_shift_assignment">Asignación de desplazamiento a la derecha</a></h2> - -<p>El operador de asignación de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador de desplazamiento a la derecha", "#Right_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_9">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>= y -<strong>Significado:</strong> x = x >> y -</pre> - -<h3 id="Ejemplos_9">Ejemplos</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar >>= 2; // 1 (00000000000000000000000000000001) - -var bar -5; // (-00000000000000000000000000000101) -bar >>= 2; // -2 (-00000000000000000000000000000010) -</pre> - -<h2 id="Asignación_sin_signo_de_desplazamiento_a_la_derecha"><a name="Unsigned_right_shift_assignment">Asignación sin signo de desplazamiento a la derecha</a></h2> - -<p>El operador de asignación sin signo de desplazamiento a la derecha mueve una cantidad especifica de bits a la derecha y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador sin signo de desplazamiento a la derecha", "#Unsigned_right_shift", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_10">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x >>>= y -<strong>Significado:</strong> x = x >>> y -</pre> - -<h3 id="Ejemplo">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; // (00000000000000000000000000000101) -bar >>>= 2; // 1 (00000000000000000000000000000001) - -var bar = -5; // (-00000000000000000000000000000101) -bar >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> - -<h2 id="Asignación_AND"><a name="Bitwise_AND_assignment">Asignación AND</a></h2> - -<p>El operador de asignacion AND usa la representación binaria de ambos operandos, hace una operacion AND en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador AND", "#Bitwise_AND", 1)}} para mas detalles.</p> - -<h3 id="Sintaxis_11">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x &= y -<strong>Significado:</strong> x = x & y -</pre> - -<h3 id="Ejemplo_2">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -bar &= 2; // 0 -</pre> - -<h2 id="Asignación_XOR"><a name="Bitwise_XOR_assignment">Asignación XOR</a></h2> - -<p>El operador de asignacion XOR usa la representación binaria de ambos operandos, hace una operacion XOR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador XOR", "#Bitwise_XOR", 1)}} para mas detalles</p> - -<h3 id="Sintaxis_12">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x ^= y -<strong>Significado:</strong> x = x ^ y -</pre> - -<h3 id="Ejemplo_3">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -bar ^= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Asignación_OR"><a name="Bitwise_OR_assignment">Asignación OR</a></h2> - -<p>El operador de asignacion OR usa la representación binaria de ambos operandos, hace una operacion OR en ellos y asigna el resultado a la variable. Vea el {{jsxref("Operators/Bitwise_Operators", "operador OR", "#Bitwise_XOR", 1)}} para mas detalles</p> - -<h3 id="Sintaxis_13">Sintaxis</h3> - -<pre class="syntaxbox notranslate"><strong>Operador:</strong> x |= y -<strong>Significado:</strong> x = x | y -</pre> - -<h3 id="Ejemplo_4">Ejemplo</h3> - -<pre class="brush: js notranslate">var bar = 5; -bar |= 2; // 7 -// 5: 00000000000000000000000000000101 -// 2: 00000000000000000000000000000010 -// ----------------------------------- -// 7: 00000000000000000000000000000111 -</pre> - -<h2 id="Ejemplos_10">Ejemplos</h2> - -<h3 id="Operador_izquierdo_con_otros_operadores_de_asignación">Operador izquierdo con otros operadores de asignación</h3> - -<p>En situaciones inusuales, el operador de asignacion (e.g x += y) no es identico al significado de la expresión (aca x = x + y). Cuando el operando izquierdo de un mismo operador de asignación contiene un operador de asignaciónm el operando izquierdo es evaluado una vez. por ejemplo:</p> - -<pre class="brush: js notranslate">a[i++] += 5 // i es evaluado una vez -a[i++] = a[i++] + 5 // i es evaluado dos veces -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Operadores de asignación')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-assignment-operators', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES6')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.13', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.13', 'Operadores de asignación')}}</td> - <td>{{Spec2('ES1')}}</td> - <td> - <p>Definición inicial</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome para Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Vea_tambien">Vea tambien</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators">Operadores Aritméticos</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html b/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html deleted file mode 100644 index c4276c1c95..0000000000 --- a/files/es/web/javascript/referencia/operadores/bitwise_operators/index.html +++ /dev/null @@ -1,722 +0,0 @@ ---- -title: Operadores a nivel de bit -slug: Web/JavaScript/Referencia/Operadores/Bitwise_Operators -tags: - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p><strong>Los operadores a nivel de bit </strong>tratan sus operandos como una secuencia de 32 bits (unos y ceros) en lugar de <a href="/es/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">números</a> decimales, hexadecimales u octales. Por ejemplo, el número decimal nueve tiene una representación binaria de 1001. Los operadores a nivel de bit realizan las operaciones en esas representaciones binarias, pero los valores devueltos son los valores numéricos estándar de JavaScript.</p> - -<p>La siguiente tabla resume los operadores a nivel de bit de JavaScript:</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descripción</th> - </tr> - <tr> - <td><a href="#Bitwise_AND">AND binario</a></td> - <td><code>a & b</code></td> - <td>Devuelve un uno en cada posición en la que ambos operandos sea uno.</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">OR binario </a></td> - <td><code>a | b</code></td> - <td>Devuelve un uno en cada posición en la que uno o ambos operandos sea uno.</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR</a></td> - <td><code>a ^ b</code></td> - <td>Devuelve un uno en cada posición en la que los bits correspondientes en cada uno de los operandos, pero no en ambos, es uno. </td> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT</a></td> - <td><code>~ a</code></td> - <td>Invierte los bits del operando.</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift</a></td> - <td><code>a << b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la izquierda, desplazando en ceros desde la derecha.</td> - </tr> - <tr> - <td><a href="#Right_shift">Sign-propagating right shift</a></td> - <td><code>a >> b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, descartando los bits desplazados fuera.</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Zero-fill right shift</a></td> - <td><code>a >>> b</code></td> - <td>Desplaza en representación binaria <code>b</code> (< 32) bits a la derecha, desplazando en ceros desde la izquierda.</td> - </tr> - </tbody> -</table> - -<h2 id="Enteros_con_signo_de_32_bits">Enteros con signo de 32 bits</h2> - -<p>Los operandos de todas las operaciones bitwise son convertidos a enteros con signo de 32 bits en complemento a dos. Complemento a dos significa que el equivalente negativo de un número (por ejemplo, 5 y -5) es igual a todos los bits del número invertido (un NOT del número, también conocido como el compelemento a uno del número) más uno. Por ejemplo, a continuación se codifica el entero 314:</p> - -<pre>00000000000000000000000100111010 -</pre> - -<p>A continuación se codifica <code>~314</code> como complemento a uno de 314:</p> - -<pre>11111111111111111111111011000101 -</pre> - -<p>Por último, se codifica <code>-314 como complemento a dos de </code><code>314</code>:</p> - -<pre>11111111111111111111111011000110 -</pre> - -<p>El complemento a dos garantiza que el bit más a la izquierda es 0 cuando el número es positivo, y 1 cuando el número es negativo. Por esto es llamado <em>bit de signo.</em></p> - -<p>El número 0 es el entero compuesto íntegramente por bits en 0.</p> - -<pre>0 (base 10) = 00000000000000000000000000000000 (base 2) - -</pre> - -<p>El número -1 es el entero compuesto íntegramente por bits de 1.</p> - -<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2) -</pre> - -<p>El número <code>-2147483648</code> (representación hexadecimal: <code>-0x80000000</code>) es el entero compuesto íntegramente por bits de 0 excepto el de más a la izquierda.</p> - -<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2) -</pre> - -<p>El número <code>2147483647</code> (representación hexadecimal: <code>0x7fffffff</code>) es el entero compuesto íntegramente por bits de 1 excepto el de más a la izquierda. </p> - -<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2) -</pre> - -<p>Los números <code>-2147483648</code> and <code>2147483647</code> son el mínimo y el máximo entero que se pueden representar con signo de 32 bits.</p> - -<h2 id="Operadores_lógicos_a_nivel_de_bit">Operadores lógicos<strong> a nivel de bit</strong></h2> - -<p>Conceptualmente, los operadores lógicos bit a bit funcionan de la siguiente manera:</p> - -<ul> - <li>Los operandos son convertidos en enteros de 32 bits y representados por series de bits (ceros y unos). Los numeros con más de 32 bits se convierten para que sus bits más significativos sean descartados. Por ejemplo, el siguiente entero con más de 32 bits se convierte a un entero de 32 bits.</li> - <li> - <pre><code>Antes: 1100110111110100000000000000110000000000001 -Después: 10100000000000000110000000000001</code></pre> - </li> - <li>Cada bit del primer operando es emparejado con su bit correspondiente en el segundo operando: el primero con el primero, el segundo con el segundo, y así.</li> - <li>El operador se aplica a cada pareja de bits, y el resultado se construye bit a bit. </li> -</ul> - -<h3 id="(Bitwise_AND_o_AND_a_nivel_de_bits)"><a name="Bitwise_AND">& (Bitwise AND o AND a nivel de bits)</a></h3> - -<p>Corresponde al operador lógico & o "Y". Ejecuta la operación AND en cada par de bits, <code>a</code> AND <code>b</code> es 1 sólo si tanto a como b son 1. La tabla de verdad del operador AND es:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a AND b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) -</pre> - -<p>El resultado de hacer un AND de cualquier número x con 0 es 0, mientras que el de hacer un AND de cualquier número x con -1 da como resultado x. </p> - -<h3 id="(Bitwise_OR_o_OR_a_nivel_de_bits)"><a name="Bitwise_OR">| (Bitwise OR o OR a nivel de bits)</a></h3> - -<p>Realiza la operación OR en cada par de bits. a OR b devuelve 1 si a o b son 1. La tabla de verdad para la operación OR es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a OR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) -</pre> - -<p>Ejecutar la operación OR sobre cualquier número x y 0 devuelve x. Ejecutar OR sobre cualquier número X y -1 devuelve -1.</p> - -<h3 id="(Bitwise_XOR_o_XOR_a_nivel_de_bits)"><a name="Bitwise_XOR">^ (Bitwise XOR o XOR a nivel de bits)</a></h3> - -<p>Realiza la operación XOR en cada par de bits. a OR b devuelve 1 si a o b son diferentes. La tabla de verdad para la operación OR es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">b</td> - <td class="header">a XOR b</td> - </tr> - <tr> - <td>0</td> - <td>0</td> - <td>0</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - 14 (base 10) = 00000000000000000000000000001110 (base 2) - -------------------------------- -14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) -</pre> - -<p>Ejecutar la operación XOR sobre cualquier número x y 0 devuelve x. Ejecutar la operación XOR sobre cualquier número x y -1 devuelve ~x</p> - -<h3 id="(Bitwise_NOT_o_Negación_a_nivel_de_bits)"><a name="Bitwise_NOT">~ (Bitwise NOT o Negación a nivel de bits)</a></h3> - -<p>Realiza la operación NOT a cada bit. NOT devuelve el valor invertido ( conocido como complementario). La tabla de verdad para la operación NOT es la siguiente:</p> - -<table class="standard-table"> - <tbody> - <tr> - <td class="header">a</td> - <td class="header">NOT a</td> - </tr> - <tr> - <td>0</td> - <td>1</td> - </tr> - <tr> - <td>1</td> - <td>0</td> - </tr> - </tbody> -</table> - -<p> </p> - -<pre> 9 (base 10) = 00000000000000000000000000001001 (base 2) - -------------------------------- -~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) -</pre> - -<p> </p> - -<p>Ejecutar la operación NOT sobre cualquier número x devuelve -(x+1). Por ejemplo -5 devuelve 4.</p> - -<p>Ejemplo con indexOf:</p> - -<pre class="brush: js">var str = 'rawr'; -var searchFor = 'a'; - -// esta es un forma alternativa de escribir (-1*str.indexOf('a') <= 0) -if (~str.indexOf(searchFor)) { - // searchFor esta en el string -} else { - // searchFor no esta en el string -} - -// aquí verás los valores que retorna (~str.indexOf(searchFor)) -// r == -1 -// a == -2 -// w == -3 -</pre> - -<h2 id="Operadores_de_desplazamiento_a_nivel_de_bit">Operadores de desplazamiento <strong>a nivel de bit</strong></h2> - -<p>Los operadores de desplazamiento toman dos operandos: el primero es la cantidad a ser desplazados, y el segundo especifica el número de posiciones bits que el primer operando debe ser desplazado. El sentido del operador de desplazamiento es determinado por el operador utilizado.</p> - -<p>Shift operators u operadores de desplazamiento, convierten sus operandos a enteros de 32-bit en orden big-endian y retorna el resultado del mismo tipo que el operando izquierdo. El operador derecho debe ser menor que 32, de lo contrario solo se usaran los ultimos cinco bits mas bajos.</p> - -<h3 id="<<_(Desplazamiento_a_la_izquierda)"><a name="Left_shift"><< (Desplazamiento a la izquierda)</a></h3> - -<p>Este operador desplaza el primer operando el número especificado de bits a la izquierda. Los bits en exceso desplazados hacia la izquierda se descartan. Los bits cero se desplazan desde la derecha.</p> - -<p>Por ejemplo, 9 << 2 devuelve 36:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10) -</pre> - -<p>Desplazar a la izquierda cualquier número <strong>x</strong> por <strong>y</strong> bits da por resultado <strong>x * 2^y</strong>.</p> - -<h3 id=">>_(Desplazamiento_a_la_derecha_con_propagación_de_signo_o_Desplazamiento_aritmético_a_la_derecha)"><a name="Right_shift">>> (Desplazamiento a la derecha con propagación de signo o </a><a name="Unsigned_right_shift">Desplazamiento aritmético a la derecha</a><a name="Right_shift">)</a></h3> - -<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Las copias del bit del extremo izquierdo se desplazan desde la izquierda. Como el nuevo bit más a la izquierda tiene el mismo valor que el bit anterior más a la izquierda, el bit de signo (el bit más a la izquierda) no cambia. De ahí el nombre "propagación de signo".</p> - -<p>Por ejemplo, <code>9 >> 2</code> devuelve 2:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Igualmente, <code>-9 >> 2</code> devuelve-3, porque se mantiene el signo:</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10) -</pre> - -<h3 id=">>>_(Desplazamiento_a_la_derecha_con_relleno_de_ceros_o_Desplazamiento_lógico_)"><a name="Unsigned_right_shift">>>> (Desplazamiento a la derecha con relleno de ceros o Desplazamiento lógico )</a></h3> - -<p>Este operador desplaza el primer operando la cantidad de bits especificada a la derecha. Los bits en exceso desplazados a la derecha se descartan. Ceros son despalzadas o introducidos desde la izquierda. El bit de signo aútomaticamente se convierte 0, así que el resultado siempre es pósitivo. </p> - -<p><br> - Para números no negativos, el desplazamiento lógico y arítmetico dan el mismo resultado. Por ejemplo, <code>9 >>> 2</code> da 2, al igual que <code>9 >> 2</code>:</p> - -<pre> 9 (base 10): 00000000000000000000000000001001 (base 2) - -------------------------------- -9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10) -</pre> - -<p>Sin embargo, no es el caso para números negativos. Por ejemplo, <code>-9 >>> 2</code> da 1073741821, que es diferente de <code>-9 >> 2</code> (que da -3):</p> - -<pre> -9 (base 10): 11111111111111111111111111110111 (base 2) - -------------------------------- --9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Banderas_y_máscaras_de_bits">Banderas y máscaras de bits</h3> - -<p>Los operadores lógicos a nivel de bits se utilizan a menudo para crear, manipular y leer secuencias de indicadores, que son como variables binarias. Se podrían usar variables en lugar de estas secuencias, pero las banderas binarias toman mucho menos memoria (por un factor de 32).</p> - -<p>Supongamos que hay 4 banderas:</p> - -<ul> - <li>bandera A: tenemos un problema de hormigas</li> - <li>bandera B: somos dueños de un murciélago</li> - <li>bandera C: somos dueños de un gato</li> - <li>bandera D: somos dueños de un pato</li> -</ul> - -<p>Estas banderas están representadas por una secuencia de bits: DCBA. Cuando se establece un indicador, tiene un valor de 1. Cuando se elimina un indicador, tiene un valor de 0. Suponga que los indicadores de una variable tienen el valor binario 0101:</p> - -<pre class="brush: js">var flags = 5; // binary 0101 -</pre> - -<p>Este valor indica:</p> - -<ul> - <li>la bandera A es verdadera (tenemos un problema de hormigas);</li> - <li>la bandera B es falsa (no tenemos un murciélago);</li> - <li>la bandera C es verdadera (somos dueños de un gato);</li> - <li>la bandera D es falsa (no tenemos pato);</li> -</ul> - -<p>Dado que los operadores bitwise son de 32 bits, 0101 es en realidad 0000000000000000000000000000000101, pero los ceros anteriores pueden ignorarse ya que no contienen información significativa.</p> - -<p>Una máscara de bits es una secuencia de bits que puede manipular y / o leer banderas. Normalmente, se define una máscara de bits "primitiva" para cada bandera:</p> - -<pre class="brush: js">var FLAG_A = 1; // 0001 -var FLAG_B = 2; // 0010 -var FLAG_C = 4; // 0100 -var FLAG_D = 8; // 1000 -</pre> - -<p>Se pueden crear nuevas máscaras de bits utilizando los operadores lógicos a nivel de bits en estas máscaras de bits primitivas. Por ejemplo, la máscara de bits 1011 se puede crear mediante ORing FLAG_A, FLAG_B y FLAG_D:</p> - -<pre class="brush: js">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 -</pre> - -<p>Los valores de los indicadores individuales se pueden extraer mediante AND con una máscara de bits, donde cada bit con el valor de uno "extraerá" el indicador correspondiente. La máscara de bits enmascara las marcas no relevantes mediante AND con ceros (de ahí el término "bitmask"). Por ejemplo, la máscara de bits 0101 se puede usar para ver si el indicador C está establecido:</p> - -<pre class="brush: js">// if we own a cat -if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true - // do stuff -} -</pre> - -<p>Una máscara de bits con varios indicadores establecidos actúa como un "either/or". Por ejemplo, los siguientes dos son equivalentes:</p> - -<pre class="brush: js">// if we own a bat or we own a cat -// (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true -if ((flags & FLAG_B) || (flags & FLAG_C)) { - // do stuff -} -</pre> - -<pre class="brush: js">// if we own a bat or cat -var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 -if (flags & mask) { // 0101 & 0110 => 0100 => true - // do stuff -} -</pre> - -<p>Los indicadores se pueden establecer mediante ORing con una máscara de bits, donde cada bit con el valor uno establecerá el indicador correspondiente, si ese indicador no está ya establecido. Por ejemplo, la máscara de bits 1100 se puede utilizar para establecer los indicadores C y D:</p> - -<pre class="brush: js">// yes, we own a cat and a duck -var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 -flags |= mask; // 0101 | 1100 => 1101 -</pre> - -<p>Los indicadores se pueden borrar ANDing con una máscara de bits, donde cada bit con el valor cero borrará el indicador correspondiente, si aún no se ha borrado. Esta máscara de bits se puede crear NOTing las máscaras de bits primitivas. Por ejemplo, la máscara de bits 1010 se puede utilizar para borrar los indicadores A y C:</p> - -<pre class="brush: js">// no, we don't have an ant problem or own a cat -var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>La máscara también podría haberse creado con ~ FLAG_A & ~ FLAG_C (ley de De Morgan):</p> - -<pre class="brush: js">// no, we don't have an ant problem, and we don't own a cat -var mask = ~FLAG_A & ~FLAG_C; -flags &= mask; // 1101 & 1010 => 1000 -</pre> - -<p>Los indicadores se pueden alternar mediante XORing con una máscara de bits, donde cada bit con el valor uno cambiará el indicador correspondiente. Por ejemplo, la máscara de bits 0110 se puede utilizar para alternar los indicadores B y C:</p> - -<pre class="brush: js">// if we didn't have a bat, we have one now, -// and if we did have one, bye-bye bat -// same thing for cats -var mask = FLAG_B | FLAG_C; -flags = flags ^ mask; // 1100 ^ 0110 => 1010 -</pre> - -<p>Finalmente, todas las banderas se pueden voltear con el operador NOT:</p> - -<pre class="brush: js">// entering parallel universe... -flags = ~flags; // ~1010 => 0101 -</pre> - -<h3 id="Fragmentos_de_conversión">Fragmentos de conversión</h3> - -<p>Convert a binary <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="/en-US/docs/JavaScript/Reference/Global_Objects/String">String</a></code> to a decimal <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" title="/en-US/docs/JavaScript/Reference/Global_Objects/Number">Number</a></code>:</p> - -<pre class="brush: js">var sBinString = "1011"; -var nMyNumber = parseInt(sBinString, 2); -alert(nMyNumber); // prints 11, i.e. 1011 -</pre> - -<p> </p> - -<p>Convierte una cadena binaria a un número decimal:</p> - -<p> </p> - -<pre class="brush: js">var nMyNumber = 11; -var sBinString = nMyNumber.toString(2); -alert(sBinString); // prints 1011, i.e. 11 -</pre> - -<h3 id="Automatiza_la_creación_de_una_máscara.">Automatiza la creación de una máscara.</h3> - -<p>Si tiene que crear muchas máscaras a partir de algunos valores booleanos, puede automatizar el proceso:</p> - -<pre class="brush: js">function createMask () { - var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; - for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); - return nMask; -} -var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011 -var mask2 = createMask(false, false, true); // 4, i.e.: 0100 -var mask3 = createMask(true); // 1, i.e.: 0001 -// etc. - -alert(mask1); // prints 11, i.e.: 1011 -</pre> - -<h3 id="Algoritmo_inverso_una_matriz_de_valores_booleanos_de_una_máscara">Algoritmo inverso: una matriz de valores booleanos de una máscara</h3> - -<p>Si desea crear una matriz de valores booleanos a partir de una máscara, puede usar este código:</p> - -<pre class="brush: js">function arrayFromMask (nMask) { - // nMask must be between -2147483648 and 2147483647 - if (nMask > 0x7fffffff || nMask < -0x80000000) { - throw new TypeError("arrayFromMask - out of range"); - } - for (var nShifted = nMask, aFromMask = []; nShifted; - aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); - return aFromMask; -} - -var array1 = arrayFromMask(11); -var array2 = arrayFromMask(4); -var array3 = arrayFromMask(1); - -alert("[" + array1.join(", ") + "]"); -// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011 -</pre> - -<p>Puedes probar ambos algoritmos al mismo tiempo ...</p> - -<pre class="brush: js">var nTest = 19; // our custom mask -var nResult = createMask.apply(this, arrayFromMask(nTest)); - -alert(nResult); // 19 -</pre> - -<p>Solo para fines didácticos (ya que existe el método Number.toString (2)), mostramos cómo es posible modificar el algoritmo arrayFromMask para crear una cadena que contenga la representación binaria de un número, en lugar de una matriz de booleanos:</p> - -<pre class="brush: js">function createBinaryString (nMask) { - // nMask must be between -2147483648 and 2147483647 - for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; - nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); - return sMask; -} - -var string1 = createBinaryString(11); -var string2 = createBinaryString(4); -var string3 = createBinaryString(1); - -alert(string1); -// prints 00000000000000000000000000001011, i.e. 11 -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definicion inicial</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido en varias secciones de la especificación: operador NOT a nivel de bit, operadores de cambio a nivel de bit, operadores a nivel de bit binarios</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><a href="#Bitwise_NOT">Bitwise NOT (<code>~</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_AND">Bitwise AND (<code>&</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_OR">Bitwise OR (<code>|</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Bitwise_XOR">Bitwise XOR (<code>^</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Left_shift">Left shift (<code><<</code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Right_shift">Right shift (<code>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><a href="#Unsigned_right_shift">Unsigned right shift (<code>>>></code>)</a></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">Operadores logicos</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/comparison_operators/index.html b/files/es/web/javascript/referencia/operadores/comparison_operators/index.html deleted file mode 100644 index 8685790d2c..0000000000 --- a/files/es/web/javascript/referencia/operadores/comparison_operators/index.html +++ /dev/null @@ -1,262 +0,0 @@ ---- -title: Operadores de Comparación -slug: Web/JavaScript/Referencia/Operadores/Comparison_Operators -tags: - - JavaScript - - Operador - - Referencia -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>JavaScript tiene comparaciones estrictas y de conversión de tipos. Una comparación estricta (por ejemplo, <code>===</code>) solo es verdadera si los operandos son del mismo tipo y los contenidos coinciden. La comparación abstracta más comúnmente utilizada (por ejemplo, <code>==</code>) convierte los operandos al mismo tipo antes de hacer la comparación. Para las comparaciones abstractas relacionales (p. Ej., <code><=</code>), Los operandos primero se convierten en primitivos, y luego en el mismo tipo, antes de la comparación.</p> - -<p>Las cadenas se comparan en base al orden lexicográfico estándar, utilizando valores Unicode.</p> - -<pre class="brush: js notranslate">console.log(1 == 1) -// Esperamos True - -console.log("1" == 1 ) -// Esperamos true - -console.log( 1 === 1) -// Esperamos true - -console.log( "1" === 1) -// Esperamos false -</pre> - -<p>Características de las comparaciones:</p> - -<ul> - <li>Dos cadenas son estrictamente iguales cuando tienen la misma secuencia de caracteres, la misma longitud y los mismos caracteres en las posiciones correspondientes.</li> - <li>Dos números son estrictamente iguales cuando son numéricamente iguales (tienen el mismo valor numérico). <a href="/es/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> no es igual a nada, incluido NaN. Los ceros positivos y negativos son iguales entre sí. </li> - <li>Dos operandos booleanos son estrictamente iguales si ambos son <code>true</code> o ambos son <code>false</code>.</li> - <li>Dos objetos distintos nunca son iguales para comparaciones estrictas o abstractas.</li> - <li>Una expresión que compara objetos solo es verdadera si los operandos hacen referencia al mismo objeto.</li> - <li>Los tipos Null y Undefined son estrictamente iguales a ellos mismos y abstractivamente iguales entre sí.</li> -</ul> - -<h2 id="Operadores_de_igualdad">Operadores de igualdad</h2> - -<h3 id="Igualdad"><a name="Equality">Igualdad (==)</a></h3> - -<p>El operador de igualdad convierte los operandos si <strong>no son del mismo tipo</strong>, luego aplica una comparación estricta. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que son iguales cuando los operandos se refieren al mismo objeto en la memoria.</p> - -<h4 id="Sintaxis">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x == y -</pre> - -<h4 id="Ejemplos">Ejemplos</h4> - -<pre class="brush: js notranslate">1 == 1 // true -'1' == 1 // true -1 == '1' // true -0 == false // true -0 == null // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 == object2 // false -0 == undefined // false -null == undefined // true -</pre> - -<h3 id="Desigualdad_!"><a name="Inequality">Desigualdad (!=)</a></h3> - -<p>El operador de desigualdad devuelve verdadero si los operandos no son iguales. Si los dos operandos <strong>no son del mismo tipo</strong>, JavaScript intenta convertir los operandos a un tipo apropiado para la comparación. Si <strong>ambos operandos son objetos</strong>, entonces JavaScript compara las referencias internas que no son iguales cuando los operandos se refieren a diferentes objetos en la memoria.</p> - -<h4 id="Sintaxis_2">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x != y</pre> - -<h4 id="Ejemplos_2">Ejemplos</h4> - -<pre class="brush: js notranslate">1 != 2 // true -1 != '1' // false -1 != "1" // false -1 != true // false -0 != false // false -</pre> - -<h3 id="Identidad_igualdad_estricta"><a name="Identity">Identidad / igualdad estricta (===)</a></h3> - -<p>El operador de identidad devuelve verdadero si los operandos son estrictamente iguales (ver arriba) <strong>sin conversión de tipo</strong>.</p> - -<h4 id="Sintaxis_3">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x === y</pre> - -<h4 id="Ejemplos_3">Ejemplos</h4> - -<pre class="brush: js notranslate">3 === 3 // true -3 === '3' // false -var object1 = {'key': 'value'}, object2 = {'key': 'value'}; -object1 === object2 // false</pre> - - - -<h3 id="Sin_identidad_desigualdad_estricta_!"><a name="Nonidentity">Sin identidad / desigualdad estricta (!==)</a></h3> - -<p>El operador sin identidad devuelve verdadero si los operandos <strong>no son iguales y / o no del mismo tipo</strong>.</p> - -<h4 id="Sintaxis_4">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x !== y</pre> - -<h4 id="Ejemplos_4">Ejemplos</h4> - -<pre class="brush: js notranslate">3 !== '3' // true -4 !== 3 // true -</pre> - -<h2 id="Operadores_relacionales">Operadores relacionales</h2> - -<p>Cada uno de estos operadores llamará a la función <code>valueOf()</code> en cada operando antes de realizar una comparación.</p> - -<h3 id="Operador_mayor_que_>"><a name="Greater_than_operator">Operador mayor que (>)</a></h3> - -<p>El operador mayor que, devuelve verdadero si el operando izquierdo es mayor que el operando derecho.</p> - -<h4 id="Sintaxis_5">Sintaxis</h4> - -<pre class="syntaxbox notranslate">x > y</pre> - -<h4 id="Ejemplos_5">Ejemplos</h4> - -<pre class="brush: js notranslate">4 > 3 // true -</pre> - -<h3 id="Operador_mayor_o_igual_>"><a name="Greater_than_or_equal_operator">Operador mayor o igual (>=)</a></h3> - -<p>El operador mayor o igual que, devuelve verdadero si el operando izquierdo es mayor o igual que el operando derecho.</p> - -<h4 id="Sintaxis_6">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x >= y</pre> - -<h4 id="Ejemplos_6">Ejemplos</h4> - -<pre class="brush: js notranslate">4 >= 3 // true -3 >= 3 // true -</pre> - -<h3 id="Operador_menor_que_<"><a name="Less_than_operator"> Operador menor que (<)</a></h3> - -<p>El operador menor que devuelve verdadero si el operando de la izquierda es menor que el operando de la derecha.</p> - -<h4 id="Sintaxis_7">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x < y</pre> - -<h4 id="Ejemplos_7">Ejemplos</h4> - -<pre class="brush: js notranslate">3 < 4 // true -</pre> - -<h3 id="Operador_menor_o_igual_<"><a id="Less_than_or_equal_operator" name="Less_than_or_equal_operator">Operador menor o igual (<=)</a></h3> - -<p>El operador menor o igual devuelve verdadero si el operando izquierdo es menor o igual que el operando derecho.</p> - -<h4 id="Sintaxis_8">Sintaxis</h4> - -<pre class="syntaxbox notranslate"> x <= y</pre> - -<h4 id="Ejemplos_8">Ejemplos</h4> - -<pre class="brush: js notranslate">3 <= 4 // true -</pre> - -<h2 id="Usando_los_operadores_de_igualdad">Usando los operadores de igualdad</h2> - -<p>Los operadores de igualdad estándar (<code>==</code> y <code>!=</code>) utilizan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">Algoritmo de Comparación de Igualdad Abstracta</a> para comparar dos operandos. Si los operandos son de tipos diferentes, intentará convertirlos al mismo tipo antes de hacer la comparación, por ejemplo, en la expresión <code>5 == '5'</code>, la cadena de la derecha se convierte a {{jsxref("Number")}} antes de realizar la comparación.</p> - -<p>Los operadores de igualdad estricta (<code>===</code> y <code>!==</code>) usan el <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">Algoritmo de Comparación de Igualdad Estricta</a> y están destinados a realizar comparaciones de igualdad en operandos del mismo tipo. Si los operandos son de tipos diferentes, el resultado siempre es <code>false</code>, entonces <code>5 !== '5'</code>.</p> - -<p>Utilice operadores de igualdad estrictos si los operandos deben ser de un tipo específico así como de valor o si el tipo exacto de los operandos es importante. De lo contrario, utilice los operadores de igualdad estándar, que le permiten comparar la identidad de dos operandos, incluso si no son del mismo tipo.</p> - -<p>Cuando la conversión de tipo está involucrada en la comparación (es decir, comparación no estricta), JavaScript convierte los tipos {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}} o {{jsxref("Object")}} operandos de la siguiente manera:</p> - -<ul> - <li>Al comparar un número y una cadena, la cadena se convierte en un valor numérico. JavaScript intenta convertir el literal numérico de cadena a un valor de tipo <code>Number</code>. Primero, un valor matemático se deriva del literal numérico de cadena. A continuación, este valor se redondea al valor de tipo <code>Number</code> más cercano.</li> - <li>Si uno de los operandos es <code>Boolean</code>, el operando <code>Boolean</code> se convierte en 1 si es <code>true</code> y +0 si es <code>false</code>.</li> - <li>Si un objeto se compara con un número o cadena, JavaScript intenta devolver el valor predeterminado para el objeto. Los operadores intentan convertir el objeto a un valor primitivo, un valor <code>String</code> o <code>Number</code>, utilizando los métodos <code>valueOf</code> y <code>toString</code> de los objetos. Si falla este intento de convertir el objeto, se genera un error de tiempo de ejecución.</li> - <li>Tenga en cuenta que un objeto se convierte en una primitiva si, y solo si, su comparando es una primitiva. Si ambos operandos son objetos, se comparan como objetos, y la prueba de igualdad es verdadera solo si ambos refieren el mismo objeto.</li> -</ul> - -<div class="note"><strong>Nota:</strong> Los objetos de cadena son Tipo Objeto, no String! Los objetos de cadena rara vez se utilizan, por lo que los siguientes resultados pueden ser sorprendentes:</div> - -<pre class="brush:js notranslate">// true, ya que ambos operandos son de tipo String (es decir, primitivas de cadena): -'foo' === 'foo' - -var a = new String('foo'); -var b = new String('foo'); - -// false como a y b son tipo Objeto y referencia a diferentes objetos -a == b - -// false como a y b son tipo Objeto y referencia a diferentes objetos -a === b - -// true como a y 'foo' son de tipo diferente y, el Objeto (a) -// se convierte en cadena 'foo' antes de la comparación -a == 'foo'</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial. Implementado en JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> - <p>Agrega <code>===</code> y <code>!==</code> operadores. Implementado en JavaScript 1.3</p> - </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.8">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.9">Operadores de Igualdad</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">Operadores de Igualdad</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-relational-operators">Operadores Relacionales</a>, <a href="http://tc39.github.io/ecma262/#sec-equality-operators">Operadores de Igualdad</a></p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - - - -<p>{{Compat("javascript.operators.comparison")}}</p> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li>{{jsxref("Object.is()")}}</li> - <li>{{jsxref("Math.sign()")}}</li> - <li><a href="/es/docs/Web/JavaScript/Equality_comparisons_and_sameness">Comparaciones de igualdad y uniformidad</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html b/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html deleted file mode 100644 index 4c9cb860a9..0000000000 --- a/files/es/web/javascript/referencia/operadores/operadores_lógicos/index.html +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: Operadores lógicos -slug: Web/JavaScript/Referencia/Operadores/Operadores_lógicos -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -<div>{{jsSidebar("Operadores_lógicos")}}</div> - -<p>Los operadores lógicos se usan típicamente con valores {{jsxref("Boolean")}}. En tal caso, regresan un valor Boolean. Sin embargo, los operadores && y || regresan en realidad el valor de uno de los operandos especificados, por lo que si estos operadores se usan con valores no Boolean, posiblemente regresen un valor no Boolean.</p> - -<h2 id="Descripción">Descripción</h2> - -<p>Los operadores lógicos se describen en la tabla siguiente:</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Operador</th> - <th>Uso</th> - <th>Descripción</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td><code><em>expr1</em> && <em>expr2</em></code></td> - <td> - <p>Regresa <code>expr1 </code>si tal puede convertirse a false; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, && regresa true si ambos operandos son verdaderos; de lo contrario regresa false.</p> - </td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td><code><em>expr1</em> || <em>expr2</em></code></td> - <td> - <p>Regresa<code> expr1</code> si tal puede convertirse a true; de lo contrario, regresa <code>expr2</code>. De esta forma, cuando se usa con valores Boolean, || regresa true si cualquier operando es verdadero; pero si ambos son falsos, regresa "false".</p> - </td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td><code>!<em>expr</em></code></td> - <td> - <p>Regresa false si su único operando puede convertirse a true; de lo contrario, regresa true.</p> - </td> - </tr> - </tbody> -</table> - -<p>Algunos ejemplos de expresiones que pueden convertirse a false son aquellas que evalúan a null, 0, un string vacío (""), o undefined.</p> - -<p>A pesar de que los operadores && y || pueden ser usados con operandos que no son valores Boolean, aún pueden ser considerados como operadores Boolean porque sus valores de regreso siempre pueden convertirse a valores Boolean.</p> - -<h3 id="Evaluación_contra_corto_circuitos">Evaluación contra "corto circuitos"</h3> - -<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, se prueban con una evaluación contra posibles "cortos circuitos" usando las siguientes normas:</p> - -<ul> - <li><code>false && (<em>cualquier valor)</em></code> evalúa a "false".</li> - <li><code>true || (<em>cualquier valor)</em></code> evalúa a "true".</li> -</ul> - -<p>Las reglas de lógica garantizan que estas evaluaciones siempre son correctas. Se debe notar que la parte de "cualquier valor" en las expresiones anteriores no se evalúa, para que tal acción no afecte de ninguna forma. Además, es de notar que la parte de "cualquier valor" en las expresiones anteriores debe ser cualquier expresión lógica (lo que se indica con los paréntesis).</p> - -<p>Por ejemplo, las siguientes dos expresiones son equivalentes.</p> - -<pre class="brush: js">function shortCircuitEvaluation() { - doSomething() || doSomethingElse() -} - -function equivalentEvaluation() { - var flag = doSomething(); - if (!flag) { - doSomethingElse(); - } -} -</pre> - -<p>Sin embargo, las siguientes expresiones no son equivalentes debido a la <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">precedencia de operadores</a>, y con tal ejemplo se enfatiza la importancia de que la parte derecha sea una única expresión (agrupada en paréntesis si es necesario).</p> - -<pre class="brush: js">false && true || true // regresa true -false && (true || true) // regresa false</pre> - -<h3 id="AND_()_lógico"><a name="Logical_AND">AND (<code>&&</code>) lógico</a></h3> - -<p>El siguiente código muestra ejemplos del operador && (AND lógico).</p> - -<pre class="brush: js">a1 = true && true // t && t regresa true -a2 = true && false // t && f regresa false -a3 = false && true // f && t regresa false -a4 = false && (3 == 4) // f && f regresa false -a5 = "Cat" && "Dog" // t && t regresa "Dog" -a6 = false && "Cat" // f && t regresa false -a7 = "Cat" && false // t && f regresa false -</pre> - -<h3 id="OR_()_lógico"><a name="Logical_OR">OR (<code>||</code>) lógico</a></h3> - -<p>El siguiente código muestra ejemplos del operador <code>||</code> (OR lógico).</p> - -<pre class="brush: js">o1 = true || true // t || t regresa true -o2 = false || true // f || t regresa true -o3 = true || false // t || f regresa true -o4 = false || (3 == 4) // f || f regresa false -o5 = "Cat" || "Dog" // t || t regresa "Cat" -o6 = false || "Cat" // f || t regresa "Cat" -o7 = "Cat" || false // t || f regresa "Cat" -</pre> - -<h3 id="Logical_NOT_(!)"><a name="Logical_NOT">Logical NOT (<code>!</code>)</a></h3> - -<p>El siguiente código muestra ejemplos del operador <code>!</code> (NOT lógico).</p> - -<pre class="brush: js">n1 = !true // !t regresa false -n2 = !false // !f regresa true -n3 = !"Cat" // !t regresa false -</pre> - -<h3 id="Reglas_de_conversión">Reglas de conversión</h3> - -<h4 id="Convertir_de_AND_a_OR">Convertir de AND a OR</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 && bCondition2</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2)</pre> - -<h4 id="Convertir_de_OR_a_AND">Convertir de OR a AND</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 || bCondition2</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 && !bCondition2)</pre> - -<h4 id="Convertir_entre_operadores_NOT">Convertir entre operadores NOT</h4> - -<p>la siguiente operación que involucra Booleans:</p> - -<pre class="brush: js">!!bCondition</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">bCondition</pre> - -<h3 id="Eliminando_paréntesis_anidados">Eliminando paréntesis anidados</h3> - -<p>Ya que las expresiones lógicas son evaluadas de izquierda a derecha, siempre es posible eliminar paréntesis en una expresión compleja, si se siguen ciertas reglas.</p> - -<h4 id="Eliminando_operadores_AND_anidados">Eliminando operadores AND anidados</h4> - -<p>La siguiente operación compleja que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 || (bCondition2 && bCondition3)</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">bCondition1 || bCondition2 && bCondition3</pre> - -<h4 id="Eliminando_operadores_OR_anidados">Eliminando operadores OR anidados</h4> - -<p>La siguiente operación compleja que involucra Booleans:</p> - -<pre class="brush: js">bCondition1 && (bCondition2 || bCondition3)</pre> - -<p>siempre es igual a:</p> - -<pre class="brush: js">!(!bCondition1 || !bCondition2 && !bCondition3)</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentarios</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Definición inicial.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> - <p>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.11">Binary Logical Operators</a></p> - </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Definido en varias secciones de la especificación: <a href="http://tc39.github.io/ecma262/#sec-logical-not-operator">Logical NOT Operator</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-logical-operators">Binary Logical Operators</a></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>AND (<code>&&</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>OR (<code>||</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td>NOT (<code>!</code>) lógico</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Operaciones binarias</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/operadores/spread_operator/index.html b/files/es/web/javascript/referencia/operadores/spread_operator/index.html deleted file mode 100644 index 050a2026f6..0000000000 --- a/files/es/web/javascript/referencia/operadores/spread_operator/index.html +++ /dev/null @@ -1,220 +0,0 @@ ---- -title: Operador de propagación -slug: Web/JavaScript/Referencia/Operadores/Spread_operator -tags: - - Experimental - - Expérimental(2) - - JavaScript - - Operador -translation_of: Web/JavaScript/Reference/Operators/Spread_syntax -translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>El operador de propagación <em><strong>spread operator</strong></em> permite que una expresión sea expandida en situaciones donde se esperan múltiples argumentos (llamadas a funciones) o múltiples elementos (arrays literales).</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Llamadas a funciones:</p> - -<pre class="brush: js">f(...iterableObj); -</pre> - -<p>Arrays literales:</p> - -<pre class="brush: js">[...iterableObj, 4, 5, 6]</pre> - -<p>Desestructuración <em>destructuring</em>:</p> - -<pre class="brush: js">[a, b, ...iterableObj] = [1, 2, 3, 4, 5];</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Un_mejor_método_apply">Un mejor método apply</h3> - -<p><strong>Ejemplo:</strong> Es común usar {{jsxref( "Function.prototype.apply")}} en casos donde se require un array como contenedor de los argumentos que se enviarán a una llamada de función:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f.apply(null, args);</pre> - -<p>Con el operador spread de ES6, el ejemplo anterior se puede rescribir como:</p> - -<pre class="brush: js">function f(x, y, z) { } -var args = [0, 1, 2]; -f(...args);</pre> - -<p>Cualquier argumento en la lista de argumentos puede usar la sintaxis de propagación <em>spread, </em>donde además puede ser usada varias veces.</p> - -<pre class="brush: js">function f(v, w, x, y, z) { } -var args = [0, 1]; -f(-1, ...args, 2, ...[3]);</pre> - -<h3 id="Un_array_literal_mas_poderoso">Un array literal mas poderoso</h3> - -<p><strong>Ejemplo:</strong> La sintaxis de un array literal que existe hoy en día no es suficiente si se requiere agregar los elementos de un array dentro de otro array existente. Actualmente se debe escribir código imperativo usando una combinación de métodos como <code>push</code>, <code>splice</code>, <code>concat</code>, etc. Con la sintaxis de propagación <em>spread</em> esta tarea resulta mucho mas concisa:</p> - -<pre class="brush: js">var parts = ['shoulder', 'knees']; -var lyrics = ['head', ...parts, 'and', 'toes'];</pre> - -<p>Al igual que con una lista de argumentos, en este caso también puede ser usado en cualquier ubicación dentro del array literal, además de poderse incluir una o varias veces.</p> - -<h3 id="Combinación_del_método_apply_y_el_operador_new">Combinación del método apply y el operador new</h3> - -<p><strong>Ejemplo:</strong> En ES5 no es posible combinar <code>new</code> y <code>apply</code> (en ES5 el método <code>apply</code> crea un <code>[[Call]]</code> y no un <code>[[Construct]]</code>). En ES6 la sintaxis de propagación <em>spread</em> soporta esto de forma natural:</p> - -<pre class="brush: js">var dateFields = readDateFields(database); -var d = new Date(...dateFields);</pre> - -<h3 id="Un_método_push_mejorado">Un método push mejorado</h3> - -<p><strong>Ejemplo:</strong> {{jsxref("Global_Objects/Array/push", "push")}} suele usarse para agregar los elementos de un array al final de otro array existente. En ES5 esta tarea puede ser realizada de la siguiente manera:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -// Agregar todos los elementos de arr2 a arr1 -Array.prototype.push.apply(arr1, arr2);</pre> - -<p>Usando el operador de propagación <em>spread</em> de ES6, este sería el resultado:</p> - -<pre class="brush: js">var arr1 = [0, 1, 2]; -var arr2 = [3, 4, 5]; -arr1.push(...arr2);</pre> - -<h3 id="Solo_funciona_para_iterables">Solo funciona para iterables</h3> - -<pre class="brush: js">var obj = {"key1":"value1"}; -function myFunction(x) { - console.log(x); // undefined -} -myFunction(...obj); -var args = [...obj]; -console.log(args, args.length) //[] 0</pre> - -<h2 id="Operador_Rest">Operador Rest</h2> - -<p>El operador <em>Rest</em> es exactamente igual a la sintaxis del operador de propagación, y se utiliza para desestructurar arrays y objetos. En cierto modo, <em>Rest</em> es lo contrario de <em>spread</em>. <em>Spread</em> 'expande' un array en sus elementos, y <em>Rest</em> recoge múltiples elementos y los 'condensa' en uno solo.</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Commentario</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p>{{SpecName('ES6', '#sec-array-initializer', 'Array Initializer')}}<br> - {{SpecName('ES6', '#sec-argument-lists', 'Argument Lists')}}</p> - </td> - <td>{{Spec2('ES6')}}</td> - <td> - <ul> - <li>12.2.4 Array Initializer</li> - <li>12.3.6 Argument Lists</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_en_navegadores">Compatibilidad en navegadores</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Característica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Operación de spread en arrays literales</td> - <td>{{CompatNo}}<br> - <a href="https://code.google.com/p/v8/issues/detail?id=3018">v8 issue 3018</a></td> - <td>{{ CompatGeckoDesktop("16") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operación de spread en llamadas a funciones</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("27") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>7.1</td> - </tr> - <tr> - <td>Operación de spread en desestructuración<br> - <em>destructuring</em></td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("34") }}<br> - {{ CompatGeckoDesktop("36") }} (Symbol.iterator)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Características</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en arrays literales</span></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("16") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en llamadas a funciones</span></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("27") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>iOS 8</td> - </tr> - <tr> - <td><span style="font-size: 12px; line-height: 18px;">Operación de spread en desestructuración</span><br> - <em>destructuring</em></td> - <td>{{CompatUnknown}}</td> - <td>{{ CompatGeckoDesktop("34") }}<br> - {{ CompatGeckoMobile("36") }} (Symbol.iterator)</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Temas_relacionados">Temas relacionados</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parámetros rest</a></li> -</ul> diff --git a/files/es/web/javascript/referencia/palabras_reservadas/index.html b/files/es/web/javascript/referencia/palabras_reservadas/index.html deleted file mode 100644 index 14010f37e3..0000000000 --- a/files/es/web/javascript/referencia/palabras_reservadas/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Palabras Reservadas -slug: Web/JavaScript/Referencia/Palabras_Reservadas -tags: - - JavaScript - - palabras reservadas -translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords -translation_of_original: Web/JavaScript/Reference/Reserved_Words ---- -<p> </p> - -<p>Las siguientes son palabras reservadas y no pueden ser utilizadas como variables, funciones, métodos o identificadores de objetos. Las siguientes son reservadas como palabras claves existentes por la especificación ECMAScript:</p> - -<h3 id="Reserved_keywords_as_of_ECMAScript_6">Reserved keywords as of ECMAScript 6</h3> - -<div class="threecolumns"> -<ul> - <li>{{jsxref("Sentencias/break", "break")}}</li> - <li>{{jsxref("Sentencias/switch", "case")}}</li> - <li><code>class</code></li> - <li>{{jsxref("Sentencias/try...catch", "catch")}}</li> - <li>{{jsxref("Sentencias/const", "const")}}</li> - <li>{{jsxref("Sentencias/continue", "continue")}}</li> - <li>{{jsxref("Sentencias/debugger", "debugger")}}</li> - <li>{{jsxref("Sentencias/switch", "default")}}</li> - <li>{{jsxref("Operadores/delete", "delete")}}</li> - <li>{{jsxref("Sentencias/while", "do")}}</li> - <li>{{jsxref("Sentencias/if...else", "else")}}</li> - <li>{{jsxref("Sentencias/export", "export")}}</li> - <li><code>extends</code></li> - <li>{{jsxref("Sentencias/try...catch", "finally")}}</li> - <li>{{jsxref("Sentencias/for", "for")}}</li> - <li>{{jsxref("Sentencias/function", "function")}}</li> - <li>{{jsxref("Sentencias/if...else", "if")}}</li> - <li>{{jsxref("Sentencias/import", "import")}}</li> - <li>{{jsxref("Sentencias/for...in", "in")}}</li> - <li>{{jsxref("Operadores/instanceof", "instanceof")}}</li> - <li>{{jsxref("Sentencias/let", "let")}}</li> - <li>{{jsxref("Operadores/new", "new")}}</li> - <li>{{jsxref("Sentencias/return", "return")}}</li> - <li>{{jsxref("Operadores/super", "super")}}</li> - <li>{{jsxref("Sentencias/switch", "switch")}}</li> - <li>{{jsxref("Operadores/this", "this")}}</li> - <li>{{jsxref("Sentencias/throw", "throw")}}</li> - <li>{{jsxref("Sentencias/try...catch", "try")}}</li> - <li>{{jsxref("Operadores/typeof", "typeof")}}</li> - <li>{{jsxref("Sentencias/var", "var")}}</li> - <li>{{jsxref("Operadores/void", "void")}}</li> - <li>{{jsxref("Sentencias/while", "while")}}</li> - <li>{{jsxref("Sentencias/with", "with")}}</li> - <li><code>yield</code></li> -</ul> -</div> - -<p>Las siguientes estan reservadas como palabras futuras por la especificación ECMAScript:</p> - -<ul> - <li><code>enum</code></li> -</ul> - -<p>Las siguientes estan reservadas como palabras futuras cuando se encuentre el modo correcto para su estructura de codigo:</p> - -<div class="threecolumns"> -<ul> - <li><code>implements</code></li> - <li><code>package</code></li> - <li><code>protected</code></li> - <li><code>static</code></li> - <li><code>interface</code></li> - <li><code>private</code></li> - <li><code>public</code></li> -</ul> -</div> - -<h4 id="Futuras_Palabras_Reservadas_en_estandares_antiguos">Futuras Palabras Reservadas en estandares antiguos</h4> - -<p>Las siguientes estan reservadas como palabras futuras por la antigua especificación ECMAScript (ECMAScript 1 hasta 3).</p> - -<div class="threecolumns"> -<ul> - <li><code>abstract</code></li> - <li><code>boolean</code></li> - <li><code>byte</code></li> - <li><code>char</code></li> - <li><code>double</code></li> - <li><code>final</code></li> - <li><code>float</code></li> - <li><code>goto</code></li> - <li><code>int</code></li> - <li><code>long</code></li> - <li><code>native</code></li> - <li><code>short</code></li> - <li><code>synchronized</code></li> - <li><code>transient</code></li> - <li><code>volatile</code></li> -</ul> -</div> - -<p>Adicionalmente, los literales "<code>null"</code>, "<code>true"</code>, y "<code>false"</code> estan reservadas en ECMAScript para usos normales.</p> diff --git a/files/es/web/javascript/referencia/sentencias/default/index.html b/files/es/web/javascript/referencia/sentencias/default/index.html deleted file mode 100644 index a25a5a5369..0000000000 --- a/files/es/web/javascript/referencia/sentencias/default/index.html +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Referencia/Sentencias/default -tags: - - JavaScript - - Palabra clave -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -<div>{{jsSidebar("Sentencias")}}</div> - -<p>La palabra clave<strong> default, </strong>en JavaScript puede ser usada en dos situaciones: dentro una sentencia {{jsxref("Sentencias/switch", "switch")}}, o con un sentencia{{jsxref("Sentencias/export", "export")}}.</p> - -<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> - -<p class="hidden">El codigo fuente para este ejemplo interactivo esta almacenado en un repositorio de GitHub. Si quieres contribuir al proyecto de ejemplos interactivos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y mandenos un pull request.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<p>Dentro de una sentencia {{jsxref("Sentencias/switch", "switch")}}:</p> - -<pre class="syntaxbox">switch (expresion) { - case valor1: - //Declaración ejecutada cuando el resultado de la expresion conincida con valor1 - [break;] - default: - //Declaración ejecutada cuando ninguno de los valores conincida con algun valor de la expresion - [break;] -}</pre> - -<p>Con una sentencia {{jsxref("Sentencias/export", "export")}}:</p> - -<pre class="syntaxbox">export default <em>nameN</em> </pre> - -<h2 id="Descripción">Descripción</h2> - -<p>Para mas detalles vea las paginas:</p> - -<ul> - <li>Sentencia {{jsxref("Sentencias/switch", "switch")}} y</li> - <li>Sentencia {{jsxref("Sentencias/export", "export")}}.</li> -</ul> - -<h2 id="Ejemplos">Ejemplos</h2> - -<h3 id="Usando_default_en_una_sentencia_switch">Usando <code>default</code> en una sentencia <code>switch</code></h3> - -<p>En el siguiente ejemplo, si se evalua <code>expr</code> como "Naranjas" o "Manzanas", el programa coincide los valores en cada caso: "Naranjas" o "Manzanas", y ejecuta la declaración correspondiente. La palabra clave <code>default</code> ayudara en algun otro caso y ejecuta la declaración asociada.</p> - -<pre class="brush: js">switch (expr) { - case 'Naranjas': - console.log('Las Naranjas cuestan $0.59 el kilogramo.'); - break; - case 'Manzanas': - console.log('Las Manzanas cuestan $0.32 el kilogramo.'); - break; - default: - console.log('Lo esntimos, no tenemos ' + expr + '.'); -}</pre> - -<h3 id="Usando_default_con_export">Usando <code>default</code> con <code>export</code></h3> - -<p>Si queres exportar un solo valor o necesitas reservar un valor para un modulo, puedes usar una exportación por defecto:</p> - -<pre class="brush: js">// modulo "mi-modulo.js" -let cube = function cube(x) { - return x * x * x; -}; -export default cube;</pre> - -<p>Entonces, en otro script, sera sencillo de importar el valor del modulo:</p> - -<pre class="brush: js">// modulo "otro-modulo.js" -import cubeArea from 'mi-modulo'; //default export nos da la libertad de decir import cubeArea, en lugar de import cube from 'my-module' -console.log(cubeArea(3)); // 27 -</pre> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2> - -<div class="hidden">La tabla de compatibilidad en esta pagina es generada desde datos estruturados. si quieres contribuir con los datos, revisa <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> y envianos un pull request.</div> - -<p>{{Compat("javascript.statements.default")}}</p> - -<h2 id="Vea_tambien">Vea tambien</h2> - -<ul> - <li>{{jsxref("Sentencias/export", "export")}}</li> - <li>{{jsxref("Sentencias/switch", "switch")}}</li> -</ul> diff --git a/files/es/web/javascript/vectores_tipados/index.html b/files/es/web/javascript/typed_arrays/index.html index ba82a49ebd..ba82a49ebd 100644 --- a/files/es/web/javascript/vectores_tipados/index.html +++ b/files/es/web/javascript/typed_arrays/index.html diff --git a/files/es/web/mathml/elemento/index.html b/files/es/web/mathml/element/index.html index aa75307fa3..aa75307fa3 100644 --- a/files/es/web/mathml/elemento/index.html +++ b/files/es/web/mathml/element/index.html diff --git a/files/es/web/mathml/elemento/math/index.html b/files/es/web/mathml/element/math/index.html index c7ecf0f0ab..c7ecf0f0ab 100644 --- a/files/es/web/mathml/elemento/math/index.html +++ b/files/es/web/mathml/element/math/index.html diff --git a/files/es/web/html/transision_adaptativa_dash/index.html b/files/es/web/media/dash_adaptive_streaming_for_html_5_video/index.html index da3e0892e4..da3e0892e4 100644 --- a/files/es/web/html/transision_adaptativa_dash/index.html +++ b/files/es/web/media/dash_adaptive_streaming_for_html_5_video/index.html diff --git a/files/es/web/opensearch/index.html b/files/es/web/opensearch/index.html new file mode 100644 index 0000000000..12c71b6c03 --- /dev/null +++ b/files/es/web/opensearch/index.html @@ -0,0 +1,154 @@ +--- +title: Creacion de plugins OpenSearch para Firefox +slug: Creacion_de_plugins_OpenSearch_para_Firefox +tags: + - Agregados + - Complementos + - OpenSearch + - Plugins + - Plugins_de_búsqueda + - para_revisar +translation_of: Web/OpenSearch +--- +<p> </p> +<h2 id="OpenSearch" name="OpenSearch">OpenSearch</h2> +<p><a href="es/Firefox_2">Firefox 2</a> admite el formato de descripción <a class="external" href="http://opensearch.org/">OpenSearch</a> para complementos (<em>plugins</em>) de búsqueda. Aquellos complementos que usen <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">la sintaxis OpenSearch</a> son compatibles con Firefox e Internet Explorer 7. Por ello es el formato recomendado para cualquier nuevo desarrollo.</p> +<p>Firefox admite además capacidades de búsqueda adicionales no incluidas en <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1#OpenSearch_description_document">la sintaxis de descripción OpenSearch</a>, tales como las "sugerencias de búsqueda" y el elemento <code>SearchForm</code>. Este artículo se centrará en la creación de complementos compatibles con OpenSearch que empleen estas capacidades adicionales de Firefox.</p> +<p>Además, los ficheros de descripción OpenSearch pueden ser anunciados dentro de una página HTML de forma que puedan ser descubiertos automáticamente por el navegador (esto se describe en <a href="#Autodiscovery_of_search_plugins">Detección automática de motores de búsqueda</a>.</p> +<p>Por último, estos complementos, pueden ser instalados mediante código tal y como se describe en <a href="es/A%c3%b1adir_motores_de_b%c3%basqueda_desde_p%c3%a1ginas_web">Añadir motores de búsqueda desde páginas web</a>.</p> +<h2 id="El_fichero_de_descripci.C3.B3n_OpenSearch" name="El_fichero_de_descripci.C3.B3n_OpenSearch">El fichero de descripción OpenSearch</h2> +<p>El fichero XML que describe un motor de búsqueda es bastante sencillo, tal y como se puede ver en la plantilla básica que se muestra más abajo. Las secciones en negrita deben ser personalizadas basándonos en las necesidades particulares del motor para el que estamos escribiendo nuestro complemento.</p> +<pre class="eval"><OpenSearchDescription xmlns="<span class="nowiki">http://a9.com/-/spec/opensearch/1.1/</span>" + xmlns:moz="<span class="nowiki">http://www.mozilla.org/2006/browser/search/</span>"> +<ShortName><strong>engineName</strong></ShortName> +<Description><strong>engineDescription</strong></Description> +<InputEncoding><strong>inputEncoding</strong></InputEncoding> +<Image width="16" height="16">data:image/x-icon;base64,<strong>imageData</strong></Image> +<Url type="text/html" method="<strong>method</strong>" template="<strong>searchURL</strong>"> + <Param name="<strong>paramName1</strong>" value="<strong>paramValue1</strong>"/> + ... + <Param name="<strong>paramNameN</strong>" value="<strong>paramValueN</strong>"/> +</Url> +<Url type="application/x-suggestions+json" template="<strong>suggestionURL</strong>"/> +<moz:SearchForm><strong>searchFormURL</strong></moz:SearchForm> +</OpenSearchDescription> +</pre> +<dl> + <dt> + <strong>ShortName</strong></dt> + <dd> + Nombre corto para el motor de búsqueda.</dd> +</dl> +<dl> + <dt> + <strong>Description</strong></dt> + <dd> + Descripción del motor de búsqueda.</dd> +</dl> +<dl> + <dt> + <strong>InputEncoding</strong></dt> + <dd> + Codificación de caracteres a emplear en los datos que se envían al motor de búsqueda. Por ejemplo, "UTF-8".</dd> +</dl> +<dl> + <dt> + <strong>Image</strong></dt> + <dd> + Icono de 16x16 codificado en Base-64 que represente al motor de búsqueda. Puedes encontrar una utilidad para generar estos datos en: <a class="external" href="http://software.hixie.ch/utilities/cgi/data/data">The data: URI kitchen</a>.</dd> +</dl> +<dl> + <dt> + <strong>Url</strong></dt> + <dd> + Describe la(s) URL(s) a emplear para la búsqueda. El atributo <code>method</code> indica si se debe emplear una petición <code>GET</code> o <code>POST</code> para obtener los resultados.</dd> +</dl> +<dl> + <dd> + <div class="note"> + <strong>Nota:</strong> Internet Explorer 7 no admite peticiones <code>POST</code>.</div> + </dd> +</dl> +<dl> + <dd> + Firefox admite dos tipos de URL en el campo <code>type</code>:</dd> +</dl> +<ul> + <li><code>type="text/html"</code> se usa al especificar la URL a donde se va a enviar la petición de búsqueda.</li> + <li><code>type="application/x-suggestions+json"</code> se usa al especificar la URL de donde se van a obtener las sugerencias de búsqueda.</li> +</ul> +<dl> + <dd> + El atributo <code>template</code> indica la forma en que se construirá la URL para la consulta. Dentro de este atributo se pueden introducir plantillas que se expanden de forma dinámica; la más habitual es <code>{searchTerms}</code>, la cual se expande a los términos de búsqueda introducidos por el usuario en la barra de búsquedas. En <a class="external" href="http://www.opensearch.org/Specifications/OpenSearch/1.1/Draft_3#OpenSearch_1.1_parameters">OpenSearch 1.1 parameters</a> se describen los otros tipos admitidos.</dd> +</dl> +<dl> + <dd> + Para consultas que devuelven sugerencias de búsqueda, la URL descrita en <code>template</code> se usa para obtener una lista de sugerencias en el formato JSON (JavaScript Object Notation). Para saber más sobre como incorporar sugerencias de búsqueda en el lado del servidor, ver <a href="es/Permitir_sugerencias_en_los_plugins_de_b%c3%basqueda">Permitir sugerencias en los plugins de búsqueda</a>.</dd> +</dl> +<p><img alt="Image:SearchSuggestionSample.png"></p> +<dl> + <dt> + <strong>Param</strong></dt> + <dd> + Los parámetros que es necesario suministrar junto con la consulta, en la forma de pares clave/valor. En los valores es posible emplear las plantillas dinámicas presentadas anteriormente; por ejemplo, se puede usar <code>{searchTerms}</code> para insertar los términos de búsqueda que el usuario introdujo en la barra de búsquedas.</dd> +</dl> +<dl> + <dd> + <div class="note"> + <strong>Nota:</strong> Internet Explorer 7 no admite este elemento.</div> + </dd> +</dl> +<dl> + <dt> + <strong>SearchForm</strong></dt> + <dd> + La URL donde se encuentra la página de búsquedas del sitio al que hace referencia el complemento que estamos desarrollando. Esto permite al usuario acceder directamente al sitio web en cuestión.</dd> + <dd> + <div class="note"> + <strong>Nota:</strong> Dado que este elemento es específico de Firefox y no forma parte de la especificación OpenSearch, en el ejemplo anterior, usamos el prefijo "<code>moz:</code>" en el espacio de nombres XML para asegurarnos que otros agentes de usuario que no admiten este elemento puedan ignoralo de forma segura.</div> + </dd> +</dl> +<h2 id="Detecci.C3.B3n_autom.C3.A1tica_de_complementos_de_b.C3.BAsqueda" name="Detecci.C3.B3n_autom.C3.A1tica_de_complementos_de_b.C3.BAsqueda">Detección automática de complementos de búsqueda</h2> +<p>Un sitio web que ofrezca un complemento de búsqueda puede anunciarlo, de forma que los usuarios de Firefox puedan descargarlo e instalarlo fácilmente.</p> +<p>Para incorporar la detección automática, sólo es necesario añadir una línea a la sección <code><head></code> de la página:</p> +<pre class="eval"><link rel="search" type="application/opensearchdescription+xml" title="<em>searchTitle</em>" href="<em>pluginURL</em>"> +</pre> +<p>Sustituiremos los elementos en itálica tal y como se explica a continuación:</p> +<dl> + <dt> + <strong>searchTitle</strong></dt> + <dd> + El título de la búsqueda que se va a llevar a cabo; por ejemplo, "Buscar en MDC" o "Búsqueda en Google". Este valor debe coincidir con el <code>ShortName</code> de nuestro complemento.</dd> +</dl> +<dl> + <dt> + <strong>pluginURL</strong></dt> + <dd> + La URL que debe emplear el navegador para descargar el fichero XML con la descripción del complemento.</dd> +</dl> +<p>Si tu sitio ofrece múltiples complementos de búsqueda también es posible que el navegador los descubra de forma automática; basta con repetir el <code>link</code> las veces que sea necesario. Por ejemplo:</p> +<pre class="eval"><link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Autor" href="<a class="external" href="http://www.misitio.com/autores.xml" rel="freelink">http://www.misitio.com/autores.xml</a>"> +<link rel="search" type="application/opensearchdescription+xml" title="MiSitio: Por Título" href="<a class="external" href="http://www.misitio.com/titulos.xml" rel="freelink">http://www.misitio.com/titulos.xml</a>"> +</pre> +<p>De esta forma podemos ofrecer complementos independientes para buscar tanto por autor como por título.</p> +<h2 id="Resoluci.C3.B3n_de_problemas" name="Resoluci.C3.B3n_de_problemas">Resolución de problemas</h2> +<p>Si hay algún error en el fichero XML que describe el complemento, seguramente habrá problemas al añadir en Firefox 2 un complemento descubierto automáticamente. El mensaje de error puede no ser de mucha ayuda, así que los siguientes consejos pueden ayudar a encontrar la causa del problema.</p> +<ul> + <li>Asegúrate de que el documento XML de tu complemento está bien formado. Puedes comprobarlo cargando el fichero directamente en Firefox. Los <em>Ampersands</em> en la plantilla de la URL deben ser escapadas con &amp; y las etiquetas (<em>tags</em>) deben ser cerradas con una barra (<code>/</code>) al final o con la correspondiente etiqueta de cierre.</li> + <li>El atributo <code>xmlns</code> es importante. Sin él, puedes obtener un mensaje de error indicando que "Firefox no pudo descargar el motor de búsqueda desde: (URL)".</li> + <li>Ten en cuente que <strong>debes</strong> incluir una URL del tipo <code>text/html</code> — los complmentos que sólo incluyan URLs del tipo Atom o <a href="es/RSS">RSS</a> (lo cual es válido, pero Firefox no admite) producirán el error "no pudo descargar el motor de búsqueda".</li> + <li>Los <em>favicons</em> obtenidos remotamente no deben ser mayores de 10KB (ver {{ Bug(361923) }}).</li> +</ul> +<p>Adicionalmente, el servicio de complementos de búsqueda suministra un mecanismo de registro (<em>logging</em>) que puede ser de utilidad a los desarrolladores de complementos. Usa <em>about:config</em> para establecer la preferencia '<code>browser.search.log</code>' al valor <code>true</code>. La información de registro aparecerá en la consola de errores de Firefox (Tools->Error Console) cuando se añada un complemento de búsqueda.</p> +<h2 id="Material_de_referencia" name="Material_de_referencia">Material de referencia</h2> +<ul> + <li><a class="external" href="http://opensearch.org/">OpenSearch - Documentación oficial</a></li> + <li>Technorati.com tiene un ejemplo de fichero XML en <a class="external" href="http://technorati.com/osd.xml" rel="freelink">http://technorati.com/osd.xml</a></li> + <li>Más información sobre problemas en la detección automática en bugzilla {{ Bug(340208) }}</li> + <li>Wikipedia - <a class="external" href="http://es.wikipedia.org/wiki/Data:_URL"><code>data:</code> URL</a></li> + <li><a class="external" href="http://searchy.protecus.de/">Searchy</a> - <a class="external" href="http://searchy.protecus.de/en/add2.php">Crea</a> tu propio complemento o usa <a class="external" href="http://searchy.protecus.de/en/searchbox-add-ons.php">la lista de complementos</a>.</li> + <li><a class="external" href="http://www.searchplugins.net">searchplugins.net</a> - Crea complementos OpenSearch plugins para ser usados con Firefox 2. <a class="external" href="http://www.searchplugins.net/pluginlist.aspx">Lista de complementos de búsqueda</a></li> + <li><a class="external" href="http://ready.to/search/en/">Ready2Search</a> - Crea complementos OpenSearch. <a class="external" href="http://ready.to/search/make/en_make_plugin.htm">Búsquedas personalizadas a través de Ready2Search</a></li> +</ul> +<p><span class="comment">Interwiki link</span></p> +<p>{{ languages( { "ca": "ca/Creaci\u00f3_de_connectors_OpenSearch_per_al_Firefox", "en": "en/Creating_OpenSearch_plugins_for_Firefox", "fr": "fr/Cr\u00e9ation_de_plugins_OpenSearch_pour_Firefox", "ja": "ja/Creating_OpenSearch_plugins_for_Firefox", "pl": "pl/Tworzenie_wtyczek_OpenSearch_dla_Firefoksa", "pt": "pt/Criando_plugins_OpenSearch_para_o_Firefox" } ) }}</p> diff --git a/files/es/web/performance/mejorando_rendimienot_inicial/index.html b/files/es/web/performance/optimizing_startup_performance/index.html index ed8bc6771d..ed8bc6771d 100644 --- a/files/es/web/performance/mejorando_rendimienot_inicial/index.html +++ b/files/es/web/performance/optimizing_startup_performance/index.html diff --git a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html b/files/es/web/progressive_web_apps/developer_guide/installing/index.html index ef54a3b24c..ef54a3b24c 100644 --- a/files/es/web/progressive_web_apps/developer_guide/instalar/index.html +++ b/files/es/web/progressive_web_apps/developer_guide/installing/index.html diff --git a/files/es/web/css/introducción/media/index.html b/files/es/web/progressive_web_apps/responsive/media_types/index.html index bb7bb0bd23..bb7bb0bd23 100644 --- a/files/es/web/css/introducción/media/index.html +++ b/files/es/web/progressive_web_apps/responsive/media_types/index.html diff --git a/files/es/web/progressive_web_apps/ventajas/index.html b/files/es/web/progressive_web_apps/ventajas/index.html deleted file mode 100644 index e1fa9fad1f..0000000000 --- a/files/es/web/progressive_web_apps/ventajas/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Ventajas de una aplicación web progresiva (AWP) -slug: Web/Progressive_web_apps/Ventajas -tags: - - AWP - - aplicaciones web progresivas - - conceptos - - ventajas -translation_of: Web/Progressive_web_apps/Introduction#Advantages_of_web_applications -translation_of_original: Web/Progressive_web_apps/Advantages ---- -<p class="summary">Las Aplicaciones Web Progresivas deben tener todas las ventajas enumeradas en las siguientes secciones a continuación.</p> - - - -<h2 id="Reconocible">Reconocible<img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>El objetivo final es que las aplicaciones web deben tener una mejor representación en los motores de búsqueda, ser más fáciles de exponer, catalogar y clasificar, y tener metadatos que los navegadores puedan utilizar para darles capacidades especiales.</p> - -<p>Algunas de las capacidades ya se han habilitado en ciertas plataformas basadas en la web mediante tecnologías patentadas como <a href="http://ogp.me/">Open Graph</a>, que proporciona un formato para especificar metadatos similares en el <code><head></code> de HTML usando metaetiquetas.</p> - -<p>El estándar web relevante aquí es el <a href="/en-US/docs/Web/Manifest">Manifiesto de aplicación web</a>, que define las características de una aplicación, como el nombre, el icono, la pantalla de presentación y los colores del tema en un archivo de manifiesto con formato JSON. Esto es para usar en contextos como listados de aplicaciones y pantallas de inicio de dispositivos.</p> - -<ul> -</ul> - -<h2 id="Instalable">Instalable<img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una parte central de la experiencia de aplicaciones es que los usuarios tengan iconos de aplicaciones en su pantalla de inicio, y ser capaz de pulsar para abrir aplicaciones en su propio contenedor nativo que se siente bien integrado con la plataforma subyacente.</p> - -<p>Las aplicaciones web modernas pueden tener esta sensación de aplicación nativa a través de las propiedades establecidas dentro del manifiesto de la aplicación web, y a través de una función disponible en los navegadores de teléfonos inteligentes modernos llamada <a href="/en-US/docs/Web/Apps/Progressive/Add_to_home_screen">Añadir a la página de inicio</a>.</p> - -<h2 id="Enlazable">Enlazable<img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una de las características más potentes de la Web es ser capaz de enlazar a una aplicación en una URL específica. No necesita tienda de aplicaciones, ningún proceso de instalación complejo. Así es como siempre ha sido.</p> - -<h2 id="Independencia_de_la_red">Independencia de la red<img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web modernas pueden funcionar cuando la red no es confiable, o incluso inexistente. Las ideas básicas detrás de la independencia de la red son:</p> - -<ul> - <li>Volver a visitar un sitio y obtener sus contenidos, incluso si no hay una conexión red disponible.</li> - <li>Explore cualquier tipo de contenido que el usuario haya visitado anteriormente al menos una vez, incluso en situaciones de poca conectividad.</li> - <li>Controlar lo que se muestra al usuario en situaciones en las que no hay conectividad.</li> -</ul> - -<p>Esto se logra mediante una combinación de tecnologías: <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> para controlar las solicitudes de página (por ejemplo, almacenarlas sin conexión), la <a href="/en-US/docs/Web/API/Cache">Cache API</a> para almacenar respuestas a solicitudes de red fuera de línea (muy útil para almacenar recursos del sitio) y tecnologías de almacenamiento de datos del lado del cliente como <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage</a> y <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> para almacenar datos de la aplicación sin conexión.</p> - -<h2 id="Progresiva">Progresiva<img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web modernas se pueden desarrollar para proporcionar una experiencia súper genial a los navegadores totalmente capaces, y una experiencia aceptable (aunque no tan brillante) para los navegadores menos capaces. Hemos estado haciendo esto durante años con las mejores prácticas como <a href="/en-US/docs/Glossary/Progressive_Enhancement">mejora progresiva</a>.</p> - -<h2 id="Reconectable">Reconectable<img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Una de las principales ventajas de las plataformas nativas es la facilidad con la que los usuarios pueden volver a participar mediante actualizaciones y contenido nuevo, incluso cuando no están mirando la aplicación o utilizando sus dispositivos. Las aplicaciones web modernas ahora también pueden hacer esto, utilizando nuevas tecnologías como <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service Workers</a> para controlar páginas, el <a href="/en-US/docs/Web/API/Push_API">Web Push API</a> para enviar actualizaciones directamente del servidor a la aplicación a través de un service worker, y la <a href="/en-US/docs/Web/API/Notifications_API">API de notificaciones</a> para generar notificaciones del sistema para ayudar a atraer a los usuarios cuando no están en el navegador.</p> - -<h2 id="Adaptable">Adaptable<img alt="" src="https://mdn.mozillademos.org/files/12650/responsive.svg" style="float: right; height: 40px; width: 38px;"></h2> - -<p>Las aplicaciones web adaptables usan tecnologías como consultas de media y viewport para asegurarse de que sus interfaces se ajusten a cualquier factor de forma: escritorio, móvil, tableta o lo que sea que venga después.</p> - -<h2 id="Seguro">Seguro<img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="float: right; height: 47px; width: 38px;"></h2> - -<p>La plataforma web proporciona un mecanismo de entrega seguro que evita la intromisión y garantiza que el contenido no haya sido alterado, siempre que aproveche de HTTPS y desarrolle sus aplicaciones teniendo en cuenta la seguridad. Además, puede verificar la verdadera naturaleza de una AWP confirmando que está en la URL correcta, mientras que las aplicaciones en las tiendas de aplicaciones a menudo pueden parecer una cosa, pero ser otra (<a href="https://twitter.com/andreasbovens/status/926965095296651264">ejemplo</a>).</p> diff --git a/files/es/web/security/csp/csp_policy_directives/index.html b/files/es/web/security/csp/csp_policy_directives/index.html deleted file mode 100644 index c2f9c5a628..0000000000 --- a/files/es/web/security/csp/csp_policy_directives/index.html +++ /dev/null @@ -1,709 +0,0 @@ ---- -title: Políticas Directivas CSP -slug: Web/Security/CSP/CSP_policy_directives -translation_of: Web/HTTP/Headers/Content-Security-Policy -translation_of_original: Web/Security/CSP/CSP_policy_directives ---- -<p> </p> - -<p>Hay varios ámbitos de las políticas que pueden ser definidas por los administradores de las páginas web usando las Normas de Seguridad de Contenido o CSP por sus siglas en ingles. Cualquier combinación de estas políticas puede ser utilizada para satisfacer las necesidades de su sitio web, no es necesario especificar todas ellas..</p> - -<h2 id="Fuentes_de_contenido">Fuentes de contenido</h2> - -<p>La mayoría de las políticas directivas necesitan de una o más fuentes de contenido. Una fuente de contenido es una cadena que indica una posible fuente de donde el contenido puede ser descargado.</p> - -<h3 id="Listas_de_fuentes">Listas de fuentes</h3> - -<p>Una lista de fuentes es un cadena que especifica uno o más hosts de internet o direcciones IP, así como un <a href="/en-US/docs/URIs_and_URLs" title="en/URIs and URLs">esquema de URL</a> opcional y/o número de puerto. La dirección del sitio puede incluir un comodín líder (el carácter asterisco, <code>'*'</code>), y puedes usar un comodín (de nuevo, <code>'*'</code>) como el número de puerto, indicando que todos los puertos legales son válidos para la fuente. Los hosts son delimitados por espacio.</p> - -<p>Las expresiones validas del host son:</p> - -<dl> - <dt><span class="nowiki">http://*.foo.com</span></dt> - <dd>Junta todos los intentos de carga desde cualquier subdominio de foo.com usando el sistema URL http:.</dd> - <dt><span class="nowiki">mail.foo.com:443</span></dt> - <dd>Junta todos los intentos de acceso al puerto 443 en mail.foo.com.</dd> - <dt><span class="nowiki">https://store.foo.com</span></dt> - <dd>Junta todos los intentos para acceder store.foo.com usando https:.</dd> -</dl> - -<p>Si un número de puerto no está especificado, el navegador usara el número de puerto predeterminado para el sistema especificado. Si no hay sistema especificado, el mismo sistema que ha sido usado para acceder al documento protegido será usado.</p> - -<dl> -</dl> - -<h3 id="Palabras_claves">Palabras claves</h3> - -<p>También existen algunas palabras claves disponibles para describir clases especiales de fuentes de contenido. Estas palabras son las siguientes:</p> - -<dl> - <dt><code>'none'</code></dt> - <dd>Se refiere al conjunto vacío, es decir, no hay URLs que coincidan. Las comillas simples son necesarias.</dd> - <dt><code>'self'</code></dt> - <dd>Se refiere al origen del cual los documentos protegidos están siendo enviados, incluyendo el mismo sistema de URL y numero de puerto. Las comillas simples deben ser incluidas. Algunos navegadores excluyen específicamente <code>blob</code> y <code>filesystem</code> de las políticas directivas. Sitios que necesitan permitir este tipo de contenido puede especificarlos usando el Data attribute.</dd> - <dt><code>'unsafe-inline'</code></dt> - <dd>Permite el uso de recursos alineados como elementos alineados {{ HTMLElement("script") }} , <code>javascript:</code> URLs, controladores de eventos alineados e elementos alineados {{ HTMLElement("style") }} . Las comillas simples deben ser incluidas.</dd> - <dt><code>'unsafe-eval'</code></dt> - <dd>Permite el uso de <code>eval()</code>y métodos similares para la creación de códigos desde las cadenas de caracteres. Las comillas simples deben ser incluidas.</dd> -</dl> - -<div class="note"><strong>Nota:</strong> 'unsafe-inline' y 'unsafe-eval' son inseguros y pueden hacer de tu página web vulnerable contra cross-site scripting.</div> - -<p>Ejemplo, puedes especificar que el contenido sea cargado desde el origen del documento, así como desde trustedscripts.foo.com de la siguiente manera:</p> - -<pre>Content-Security-Policy: default-src 'self' trustedscripts.foo.com -</pre> - -<dl> -</dl> - -<h3 id="Data">Data</h3> - -<div class="note"><strong>Nota:</strong> data: URIs son inseguras y pueden hacer de tu página web vulnerable contra cross-site scripting si es permitido por las fuentes del script.</div> - -<dl> - <dt>data:</dt> - <dd>Permite que <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/data_URIs" title="en/data URIs"><code>data:</code> URIs</a> sea usada como fuente de contenido. Esto es inseguro y un atacante puede insertar data: URIs arbitrarias. Utilízala con moderación y definitivamente no para los scripts.</dd> - <dt>mediastream:</dt> - <dd>Permite que <a href="/en-US/docs/Web/API/MediaStream_API" title="/en/WebRTC/MediaStream_API"><code>mediastream:</code> URIs</a> sea usada como fuente de contenido.</dd> - <dt>blob:</dt> - <dd>Permite que <a href="/en-US/docs/Web/API/Blob" title="/en/WebRTC/MediaStream_API"><code>blob:</code> URIs</a> sea usada como fuente de contenido.</dd> - <dt>filesystem:</dt> - <dd>Permite que <a href="/en-US/docs/Web/API/FileSystem" title="/en/WebRTC/MediaStream_API"><code>filesystem:</code> URIs</a> sea usada como fuente de contenido.</dd> -</dl> - -<pre>Content-Security-Policy: default-src 'self'; img-src 'self' data: blob: filesystem:; media-src mediastream: -</pre> - -<h2 id="Políticas_directivas_soportadas">Políticas directivas soportadas</h2> - -<p>Las siguientes políticas directivas están disponibles para controlar la política de seguridad para varias ares de las políticas.</p> - -<h3 id="base-uri"><code>base-uri</code></h3> - -<p>La directiva ><code>base-uri</code> define las URLs que un agente usuario puede usar como el documento URL base. Si este valor no está presente, cualquier URL está permitido. Si esta directiva no está presente, el agente usuario usara el valor en el elemento <code><a href="/en-US/docs/Web/HTML/Element/base">base</a>.</code></p> - -<pre>base-uri <em>source-list</em></pre> - -<h3 id="child-src"><code>child-src</code></h3> - -<p>La directiva <code>child-src</code> define las fuentes válidas para los trabajadores de la web y contextos de navegación anidados cargados utilizando elementos tales como {{ HTMLElement("frame") }} y {{ HTMLElement("iframe") }}. Esta opción es preferida sobre la directiva <code>frame-src</code><code>, </code><code>la cual es obsoleta. Para los trabajadores, las </code>solicitudes no conformes son tratadas como errores de red fatales por el agente usuario.</p> - -<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div> - -<pre><span>child-src <em>source-list</em></span></pre> - -<h3 id="connect-src"><code>connect-src</code></h3> - -<p>La directiva <code>connect-src</code> define fuentes válidas para fetch, <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>, WebSocket y conecciones EventSource.</p> - -<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div> - -<div class="note"><strong>Nota: </strong>Antes de la versión Firefox 23, xhr-src era utilizado en lugar de la directiva connect-src y solo restringía el uso de <a href="/en/nsIXMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a>.</div> - -<pre><code>connect-src</code> <em><code>source-list</code></em></pre> - -<h3 id="default-src"><code>default-src</code></h3> - -<p>La directiva por defecto <code>default-src </code><code>define la política de seguridad para los tipos de contenidos que no están expresamente señalados por otras directivas. Esta directiva abarca las siguientes directivas:</code></p> - -<ul> - <li><code>child-src</code></li> - <li><code>connect-src</code></li> - <li><code>font-src</code></li> - <li><code>img-src</code></li> - <li><code>media-src</code></li> - <li><code>object-src</code></li> - <li><code>script-src</code></li> - <li><code>style-src</code></li> -</ul> - -<pre><code>default-src</code> <em><code>source-list</code></em></pre> - -<h3 id="font-src"><code>font-src</code></h3> - -<p>La directivas <code>font-src</code> especifica las fuentes válidas para los tipos de letras cargadas usando {{ cssxref("@font-face") }}.</p> - -<div class="note"><strong>Nota: </strong>Si esta directiva no está presente, el agente usuario buscara la directiva por defecto <code>default-src.</code></div> - -<pre><code>font-src</code> <em><code>source-list</code></em></pre> - -<h3 id="form-action"><code>form-action</code></h3> - -<p>La directiva <code>form-action</code>{{experimental_inline}} especifica criterios de valoración válidos para las sumisiones {{ HTMLElement("form") }}.</p> - -<pre id="script-src"><code><code>form-action</code> ><em><code>source-list</code></em></code></pre> - -<h3 id="frame-ancestors"><code>frame-ancestors</code></h3> - -<p>La directiva <code>frame-ancestors</code>{{experimental_inline}} especifica padres validos que pueden incustrar una pagina usando elementos {{ HTMLElement("frame") }} y {{ HTMLElement("frame") }}. Esta directiva no esta soportada en el elemento <code><meta> </code>o por la cabecera <code>Content-Security-Policy-Report-Only.</code></p> - -<pre><code>frame-ancestors</code> <em><code>source-list</code></em></pre> - -<h3 id="frame-src_obsolete_inline"><code>frame-src</code> {{obsolete_inline}}</h3> - -<p>The <code>frame-src</code> directive specifies valid sources for web workers and nested browsing contexts loading using elements such as >{{ HTMLElement("frame") }} and {{ HTMLElement("iframe") }}.></p> - -<div class="note"> -<div><strong>Note: </strong>This directive is deprecated. Use <code>child-src</code> instead.</div> -</div> - -<pre>frame-src <em>source-list</em></pre> - -<h3 id="img-src"><code>img-src</code></h3> - -<p>The <code>img-src</code> directive specifies valid sources of images and favicons. </p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>img-src</code> <em><code>source-list</code></em></pre> - -<h3 id="manifest-src"><code>manifest-src</code></h3> - -<p>The <code><strong>manifest-src</strong></code> directive specifies which manifest can be applied to the resource.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>manifest-src</code> <em><code>source-list</code></em></pre> - -<h3 id="media-src"><code>media-src</code></h3> - -<p>The <code>media-src</code> directive specifies valid sources for loading media using the {{ HTMLElement("audio") }} and {{ HTMLElement("video") }} elements.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>media-src</code> <em><code>source-list</code></em></pre> - -<h3 id="object-src"><code>object-src</code></h3> - -<p>The <code>object-src</code> directive specifies valid sources for the {{ HTMLElement("object") }}, {{ HTMLElement("embed") }}, and {{ HTMLElement("applet") }} elements. </p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>object-src</code> <em><code>source-list</code></em></pre> - -<h3 id="plugin-types"><code>plugin-types</code></h3> - -<p>The <code>plugin-types</code> directive specifies the valid plugins that the user agent may invoke.</p> - -<pre>plugin-types <em>type-list</em></pre> - -<h3 id="referrer"><code>referrer</code></h3> - -<p>The <code>referrer</code> directive specifies information in the referrer header for links away from a page.</p> - -<pre>referrer <em>value</em></pre> - -<h3 id="reflected-xss"><code>reflected-xss</code></h3> - -<p>The <code>reflected-xss</code> directive instructs a user agent to activate or deactivate any heuristics used to filter or block reflected cross-site scripting attacks. Valid values are <code>allow</code>, <code>block</code>, and <code>filter</code>. This directive is not supported in the <code><meta></code> element.</p> - -<div class="note"><strong>Note: </strong>This directive is ignored if it is contained in a <code>meta</code> element.</div> - -<pre>reflected-xss <em>value</em></pre> - -<h3 id="report-uri"><code>report-uri</code></h3> - -<p>The <code>report-uri</code> directive instructs the user agent to report attempts to violate the Content Security Policy. These violation reports consist of <a href="/en/JSON" title="en/JSON">JSON</a> documents sent via an HTTP <code>POST</code> request to the specified URI. See <a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a> for details. This directive is not supported in the <code><meta></code> element.</p> - -<pre><code>report-uri</code> <em><code><a class="external" href="http://tools.ietf.org/html/rfc2396" title="http://tools.ietf.org/html/rfc2396">uri</a></code></em></pre> - -<h3 id="sandbox"><code>sandbox</code></h3> - -<p>The <code>sandbox</code> directive applies restrictions to a page's actions including preventing popups, preventing the execution of plugins and scripts, and enforcing a same-origin policy. This directive is not supported in the <code><meta></code> element or by the <code>Content-Security-policy-Report-Only</code> header field.</p> - -<pre>sandbox <em>value</em></pre> - -<h3 id="script-src_2"><code>script-src</code></h3> - -<p>The <code>script-src</code> directive specifies valid sources for JavaScript. When either the <code>script-src</code> or the <code>default-src</code> directive is included, inline script and <code>eval()</code> are disabled unless you specify 'unsafe-inline' and 'unsafe-eval', respectively.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>script-src</code> <em><code>source-list</code></em></pre> - -<h3 id="style-src"><code>style-src</code></h3> - -<p>The <code>style-src</code> directive specifies valid sources for stylesheets. This includes both externally-loaded stylesheets and inline use of the {{ HTMLElement("style") }} element and HTML <code>style</code> attributes. Stylesheets from sources that aren't included in the source list are not requested or loaded. When either the <code>style-src</code> or the <code>default-src</code> directive is included, inline use of the {{ HTMLElement("style") }} element and HTML <code>style</code> attributes are disabled unless you specify 'unsafe-inline'.</p> - -<div class="note"><strong>Note: </strong>If this directive is absent, the user agent will look for the <code>default-src</code> directive.</div> - -<pre><code>style-src</code> <em><code>source-list</code></em></pre> - -<div class="note"><strong>Note:</strong> Firefox currently requires using the same URL scheme and port for the <code>report-uri</code> as the content being protected by Content Security Policy.</div> - -<h3 id="upgrade-insecure-requests"><code>upgrade-insecure-requests</code></h3> - -<p>The <code>upgrade-insecure-requests</code> directive instructs user agents to treat all of a site's unsecure URL's (those serverd over HTTP) as though they have been replaced with secure URL's (those served over HTTPS). This directive is intended for web sites with large numbers of unsecure legacy URL's that need to be rewritten. </p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{ specName("Upgrade Insecure Requests")}}</td> - <td>{{Spec2('Upgrade Insecure Requests')}}</td> - <td>Adds <code>upgrade-insecure-requests</code>.</td> - </tr> - <tr> - <td>{{ specName("CSP 1.1") }}</td> - <td>{{Spec2('CSP 1.1')}}</td> - <td>Adds <code>base-uri</code>, <code>child-src</code>, <code>form-action</code>, <code>frame-ancestors</code>, <code>plugin-types</code>, <code>referrer</code>, <code>reflected-xss</code>, and <code>report-uri</code>. Deprecates <code>frame-src</code>.</td> - </tr> - <tr> - <td>{{ specName("CSP 1.0") }}</td> - <td>{{Spec2('CSP 1.0')}}</td> - <td>Defines <code>connect-src</code>, ><code>default-src</code>, ><code>font-src</code>, ><code>frame-src</code>, ><code>img-src</code>, ><code>media-src</code>, ><code>objects-src</code>, >report-uri,><code>sandbox</code>, ><code>script-src,</code> and ><code>style-src</code>.></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop">{{CompatUnknown}} -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome{{ref("2")}}</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>{{CompatChrome(14.0)}} (X-Webkit-CSP)</p> - - <p>{{CompatChrome(25.0)}}</p> - </td> - <td> - <p>{{CompatGeckoDesktop("2.0")}} (X-Content-Security-Policy)</p> - - <p>{{CompatGeckoDesktop("23.0")}}</p> - </td> - <td>Edge</td> - <td>15</td> - <td> - <p>6 (X-Webkit-CSP)</p> - - <p>7</p> - </td> - </tr> - <tr> - <td><code>base-uri</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("35.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>child-src</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>connect-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>default-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>font-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>form-action</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("36.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>frame-ancestors</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoDesktop("33.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>frame-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>img-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>manifest-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>media-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>object-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>plugin-types</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>referrer</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>reflected-xss</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>report-uri</code></td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>script-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>style-src</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("23.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td> - <p><code>upgrade-insecure-requests</code></p> - </td> - <td> - <p class="p1">{{CompatChrome(43.0)}}</p> - </td> - <td>{{CompatGeckoDesktop("42.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Browser{{ref("1")}}</th> - <th>Android Webview{{ref("2")}}</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Mobile{{ref("2")}}</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>iOS 7.1</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>base-uri</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoMobile("35.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>child-src</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>connect-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>default-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>font-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>form-action</code> </td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoMobile("36.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>frame-ancestors</code> </td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatGeckoMobile("33.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>frame-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>img-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>manifest-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoDesktop("41.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>media-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>object-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>plugin-types</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>referrer</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("37.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>reflected-xss</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>report-uri</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(40.0)}}</td> - </tr> - <tr> - <td><code>sandbox</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>script-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>style-src</code></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>upgrade-insecure-requests</code></td> - <td>{{CompatGeckoMobile(42)}}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="sect1"> </h2> - -<h2 id="Notes">Notes</h2> - -<p>{{ref("1")}} Deprecated since Android 4.0.</p> - -<p>{{ref("2")}} Starting with version {{CompatChrome(45.0)}}, Chrome excludes <code>blob</code> and <code>filesystem</code> from source directives. Sites needing to allow these content types can specify them using the Data attribute.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en/Security/CSP/Introducing_Content_Security_Policy" title="en/Security/CSP/Introducing Content Security Policy">Introducing Content Security Policy</a></li> - <li><a href="/en/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Using Content Security Policy</a></li> - <li><a href="/en/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Using CSP violation reports</a></li> -</ul> diff --git a/files/es/web/security/csp/index.html b/files/es/web/security/csp/index.html deleted file mode 100644 index 6fcf1a2ff3..0000000000 --- a/files/es/web/security/csp/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: CSP (Políticas de Seguridad de Contenido) -slug: Web/Security/CSP -tags: - - Documento - - Referencia -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP ---- -<div>{{gecko_minversion_header("2.0")}}</div> - -<p><strong>Políticas de Seguridad de Contenido </strong>(CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo <a href="/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a> y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde robo de datos hasta la alteración de su sitio o distribución de malware.</p> - -<p>Aunque las Políticas de Seguridad de Contenido fueron incluidas desde Firefox 4, esa implementación, usando la cabecera <code>X-Content-Security-Policy</code>, es anterior a la existencia de una especificacion formal de CSP. Firefox 23 contiene una implementación actualizada de CSP que usa la cabecera <code>Content-Security-Policy</code> sin prefijo y las directivas como están descritas en la especificación W3C CSP 1.0.</p> - -<h2 id="Tópicos_de_Políticas_de_Seguridad_de_Contenido">Tópicos de Políticas de Seguridad de Contenido</h2> - -<dl> - <dt><a href="/en-US/docs/Web/Security/CSP/Introducing_Content_Security_Policy">Introducción a Políticas de Seguridad de Contenido</a></dt> - <dd>Un resumen de que es y como CSP puede hacer su sitio mas seguro.</dd> - <dt><a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">Directivas de Políticas CSP</a></dt> - <dd>Una referencia de las directivas de políticas CSP.</dd> - <dt><a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy">Usando Políticas de Seguridad de Contenido</a></dt> - <dd>Puede ajustar el comportamiento de CSP configurando el conjunto de las políticas. Esto le permite reducir y ajustar la seguridad para tipos individuales de recursos, basado en las necesidades de su sitio. Este artículo describe como configurar CSP, asi como también habilitarlo para el uso en su sitio.</dd> - <dt><a href="/en-US/docs/Web/Security/CSP/Using_CSP_violation_reports">Usando reportes de violación de CSP</a></dt> - <dd>Como usar los reportes de violación de las Políticas de Seguridad de Contenido para monitorear los intentos de ataque a su sitio y a sus usuarios.</dd> - <dt><a href="/en-US/docs/Security/CSP/Default_CSP_restrictions">Restricciones CSP por defecto</a></dt> - <dd>Detalles acerca de las restricciones por defecto reforzadas por CSP.</dd> -</dl> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Security">Seguridad</a></li> - <li><a href="/en-US/docs/HTTP_access_control">Control de acceso HTTP</a></li> - <li><a class="link-https" href="http://www.w3.org/TR/CSP/">Especificación CSP 1.0</a></li> - <li><a class="link-https" href="http://w3c.github.io/webappsec/specs/content-security-policy/csp-specification.dev.html">Especificación CSP 2</a></li> - <li><a href="/docs/Apps/CSP">Restricciones CSP para Aplicaciones Web Públicas</a></li> -</ul> diff --git a/files/es/web/security/csp/introducing_content_security_policy/index.html b/files/es/web/security/csp/introducing_content_security_policy/index.html deleted file mode 100644 index 58960c7798..0000000000 --- a/files/es/web/security/csp/introducing_content_security_policy/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Introducción a Políticas de Seguridad de Contenido -slug: Web/Security/CSP/Introducing_Content_Security_Policy -tags: - - Documento - - Políticas de Seguridad de Contenido - - Referencia - - Seguridad -translation_of: Web/HTTP/CSP -translation_of_original: Web/Security/CSP/Introducing_Content_Security_Policy ---- -<p>{{ gecko_minversion_header("2") }}</p> - -<p><strong>Políticas de Seguridad de Contenido</strong> (CSP) es una capa de seguridad adicional que ayuda a detectar y mitigar cierto tipo de ataques, incluyendo <a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross-site_scripting">Cross-Site Scripting (XSS)</a> y ataques de inyección de datos. Estos ataques son usados para cualquier cosa desde el robo de datos hasta hasta la alteración de su sitio o la distribución de malware.</p> - -<p>CSP esta diseñado para ser completamente compatible hacia atras; los navegadores web que no lo soporten todavía pueden trabajar con servidores que las implementen, y viceversa. Los navegadores web que no soporten CSP simplemente la ignoran, funcionando como es normal, usando la política de mismo origen por defecto para contenido web. Si el sitio no tiene la cabecera CSP, los navegadores web usan en su lugar la <a href="/en-US/docs/Web/Security/Same-origin_policy" title="En/Same origin policy for JavaScript">política de mismo origen</a>.</p> - -<p>Habilitar CSP tan fácil como configurar su servidor web para retornar la cabecera HTTP <code>Content-Security-Policy</code>. (Antes de Firefox 23, la cabecera <code>X-Content-Security-Policy</code> era usada). Ver <a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Usando Políticas de Seguridad de Contenido</a> para detalles de como configurar y habilitar CSP.</p> - -<div class="note"><strong>Nota:</strong> El estándar de Políticas de Seguridad de Contenido <a class="link-https" href="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element" title="https://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#meta-http-equiv--x-content-security-policy---html-element">especifica</a> que un elemento {{ HTMLElement("meta") }} puede ser usado para configurar una política, pero esta característica todavía no está soportada en Firefox. El soporte para esta característica será añadida según <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=663570" title="https://bugzilla.mozilla.org/show_bug.cgi?id=663570">bug 663570</a>.</div> - -<h2 id="Mitigando_cross_site_scripting">Mitigando cross site scripting</h2> - -<p>Un objetivo primario de CSP es mitigar y reportar ataques XSS. Los ataques XSS explotan la confianza de los navegadores web en el contenido recibido del servidor. Los scripts maliciosos son ejecutados por la victima del navegador web por que éste confía en el origen del contenido, aún cuando no viene desde donde parece venir.</p> - -<p>CSP hace posible a los administradores de servidores reducir o eliminar los vectores por los cuales un ataque XSS puede ocurrir especificando los dominios que el navegador web debe considerar orígenes válidos de scripts ejecutables. Un navegador web compatible con CSP entonces solo ejecutará scripts cargados en archivos fuente recibidos de aquellos dominios permitidos, ignorando todos los demás scripts (incluyendo scripts en línea y atributos HTML de manejo de eventos).</p> - -<p>Como una última forma de protección, los sitios que no deseen permitir nunca la ejecución de scripts pueden optar por deshabilitar globalmente la ejecución de scripts.</p> - -<h2 id="Mitigando_ataques_de_packet_sniffing">Mitigando ataques de packet sniffing</h2> - -<p>En adición a la restricción de los dominos desde los cuales el contenido puede ser cargado, el servidor puede especificar que protocolos son permitidos para su uso; por ejemplo (e idealmente, desde un punto de vista de seguridad), un servidor puede especificar que todo el contenido debe ser cargado usando HTTPS.</p> - -<div class="note"><strong>Nota:</strong> Una estrategia de transmisión segura de datos incluye no solo reforzar HTTPS para la transferencia de datos, sino tambien marcar todas las cookies con indicadores seguros y proveer redirecciones automáticas desde páginas HTTP a sus contrapartes en HTTPS.</div> - -<div class="note"><strong>Nota:</strong> Los sitios pueden usar tambien la cabecera HTTP <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security" title="/en/Security/HTTP_Strict_Transport_Security">Strict-Transport-Security</a> para asegurarse de que los navegadores web se conecten solo a traves de un canal encriptado.</div> - -<h2 id="Ver_también">Ver también</h2> - -<ul> - <li><a href="/en-US/docs/Web/Security/CSP/Using_Content_Security_Policy" title="en/Security/CSP/Using Content Security Policy">Usando las Políticas de Seguridad de Contenido</a></li> - <li><a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives" title="en/Security/CSP/CSP policy directives">Directivas de políticas CSP</a></li> - <li><a href="/en-US/docs/Web/Security/CSP/Using_CSP_violation_reports" title="en/Security/CSP/Using CSP violation reports">Usando reportes de violación de CSP</a></li> -</ul> - -<h2 id="Especificación">Especificación</h2> - -<ul> - <li>{{ spec("https://w3c.github.io/webappsec/specs/content-security-policy/", "Políticas de Seguridad de Contenidos (Borradores de Editores)") }}</li> - <li>{{ spec("http://www.w3.org/TR/CSP/", "Políticas de Seguridad de Contenido (Recomendación Candidata)") }}</li> -</ul> - -<div class="noinclude"> -<p>{{ languages( { "ja": "ja/Introducing_Content_Security_Policy" } ) }}</p> -</div> - -<p> </p> diff --git a/files/es/web/security/same-origin_politica/index.html b/files/es/web/security/same-origin_policy/index.html index 18e2e759b1..18e2e759b1 100644 --- a/files/es/web/security/same-origin_politica/index.html +++ b/files/es/web/security/same-origin_policy/index.html diff --git a/files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html b/files/es/web/security/securing_your_site/turning_off_form_autocompletion/index.html index 959d468392..959d468392 100644 --- a/files/es/web/security/securing_your_site/desactivar_autocompletado_formulario/index.html +++ b/files/es/web/security/securing_your_site/turning_off_form_autocompletion/index.html diff --git a/files/es/web/svg/applying_svg_effects_to_html_content/index.html b/files/es/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..b5c8f17b51 --- /dev/null +++ b/files/es/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,102 @@ +--- +title: Aplicación de efectos de SVG para el contenido HTML +slug: Applying_SVG_effects_to_HTML_content +tags: + - CSS + - Firefox 3.5 + - Firefox 4.0 + - HTML + - HTML 5 + - SVG + - XHTML +--- +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Aplicación de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efectos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML.</span></span></p> +<p>{{ gecko_minversion_header("1.9.1") }}</p> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Firefox</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">3.5</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">introduce</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">soporte para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">como un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">componente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efectos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br> +<br> +<span class="hps" title="Haz clic para obtener otras posibles traducciones">Puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">especificar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los estilos</span><span title="Haz clic para obtener otras posibles traducciones">, ya sea dentro</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo documento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o dentro de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hoja de estilos externa</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<div class="note"><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Nota</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Las referencias</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en archivos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">deben</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ser</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de el mismo origen</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de origen</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></div> +<h2 id="Uso_integrado_SVG"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Uso</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">integrado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span></span></h2> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Para aplicar un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efecto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">primero tiene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">crear el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que hace referencia al</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<pre class="brush: html"><style>.stylename { mask: url(#localstyle); }</style> +</pre> +<p> <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En el ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">anterior</span><span title="Haz clic para obtener otras posibles traducciones">, el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nuevo estilo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">por "</span><span title="Haz clic para obtener otras posibles traducciones">stylename</span><span title="Haz clic para obtener otras posibles traducciones">,</span><span title="Haz clic para obtener otras posibles traducciones">"</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que hace referencia</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a el identificador</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">localstyle</span><span title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Una vez que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estableció</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplica</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">todos los elementos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br> +<br> +<span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">suena</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">más</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">complicado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">lo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que realmente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">echar un vistazo a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los ejemplos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tener una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">buena idea de cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">funciona esto</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br> +<br> +<span class="hps" title="Haz clic para obtener otras posibles traducciones">Hay</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tres</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">pueden aplicar</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">usar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la máscara</span><span title="Haz clic para obtener otras posibles traducciones">, el recorrido de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o un filtro</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<p> </p> +<h3 id="Ejemplo_Enmascaramiento_(Máscara)"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Enmascaramiento (M</span></span><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">áscara)</span></span></h3> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establecer un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">proporciona</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de degradado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">similar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">lo siguiente en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">su</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p> +<p><strong><span style="color: rgb(255, 0, 0);">NOTA:</span> </strong><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El espaciamiento de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nombre no</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">es válida</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML 5</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">dejar fuera</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de la</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">svg</span><span title="Haz clic para obtener otras posibles traducciones">:</span><span title="Haz clic para obtener otras posibles traducciones">"</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">las etiquetas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los documentos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en formato HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<pre class="brush: xml"> <style>.target { mask: url(#m1); }</style> + <svg:svg height="0"> + <svg:mask id="m1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"> + <svg:linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1"> + <svg:stop stop-color="white" offset="0"/> + <svg:stop stop-color="white" stop-opacity="0" offset="1"/> + </svg:linearGradient> + <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <svg:rect x="0.5" y="0.2" width="0.5" height="0.8" fill="url(#g)"/> + </svg:mask> + </svg:svg> +</pre> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Tenga en cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en la línea</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">1</span><span title="Haz clic para obtener otras posibles traducciones">, la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifica</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mediante</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una dirección URL para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">#</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">M1</span><span title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que es</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el identificador</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifican a continuación</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Todo lo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">demás</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se especifican otros detalles</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sobre</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">misma</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara de degradado</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En realidad,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de aplicar el efecto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">XHTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">o</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se hace</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">simplemente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">asignar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de destino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">definido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">anteriormente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el elemento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">así</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p> +<pre class="brush: xml"><iframe class="target" src="http://mozilla.org"/></pre> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">En este ejemplo se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incrusta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">iframe</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que contiene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sitio</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">web de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Mozilla.org</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">representa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">máscara</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se le aplica</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<p><a class="internal" href="/@api/deki/files/3213/=maskdemo.xhtml" title="/@api/deki/files/3213/=maskdemo.xhtml">View this example live</a>.</p><h3 id="Ejemplo_Recorte"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Recorte</span></span></h3> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para recortar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Cuando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">nos fijamos en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la demostración</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en vivo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incluso en las zonas</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">calientes</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los enlaces</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">recortan</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<pre class="brush: xml"> <style>.target { clip-path: url(#c1); }</style> + <svg:svg height="0"> + <svg:clipPath id="c1" clipPathUnits="objectBoundingBox"> + <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </svg:clipPath> + </svg:svg> +</pre> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">área de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">recorte</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">compuesto por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">círculo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">rectángulo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y le asigna</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">#</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">c1</span> <span class="hps atn" title="Haz clic para obtener otras posibles traducciones">"</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Esto</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">entonces se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hace referencia</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Una vez que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de destino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera</span><span title="Haz clic para obtener otras posibles traducciones">, la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">asignar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">a cualquier</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elemento</span><span title="Haz clic para obtener otras posibles traducciones">.</span></span></p> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Tenga en cuenta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">también</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">realizar cambios en el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en tiempo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">real</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambios</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">afectan inmediatamente a</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la prestación</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Por</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambiar el tamaño del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">círculo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">camino</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">establecido:</span></span></p> +<pre class="brush: xml"> var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +</pre> +<p><a class="internal" href="/@api/deki/files/3214/=clipdemo.xhtml" title="/@api/deki/files/3214/=clipdemo.xhtml">View this example live</a>. <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">incluye</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">botón</span>, <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">hacer clic</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambiar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver que el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cambio surta efecto.</span></span></p><h3 id="Ejemplo_Filtrar"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">:</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Filtrar</span></span></h3> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra cómo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtro</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el contenido</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Establece</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">varios filtros</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que se aplican</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">estilos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cada uno</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tres</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elementos</span><span title="Haz clic para obtener otras posibles traducciones">, tanto en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los Estados</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">suspender</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">normal y</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el ratón</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br> +<br> +<span class="hps" title="Haz clic para obtener otras posibles traducciones">Cualquier</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtro se puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Por ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">efecto de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desenfoque gaussiano</span><span title="Haz clic para obtener otras posibles traducciones">, puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizar</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p> +<pre class="brush: xml"><svg:filter id="f1"> + <svg:feGaussianBlur stdDeviation="3"/> +</svg:filter> +</pre> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">También puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplicar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">una</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">matriz de color</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de esta manera:</span></span></p> +<pre class="brush: xml"> <svg:filter id="f2"> + <svg:feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> + + </svg:filter> +</pre> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Estos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">son</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">sólo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">dos de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">los cinco</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtros de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">muestra en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">este</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">.</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">Asegúrese</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">echar un vistazo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">al</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">completo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">si</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">le gustaría</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ver</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">más</span><span title="Haz clic para obtener otras posibles traducciones">.</span><br> +<br> +<span class="hps" title="Haz clic para obtener otras posibles traducciones">Los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">cinco</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">filtros se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplican</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mediante el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">siguiente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">código CSS:</span></span></p> +<pre class="brush: xml"> <style> + p.target { filter:url(#f3); } + p.target:hover { filter:url(#f5); } + b.target { filter:url(#f1); } + b.target:hover { filter:url(#f4); } + iframe.target { filter:url(#f2); } + iframe.target:hover { filter:url(#f3); } + </style> +</pre> +<p><a class="internal" href="/@api/deki/files/3217/=filterdemo.xhtml" title="/@api/deki/files/3217/=filterdemo.xhtml">View this example live</a>.</p><h2 id="Uso_de_referencias_externas"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Uso de</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">referencias</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externas</span></span></h2> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Los</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">elementos</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">utiliza</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">para cortar</span><span title="Haz clic para obtener otras posibles traducciones">, el enmascaramiento</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">y así sucesivamente</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se pueden cargar</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desde</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">externo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mientras</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">proviene</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">mismo origen</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">documento</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">HTML al que</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">aplica.</span><br> +<br> +<span class="hps" title="Haz clic para obtener otras posibles traducciones">Por ejemplo</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">si</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tu</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">CSS</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">en</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un archivo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">llamado</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">default.css</span><span title="Haz clic para obtener otras posibles traducciones">,</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">puede</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">tener el siguiente aspecto</span><span title="Haz clic para obtener otras posibles traducciones">:</span></span></p> +<pre class="brush: xml">.target { clip-path: url(resources.svg#c1); }</pre> +<p><span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">El</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">SVG</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">se importa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">desde</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">un</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">archivo</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">llamado</span></span> <code>resources.svg</code>, <span id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">utilizando</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">la</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ruta</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">del clip</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">con el</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">ID</span></span> <code>c1</code>.</p><h2 id="Véa_también"><span class="short_text" id="result_box" lang="es"><span class="hps" title="Haz clic para obtener otras posibles traducciones">Véa</span> <span class="hps" title="Haz clic para obtener otras posibles traducciones">también</span></span></h2> +<ul> <li><a class="internal" href="/en/SVG" title="En/SVG">SVG</a></li> <li><a class="external" href="/web-tech/2008/09/15/svg-effects-for-html-content" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/09/15/svg-effects-for-html-content/">SVG Effects for HTML Content</a> (blog post)</li> <li><a class="external" href="/web-tech/2008/10/10/svg-external-document-references" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/2008/10/10/svg-external-document-references/">SVG External Document References</a> (blog post)</li> +</ul> +<p> </p> +<p> </p> +<p style="margin-left: 680px;"> CESAR ORTIZ GUTIERREZ - ELPATOX - wWw.Patito.Tk</p> diff --git a/files/es/web/svg/element/glifo/index.html b/files/es/web/svg/element/glyph/index.html index 78f97fe3bb..78f97fe3bb 100644 --- a/files/es/web/svg/element/glifo/index.html +++ b/files/es/web/svg/element/glyph/index.html diff --git a/files/es/web/html/elemento/script/index.html b/files/es/web/svg/element/script/index.html index d1b744f192..d1b744f192 100644 --- a/files/es/web/html/elemento/script/index.html +++ b/files/es/web/svg/element/script/index.html diff --git a/files/es/web/svg/svg_1.1_support_in_firefox/index.html b/files/es/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..ba802c6af4 --- /dev/null +++ b/files/es/web/svg/svg_1.1_support_in_firefox/index.html @@ -0,0 +1,847 @@ +--- +title: SVG en Firefox +slug: SVG_en_Firefox +tags: + - NecesitaRevisiónTécnica + - SVG + - Todas_las_Categorías +translation_of: Web/SVG/SVG_1.1_Support_in_Firefox +--- +<p> </p> +<p><b>Firefox 2</b> sigue avanzando en la mejora de la implementación de <a class="external" href="http://www.w3.org/Graphics/SVG/">Gráficos vectoriales escalables (SVG)</a>. Aunque el único elemento añadido a los ya soportados por Firefox 1.5 ha sido <code><textPath></code>, se han resuelto varios fallos y se ha incorporado parte de la especificación.</p> +<p><b>Firefox SVG</b> es un subconjunto de <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). Al final de este documento se puede encontrar una lista completa de los elementos <a href="es/SVG">SVG</a> y su estado de implementación en Firefox 2.0. El resto del documento aporta información sobre las limitaciones en la implementación.</p> +<p>La particular implementación que hemos realizado puede dificultar la creación de contenidos. Le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación.</p> +<p>Mientras lee esto, usted puede preguntarse cuántos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia la <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">hoja de ruta</a> actual sitúa la publicación de Firefox con la nueva versión de Gecko en el primer trimestre de 2007. Sin embargo si desea empezar a experimentar con las nuevas funcionalidades, tiene a su disposición en las <a class="external" href="http://www.mozilla.org/developer/#builds">compilaciones nocturnas</a> las últimas evoluciones. También puede consultar <a class="external" href="http://www.mozilla.org/projects/svg/status.html">la tabla actualizada</a> sobre la implementación de SVG en la versión de desarrollo.</p> +<h2 id="Rendimiento" name="Rendimiento">Rendimiento</h2> +<p>Firefox usa el mismo motor de renderizado, <a class="external" href="http://cairographics.org/">cairo</a>, en todas las plataformas. Por lo tanto sus características de interpretación serán similares. El rendimiento en Linux es el más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER.</p> +<p>En Windows el renderizado de SVG es bastante más rápido que en otras plataformas.</p> +<h2 id="Rango_de_coordenadas" name="Rango_de_coordenadas">Rango de coordenadas</h2> +<p>Si el contenido posee una geometría con un inmenso rango de coordenadas, habrá que tener cuidado con los problemas ocasionados por el uso interno de cairo para la representación de punto fijo de 16.16 bits para los cálculos. Cairo no recorta las primitivas antes del proceso de rasterización por lo que las coordenadas finales que excedan el rango de -32678 a 32677 tras la transformación provocarán errores de renderizado y posiblemente un rendimiento muy bajo.</p> +<h2 id="Texto_en_Windows_98" name="Texto_en_Windows_98">Texto en Windows 98</h2> +<p>Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado de texto no funcionará en Windows 98. En realidad la cosa es aún peor, si aparece cualquier texto durante el renderizado de contenidos SVG, todo el dibujo se parará.</p> +<h2 id="Selecci.C3.B3n_de_fuente" name="Selecci.C3.B3n_de_fuente">Selección de fuente</h2> +<p>Si está familiarizado con CSS probablemente sabrá que pueden especificar fuentes alternativas para las propiedades 'font', por si los glifos de una fuente concreta no están disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si ésta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible.</p> +<h2 id="Impresi.C3.B3n" name="Impresi.C3.B3n">Impresión</h2> +<p>Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen.</p> +<p>Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG.</p> +<h2 id="Opacidad_de_grupos" name="Opacidad_de_grupos">Opacidad de grupos</h2> +<p>La propiedad de opacidad de grupo <code>opacity</code> permite que los objetos contenedores SVG puedan ser tratados como capas semitransparentes, y está separada de las propiedades "fill-opacity" y "stroke-opacity". La implementación actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados.</p> +<h2 id="Fuentes_rotadas" name="Fuentes_rotadas">Fuentes rotadas</h2> +<p>En las plataformas Microsoft Windows y Mac OSX, un texto rotado no es rellenado completamente. El error es por lo general despreciable y puede solucionarse usando un relleno un poquito más grueso. A continuación se muestra un ejemplo con la diferencia:</p> +<p><img alt="Imagen:Text-fill-stroke.png"></p> +<h2 id=".3Cimage.3E" name=".3Cimage.3E"><image></h2> +<p><image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja.</p> +<p>Todas las instancias de <image> tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, <use> en contenido <image> cuenta como otra copia en este caso.</p> +<p>De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar sobremanera el rendimiento en Firefox 1.5.</p> +<h2 id="Eventos" name="Eventos">Eventos</h2> +<p>Soportamos los atributos de SVG para eventos, a excepción de <code>onfocusin</code>, <code>onfocusout</code>, y <code>onactivate</code>.</p> +<p>Nuestro actual manejo del evento <code>onload</code> no es estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo <code>onload</code> sea llamado para cada elemento, un evento <code>SVGLoad</code> será llamado únicamente para el elemento <code><svg></code> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código <code>onload</code>. Dichos métodos son <code>getBBox</code>, <code>getScreenCTM</code>, etc...</p> +<p>No damos soporte a los eventos para el teclado específicos de Adobe (<code>onkeydown</code>, <code>onkeyup</code>).</p> +<h2 id="Interoperabilidad" name="Interoperabilidad">Interoperabilidad</h2> +<p>Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales y son el resultado de una implementación más estricta en Firefox. En <a class="external" href="http://jwatt.org/svg/authoring/">Guías de estilo para crear SVG</a>, Jonathan Watt explica problemas comunes.</p> +<h2 id="Situaciones_de_uso_de_SVG" name="Situaciones_de_uso_de_SVG">Situaciones de uso de SVG</h2> +<p>Firefox 1.5 maneja SVG como un documento completo, o como referencia para los elementos <code>embed</code>, <code>object</code>, e <code>iframe</code>. Actualmente no puede ser usado en HTML o XHTML como fuente del elemento <code>img</code>, ni para las propiedades CSS relativas a las imágenes.</p> +<h2 id="Animaciones" name="Animaciones">Animaciones</h2> +<p>Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG.</p> +<h2 id="Fallos_corregidos_en_Firefox_2" name="Fallos_corregidos_en_Firefox_2">Fallos corregidos en Firefox 2</h2> +<p>Firefox 2 ha arreglado algunos fallos en su implementación para SVG. Esta sección presenta un repaso rápido a los arreglos más interesantes.</p> +<ul> + <li>Se ha solucionado un problema al rellenar y rotar texto en el que la posición del dibujo no era reiniciada correctamente entre dos operaciones (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=333615">333615</a>).</li> +</ul> +<ul> + <li>Los gradientes radiales ahora mantienen los atributos <code>fx</code> y <code>fy</code> para asegurar que se encuentran dentro de la circunferencia de un círculo (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=330682">330682</a>).</li> +</ul> +<ul> + <li>La longitud del texto ahora puede ser calculada usando su método <code>getComputedTextLength()</code>, lo que mejora la compatibilidad con ciertos sitios web (bugs <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311031">311031</a> and <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=264380">264380</a>).</li> +</ul> +<ul> + <li>Los elementos <code><tspan></code> ahora soportan correctamente los atributos <code>dx</code> y <code>dy</code> y funcionan si los atributos <code>x</code> e <code>y</code> no han sido especificados (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=311063">311063</a>).</li> +</ul> +<ul> + <li>Se ha mejorado la lógica de invalidación en el redibujado, lo que evita el parpadeo de los píxeles en ciertos casos (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=312269">312269</a>).</li> +</ul> +<ul> + <li>Arreglado un fallo que impedía que los eventos fuesen manejados apropiadamente por objetos expuestos por el camino de recorte de otro objeto (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=315861">315861</a>).</li> +</ul> +<ul> + <li>Arreglado un fallo que podía provocar el cierre de la aplicación si un elemento <code><path></code> tenía un atributo <code>d</code> con una cadena vacía (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=318379">318379</a>).</li> +</ul> +<ul> + <li>El atributo <code>overflow</code> ahora funciona para el elemento <code>marker</code>, usando la sintaxis <code>overflow="visible"</code>, la cual antes no funcionaba correctamente (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=320623">320623</a>).</li> +</ul> +<ul> + <li>Ahora se puede acceder al atributo <code><style></code> del elemento <code>marker</code> sin que se lance ninguna excepción (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323589">323589</a>).</li> +</ul> +<ul> + <li>Ahora se pueden usar valores porcentuales en el radio de un gradiente radial (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=323669">323669</a>).</li> +</ul> +<ul> + <li>El método <code>documentElement.createSVGAngle()</code> ahora está implementado (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=327437">327437</a>).</li> +</ul> +<ul> + <li>Cuando un elemento <code><stop></code> se convierte en hijo de otro elemento <code><stop></code> dicho elemento deja de ser un aserto (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=328137">328137</a>).</li> +</ul> +<ul> + <li>Ahora funciona el cambio de la altura, anchura y orientación de los pinceles (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=325728">325728</a>).</li> +</ul> +<ul> + <li>El tamaño de las fuentes impresas en Windows ya no es tan grande como el especificado por el SVG (bug <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=314707">314707</a>).</li> +</ul> +<h2 id="Estado_de_la_implementaci.C3.B3n_de_los_elementos" name="Estado_de_la_implementaci.C3.B3n_de_los_elementos">Estado de la implementación de los elementos</h2> +<table style="margin: 5px;"> + <tbody> + <tr> + <th><b>Elemento </b></th> + <th><b>Notas </b></th> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Módulo de estructura</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>Los atributos DOM <code>currentScale</code> y <code>currentTranslate</code> están implementados pero no existe una interfaz de usuario para pan ni zoom.</li> + <li>SVGSVGElement + <ul> + <li>Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView.</li> + <li>Bindings no implementados: pauseAnimations, unpauseAnimations,animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>Solo disponible en el DOM, sin interfaz de usuario.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>Solo disponible en el DOM, sin interfaz de usuario. </td></li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>Solo funciona para referencias internas al documento (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>).</li> + <li>No sigue completamente las reglas de la cascada <svg:use> (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>).</li> + <li>No entrega eventos a un arbol SVGElementInstance (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Módulo de procesamiento condicional</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Módulo de imagen</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>Solo funciona para tramas de bitmaps (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Módulo de estilo</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Módulo de formas</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>Interfaz SVGPathElement + <ul> + <li>Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList</li> + <li>Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength</li> + </ul> + </li> + <li>Interfaz SVGPathSegList + <ul> + <li>Bindings No implementados: replaceItem()</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Módulo de texto</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>SVGTextElement + <ul> + <li>Atributos no implementados: rotate, textLength, lengthAdjust</li> + <li>Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString.</li> + <li>Bindings not functional at <code>onload</code> time: getExtentOfChar</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>SVGTSpanElement + <ul> + <li>Atributos no implementados: rotate, textLength, lengthAdjust</li> + <li>Bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString</li> + </ul> + </li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> + <td> + <ul> + <li>Implementado en Firefox 2.</li> + <li>Atributos no implementados: method, spacing, textLength, lengthAdjust</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Módulo de pinceles</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Color Módulo de perfiles</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Módulo de gradientes</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Módulo de patrones</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Módulo de recorte</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> + <td> + <ul> + <li>Implementado.</li> + <li>No maneja los caminos de recorte que tiene elementos con diferentes propiedades de reglas de recorte o que referencian otros clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Módulo de máscaras</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Módulo de filtros</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Módulo de cursores</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Módulos de hiperenlaces</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> + <td> + <ul> + <li>Implementado como un binding XBL - object is not of type SVGAElement.</li> + <li>Sólo están implementados los atributos <code>xlink:href</code>, <code>xlink:show</code> y <code>xlink:target</code> (en Firefox 2).</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">Módulo de vista</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Módulo de scripting</a></th> + </tr> + <tr style="color: black; background-color: lightgreen;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> + <td> + <ul> + <li>Implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Módulo de animación</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Módulo de fuentes</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> + <td> + <ul> + <li>No implementado.</li> + </ul> + </td> + </tr> + <tr> + <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Módulo de extensibilidad</a></th> + </tr> + <tr style="color: black; background-color: salmon;"> + <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> + <td> + <ul> + <li>Implementado, aunque no integrado.</li> + </ul> + </td> + </tr> + </tbody> +</table> +<p>{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}</p> diff --git a/files/es/web/svg/svg_en_firefox_1.5/index.html b/files/es/web/svg/svg_en_firefox_1.5/index.html deleted file mode 100644 index f2d954e573..0000000000 --- a/files/es/web/svg/svg_en_firefox_1.5/index.html +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: SVG en Firefox 1.5 -slug: Web/SVG/SVG_en_Firefox_1.5 -tags: - - SVG - - Todas_las_Categorías ---- -<p> -<a href="es/Firefox_1.5">Firefox 1.5</a> marca la publicación del primer navegador de Mozilla que soporta el formato de <a class="external" href="http://www.w3.org/Graphics/SVG/">gráficos vectoriales escalables (SVG)</a>. El camino de este proyecto ha sido largo, nos satisface poner a disposición de los desarrolladores esta tecnologia y estamos impacientes por ver sus frutos. </p><p>Firefox SVG es un subconjunto de <a class="external" href="http://www.w3.org/TR/SVG11/">SVG 1.1</a>, pero no es ninguno de los perfiles oficiales (Tiny, Basic, Full). En este documento se puede encontrar una lista completa de los elementos que han sido implementados en Firefox 1.5. Además encontrará información sobre las limitaciones en su implementación. -</p><p>La peculiar implementación que hemos realizado puede dificultar el creación de contenidos, le pedimos que tenga paciencia mientras trabajamos en la implementación completa de esta extensa especificación. -</p><p>Mientras lee esto, usted puede preguntarse cuandos de estos detalles sobre de la implementación pueden haber cambiado. Por desgracia el <a class="external" href="http://www.mozilla.org/roadmap/gecko-1.9-roadmap.html">mapa de ruta actual</a> situa la publicación de Firefox con Gecko 1.9 en el primer trimestre de 2007. Sin embargo si usted desea comenzar a experimentar con las nuevas funcionalidades, tiene a su disposición en las <a class="external" href="http://www.mozilla.org/developer/#builds">nightly builds</a> las últimas evoluciones, y si lo desea puede consultar <a class="external" href="http://www.mozilla.org/projects/svg/status.html">la tabla actualizada</a> sobre la implementación de SVG en la versión de desarrollo. Como podreis comprobar, la cosa avanza a buen ritmo ☺. -</p><p><br> -</p> -<h2 id="Performance" name="Performance"> Performance </h2> -<p>Firefox usa el mismo motor de renderizado, <a class="external" href="http://cairographics.org/">cairo</a>, en todas las plataformas en las que navega. Por lo tanto sus características de interpretación serán similares. La Performance en linux es la más difícil de predecir, esto es debido a las distintas implementaciones que hacen los diversos servidores X de la extensión RENDER. -</p><p>En Windows el renderizado de SVG es bastante más rápido que en otras plataformas. -</p> -<h2 id="Coordinate_range" name="Coordinate_range"> Coordinate range </h2> -<p>Si tu contenido posee geometría con un gran rango de coordenadas, necesitarás tener cuidado con los problemas causados por el uso interno de cairo de una representación en punto fijo de 16.16 bit para sus cálculos. Cairo no clip primitives antes de la rasterización, por lo que las coordenadas finales tras la transformación que excedan el rango desde -32678 a 32677 causarán errores de renderizado y posiblemente un funcionamiento bastante lento. -</p> -<h2 id="Texto_en_Windows_98" name="Texto_en_Windows_98"> Texto en Windows 98 </h2> -<p>Un lamentable efecto secundario de usar Cairo como backend de renderizado en Windows es que el renderizado del texto no funcionará en Windows 98. En realidad la cosa es aun peor, si aparece cualquier texto durante la visualización de contenidos SVG, todo el dibujo se parará. -</p> -<h2 id="Selecci.C3.B3n_de_fuente" name="Selecci.C3.B3n_de_fuente"> Selección de fuente </h2> -<p>Si usted está familiarizado con CSS probablemente sabrá que puede especificar fuentes alternativas para las propiedades 'font' por si los glifos de una fuente concreta no estén disponibles. El actual motor de renderizado de SVG sólo tratará de usar la primera fuente especificada, y si esta no existe, usará una fuente del sistema. Las fuentes secundarias nunca son usadas, por ejemplo, font-family="Arial,LucidaSansUnicode" no generará una fuente LucidaSansUnicode, aun en el caso de que Arial no esté disponible. -</p> -<h2 id="Impresi.C3.B3n" name="Impresi.C3.B3n"> Impresión </h2> -<p>Por desgracia, actualmente en la impresión no se aprovechan las propiedades vectoriales de SVG para generar una salida óptima, por contra, se renderiza según la resolución de la pantalla y luego la salida se hace como imagen. -</p><p>Al imprimir en MS-Windows, el tamaño de la fuente será mucho más grande que el especificado por SVG. -</p> -<h2 id="Opacidad_de_grupo" name="Opacidad_de_grupo"> Opacidad de grupo </h2> -<p>La propiedad de opacidad de grupo "opacity" permite que los objetos contenedores SVG puedan ser tratados como capas semi-transparentes, y sea separado de propiedades "fill-opacity" y "stroke-opacity" La implementacion actual de "opacity" consume bastantes recursos, debería ser usada con mesura. "fill-opacity" y "stroke-opacity" son mucho más rápidas, y dependiendo de su contenido pueden aportar los mismos resultados. -</p><p>Actualmente la opacidad de grupo está implementado solo para <g> pero no para <text> o <svg> -</p> -<h2 id="Stroking_fonts" name="Stroking_fonts"> Stroking fonts </h2> -<p>On the MS-Windows and OS-X platforms, the stroke of the text will not exactly match the fill. The error is typically quite small, and can be covered by using a slightly thicker stroke. An example of this difference: -</p><p><br> -<img alt="Imagen:Text-fill-stroke.png"> -</p> -<h2 id=".3Cimage.3E" name=".3Cimage.3E"> <image> </h2> -<p><image> no soporta imágenes SVG en Firefox 1.5, sólo los formatos de imagen rasterizados que Firefox maneja. -</p><p>Todas las instancias de <image> tienen una copia separada de la imagen que está siendo usada, lo cual es algo a tener en cuenta si tu contenido está usando múltiples copias de una imagen para un icono o algo parecido. Desafortunadamente, <use> en contenido <image> cuenta como otra copia en este caso. -</p><p>De manera adicional, un uso intensivo de imágenes rasterizadas en SVG puede degradar de sobremanera el rendimiento en Firefox 1.5. -</p> -<h2 id="Eventos" name="Eventos"> Eventos </h2> -<p>Soportamos los atributos de SVG para eventos, a excepción de "onfocusin", "onfocusout", y "onactivate". -</p><p>Nuestro manejo del evento "onload" es actualmente no-estándar, pero creemos que aún así no impide su uso correcto. Mientras que el código especificado por el atributo "onload" será llamado para cada elemento, un evento SVGLoad es llamado únicamente para el elemento <svg> raíz. Algunos métodos DOM devolverán basura o error si son llamados antes de que el elemento correspondiente haya sido renderizado, algo que tendrás que tener en cuenta al escribir código "onload". Dichos métodos son getBBox, getScreenCTM, etc. -</p><p>No damos soporte a los eventos para el teclado específicos de Adobe ("onkeydown", "onkeyup"). -</p> -<h2 id="Interoperabilidad" name="Interoperabilidad"> Interoperabilidad </h2> -<p>Si está trabajando con contenidos SVG actuales, puede encontrar problemas al cargarlos en Firefox. La mayoría de los problemas suelen ser triviales, y son el resultado de una implementación más estricta en Firefox. En <a class="external" href="http://jwatt.org/svg/authoring/">SVG Authoring Guidelines</a> Jonathan Watt's explica los problemas comunes. -</p> -<h2 id="Situaciones_del_uso" name="Situaciones_del_uso"> Situaciones del uso </h2> -<p>Firefox 1.5 maneja SVG como un documento entero, o como referencia para los elementos embed, object, e iframe. Actualmente no puede ser usado como fuente del elemento img, ni para las propiedades CSS relativas a las imágenes. -</p> -<h2 id="Animaci.C3.B3n" name="Animaci.C3.B3n"> Animación </h2> -<p>Firefox 1.5 no implementa la animación declarativa, pero soporta scripting dinámico. Doug Shepers lo ha usado para crear <a class="external" href="http://www.vectoreal.com/smilscript/">SmilScript</a>, una pequeña biblioteca de Javascript que implementa parte de la animación declarativa de SVG. -</p> -<h2 id="Elementos.2C_estado_de_la_implementaci.C3.B3n" name="Elementos.2C_estado_de_la_implementaci.C3.B3n"> Elementos, estado de la implementación </h2> <table style="margin: 5px;"> <tbody><tr> <th><b>Elemento</b></th> <th><b>Notas</b></th> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#basic-structure-mod">Módulo Estructura</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SVGElement">svg</a></td> <td> <ul> <li>Implementado. </li><li><code>currentScale</code> and <code>currentTranslate</code> DOM attributes are implemented, but there is no pan and zoom user interface. </li><li>SVGSVGElement <ul> <li> Atributos no implementados: contentScriptType, contentStyleType, viewport, useCurrentView, currentView </li> <li> Bindings no implementados: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#GElement">g</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DefsElement">defs</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#DescElement">desc</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.</td> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#TitleElement">title</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/metadata.html#MetadataElement">metadata</a></td> <td> <ul> <li>Implementado. </li><li>Only stored in the DOM, no user interface.</td> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SymbolElement">symbol</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#UseElement">use</a></td> <td> <ul> <li>Implementado. </li><li>Only works for internal document references (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=269482">bug 269482</a>). </li><li>Doesn't completely follow <svg:use> cascading rules (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265894">bug 265894</a>). </li><li>Doesn't deliver events to a SVGElementInstance tree (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=265895">bug 265895</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#conditional-mod">Conditional Processing Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#SwitchElement">switch</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#image-mod">Image Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/struct.html#ImageElement">image</a></td> <td> <ul> <li>Implementado. </li><li>Only works for raster images (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=272288">bug 272288</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#style-mod">Style Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/styling.html#StyleElement">style</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#shape-mod">Shape Module</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/paths.html#PathElement">path</a></td> <td> <ul> <li>Implementado.</li> <li>SVGPathElement Interfaz <ul> <li> Atributos no implementados: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList </li> <li> Bindings no implementados: getTotalLength, getPointAtLength, getPathSegAtLength </li> </ul> </li> <li>SVGPathSegList Interface <ul> <li>Bindings no implementados: replaceItem()</li> </ul> </li> </ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#RectElement">rect</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#CircleElement">circle</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#LineElement">line</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#EllipseElement">ellipse</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolylineElement">polyline</a></td> <td> <ul> <li>SImplementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/shapes.html#PolygonElement">polygon</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/text.html#text-mod">Módulo Texto</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextElement">text</a></td> <td> <ul> <li>Implementado. </li><li>SVGTextElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> Bindings no implementados: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> <li> Bindings not functional at <code>onload</code> time: getExtentOfChar </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TSpanElement">tspan</a></td> <td> <ul> <li>Implementado. </li><li>SVGTSpanElement <ul> <li> Atributos no implementados: rotate, textLength, lengthAdjust </li> <li> bindings no implementados: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString </li> </ul> </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TRefElement">tref</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#TextPathElement">textPath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphElement">altGlyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphDefElement">altGlyphDef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AltGlyphItemElement">altGlyphItem</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#GlyphRefElement">glyphRef</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#marker-mod">Módulo Marker</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/painting.html#MarkerElement">marker</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/color.html#color-profile-mod">Módulo Color-Profile</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/color.html#ColorProfileElement">color-profile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#gradient-mod">Módulo Gradientes</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#LinearGradientElement">linearGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#RadialGradientElement">radialGradient</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#StopElement">stop</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#pattern-mod">Módulo Pattern</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/pservers.html#PatternElement">pattern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#clip-mod">Módulo Clip</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#ClipPathElement">clipPath</a></td> <td> <ul> <li>Implementado. </li><li>Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (<a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=267224">bug 267224</a>). </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#mask-mod">Módulo Mask</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#MaskElement">mask</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#filter-mod">Módulo Filtro</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#FilterElement">filter</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feBlendElement">feBlend</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixElement">feColorMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement">feComponentTransfer</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feCompositeElement">feComposite</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElement">feConvolveMatrix</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDiffuseLightingElement">feDiffuseLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDisplacementMapElement">feDisplacementMap</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFloodElement">feFlood</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feGaussianBlurElement">feGaussianBlur</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feImageElement">feImage</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeElement">feMerge</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMergeNodeElement">feMergeNode</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feMorphologyElement">feMorphology</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feOffsetElement">feOffset</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpecularLightingElement">feSpecularLighting</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTileElement">feTile</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feTurbulenceElement">feTurbulence</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feDistantLightElement">feDistantLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#fePointLightElement">fePointLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feSpotLightElement">feSpotLight</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncRElement">feFuncR</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncGElement">feFuncG</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncBElement">feFuncB</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feFuncAElement">feFuncA</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#cursor-mod">Módulo Cursor</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/interact.html#CursorElement">cursor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#hyperlinking-mod">Módulo hiperenlace</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#AElement">a</a></td> <td> <ul> <li>Implementado en un binding XBL - object no es del tipo SVGAElement.</li> <li>Solo están implementados los atributos <code>xlink:href</code> y <code>xlink:show</code> </li> <li>Sobre el atributo <code>target</code> vea <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=300868">bug 300868</a></li> </ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#view-mod">Módulo visión</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/linking.html#ViewElement">view</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/script.html#scripting-mod">Módulo Script</a></th> </tr> <tr style="color: black; background-color: lightgreen;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/script.html#ScriptElement">script</a></td> <td> <ul> <li>Implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#animation-mod">Módulo Animación</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateElement">animate</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#SetElement">set</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement">animateMotion</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateTransformElement">animateTransform</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#AnimateColorElement">animateColor</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#mpathElement">mpath</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#font-mod">Módulo Fuentes</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceElement">font</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#GlyphElement">glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#MissingGlyphElement">missing-glyph</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#HKernElement">hkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#VKernElement">vkern</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceSrcElement">font-face-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-uri</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-format</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#FontFaceNameElement">font-face-name</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/fonts.html#DefinitionSrcElement">definition-src</a></td> <td> <ul> <li>No implementado. </li></ul> </td> </tr> <tr> <th colspan="2"><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#extensibility-mod">Módulo Extensibilidad</a></th> </tr> <tr style="color: black; background-color: salmon;"> <td><a class="external" href="http://www.w3.org/TR/SVG11/extend.html#ForeignObjectElement">foreignObject</a></td> <td> <ul> <li>Implementado, but not built. </li></ul> </td> </tr> </tbody></table> -{{ languages( { "en": "en/SVG_in_Firefox", "fr": "fr/SVG_dans_Firefox", "ja": "ja/SVG_in_Firefox", "pl": "pl/SVG_w_Firefoksie" } ) }} diff --git a/files/es/web/svg/tutorial/introducción/index.html b/files/es/web/svg/tutorial/introduction/index.html index 759ef2dbf9..759ef2dbf9 100644 --- a/files/es/web/svg/tutorial/introducción/index.html +++ b/files/es/web/svg/tutorial/introduction/index.html diff --git a/files/es/web/tutoriales/index.html b/files/es/web/tutorials/index.html index eabc70de95..eabc70de95 100644 --- a/files/es/web/tutoriales/index.html +++ b/files/es/web/tutorials/index.html diff --git a/files/es/web/web_components/custom_elements/index.html b/files/es/web/web_components/custom_elements/index.html deleted file mode 100644 index 98c3562a7b..0000000000 --- a/files/es/web/web_components/custom_elements/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Custom Elements -slug: Web/Web_Components/Custom_Elements -tags: - - Componentes Web - - Web Components - - custom elements -translation_of: Web/Web_Components/Using_custom_elements -translation_of_original: Web/Web_Components/Custom_Elements ---- -<p>Los <em>Custom Elements </em>son una característica que permite crear tus propios <a href="https://developer.mozilla.org/en-US/docs/Glossary/Element">elementos</a> HTML personalizados. Pueden tener un comportamiento personalizado y estilos CSS propios. Son una parte de los <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components">Web Components</a>, pero también pueden ser utilizados independientemente.</p> - -<div class="note"> -<p><strong>Nota:</strong> Los <em>Custom elements</em> sólo se han estabilizado recientemente, y partes de MDN todavía contienen información desactualizada de las APIs de los antiguos borradores de la especificación.</p> -</div> - -<p>Puede no estar claro por qué se creó la nueva capacidad de elementos personalizados, ya que ya era posible crear una etiqueta como <code><mytag></code> y aplicarle estilo con CSS, luego utilizar scripts para darle comportamiento. Una ventaja que tienen los <em>custom elements</em> son las reacciones de ciclo de vida (<em>lifecycle reactions)</em>, que permiten asociar comportamiento a diferentes partes del nuevo "ciclo de vida" del elemento. Por ejemplo, se puede asociar un comportamiento concreto cuando un nuevo elemento se inserta en el DOM ("conectado"), y otro distinto cuando es eliminado del DOM ("desconectado"), o cuando sus atributos cambien.</p> - -<p>El habilitador de claves de los elementos personalizados v1 es el método {{domxref("CustomElementRegistry.define()")}}, el cual se puede utilizar para definir un nuevo elemento personalizado. El nuevo elemento utilizará la clase suministrada para cualquier instancia, en lugar del valor predeterminado {{domxref("HTMLUnknownElement")}}. Los elementos personalizados pueden basarse en un elemento nativo como <code><button></code>, utilizando la sintaxis <code><button is="my-button"></code>; estos se llaman <em>elementos integrados personalizados.</em></p> - -<h2 id="Métodos_de_custom_element">Métodos de <em>custom element</em></h2> - -<p>Los <em>Custom elements</em> tienen los siguientes métodos que dictan su comportamiento:</p> - -<dl> - <dt>constructor()</dt> - <dd>Llamado cuando el elemento es creado o actualizado</dd> - <dt>connectedCallback()</dt> - <dd>Llamado cuando el elemento se es insertado en el documento, incluyéndose en un árbol shadow</dd> - <dt>disconnectedCallback()</dt> - <dd>Llamado cuando el elemento es eliminado de un documento</dd> - <dt>attributeChangedCallback(nombreDelAtributo, antiguoValor, nuevoValor, dominio)</dt> - <dd>Llamado cuando un atributo es cambiado, concatenado, eliminado o reemplazado en el elemento. Sólo llamado sobre <a href="#Atributos_Observados">atributos observados</a>.</dd> - <dt>adoptedCallback(antiguoDocumento, nuevoDocumento)</dt> - <dd>Llamado cuando un elemento es adoptado en otro nuevo documento</dd> -</dl> - -<h2 id="Ejemplo">Ejemplo</h2> - -<p>Los <em>custom elements</em> necesitan usar la <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes">sintaxis de clase</a> introducida en las versiones modernas de JavaScript.</p> - -<p>Archivo HTML:</p> - -<pre class="brush: html">Si no aparece nada debajo, es que tu navegador no soporta aún los Custom Elements. -<x-product data-name="Ruby" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/ruby.png" data-url="http://example.com/1"></x-product> -<x-product data-name="JavaScript" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" data-url="http://example.com/2"></x-product> -<x-product data-name="Python" data-img="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/python.png" data-url="http://example.com/3"></x-product></pre> - -<p>Archivo JS:</p> - -<pre class="brush: js">// Declaración de un <em>custom element</em> que hereda de HTMLElement -class XProduct extends HTMLElement { - constructor() { - // Siempre debe llamarse primero al constructor padre - super(); - - // Se crea el <em>shadow root</em> - var shadow = this.attachShadow({mode: 'open'}); - - // Se crea un elemnto img y se asignan sus atributos. - var img = document.createElement('img'); - img.alt = this.getAttribute('data-name'); - img.src = this.getAttribute('data-img'); - img.width = '150'; - img.height = '150'; - img.className = 'product-img'; - - // Añadir la imagen al shadow root. - shadow.appendChild(img); - - // Añadir un elemento de escucha a la imagen. - img.addEventListener('click', () => { - window.location = this.getAttribute('data-url'); - }); - - // Crear un enlace al producto. - var link = document.createElement('a'); - link.innerText = this.getAttribute('data-name'); - link.href = this.getAttribute('data-url'); - link.className = 'product-name'; - - // Añadir el enlace al shadow root. - shadow.appendChild(link); - } -} - -// Definir el nuevo elemento. -customElements.define('x-product', XProduct); -</pre> - -<p>Archivo CSS:</p> - -<pre class="brush: css">body { - background: #F7F7F7; -} - -x-product { - display: inline-block; - float: left; - margin: 0.5em; - border-radius: 3px; - background: #FFF; - box-shadow: 0 1px 3px rgba(0,0,0,0.25); - font-family: Helvetica, arial, sans-serif; - -webkit-font-smoothing: antialiased; -} - -x-product::slotted(.product-img) { - cursor: pointer; - background: #FFF; - margin: 0.5em; -} - -x-product::slotted(.product-name) { - display: block; - text-align: center; - text-decoration: none; - color: #08C; - border-top: 1px solid #EEE; - font-weight: bold; - padding: 0.75em 0; -} -</pre> - -<p>A continuación se muestra el ejemplo en vivo de lo anterior:</p> - -<p>{{ EmbedLiveSample('Example', '1500', '250', '', 'Web/Web_Components/Custom_Elements') }}</p> - -<h2 id="Atributos_Observados">Atributos Observados</h2> - -<p>Para ser notificado cuando un atributo cambia, se debe definir una lista de atributos observados al inicializar el elemento, poniendo un getter estático <code>observedAttributes</code> en la clase del elemento que devuelve un array de nombre de atributos.</p> - -<p>Archivo JS:</p> - -<pre class="brush: js">class HelloElement extends HTMLElement { - // Observar los cambios en el atributo 'name'. - static get observedAttributes() {return ['name']; } - - // Responder a los cambios en el atributo. - attributeChangedCallback(attr, oldValue, newValue) { - if (attr == 'name') { - this.textContent = `Hello, ${newValue}`; - } - } -} - -// Definir el nuevo elemento -customElements.define('hello-element', HelloElement); -</pre> - -<p>Archivo HTML:</p> - -<pre class="brush: html"><hello-element name="Anita"></hello-element></pre> - -<p>A continuación está el ejemplo en vivo de lo anterior:</p> - -<p>{{ EmbedLiveSample('Observed_attributes', '750', '100', '', 'Web/Web_Components/Custom_Elements') }}</p> - -<h2 id="Especificaciones">Especificaciones</h2> - -<p>Los <em>Custom Elements </em>están definido en la siguiente especificación:</p> - -<table class="spec-table standard-table"> - <tbody> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - <tr> - <td><a href="https://html.spec.whatwg.org/multipage/scripting.html#custom-elements">The HTML Standard: Custom elements</a></td> - <td>LS</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Recursos">Recursos</h2> - -<ul> - <li><a href="https://developers.google.com/web/fundamentals/primers/customelements/">Custom elements v1: reusable web components - Google Developers tutorial</a></li> -</ul> diff --git a/files/es/web/xml/introducción_a_xml/index.html b/files/es/web/xml/xml_introduction/index.html index c2193e80fb..c2193e80fb 100644 --- a/files/es/web/xml/introducción_a_xml/index.html +++ b/files/es/web/xml/xml_introduction/index.html diff --git a/files/es/web/xpath/ejes/ancestor-or-self/index.html b/files/es/web/xpath/axes/ancestor-or-self/index.html index 902aa3f6b9..902aa3f6b9 100644 --- a/files/es/web/xpath/ejes/ancestor-or-self/index.html +++ b/files/es/web/xpath/axes/ancestor-or-self/index.html diff --git a/files/es/web/xpath/ejes/ancestor/index.html b/files/es/web/xpath/axes/ancestor/index.html index 5d7148e0bc..5d7148e0bc 100644 --- a/files/es/web/xpath/ejes/ancestor/index.html +++ b/files/es/web/xpath/axes/ancestor/index.html diff --git a/files/es/web/xpath/ejes/attribute/index.html b/files/es/web/xpath/axes/attribute/index.html index 211ad7bc06..211ad7bc06 100644 --- a/files/es/web/xpath/ejes/attribute/index.html +++ b/files/es/web/xpath/axes/attribute/index.html diff --git a/files/es/web/xpath/ejes/child/index.html b/files/es/web/xpath/axes/child/index.html index 97ded1fcb4..97ded1fcb4 100644 --- a/files/es/web/xpath/ejes/child/index.html +++ b/files/es/web/xpath/axes/child/index.html diff --git a/files/es/web/xpath/ejes/descendant-or-self/index.html b/files/es/web/xpath/axes/descendant-or-self/index.html index 42061ddf67..42061ddf67 100644 --- a/files/es/web/xpath/ejes/descendant-or-self/index.html +++ b/files/es/web/xpath/axes/descendant-or-self/index.html diff --git a/files/es/web/xpath/ejes/descendant/index.html b/files/es/web/xpath/axes/descendant/index.html index c6fcc26970..c6fcc26970 100644 --- a/files/es/web/xpath/ejes/descendant/index.html +++ b/files/es/web/xpath/axes/descendant/index.html diff --git a/files/es/web/xpath/ejes/following-sibling/index.html b/files/es/web/xpath/axes/following-sibling/index.html index 73e42a2e7d..73e42a2e7d 100644 --- a/files/es/web/xpath/ejes/following-sibling/index.html +++ b/files/es/web/xpath/axes/following-sibling/index.html diff --git a/files/es/web/xpath/ejes/following/index.html b/files/es/web/xpath/axes/following/index.html index 190491a345..190491a345 100644 --- a/files/es/web/xpath/ejes/following/index.html +++ b/files/es/web/xpath/axes/following/index.html diff --git a/files/es/web/xpath/ejes/index.html b/files/es/web/xpath/axes/index.html index ebaed0b7be..ebaed0b7be 100644 --- a/files/es/web/xpath/ejes/index.html +++ b/files/es/web/xpath/axes/index.html diff --git a/files/es/web/xpath/ejes/namespace/index.html b/files/es/web/xpath/axes/namespace/index.html index aa24e4ac1f..aa24e4ac1f 100644 --- a/files/es/web/xpath/ejes/namespace/index.html +++ b/files/es/web/xpath/axes/namespace/index.html diff --git a/files/es/web/xpath/ejes/parent/index.html b/files/es/web/xpath/axes/parent/index.html index ad56a7ec63..ad56a7ec63 100644 --- a/files/es/web/xpath/ejes/parent/index.html +++ b/files/es/web/xpath/axes/parent/index.html diff --git a/files/es/web/xpath/ejes/preceding-sibling/index.html b/files/es/web/xpath/axes/preceding-sibling/index.html index d713cfcdf5..d713cfcdf5 100644 --- a/files/es/web/xpath/ejes/preceding-sibling/index.html +++ b/files/es/web/xpath/axes/preceding-sibling/index.html diff --git a/files/es/web/xpath/ejes/preceding/index.html b/files/es/web/xpath/axes/preceding/index.html index cd4b702ca2..cd4b702ca2 100644 --- a/files/es/web/xpath/ejes/preceding/index.html +++ b/files/es/web/xpath/axes/preceding/index.html diff --git a/files/es/web/xpath/funciones/contains/index.html b/files/es/web/xpath/functions/contains/index.html index 59af049973..59af049973 100644 --- a/files/es/web/xpath/funciones/contains/index.html +++ b/files/es/web/xpath/functions/contains/index.html diff --git a/files/es/web/xpath/funciones/index.html b/files/es/web/xpath/functions/index.html index 9c0fdd8af4..9c0fdd8af4 100644 --- a/files/es/web/xpath/funciones/index.html +++ b/files/es/web/xpath/functions/index.html diff --git a/files/es/web/xpath/funciones/substring/index.html b/files/es/web/xpath/functions/substring/index.html index 96c5ec585b..96c5ec585b 100644 --- a/files/es/web/xpath/funciones/substring/index.html +++ b/files/es/web/xpath/functions/substring/index.html diff --git a/files/es/web/xpath/funciones/true/index.html b/files/es/web/xpath/functions/true/index.html index 41ace4f289..41ace4f289 100644 --- a/files/es/web/xpath/funciones/true/index.html +++ b/files/es/web/xpath/functions/true/index.html diff --git a/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html b/files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html index 9b480576af..9b480576af 100644 --- a/files/es/web/javascript/introduction_to_using_xpath_in_javascript/index.html +++ b/files/es/web/xpath/introduction_to_using_xpath_in_javascript/index.html diff --git a/files/es/web/xslt/apply-imports/index.html b/files/es/web/xslt/element/apply-imports/index.html index 05d3429202..05d3429202 100644 --- a/files/es/web/xslt/apply-imports/index.html +++ b/files/es/web/xslt/element/apply-imports/index.html diff --git a/files/es/web/xslt/apply-templates/index.html b/files/es/web/xslt/element/apply-templates/index.html index cb4063eada..cb4063eada 100644 --- a/files/es/web/xslt/apply-templates/index.html +++ b/files/es/web/xslt/element/apply-templates/index.html diff --git a/files/es/web/xslt/attribute-set/index.html b/files/es/web/xslt/element/attribute-set/index.html index c202895db0..c202895db0 100644 --- a/files/es/web/xslt/attribute-set/index.html +++ b/files/es/web/xslt/element/attribute-set/index.html diff --git a/files/es/web/xslt/attribute/index.html b/files/es/web/xslt/element/attribute/index.html index 91d7985678..91d7985678 100644 --- a/files/es/web/xslt/attribute/index.html +++ b/files/es/web/xslt/element/attribute/index.html diff --git a/files/es/web/xslt/call-template/index.html b/files/es/web/xslt/element/call-template/index.html index deba6a8adb..deba6a8adb 100644 --- a/files/es/web/xslt/call-template/index.html +++ b/files/es/web/xslt/element/call-template/index.html diff --git a/files/es/web/xslt/choose/index.html b/files/es/web/xslt/element/choose/index.html index 10dd0a2f5f..10dd0a2f5f 100644 --- a/files/es/web/xslt/choose/index.html +++ b/files/es/web/xslt/element/choose/index.html diff --git a/files/es/web/xslt/comment/index.html b/files/es/web/xslt/element/comment/index.html index a55f777703..a55f777703 100644 --- a/files/es/web/xslt/comment/index.html +++ b/files/es/web/xslt/element/comment/index.html diff --git a/files/es/web/xslt/copy-of/index.html b/files/es/web/xslt/element/copy-of/index.html index e4f2fbca2d..e4f2fbca2d 100644 --- a/files/es/web/xslt/copy-of/index.html +++ b/files/es/web/xslt/element/copy-of/index.html diff --git a/files/es/web/xslt/copy/index.html b/files/es/web/xslt/element/copy/index.html index 32ddbff1ae..32ddbff1ae 100644 --- a/files/es/web/xslt/copy/index.html +++ b/files/es/web/xslt/element/copy/index.html diff --git a/files/es/web/xslt/decimal-format/index.html b/files/es/web/xslt/element/decimal-format/index.html index e42e9ab149..e42e9ab149 100644 --- a/files/es/web/xslt/decimal-format/index.html +++ b/files/es/web/xslt/element/decimal-format/index.html diff --git a/files/es/web/xslt/fallback/index.html b/files/es/web/xslt/element/fallback/index.html index 472ae59de8..472ae59de8 100644 --- a/files/es/web/xslt/fallback/index.html +++ b/files/es/web/xslt/element/fallback/index.html diff --git a/files/es/web/xslt/for-each/index.html b/files/es/web/xslt/element/for-each/index.html index 8cc96419b5..8cc96419b5 100644 --- a/files/es/web/xslt/for-each/index.html +++ b/files/es/web/xslt/element/for-each/index.html diff --git a/files/es/web/xslt/if/index.html b/files/es/web/xslt/element/if/index.html index 4cfaad7f59..4cfaad7f59 100644 --- a/files/es/web/xslt/if/index.html +++ b/files/es/web/xslt/element/if/index.html diff --git a/files/es/web/xslt/import/index.html b/files/es/web/xslt/element/import/index.html index 73c341349f..73c341349f 100644 --- a/files/es/web/xslt/import/index.html +++ b/files/es/web/xslt/element/import/index.html diff --git a/files/es/web/xslt/include/index.html b/files/es/web/xslt/element/include/index.html index 31dbc990eb..31dbc990eb 100644 --- a/files/es/web/xslt/include/index.html +++ b/files/es/web/xslt/element/include/index.html diff --git a/files/es/web/xslt/key/index.html b/files/es/web/xslt/element/key/index.html index 536f373039..536f373039 100644 --- a/files/es/web/xslt/key/index.html +++ b/files/es/web/xslt/element/key/index.html diff --git a/files/es/web/xslt/message/index.html b/files/es/web/xslt/element/message/index.html index e30f33ebaf..e30f33ebaf 100644 --- a/files/es/web/xslt/message/index.html +++ b/files/es/web/xslt/element/message/index.html diff --git a/files/es/web/xslt/namespace-alias/index.html b/files/es/web/xslt/element/namespace-alias/index.html index 24f35bef50..24f35bef50 100644 --- a/files/es/web/xslt/namespace-alias/index.html +++ b/files/es/web/xslt/element/namespace-alias/index.html diff --git a/files/es/web/xslt/number/index.html b/files/es/web/xslt/element/number/index.html index da7238cd4f..da7238cd4f 100644 --- a/files/es/web/xslt/number/index.html +++ b/files/es/web/xslt/element/number/index.html diff --git a/files/es/web/xslt/otherwise/index.html b/files/es/web/xslt/element/otherwise/index.html index 2150e21ad3..2150e21ad3 100644 --- a/files/es/web/xslt/otherwise/index.html +++ b/files/es/web/xslt/element/otherwise/index.html diff --git a/files/es/web/xslt/when/index.html b/files/es/web/xslt/element/when/index.html index cda01b9e6c..cda01b9e6c 100644 --- a/files/es/web/xslt/when/index.html +++ b/files/es/web/xslt/element/when/index.html diff --git a/files/es/web/xslt/with-param/index.html b/files/es/web/xslt/element/with-param/index.html index 270684f4d7..270684f4d7 100644 --- a/files/es/web/xslt/with-param/index.html +++ b/files/es/web/xslt/element/with-param/index.html diff --git a/files/es/web/xslt/transformando_xml_con_xslt/index.html b/files/es/web/xslt/transforming_xml_with_xslt/index.html index 9ccd6d0a36..9ccd6d0a36 100644 --- a/files/es/web/xslt/transformando_xml_con_xslt/index.html +++ b/files/es/web/xslt/transforming_xml_with_xslt/index.html |